Fullcalendar Making Headers Fixed - fullcalendar

Question

I'm trying to make the Fullcalendar headers fixed. I found this post:
in Fullcalendar is there a way to fix the header to not be scrollable
but there wasn't a resolution published.
I've looked in the documentation but can't find any reference to it.
Is there a way to do this?
Thanks, Rob

Answer 1

Although only talking about FullCalendar's scheduler component, I spent days hooking into scroll events of the intricacies of html with buggy results, especially as more views were needed. Then I stumbled across position:sticky & the below works like a dream (tested on chrome & safari)
.fc-head{
position: -webkit-sticky !important;
position: sticky !important;
top:0;
background-color: white;
z-index:9999 !important;
}
on top of this you need to handle the horizontal scroll to move the head horizontally when scrolling by adding an eventAfterAllRender handler:
eventAfterAllRender: function (view) {
var divider = $('.fc-divider').first();
var dividerOffset = divider.offset().left;
$('.fc-scroller').eq(3).scroll(function () {
var scrollLeft = $('.fc-scroller').eq(3).scrollLeft();
if (scrollLeft >= 0) {
var total = dividerOffset - scrollLeft;
$('.fc-head').css('left', total + 'px');
}
else {
$('.fc-head').css('position', 'relative');
$('.fc-head').css('left', dividerOffset + 'px');
}
});
}

Answer 2

Try add to your css something like there:
.fc-header{
position: fixed;
}
.fc-first .fc-last{
position: fixed;
}

Answer 3

Go to this site: http://tympanus.net/codrops/2014/01/09/sticky-table-headers-columns/
Download the JS
Then modify the source JS file like this:
Add all the main JS logic into a "constructor":
$.fn.stickyheader = function (method, options) {
So your first few lines in the JS file should look like this:
$(function () {
$.fn.stickyheader = function (method, options) {
if ($(this).find('thead').length > 0 && $(this).find('th').length > 0) {
Now you can "select" a specific DOM object like so:
$('.fc-grid').each(function () {
var seeThis = $(this);
if (seeThis.is(":visible")) {
//.fc-border-separate is the table
$(seeThis.find('.fc-border-separate')).stickyheader();
return false;
}
});
Then add this necessary CSS like this:
/For the sticky headers and columns/
.sticky-wrap .sticky-thead,
.sticky-wrap .sticky-col,
.sticky-wrap .sticky-intersect {
opacity: 0;
position: absolute;
top: 0;
left: 0;
transition: all .125s ease-in-out;
z-index: 50;
}
.sticky-wrap .sticky-thead {
box-shadow: 0 0.25em 0.1em -0.1em rgba(0,0,0,.125);
}
There you go. Super cool sticker header and column for your fullcalendar control :)