React FullCalendar点击日期跳转后如何返回timeGridWeek初始视图

navLinks 配置仅实现点击日期跳转对应日视图的默认逻辑，FullCalendar不会自动生成返回初始周视图的切换入口，手动添加视图切换能力即可解决，两种常用实现方式如下：

• 内置工具栏配置（实现成本最低）
  直接给组件新增headerToolbar属性，开启组件自带的视图切换按钮，用户点击对应按钮就能自由切换视图，代码参考：

<FullCalendar
   initialView="timeGridWeek"
   allDaySlot={false}
   navLinks={true}
   weekends={false}
   // 新增头部工具栏配置
   headerToolbar={{
     left: 'prev,next today',
     center: 'title',
     right: 'timeGridWeek,timeGridDay'
   }}
/>

配置完成后日历头部会出现周、日视图的切换按钮，从日期点进日视图后，点「周」按钮就能直接切回初始的timeGridWeek周视图。

• 自定义返回逻辑
  如果不想用组件默认的工具栏，要自己控制返回按钮的样式、位置，可以通过组件实例API手动触发视图切换：

1. 用ref绑定FullCalendar组件拿到实例
2. 在自定义按钮的点击事件里，调用实例的changeView方法切回周视图
   代码参考：

import { useRef } from 'react'
import FullCalendar from '@fullcalendar/react'
// 记得引入项目实际用到的对应插件

function CalendarPage() {
  const calendarRef = useRef(null)

  const handleBackToWeek = () => {
    const calendarApi = calendarRef.current.getApi()
    // 调用切换视图方法，第二个参数可传指定日期，不传默认保持当前选中日期
    calendarApi.changeView('timeGridWeek')
  }

  return (
    <div>
      <button onClick={handleBackToWeek}>返回周视图</button>
      <FullCalendar
        ref={calendarRef}
        initialView="timeGridWeek"
        allDaySlot={false}
        navLinks={true}
        weekends={false}
        headerToolbar={false} // 不需要默认工具栏时可关闭
      />
    </div>
  )
}

注意：使用前请确认所有依赖插件都已正确注册，避免功能异常。

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