如何在 React Full Calendar 中监听日期导航答案

【问题标题】：How to Listen for Date Navigation in React Full Calendar如何在 React Full Calendar 中监听日期导航
【发布时间】：2023-01-21 18:30:41
【问题描述】：

我有以下 FullCalendar 设置以进行反应

 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}
          />

单击“下一个”或“上一个”按钮时，我该如何收听该事件。

我想要实现的是，一旦单击 Next 或 Previous 按钮，我想使用当前导航的月份和日期执行一些计算。

谢谢

【问题讨论】：

fullcalendar.io/docs/datesSet 可能是你想要的

标签： reactjs fullcalendar

【解决方案1】：

您可以使用此 api 来处理日期范围更改https://fullcalendar.io/docs/datesSet 在我的例子中，我用它来获取有关实际开始和结束日期的信息，这些信息是我在导航后从 dateInfo（dateSet 回调中的参数）获得的

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

【讨论】：