How can I make a fixed header in full Calendar.

Please look at the fiddle, Sun, mon,Tue,Wed,Thur,Fri,Sat is my header. I want this sunday to saturday header has to be fixed. If I scroll vertically, the header should not hide.

jsfiddle

$(document).ready(function() {

    var date = new Date();
    var d = date.getDate();
    var m = date.getMonth();
    var y = date.getFullYear();

    var events_array = [
        {
        title: 'Test1',
        start: new Date(2012, 8, 20),
        tip: 'Personal tip 1'},
    {
        title: 'Test2',
        start: new Date(2012, 8, 21),
        tip: 'Personal tip 2'}
    ];

    $('#calendar').fullCalendar({
        header: {
            left: 'prev,next today',
            center: 'title',
            right: 'month,agendaWeek,agendaDay'
        },
        selectable: true,
        events: events_array,
        eventRender: function(event, element) {
            element.attr('title', event.tip);
        }
    });
});

$(document).on('hover', '.fc-day-number', function(){
  $('#cal-info').addClass('hide');
	var data = $(this).html();
  var offset = $(this).offset();
  $('#cal-info').css('left', offset.left);
  $('#cal-info').css('top', (offset.top - 40));
  $('#cal-info').html('information about: '+$(this).html()+'<br>Link to google: <a href="" target="_blank">Google</a>');
	//p.html( "left: " + offset.left + ", top: " + offset.top );
  $('#cal-info').removeClass('hide');
});

.tag{
  background-color:#000;
  color:#fff;
  padding:3px;
  max-height:60px;
  overflow: visible;  
  position: fixed;
  z-index:999;
}
.tag:after {
  content: "";
  border-top: 16px solid red;
  border-left: 8px solid transparent;
  border-right: 8px solid transparent;
  position: absolute;
  bottom: -16px;
  left: calc(50% - 8px);
}

<link href=".5.3/fullcalendar/fullcalendar.css" rel="stylesheet"/>
<script src=".1.1/jquery.min.js"></script>
<script src=".5.3/fullcalendar/fullcalendar.min.js"></script>
<div style="border:solid 2px red;">
        <div id='calendar'></div>
</div>
<div class="tag hide" id="cal-info">

</div>

How can I make a fixed header in full Calendar.

Please look at the fiddle, Sun, mon,Tue,Wed,Thur,Fri,Sat is my header. I want this sunday to saturday header has to be fixed. If I scroll vertically, the header should not hide.

jsfiddle

$(document).ready(function() {

    var date = new Date();
    var d = date.getDate();
    var m = date.getMonth();
    var y = date.getFullYear();

    var events_array = [
        {
        title: 'Test1',
        start: new Date(2012, 8, 20),
        tip: 'Personal tip 1'},
    {
        title: 'Test2',
        start: new Date(2012, 8, 21),
        tip: 'Personal tip 2'}
    ];

    $('#calendar').fullCalendar({
        header: {
            left: 'prev,next today',
            center: 'title',
            right: 'month,agendaWeek,agendaDay'
        },
        selectable: true,
        events: events_array,
        eventRender: function(event, element) {
            element.attr('title', event.tip);
        }
    });
});

$(document).on('hover', '.fc-day-number', function(){
  $('#cal-info').addClass('hide');
	var data = $(this).html();
  var offset = $(this).offset();
  $('#cal-info').css('left', offset.left);
  $('#cal-info').css('top', (offset.top - 40));
  $('#cal-info').html('information about: '+$(this).html()+'<br>Link to google: <a href="http://google." target="_blank">Google</a>');
	//p.html( "left: " + offset.left + ", top: " + offset.top );
  $('#cal-info').removeClass('hide');
});

.tag{
  background-color:#000;
  color:#fff;
  padding:3px;
  max-height:60px;
  overflow: visible;  
  position: fixed;
  z-index:999;
}
.tag:after {
  content: "";
  border-top: 16px solid red;
  border-left: 8px solid transparent;
  border-right: 8px solid transparent;
  position: absolute;
  bottom: -16px;
  left: calc(50% - 8px);
}

<link href="http://arshaw./js/fullcalendar-1.5.3/fullcalendar/fullcalendar.css" rel="stylesheet"/>
<script src="https://ajax.googleapis./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://arshaw./js/fullcalendar-1.5.3/fullcalendar/fullcalendar.min.js"></script>
<div style="border:solid 2px red;">
        <div id='calendar'></div>
</div>
<div class="tag hide" id="cal-info">

</div>

• javascript
• jquery
• html
• css
• fullcalendar

Share Improve this question Follow edited Jul 20, 2016 at 12:09 Sagar Kodte 3,81544 gold badges2626 silver badges5555 bronze badges asked Jul 20, 2016 at 10:30 sathish kumarsathish kumar 93622 gold badges2323 silver badges6060 bronze badges 1

• was any of the answers below helpful ? – Eduard Uta Commented Jul 27, 2017 at 7:18

Add a ment  | 

5 Answers 5

Sorted by: Reset to default 2

I think you are looking for this -

jsfiddle

You need to add a class on your header

 .fc-border-separate thead.sticky{
    width: 100%;
    position: fixed;
    top:0px;
    left:0px;
    display:table;
    background: #fff;
}

And add and remove on window scroll using jquery

$(window).scroll(function() {
    if ($(this).scrollTop() > 1){  
        $('.fc-border-separate thead').addClass("sticky");
    }
    else{
        $('.fc-border-separate thead').removeClass("sticky");
    }
});

I hope It will helps you.

.fc-widget-header {
  position: sticky;
  z-index: 100;
  top: 0; 
  background-color: white;
}

Add this to your style.

.calendar {
  position:relative;
}

.fc-header {
  position:fixed;
}

.fc-content {
  padding-top:50px;
}

hi here is updated fiddle. check updated CSS at the end.

http://jsfiddle/v98sb2a0/3/

.fc-border-separate thead tr
{
position: fixed;
margin-bottom: 20px;
width: 100%;
}
.fc-border-separate thead tr th
{
  width:80px;
}
.fc-border-separate th.fc-last, .fc-border-separate td.fc-last
{
  border-right-width: 0px;
}

see here : jsfiddle

code :

var headerHeight = $(".fc-header").height()


$(window).scroll(function(){
   if($(window).scrollTop() > headerHeight){
      $("thead").addClass("fixed")

   }else{
      $("thead").removeClass("fixed")
   }
});    

CSS :

thead.fixed { position:fixed;width:100%;top:0;display:table;}

added a JQ where you calculate the height of the .fc-header and so, only after you scroll past that height, the thead will bee fixed.

for the thead to bee fixed i added a class fixed in the JQ and then in CSS styled that class

let me know if it helps

EDIT : interesting downvote. hmm