React FullCalendar日期导航（上/下页按钮）监听实现方法

FullCalendar 提供了 datesSet 回调事件，每当视图的日期范围发生变化（包括点击Next/Previous按钮、切换视图、手动跳转日期等操作）时都会触发，完全满足你获取当前导航日期并执行计算的需求。

修改后的组件配置 #

直接在你的 FullCalendar 组件中添加 datesSet 回调，并定义对应的处理函数：

import FullCalendar from '@fullcalendar/react';
// 导入你已有的插件...

const YourComponent = () => {
  // 你的现有状态、函数（如handleEventDrop等）...

  // 处理日期范围变化的回调
  const handleDatesSet = (info) => {
    // 从info对象中提取当前视图的关键日期信息
    const currentStart = info.start; // 当前视图的起始日期（如月份视图的当月第一天）
    const currentEnd = info.end; // 当前视图的结束日期（月份视图的下一月第一天，为排他日期）
    const currentViewType = info.view.type; // 当前视图类型，比如'dayGridMonth'

    // 在这里执行你的计算逻辑
    console.log('当前导航到的起始日期:', currentStart);
    console.log('当前视图类型:', currentViewType);

    // 示例：获取当前月份的年份和月份（注意月份是0-11，需+1转换为常用格式）
    const currentYear = currentStart.getFullYear();
    const currentMonth = currentStart.getMonth() + 1;
    console.log(`当前年份：${currentYear}，当前月份：${currentMonth}`);
  };

  return (
    <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}
      // 添加datesSet回调
      datesSet={handleDatesSet}
    />
  );
};

export default YourComponent;

关键参数说明 #

datesSet 回调接收的 info 对象包含以下核心属性：

• start: 当前视图显示的起始日期（原生Date对象）
• end: 当前视图显示的结束日期（原生Date对象，注意是排他的，比如月份视图的end是下一月的第一天）
• view: 当前视图的详细信息，包括type（视图类型）、title（视图标题，如"2024年5月"）等

不管是点击Next/Previous按钮，还是通过其他方式切换视图日期，这个回调都会触发，能准确获取到导航后的日期信息供你使用。

内容的提问来源于stack exchange，提问作者ololo