提问人：Olivier Kango 提问时间：11/7/2023 更新时间：11/7/2023 访问量：29
如何在FullCalendar React中创建粘性headerToolbar？
How to Create a Sticky headerToolbar in FullCalendar React?
问：
我正在使用 FullCalendar React 组件，并想实现一个粘性 headerToolbar。我的目标是确保标题及其工具栏在日历顶部保持可见，即使用户向下滚动浏览一长串事件也是如此。
我已经查看了文档并尝试了各种 CSS 方法，但我没有达到 headerToolbar 所需的粘性效果。在我的情况下，stickyHeaderDates 选项似乎无法按预期工作。
有人可以提供指导或代码示例，使headerToolbar在FullCalendar React组件中具有粘性吗？我正在将Next.js与TypeScript一起使用。
任何帮助或见解将不胜感激。谢谢！
答：
1赞
BugHunter
11/7/2023
#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;
}
评论
0赞
Olivier Kango
11/7/2023
非常感谢您的时间和帮助。起初，我应用了您在 SCSS 文件中提供的样式，但它不起作用。但是，当我将它直接放在 fullCalendar 组件中时，它开始工作。
评论