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.

<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;

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

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

$(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

Autor
Escrito por Jose Aguilar - Director ejecutivo y tecnológico en JA Modules. Experto programador PrestaShop y Experto programador WordPress.
Te ha servido? Valora esta entrada!
(13 votos, promedio: 5 de 5)
Comparte en las redes sociales
¿Buscas trabajo de programador?

18 respuestas a “Fullcalendar con jQuery”

  1. Vero dice:

    Hola José, cómo puedo hacer para que no se puedan crear eventos en fechas pasadas? Muchas gracias por tus consejos.

  2. ELS dice:

    Hola, queria saber si ya esta disponible el sistema de calendario con PHP y base de datos. Estoy intentando hacerlo por mi cuenta y no soy capaz. Gracias!

  3. Jose muchas gracias por el gran aporte que haces con «Fullcalendar», para nosotros los más analfabetos en estos temas es de muchisima utilidad, de verdad lo agradezco.

    Seguí todas las instrucciones paso a paso y no resultó de acuerdo a lo esperado. Sin embargo te cuento que hay un paso que no tengo idea de como hacerlo:
    «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.»
    En el link de la web que dejo más abajo podrás ver el calendario que está por defecto con el plugin «Event-Manager» y más abajo el «Fullcalendar», intenté modificarlo pero no lo logré 🙁

    Si me puedes ayudar te lo agradecería, necesito hacer 3 cosas básicamente:
    – cambiar los colores, hoy fullcalendar está en tonos amarillos y verdes y mi pagina es color burdeo.. quisiera dejarla mas en tonos burdeos – rojos – rosados.
    – Fullcalendar no debería mostrarse inicialmente en una fecha fija como se muestra en el ejemplo sino que debería mostrarse con la fecha de «hoy» cualquiera sea este día.
    – El título del evento que tengo en event manager es bastante largo, ya que incluye el nombre en si mismo y el cupo disponible total (esto se programa de acuerdo a unos campos de event manager) Lo puedes visualizar en el calendario 1 original de la pagina web. Sin embargo el espacio para el nombre de fullcalendar es demasiado pequeño y no cabe todo el nombre del campo con su respectivo cupo.

    Si me puedes ayudar te lo agradecería mucho.

    Muchas gracias
    Juan Pablo Cisternas

  4. Dey dice:

    Quisiera saber como mostrar por un rango de fechas

  5. Adrian dice:

    Buenas, fenomenal aporte. ¿Sabes por casualidad si en vez de mostrar los eventos con las franjas de colores se le podría pasar un icono o imagen?

    Un saludo y gracias de antemano

  6. fernando dice:

    Hola Jose muy bonito. Como puedo agregar una columna con la misma cantidad de filas?
    De tener 7 columnas quiero pasar a tener 8.

    Saludos

  7. Raul Barroso dice:

    Muchas gracias por tu aporte, me ha sido de gran ayuda. quería preguntarte ¿existe la posibilidad que la vista en el mes sea por semanas y no por días? ejemplo, que en el mes de diciembre aparezca sm 49, sm 50, etc. y que los eventos se pinten en ese formato? gracias por tu ayuda.

  8. alejandro dice:

    hola jose, desde argentina me interesaria contactarte para saber si podras hacer en full calendar algo customizable. Gracias.

  9. Ronald dice:

    Buen aporte lo estoy utilizando y es excelente, solo una duda… existe la posibilidad de hacer un export a excel del contenido tal como se visualiza en el calendario o algo parecido. GRacias

    • Jose Aguilar dice:

      Hola,

      Si que se podría hacer si los datos están guardados en una base de datos. Tan solo tendrías que consultar la tabla para exportarla a un archivo excel.

      Saludos

Deja una respuesta

Tu dirección de correo electrónico no será publicada.

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

Ver más sobre