Complete sticky header on FullCalendar scheduler

Question

There is a similar question here 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) but does not seem to be implemented in near future.

I tried experimenting doing it by CSS like

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

but this just makes the calendar's tool buttons sticky and puts them out of graphical context. Could someone get me on the right track? I have a codepen for testing: https://codepen.io/craftydlx/pen/RwaqbvL

score 2 · Accepted Answer · answered Feb 04 '21 at 19:16

if you add this, it should work.

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

Complete sticky header on FullCalendar scheduler

1 Answers1