尽管更改了初始视图状态，FullCalendar 仍不更新视图

Question

我在 React 应用程序中使用 FullCalendar，并尝试根据状态变量（isCheckoutVisible）更改初始视图。我注意到，即使我更新了初始视图状态，FullCalendar 也不会按预期更新视图。看起来 FullCalendar 正在记住初始值并且不允许它被覆盖。

这是我的代码的简化版本

// Inside my functional component
const [initialView, setInitialView] = useState('timeGridWeek');

useEffect(() => {
  setInitialView(isCheckoutVisible ? 'listMonth' : window.innerWidth > 768 ? 'timeGridWeek' : 'timeGridDay');
}, [isCheckoutVisible]);

return (
  <FullCalendar
    plugins={[dayGridPlugin, timeGridPlugin, listPlugin, interactionPlugin]}
    initialView={initialView}
    // other props...
  />
);

我尝试更新initialView状态并将其传递给FullCalendar，但它没有反映日历视图中的更改。有没有办法在初始视图状态发生变化时强制 FullCalendar 更新其视图？

Answer 1

看起来 FullCalendar 正在记住初始值而不是 允许它被覆盖

...正确。这就是为什么它被称为“初始”视图 - 线索就在名称中:-)。它仅在日历首次加载时适用。

如果您想要“后续”视图 - 即您想在日历首次加载后更改为另一个视图 - 如文档所述 - 您可以使用 fullCalendar 的 changeView 方法。

示例：

calendar.changeView('timeGridDay');