React useEffect页面加载时如何获取FullCalendar当前周/月日期

这个需求完全可以实现，不需要手动强制触发datesSet方法，FullCalendar 组件在初始化加载完成后会自动触发一次datesSet回调，刚好匹配页面首次加载的场景，只需要把回调拿到的日期数据和useEffect逻辑做状态关联即可。

方案1：通过状态同步datesSet返回的数据（推荐） #

这个方案逻辑最直观，不管是首次加载还是后续用户切换周/月、翻页触发的日期范围变化，都能统一在useEffect里处理：

1. 首先在组件内定义存储日期范围的状态和日历实例ref

import { useState, useEffect, useRef } from 'react'
import FullCalendar from '@fullcalendar/react'
import timeGridPlugin from '@fullcalendar/timegrid'
import dayGridPlugin from '@fullcalendar/daygrid' // 如果需要月视图要引入这个插件

function YourCalendarComponent() {
  // 存储当前日历视图的日期范围
  const [currentDateRange, setCurrentDateRange] = useState(null)
  const calendarRef = useRef(null)

2. 修改<FullCalendar>组件配置，在datesSet回调里把日期数据存入状态

return (
    <FullCalendar
      ref={calendarRef}
      plugins={[timeGridPlugin, dayGridPlugin]}
      initialView="timeGridWeek" // 初始周视图，换成dayGridMonth就是初始月视图
      datesSet={(dateInfo) => {
        // 把需要的日期字段存入状态，触发后续useEffect逻辑
        setCurrentDateRange({
          start: dateInfo.start, // 范围开始时间Date对象
          end: dateInfo.end, // 范围结束时间Date对象
          startStr: dateInfo.startStr, // ISO格式开始时间字符串
          endStr: dateInfo.endStr, // ISO格式结束时间字符串
          viewType: dateInfo.view.type // 当前视图类型，用来区分周/月
        })
      }}
    />
  )
}

3. 编写useEffect逻辑，监听日期范围状态变化，首次加载拿到数据后自动执行你的业务代码

useEffect(() => {
    // 初始状态为null时直接返回，等datesSet触发存值后再执行逻辑
    if (!currentDateRange) return

    // 这里写你的业务逻辑，比如根据起止日期拉取对应时段的日程数据
    console.log('当前视图日期范围', currentDateRange.start, currentDateRange.end)
    // 区分周/月视图逻辑
    if (currentDateRange.viewType === 'timeGridWeek') {
      // 周视图相关逻辑
    }
    if (currentDateRange.viewType === 'dayGridMonth') {
      // 月视图相关逻辑
    }
  }, [currentDateRange])

方案2：通过日历实例ref直接在useEffect里取数据 #

如果你不想依赖datesSet的触发时机，也可以在页面挂载完成后，直接通过日历实例的API拿到当前视图的日期范围：

useEffect(() => {
  if (!calendarRef.current) return
  // 获取日历API实例
  const calendarApi = calendarRef.current.getApi()
  const currentView = calendarApi.view
  // 直接拿到当前视图的起止日期
  const dateRange = {
    start: currentView.activeStart,
    end: currentView.activeEnd,
    viewType: currentView.type
  }
  // 直接执行业务逻辑
  console.log('首次加载拿到的日期范围', dateRange)
}, [])

• 不要尝试在useEffect里手动调用datesSet方法，这个方法是FullCalendar内部绑定的事件回调，手动调用无法拿到正确的日历上下文和日期数据
• 如果后续用户切换周/月、点击翻页按钮，datesSet会自动重新触发，同步更新状态后useEffect也会自动执行对应逻辑，不需要额外绑定事件

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