FullCalendar: cómo insertar un calendario con este plugin jQuery. También sincronizable con Google Calendar.

Creado por Adam Shaw,  FullCalendar es, como dice en su sitio web (con varios ejemplos incluídos), un plugin jQuery que proporciona un completo calendario que se puede alimentar por AJAX (o no, si definimos los eventos en el momento de su creación), y que nos permite incluso arrastrar y soltar eventos, o incluso sincronizarlo con Google Calendar.

Además es ampliamente customizable visualmente, y proporciona controles para capturar eventos tales como el click o el drag and drop (ésto último utilizando jQueryUI) de eventos.

En el sitio web hay muchísima documentación sobre el funcionamiento del plugin, pero vamos a ver cómo incorporar rápidamente este calendario a nuestra página web.

Después de descargarlo y descomprimirlo, lo primero que haremos será incluir los archivos necesarios en la cabecera de nuestra página:

<link rel='stylesheet' type='text/css' href='fullcalendar.css' />
<script type='text/javascript' src='jquery.js'></script>
<script type='text/javascript' src='fullcalendar.js'></script>

Después, insertaremos la siguiente etiqueta donde queramos que aparezca el calendario:

<div id='calendar'></div>

Y finalmente, al terminar de cargar la página (gracias a la función .ready de jQuery) ejecutaremos la llamada a la función que construye el calendario:

$(document).ready(function() {
    // página cargada, inicializamos el calendario...
    $('#calendar').fullCalendar({
        // Las opciones van aquí
    })
});

Con ésto, tendremos el calendario creado. Pero si queremos, por ejempo, cambiar el tamaño de éste, o insertar un par de eventos fijos, los añadiremos como opciones a la hora de inicializar el calendario:

$(document).ready(function() {
    // página cargada, inicializamos el calendario...
    $('#calendar').fullCalendar({
        height : 450,
        width  : 650,
        events : [
        {
            title  : 'event1',
            start  : '2010-01-01'
        },
        {
            title  : 'event2',
            start  : '2010-01-05',
            end    : '2010-01-07'
        },
        {
            title  : 'event3',
            start  : '2010-01-09 12:30:00',
            allDay : false // will make the time show
        }
    ]
    })
});

De ésta manera hemos inicializado el calendario definiéndole un ancho y alto y asignando tres eventos. También podemos definir otros parámetros, como los literales (por ejemplo en castellano en vez de inglés), el color de cada evento… entre otro montón de opciones.

Por supuesto, recargar los datos a través de AJAX es igualmente sencillo, o incluso recogerlos de un calendario que tengamos en Google Calendar, pero para ello mejor revisar la documentación oficial del proyecto, que está muy bien parida.

Este proyecto es open source, licenciado bajo la licencia MIT. Se puede ayudar al autor haciendo una donación a través de PayPal.