如何将@fullcalendar/react头部视图选项自定义为下拉导航菜单

核心实现思路 #

• 隐藏FullCalendar自带的headerToolbar视图切换按钮，完全自定义下拉控件
• 通过useRef拿到FullCalendar组件实例，调用官方内置的changeView方法完成视图跳转
• 下拉选项可自由组合内置视图、自定义时间段视图、非视图类功能选项

具体实现步骤 #

1. 引入必要依赖并声明FullCalendar实例ref

import FullCalendar from '@fullcalendar/react'
import dayGridPlugin from '@fullcalendar/daygrid' // 提供月视图等基础日历视图
import timeGridPlugin from '@fullcalendar/timegrid' // 提供日视图、周视图等时间网格视图
import { useRef } from 'react'

function CalendarPage() {
  const calendarRef = useRef(null)
  // 后续业务逻辑
}

2. 配置FullCalendar隐藏默认视图切换

<FullCalendar
  ref={calendarRef}
  plugins={[dayGridPlugin, timeGridPlugin]}
  //  headerToolbar删除默认视图切换配置，仅保留需要的功能按钮
  headerToolbar={{
    left: 'prev,next today',
    center: 'title',
    right: '' // 清空右侧默认的视图切换按钮组
  }}
  // 其他日历基础配置，比如初始视图、事件列表、时区等
/>

3. 实现下拉菜单及切换逻辑
   可使用原生select或者任意UI组件库的下拉组件，原生select示例如下：

// 下拉选项配置，可自由扩展自定义项
const viewOptions = [
  { label: '月视图', value: 'dayGridMonth', type: 'built-in' },
  { label: '周视图', value: 'timeGridWeek', type: 'built-in' },
  { label: '日视图', value: 'timeGridDay', type: 'built-in' },
  { label: '工作周视图(仅周一到周五)', value: 'workWeek', type: 'custom' },
  { label: '三日视图', value: 'threeDay', type: 'custom' },
  { label: '本月数据统计', value: 'monthStats', type: 'action' }
]

// 下拉选中事件处理函数
const handleViewChange = (e) => {
  const selectVal = e.target.value
  const selectedOption = viewOptions.find(item => item.value === selectVal)
  const calendarApi = calendarRef.current?.getApi()
  if (!calendarApi) return

  switch (selectedOption.type) {
    // 内置视图直接调用changeView方法切换
    case 'built-in':
      calendarApi.changeView(selectedOption.value)
      break
    // 自定义时间段视图，传入visibleRange或duration参数
    case 'custom':
      if (selectedOption.value === 'workWeek') {
        calendarApi.changeView('timeGridWeek', {
          visibleRange: (currentDate) => {
            const start = new Date(currentDate)
            start.setDate(start.getDate() - start.getDay() + 1) // 定位到本周一
            const end = new Date(start)
            end.setDate(end.getDate() + 5) // 截止到下周一0点，仅展示周一到周五
            return { start, end }
          }
        })
      } else if (selectedOption.value === 'threeDay') {
        calendarApi.changeView('timeGrid', {
          duration: { days: 3 }
        })
      }
      break
    // 非视图类自定义选项，处理自有业务逻辑
    case 'action':
      // 示例：调用统计接口、打开数据弹窗等
      alert('触发本月统计逻辑')
      break
  }
}

// 页面渲染结构，下拉组件可放在任意你需要的位置
return (
  <div>
    <select onChange={handleViewChange} style={{ marginBottom: 16 }}>
      {viewOptions.map(option => (
        <option key={option.value} value={option.value}>{option.label}</option>
      ))}
    </select>
    <FullCalendar {/* 上述的日历配置 */} />
  </div>
)

优化提示 #

如果自定义视图需要全局复用，可以提前在FullCalendar的customViews配置项中注册，后续直接调用视图名即可，无需每次传入时间段参数：

// FullCalendar配置中添加
customViews: {
  workWeek: {
    type: 'timeGridWeek',
    duration: { days: 5 },
    start: { dow: 1 } // 固定从周一开始展示
  }
}
// 切换时直接调用
calendarApi.changeView('workWeek')

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