css - 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

question from:https://stackoverflow.com/questions/66051799/complete-sticky-header-on-fullcalendar-scheduler

Answer 1

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