如何在React项目中通过react-datepicker控制FullCalendar跳转到指定日期/月/年

适配依赖版本 #

• react: ^17.0.1
• @fullcalendar/core: ^5.9.0
• @fullcalendar/react: ^5.5.0
• 其他@fullcalendar/*系列插件 v5.x版本通用
• react-datepicker: ^4.2.1

问题根因 #

FullCalendar v5.x的React封装组件没有goToDate属性，该方法是日历实例的API，无法直接通过props传递触发。

实现步骤 #

• 步骤1：创建ref绑定FullCalendar组件，用于获取日历实例
• 步骤2：监听react-datepicker绑定的日期状态变化，触发日历实例的gotoDate方法

完整代码示例 #

import { useRef, useState, useEffect } from 'react'
import FullCalendar from '@fullcalendar/react'
import dayGridPlugin from '@fullcalendar/daygrid'
import timeGridPlugin from '@fullcalendar/timegrid'
import interactionPlugin from '@fullcalendar/interaction'
import DatePicker from 'react-datepicker'
import 'react-datepicker/dist/react-datepicker.css'

export default function CalendarPage() {
  // 声明FullCalendar实例存储ref
  const calendarRef = useRef(null)
  // 存储datepicker选中的日期
  const [selectedDate, setSelectedDate] = useState(new Date())

  // 监听选中日期变化，触发日历跳转
  useEffect(() => {
    if (calendarRef.current && selectedDate) {
      const calendarApi = calendarRef.current.getApi()
      calendarApi.gotoDate(selectedDate)
    }
  }, [selectedDate])

  return (
    <div>
      <DatePicker
        selected={selectedDate}
        onChange={(date) => setSelectedDate(date)}
        showMonthDropdown
        showYearDropdown
        dropdownMode="select"
      />
      <FullCalendar
        ref={calendarRef}
        plugins={[dayGridPlugin, timeGridPlugin, interactionPlugin]}
        initialView="dayGridMonth"
        {/* 其余你原本的FullCalendar配置项 */}
      />
    </div>
  )
}

注意事项 #

• gotoDate方法支持传入原生Date类型、ISO标准日期字符串，react-datepicker默认返回值为Date类型，可直接传入
• 若需跳转时同步切换日历视图（例如选月份自动切月视图、选年份自动切年视图），可在调用gotoDate后追加calendarApi.changeView('你的视图名')逻辑，常用视图名包括dayGridMonth(月视图)、timeGridWeek(周视图)、dayGridYear(年视图)等

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