在 FullCalendar 调度程序上完成粘性 header

Question

这里也有类似的问题Sticky Header on Fullcalendar scheduler but the suggested answer does not work. FullCalendar provides stickyHeaderDates (https://fullcalendar.io/docs/stickyHeaderDates) what fixes the date-headers at the top of the calendar to the viewport while scrolling. I need the same for the calendar's tool bar. This feature was already proposed (https://github.com/fullcalendar/fullcalendar/issues/5357)但是好像近期没有实现。

我试过 CSS 喜欢

.fc-toolbar.fc-header-toolbar {
    position: sticky;
    top: 200px;
    z-index: 10;
}

.fc-head-container.fc-widget-header {
    position: sticky;
    top: 308px;
    z-index: 10;
    background: red;
}
.fc-timeline .fc-body .fc-scroller {
    height: 400px  !important;
}

但这只会使日历的工具按钮变粘，并使它们脱离图形上下文。有人能让我走上正轨吗？我有一个用于测试的代码笔：https://codepen.io/craftydlx/pen/RwaqbvL

Answer 1

如果你添加这个，它应该可以工作。

.fc .fc-toolbar.fc-header-toolbar {
  margin-bottom: 1.5em;
  position: sticky;
  top: 0;
  background: #ffffff;
  z-index: 100;
}

.fc .fc-scrollgrid-section-header.fc-scrollgrid-section-sticky>* {
  top: 34px;
}

在 FullCalendar 调度程序上完成粘性 header

Complete sticky header on FullCalendar scheduler

css

fullcalendar

fullcalendar-scheduler