Fullcalendar con jQuery

Hace mucho tiempo quería dar a conocer un complemento estupendo para crear un calendario de forma completa (fullcalendar) en tu página Web.

Fullcalendar es ideal para mostrar eventos, pero no es una solución completa para la gestión de contenido de los eventos. En este artículo veremos su funcionalidad básica con algunos detalles y opciones que ofrece su API.

En próximos tutoriales, tenemos pensado crear un sistema completo de calendario con PHP y base de datos.

Actualmente existen 4 versiones del complemento. En este artículo hablaremos de la versión 2 o 3 que tienen 2 dependencias con: jQuery y Moment.

Instalación en tu página

En la cabecera de tu página, dentro de la etiqueta <head> puedes agregar los estilos y scripts necesarios para hacer funcionar Fullcalendar.

Source code

<link rel='stylesheet' type='text/css' href='css/fullcalendar.css' />
<script type='text/javascript' src='js/moment.min.js'></script>
<script type='text/javascript' src='js/fullcalendar.min.js'></script>
<script type='text/javascript' src='js/locale/es.js'></script>

Requiere incluir la hoja de estilos CSS, la librería Moment, jQuery y Fullcalendar. En el ejemplo también estamos agregando el archivo de idioma para mostrar el calendario en español que es lo que nos interesa. Si no agregas este último archivo, el calendario aparecerá en idioma inglés por defecto.

Estos archivos también pueden ser incluidos antes de la etiqueta de cierre del cuerpo de la página </body>. Por temas de rendimiento, es mejor situarlo al final para no retrasar la carga de la página.

Dentro del cuerpo de la página, o en el lugar que más desees del <body>, agrega el contenedor que se rellenará con el calendario. Por ejemplo;

Source code

<div id="calendar"></div>

Ahora solo queda agregar la llamada al plugin Fullcalendar para generar el calendario con las opciones que deseemos:

Source code

$(document).ready(function() {
    $('#calendar').fullCalendar({
        header: {
            left: 'prev,next',
            center: 'title',
            right: 'month,agendaWeek,agendaDay'
        },
        defaultDate: '2019-07-09',
        buttonIcons: true,
        weekNumbers: false,
        editable: true,
        eventLimit: true,
        events: [
            {
                title: 'All Day Event',
                description: 'Lorem ipsum 1...',
                start: '2019-07-01',
                color: '#3A87AD',
                textColor: '#ffffff',
            }
        ],
        dayClick: function (date, jsEvent, view) {
            alert('Has hecho click en: '+ date.format());
        }, 
        eventClick: function (calEvent, jsEvent, view) {
            $('#event-title').text(calEvent.title);
            $('#event-description').html(calEvent.description);
            $('#modal-event').modal();
        },  
    });
});

Obteniendo como resultado:

Opciones

En esta llamada a Fullcalendar estamos utilizando las siguientes opciones:

header

Permite definir los botones y el título de la parte superior del calendario.

En la cabecera del calendario de ejemplo queremos mostrar en la parte izquierda de la cabecera los botones para la paginación de los meses, semanas o días. Se pueden agregar botones personalizados. Ver más detalles en la documentación oficial.

En el centro de la cabecera hemos querido mostrar el título donde aparece el mes y el año por defecto y en la parte derecha nos ha interesado mostrar botones para mostrar otras vistas del calendario. En este caso, la vista del mes, semana y día.

defaultDate

En este parámetro puedes definir la fecha marcada cuando se carga el calendario por primera vez.

Un formato de fecha aceptado es por ejemplo: 2019-07-09.

Cuando no se especifica, este valor se establece por defecto con la fecha actual.

buttonIcons

Establecido en true muestra unos iconos en los botones de la cabecera del calendario. Si su valor es false, se muestra un texto: sig y ant.

weekNumbers

Establecido en true muestra una pequeña columna en la parte izquierda del calendario para informar del número de la semana.

eventLimit

Permite limitar la cantidad de eventos que se muestran en un día. El resto se mostrará en una ventana emergente. Puedes indicar true, false o un número entero.

events

Definición de la lista de objetos o eventos que se mostrarán en el calendario.

dayClick

Este atributo se utiliza para controlar el evento o acción de hacer clic en un día del calendario. En el ejemplo en funcionamiento tan solo estamos mostrando una alerta pero se pueden hacer infinidad de cosas como por ejemplo mostrar un formulario para agregar un nuevo evento al calendario.

eventClick

Este atributo se utiliza para controlar el evento o acción de hacer clic en un evento del calendario. En el ejemplo en funcionamiento abrimos una ventana modal y agregamos el título y descripción del evento.

Ver documentación completa

Conclusión

Fullcalendar es uno de los plugins más populares y de tamaño completo para crear un calendario con JavaScript.

Es potente y ligero. Algo más de 200kb pesa su archivo minimizado.

Tiene más de 100 configuraciones personalizables.

Intenta ser amigable con el desarrollador. Tiene conectores para usar con React, Vue y Angular. Proporciona definiciones de TypeScript de alta calidad. También es capaz de funcionar con jQuery.

Todo el código fuente está abierto para ser modificado. Está disponible en GitHub. Sin enbargo, hay una edición «premium» no gratuita.

Ver demo Descargar