Fullcalendar con jQuery
Tutorial y código de ejemplo que te va ayudar a insertar un calendario completo (fullcalendar) desarrollado con JavaScript con dependencias con jQuery y Moment js.10/07/2019
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.
Ronald
Publicado el 29/05/2020 16:57Buen 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
Publicado el 09/06/2020 06:09Hola,
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
alejandro
Publicado el 29/09/2020 19:57hola jose, desde argentina me interesaria contactarte para saber si podras hacer en full calendar algo customizable. Gracias.
Raul Barroso
Publicado el 05/12/2020 14:48Muchas 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.
Jose Aguilar
Publicado el 24/12/2020 16:41Hola,
Envías tus requerimientos a nuestro centro de soporte técnico y lo puedemos estudiar -> https://www.jamodules.com/prestashop-addons/es/soporte
Saludos
Jose Aguilar
Publicado el 24/12/2020 17:10Hola,
Si, el plugin Fullcalendar tiene la opción de mostrarlo por semanas. Revisa la api y verás como.
Saludos
fernando
Publicado el 25/12/2020 17:52Hola Jose muy bonito. Como puedo agregar una columna con la misma cantidad de filas?
De tener 7 columnas quiero pasar a tener 8.
Saludos
Jose Aguilar
Publicado el 31/12/2020 12:51Hola,
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
Adrian
Publicado el 02/03/2021 08:13Buenas, 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
Dey
Publicado el 16/03/2021 17:06Quisiera saber como mostrar por un rango de fechas
Jose Aguilar
Publicado el 08/04/2021 17:35Hola,
Deberías probar si en el title: ‘All Day Event’, fuera posible agregar código html para conseguir tu propósito.
saludos
Jose Aguilar
Publicado el 08/04/2021 17:40Hola,
Revisa la documentación del plugin Fullcalendar para averiguar si es posible.
Saludos
Juan Pablo Cisternas
Publicado el 13/04/2021 21:17Jose 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
Jose Aguilar
Publicado el 12/05/2021 07:11Hola,
En la página que indicas no he podido ver el calendario con Fullcalendar o ¿me equivoco?
En cualquier caso, si necesitas personalizaciones para este plugin puedes enviar tu petición al centro de soporte técnico situado en:
https://www.jamodules.com/prestashop-addons/es/soporte
Jose Aguilar,
Saludos
ELS
Publicado el 21/12/2021 12:22Hola, 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!
Jose Aguilar
Publicado el 23/12/2021 18:17Hola,
Envíanos todos los detalles que necesites a:
https://www.jamodules.com/es/soporte
Podemos hacerlo por ti.
Saludos
Vero
Publicado el 31/05/2022 19:39Hola José, cómo puedo hacer para que no se puedan crear eventos en fechas pasadas? Muchas gracias por tus consejos.
Jose Aguilar
Publicado el 02/06/2022 05:05Hola Vero,
Fullcalendar tiene un montón de opciones. Para lo que comentas puedes visitar la página oficial del plugin ubicada en:
https://fullcalendar.io/
Para ver si el desarrollador ha contemplado lo que comentas.
Saludos
José Antonio León
Publicado el 29/05/2023 10:27Bueno días
Sería posible que los eventos fueran una imagen y no un color, o colocar una imagen en el recuadro del día?
Jose Aguilar
Publicado el 01/06/2023 15:14Hola buenas tardes,
Yo diría que esa opción no la tiene el plugin.
En cualquier caso, te recomiendo que le des un vistazo a las opciones que tiene el plugin. Quizá dispone de esta función en las últimas versiones.
Saludos