Instalar y Usar el Plugin Fullcalendar JS

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.

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.