El plugin Fullcalendar es un plugin que usamos para mostrar calendario de eventos, citas o cualquier otro proyecto que requiera un calendario visual, que se pueda manipular y sea facil de usar.
💡 ¿Quieres aprender más? Este artículo es parte de nuestra Recopilación de Plugins JavaScript y jQuery → donde encontrarás más de 20 tutoriales gratuitos esperándote para llevar tus habilidades al siguiente nivel.
El plugin Fullcalendar lo podemos usar con puro javascript o angular. Nosotros usaremos Javascript.
Descargar el Plugin FullCalendar
Para descargar el plugin vamos a ir a la pagina oficial https://fullcalendar.io/ o tambien podemos usar el comando npm.
npm install fullcalendar
Recordar que al usar npm, los modulos se guardan en la carpeta “node_modules”
En nuestro ejemplo vamos a usar el puro plugin una pagina html puro, es decir sin bootstrap ni nada.
Empezar el codigo
Una vez descargada la libreria lo primero que haremos sera incluir los archivos css y js en el HEAD del documento.
<!-- INCLUIR CSS --> <link rel="stylesheet" type="text/css" href="node_modules/fullcalendar/main.min.css"> <!-- INCLUIR JS --> <script type="text/javascript" src="node_modules/fullcalendar/main.min.js"></script>
Lo siguiente seria en el body del documento, agregar un elemento div para el calendario y un script para inicializar el plugin.
<!-- ELEMENTO DEL CALENDARIO -->
<div id="calendar1"></div>
<!-- SCRIPT PARA ACTIVAR EL FULLCALENDAR-->
<script type="text/javascript">
document.addEventListener("DOMContentLoaded", function(){
var calendar_element = document.getElementById("calendar1");
// Array con un Evento
var myevents = [
{
title : 'event1',
start : '2022-10-22'
},
];
var calendar = new FullCalendar.Calendar(calendar_element, {
initialView: "dayGridMonth",
events: myevents
});
calendar.render();
});
</script>En el mismo script usamos un array para agregar un evento, que veremos mas adelante como personalizar los parametros.
Resultado
El resultado al ejecutar el archivo index.html donde guardamos el codigo sera el siguiente.
Como pueden ver se renderiza el calendario y se muestra el evento en la fecha que lo pusimos 22 de octubre del 2022.
¿Necesitas un software de ventas listo para producción?
Inventio Max es la solución profesional con soporte para múltiples almacenes, reportes avanzados y gestión de usuarios.
Ver Inventio Max – Sistema de Inventario y Ventas Profesional →