CODEWITHSUNDEEP
fullcalendar
user2514691
user2514691

Reputation: 39

Fullcalendar Making Headers Fixed

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

Upvotes: 2

Views: 4539

Answers (3)

Gumzle
Gumzle

Reputation: 877

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

        }

Upvotes: 1

UberGeoff
UberGeoff

Reputation: 212


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 :)

Upvotes: 0

Makromat
Makromat

Reputation: 1572

Try add to your css something like there:

.fc-header{
   position: fixed;
  }

 .fc-first .fc-last{
    position: fixed;
 }

Upvotes: 0

Related Questions