FullCalendar自定义视图单屏展示历史数据的问题求助

我使用FullCalendar自定义了一个5周的dayGrid视图，希望单屏展示指定的历史数据范围（2023-01-15至2023-02-08）。但目前页面加载后无法直接显示该历史范围，必须点击prev按钮才能切换到目标视图；而且我不想保留头部工具栏的导航按钮。另外，这个搭配validRange的自定义视图在展示当前或未来日期范围时工作正常。

当前效果 #

预期效果 #

相关代码 #

<FullCalendar
  plugins={[dayGridPlugin]}
  firstDay={1}
  initialView="dayGridFiveWeek"
  views={{
    dayGridFiveWeek: {
      type: "dayGrid",
      duration: { weeks: 5 },
    },
  }}
  validRange={{
    start: "2023-01-15",
    end: "2023-02-08",
  }}
  headerToolbar={{
    left: "",
    center: "title",
    right: "prev,next",
  }}
  eventSources={eventsSource}
  datesSet={(dateInfo) => {
    formatDate(dateInfo.view.currentStart);
  }}
  eventDidMount={(info) => toolTipContent(info)}
/>

问题核心是FullCalendar默认会以当前日期为基准渲染初始视图，而你的目标范围是历史日期，因此需要手动指定初始渲染的日期，让视图直接定位到目标范围，同时移除导航按钮：

1. 添加initialDate属性，设置为你validRange的起始日期（或范围内任意日期），让视图加载时直接渲染该日期所在的5周范围；
2. 修改headerToolbar.right为空字符串，移除prev/next导航按钮。

修改后的代码如下：

<FullCalendar
  plugins={[dayGridPlugin]}
  firstDay={1}
  initialView="dayGridFiveWeek"
  initialDate="2023-01-15" // 新增：指定初始渲染的目标日期
  views={{
    dayGridFiveWeek: {
      type: "dayGrid",
      duration: { weeks: 5 },
    },
  }}
  validRange={{
    start: "2023-01-15",
    end: "2023-02-08",
  }}
  headerToolbar={{
    left: "",
    center: "title",
    right: "", // 修改：移除导航按钮
  }}
  eventSources={eventsSource}
  datesSet={(dateInfo) => {
    formatDate(dateInfo.view.currentStart);
  }}
  eventDidMount={(info) => toolTipContent(info)}
/>

这样页面加载后会直接显示指定的5周历史数据范围，同时无多余导航按钮。

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