How to Create a Sticky headerToolbar in FullCalendar React?

I'm working with the FullCalendar React component and would like to implement a sticky headerToolbar. My goal is to ensure that the header with its toolbar remains visible at the top of the calendar, even when users scroll down through a long list of events.

I've reviewed the documentation and tried various CSS approaches, but I haven't achieved the desired sticky effect for the headerToolbar. It seems that the stickyHeaderDates option doesn't work as expected in my case.

Can someone please provide guidance or a code example for making the headerToolbar sticky in the FullCalendar React component? I'm using Next.js with TypeScript for my project.

Any assistance or insight would be greatly appreciated. Thank you!


  • You can use CSS to achieve this effect and here is how you can approach it.

    <div className="calendar-container">
    // add more options based on your needs
    Apply css
    .calendar-container {
      position: relative;
      z-index: 1;
    .fc-toolbar.fc-header-toolbar {
      position: sticky;
      top: 0;
      background-color: white;
      z-index: 2;