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.
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;
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.
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.
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
Hola,
Gracias por tu mensaje.
No se si esto se podrá hacer con este plugin. Consulta la documentación del plugin para ver si es viable.
Saludos
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.
Hola,
Si, el plugin Fullcalendar tiene la opción de mostrarlo por semanas. Revisa la api y verás como.
Saludos
hola jose, desde argentina me interesaria contactarte para saber si podras hacer en full calendar algo customizable. Gracias.
Hola,
Envías tus requerimientos a nuestro centro de soporte técnico y lo puedemos estudiar -> https://www.jamodules.com/prestashop-addons/es/soporte
Saludos
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
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