如何在 FullCalendar React 中创建粘性标题工具栏？

Question

我正在使用 FullCalendar React 组件，并且想要实现一个粘性标题工具栏。我的目标是确保标题及其工具栏在日历顶部保持可见，即使用户向下滚动一长串事件也是如此。

我已经查看了文档并尝试了各种CSS方法，但我还没有达到headerToolbar所需的粘性效果。在我的例子中，stickyHeaderDates 选项似乎没有按预期工作。

有人可以提供指导或代码示例来使 headerToolbar 粘在 FullCalendar React 组件中吗？我在我的项目中使用 Next.js 和 TypeScript。

任何帮助或见解将不胜感激。谢谢！

Answer 1

您可以使用 CSS 来实现此效果，以下是实现它的方法。

<div className="calendar-container">
      <FullCalendar
        plugins={calendarOptions.plugins}
        headerToolbar={calendarOptions.headerToolbar}
// add more options based on your needs
      />
    </div> 

Apply css
.calendar-container {
  position: relative;
  z-index: 1;
}

.fc-toolbar.fc-header-toolbar {
  position: sticky;
  top: 0;
  background-color: white;
  z-index: 2;
}