FullCalendar 5 Timeline自定义精准时间范围（5个月）实现求助

FullCalendar 5完全支持自定义精确时间范围，核心通过visibleRange配置项就能解决你的问题，以下是具体实现方式：

1. 基础自定义时间范围 #

直接在FullCalendar组件中配置visibleRange，传入包含start和end的对象即可指定精确起止时间。注意end是排他性的——比如要展示4月1日到8月31日，end需要设为9月1日：

import { useState } from 'react';
import FullCalendar from '@fullcalendar/react';
import timelinePlugin from '@fullcalendar/timeline';

export default function CustomTimeline() {
  // 初始时间范围：2024-04-01 至 2024-08-31
  const [visibleRange, setVisibleRange] = useState({
    start: '2024-04-01',
    end: '2024-09-01' // 排他规则，需设为结束日期的下一天
  });

  return (
    <FullCalendar
      plugins={[timelinePlugin]}
      initialView="timelineMonth"
      visibleRange={visibleRange}
      // 其他日历配置项...
    />
  );
}

2. 支持用户动态修改范围 #

结合React状态管理和日期选择组件，就能实现用户动态调整时间范围的需求：

// 以antd RangePicker为例
import { RangePicker } from 'antd';

// 在组件中添加日期选择器
<RangePicker
  onChange={(dates) => {
    if (dates?.length === 2) {
      // 适配FullCalendar的排他end规则，结束日期加1天
      const endDate = new Date(dates[1]);
      endDate.setDate(endDate.getDate() + 1);
      setVisibleRange({
        start: dates[0].format('YYYY-MM-DD'),
        end: endDate.toISOString().split('T')[0]
      });
    }
  }}
/>

用户选择新日期范围后，visibleRange状态更新，FullCalendar会自动重新渲染并展示新的时间范围。

3. 结合自定义视图类型 #

如果需要预设固定周期（比如默认6个月），可以先自定义视图类型，再通过visibleRange覆盖默认时长：

<FullCalendar
  plugins={[timelinePlugin]}
  views={{
    sixMonthTimeline: {
      type: 'timeline',
      duration: { months: 6 },
      buttonText: '6个月视图'
    }
  }}
  initialView="sixMonthTimeline"
  visibleRange={visibleRange} // 优先级高于duration，可动态修改
/>

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