Ir a la barra de herramientas
Tutoriales de Informática y Dispositivos Móviles
Tutoriales de Informática y Dispositivos Móviles

Cabecera de días fija en FullCalendar

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

Cabecera de FullCalendar  

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

 

Si te ha gustado no olvides compartir en redes sociales.

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

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.

Translate »