Sticky Header on Fullcalendar scheduler

Question

I am getting mad with trying to get sticky header with full calendar scheduler. I tried

height: "parent"

I saw a lot of posts but none of them worked.

but then there are 2 scrollbars (one for the main window and one for the calendar).

Is there a solution for having sticky header?

Thanks

score 3 · Answer 1 · answered Sep 05 '18 at 13:57

3

Finally it worked with something like

.fc-toolbar.fc-header-toolbar {
    position: sticky;
    top: 70px;
    z-index: 10;
    background: white
}

.fc-head-container.fc-widget-header {
    position: sticky;
    top: 108px;
    z-index: 10;
    background: white;
}

Thanks for your help

answered Sep 05 '18 at 13:57

Chessman

87
1
8

hi, is it possible to sticky also the timeline? – Giuseppe Lodi Rizzini Dec 18 '19 at 11:42

score 0 · Answer 2 · answered Sep 05 '18 at 12:35

0

I did't get the point about the full calender scheduler, If you want header element should be stickyed one, apply the below css for your header.

 position: fixed; top: 0; left:0; width: 100%;

try and let me know.

answered Sep 05 '18 at 12:35

Praveen Kumar

161
1
6

Why not `position: sticky;`? [MDN - Position](https://developer.mozilla.org/en-US/docs/Web/CSS/position). – Sep 05 '18 at 13:00
thanks but it doesn t work. Could you show me on https://jsfiddle.net/u71jbdew/25/ ?? Trying to make it work from https://fullcalendar.io/releases/fullcalendar-scheduler/1.9.4/demos/vertical-resource-view.html – Chessman Sep 05 '18 at 13:06

score 0 · Answer 3 · answered Sep 02 '19 at 12:28

0

You can use this, this works for me:

    .fc-timeline .fc-body .fc-scroller{
       height: 400px  !important;
    }

answered Sep 02 '19 at 12:28

Pierre

1,044
15
27

Sticky Header on Fullcalendar scheduler

3 Answers3

Linked