FullCalendar 调度程序上的完整粘性标题

Question

Sticky Header on Fullcalendar scheduler 这里有一个类似的问题，但建议的答案不起作用。 FullCalendar 提供stickyHeaderDates (https://fullcalendar.io/docs/stickyHeaderDates) 在滚动时将日历顶部的日期标题固定到视口。我需要相同的日历工具栏。此功能已被提出 (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;
}