Cabecera de días fija en FullCalendar

En este tutorial aprenderemos cómo colocar la cabecera de días fija para que se mantenga a la vista al hacer scroll. Desgraciadamente el plugin fullCalendar no dispone todavía de esta funcionalidad por lo que no queda otra más que hacerlo por código.

Cabecera

Después de hacer muchas pruebas, esto es lo que me ha funcionado.

Código css:

.fc-head .fc-time-area.fixed { 
  position:fixed; 
  width: 89.9%; 
  z-index: 500; 
  background-color: white; 
}

Código jQuery:

$(document).ready(function() { 
  var headerHeight = $(".fc-head .fc-time-area").height(); 
  var headerWidth = $(".fc-head .fc-time-area").width(); 
  $(window).scroll(function(){ 
    if($(window).scrollTop() > headerHeight){ 
      $(".fc-head .fc-time-area").addClass("fixed"); 
      $(".fc-head .fc-time-area").width(headerWidth-17); 
    }
    else{ 
      $(".fc-head .fc-time-area").removeClass("fixed"); 
    } 
  }); 
});

Más tutoriales de programación

Si te ha gustado no olvides compartir en redes sociales.

[addthis tool=»addthis_inline_share_toolbox_6jt6″]

Espero que te haya servido. Cualquier duda deja un comentario. Un saludo