如何通过下拉筛选器更改React FullCalendar的显示日期？

要实现下拉选择器和FullCalendar的日期联动，核心是利用FullCalendar实例的gotoDate方法，结合React的状态管理完成跳转。以下是具体实现步骤：

1. 完善状态与实例引用管理 #

先在组件中通过useState管理年月状态，用useRef获取FullCalendar的实例引用：

import { useState, useRef } from 'react';
import FullCalendar from '@fullcalendar/react';
import dayGridPlugin from '@fullcalendar/daygrid';
import interactionPlugin from '@fullcalendar/interaction';

function CalendarComponent() {
  // 初始化默认年月为当前日期
  const now = new Date();
  const [year, setYear] = useState(now.getFullYear());
  const [month, setMonth] = useState(now.getMonth() + 1); // JS月份从0开始，需+1匹配下拉框的1-12
  const calendarRef = useRef(null);

  // 保留你已有的onChangeStartEnd、onEventClick、onDateClick等方法

2. 实现下拉框的日期跳转逻辑 #

修改年月选择事件，选中新值后调用gotoDate跳转：

const onYearChange = (e) => {
    const selectedYear = Number(e.target.value);
    setYear(selectedYear);
    jumpToTargetDate(selectedYear, month);
  };

  const onMonthChange = (e) => {
    const selectedMonth = Number(e.target.value);
    setMonth(selectedMonth);
    jumpToTargetDate(year, selectedMonth);
  };

  // 封装跳转方法
  const jumpToTargetDate = (targetYear, targetMonth) => {
    if (calendarRef.current) {
      // 构造目标日期：注意JS月份从0开始，所以要减1
      const targetDate = new Date(targetYear, targetMonth - 1, 1);
      calendarRef.current.getApi().gotoDate(targetDate);
    }
  };

3. 给FullCalendar绑定引用 #

在FullCalendar组件上添加ref属性，让我们能拿到实例并调用API：

return (
    <>
      <div>
        <select value={year} onChange={onYearChange}>
          <option value={2023}>2023</option>
          <option value={2024}>2024</option>
          <option value={2025}>2025</option>
          <option value={2026}>2026</option>
          <option value={2027}>2027</option>
          {/* 可按需添加更多年份 */}
        </select>
        <select value={month} onChange={onMonthChange}>
          <option value={1}>January</option>
          <option value={2}>February</option>
          <option value={3}>March</option>
          <option value={4}>April</option>
          <option value={5}>May</option>
          <option value={6}>June</option>
          <option value={7}>July</option>
          <option value={8}>August</option>
          <option value={9}>September</option>
          <option value={10}>October</option>
          <option value={11}>November</option>
          <option value={12}>December</option>
        </select>
      </div>

      <FullCalendar
        ref={calendarRef} {/* 绑定ref */}
        plugins={[dayGridPlugin, interactionPlugin]}
        height={'70vh'}
        events={events}
        datesSet={({ start, end }) => onChangeStartEnd(start, end)}
        eventClick={onEventClick}
        dateClick={onDateClick}
        selectable="true"
      />
    </>
  );
}

export default CalendarComponent;

关键说明 #

• gotoDate是FullCalendar的核心API，支持传入Date对象、ISO字符串等格式，能直接让日历定位到指定日期。
• 因为JavaScript的月份是0起始的，所以下拉框选择的1-12月需要减1后再传入Date构造函数。
• 如果你的日历默认是月视图，跳转后会自动展示选中的整月；其他视图也会自动适配对应日期范围。

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