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;
}

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

1 个答案: