How to Listen for Date Navigation in React Full Calendar

Question

I have the following setup of FullCalendar for react

 import FullCalendar from '@fullcalendar/react';

     .......

         <FullCalendar
            ref={calendarRef}
            headerToolbar={false}
            plugins={[
              dayGridPlugin,
              timeGridPlugin,
              interactionPlugin,
              listPlugin
            ]}
            initialView="dayGridMonth"
            themeSystem="bootstrap"
            dayMaxEvents={2}
            direction={isRTL ? 'rtl' : 'ltr'}
            height={800}
            stickyHeaderDates={true}
            editable
            selectable
            selectMirror
            expandRows
            slotEventOverlap={false}
            eventDrop={handleEventDrop}
            dateClick={handleDateSlotClickEvent}
            eventTimeFormat={eventTimeFormat}
            events={events}
            eventContent={renderEventContent}
            weekNumbers={displayWeekNumbers}
          />

When the Next or Previous button is clicked, how can I listen for that event.

What I want to achieve is that once the Next or Previous button is clicked I want to perform some calculations using the currently navigated month and date.

Thanks

Answer 1

you can use this api to handle date range changing https://fullcalendar.io/docs/datesSet in my case i use it to get information about actual start and end dates, that i get from dateInfo (argument in datesSet callback) after navigation

<FullCalendar
      ref={calendarRef}
      events={timeEntries}
      datesSet={(dateInfo: DatesSetArg) => {
console.log(dateInfo)
}}
    />