03. Modificar cabecera y pie - Piptonita/crear-calendario-FullCalendar GitHub Wiki

Veamos como modificar lo que aparece sobre el calendario (título, navegación, etc..)

• Nos vamos al archivo calendar.js para modificar la cabecera del calendario:

var calendarDiv = document.getElementById('calendar');

var calendar = new FullCalendar.Calendar(calendarDiv, {
    locales: 'es', 
    initialView: 'dayGridMonth', 
    headerToolbar: { // le pasamos la propiedad headerToolbar
        left: 'today,prev,next', // definimos a la izquierda la navegación
        center: 'title', // en el centro que muestre le mes y año
        right: 'dayGridMonth,timeGridWeek,timeGridDay,listMonth', // y en el derecho la vista

    },
});

calendar.render();

Como podemos ver, la cabecera tiene tres columnas. Izquierda, centro y derecha para posicionar distintos elementos que vamos colocando separados por una coma.

Estos son algunos de los elementos disponibles para editar la cabecera:

• title: muestra el mes y año.

Botones:

• prev: botón para ir atrás.
• next: botón para avanzar.
• prevYear: botón para ir atrás un año.
• nextYear: botón para avanzar un año.
• today: botón para ver que a que día estamos.

vistas:

• dayGridMonth: muestra el calendario mes a mes.

• timeGridWeek: muestra el calendario semanal.

• timeGridDay: muestra el calendario día a día.

• listMonth: muestra los eventos listados de todo el mes.

• También podemos colocar una barra inferior con la propiedad footerToolbar, esta propiedad utiliza los mismos atributos que su hermana headerToolbar:

var calendarDiv = document.getElementById('calendar');

var calendar = new FullCalendar.Calendar(calendarDiv, {
    locales: 'es', 
    initialView: 'dayGridMonth', 
    footerToolbar: { // vamos a cambiar header por footer
        left: 'today,prev,next', 
        center: 'title', 
        right: 'dayGridMonth,timeGridWeek,timeGridDay,listMonth',

    },
});

calendar.render();

Y podemos montar ambos para distribuir una gran cantidad de opciones:

var calendarDiv = document.getElementById('calendar');

var calendar = new FullCalendar.Calendar(calendarDiv, {
    locales: 'es', 
    initialView: 'dayGridMonth', 
    headerToolbar: { 
        left: 'prev', 
        center: 'title', 
        right: 'next',

    },
    footerToolbar: {
        left: 'prevYear',    
        center: 'dayGridMonth,timeGridWeek,timeGridDay,listMonth,today',
        right: 'nextYear'
    },
});

calendar.render();

Ahora tenemos un calendario completo de opciones. Pero nos falta traducir los botones.

• Vamos a añadir después de las Toolbars la propiedad buttonText para establecer que pondrá en cada botón:

var calendarDiv = document.getElementById('calendar');

var calendar = new FullCalendar.Calendar(calendarDiv, {
    locales: 'es', 
    initialView: 'dayGridMonth', 
    headerToolbar: { 
        left: 'prev', 
        center: 'title', 
        right: 'next',

    },
    footerToolbar: {
        left: 'prevYear',    
        center: 'dayGridMonth,timeGridWeek,timeGridDay,listMonth,today',
        right: 'nextYear'
    }, // añadimos la propiedad buttonText y traducimos los botones o ponemos lo que queramos:
    buttonText: {
        today: 'Hoy',
        month: 'Mes',
        week: 'Semana',
        day: 'Día',
        list: 'Listado'
    }
});

calendar.render();

Y con esto ya tenemos listos los botones.