Why is stickyHeaderDates not working in the FullCalendar Reactive component? This can be verified in the Demo application's BasicViews screen.
According to the FullCalendar javascript library documentation, Sticky Header Dates can be activated by setting the height setting to 'auto'.
https://fullcalendar.io/docs/stickyHeaderDates
Demo for sticky header can be seen by visiting the below link.
https://fullcalendar.io/docs/sticky-timegrid-demo
The AdvancedOptions property of the FullCalendar Reactive component used in the Demo application's BasicViews screen, already has a height setting of 'auto', but stickyHeaderDates is still not working.
Hi Ajith,
Based on my observation..
Cause: The LayoutTopMenu > Header is getting overlapped on top of the FullCalendar sticky header row.
Reason: The top property value is defined 0 for both Header & FullCalendar sticky header row style class definition.
CSS Snippet:
.fixed-header .header{ left:0; position:sticky; right:0; top:0; }
.fc .fc-scrollgrid-section-header.fc-scrollgrid-section-sticky>* { top: 0; }
Solution: Override the .fc .fc-scrollgrid-section-header.fc-scrollgrid-section-sticky>* style definition and set the top value accordingly as mentioned below.
.fc .fc-scrollgrid-section-header.fc-scrollgrid-section-sticky>* { top: 57px; }
Demo app: BasicViews_TimeGridWeek
I hope this helps you!
Kind regards,
Benjith Sam
Yes, overriding the style worked. Thanks Benjith
You're welcome, Ajith. Glad to help you :)
Please mark the answer as "solution" for future reference and to close the thread with solved status. Thank you.