jqueryfullcalendarfullcalendar-2

Get the first and last visible date of the fullcalendar without using datepicker


I use fullcalendar in my code and have implemented and added events into it, but my goal was to get the first visible and last visible date of the calendar.

What we wanted to do is get the visible first and last dates so that we'll be able to throw the extracted dates in the database and get all events within that range of dates.

I've tried this Get the start and end dates visible in a datepicker days view? but I want to use jQuery and fullCalendar only. Is there other way to extract the dates without using datepicker?

enter image description here


Solution

  • Using version 5.5.1, you can inspect the rendered HTML. The day cells have class fc-daygrid-day and data-date="{date}"

    Given the original div id is "calendar" you can use:

    var cells = $("#calendar td.fc-daygrid-day");
    console.log(cells.length, cells.first().data("date"), cells.last().data("date"))
    

    Example snippet:

    $(function() { 
      var calendarEl = document.getElementById('calendar');
      var calendar = new FullCalendar.Calendar(calendarEl, {
        initialView: 'dayGridMonth'
      });
      calendar.render();
      
      var cells = $("#calendar td.fc-daygrid-day");
      console.log(cells.length, cells.first().data("date"), cells.last().data("date"))
    });
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/fullcalendar@5.5.1/main.min.js"></script>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/fullcalendar@5.5.1/main.css">
    
    <div id='calendar'></div>