01. Cargar librerías y mostrar calendario - Piptonita/crear-calendario-FullCalendar GitHub Wiki

  • Comenzamos descargando fullcalendar desde su sitio web https://fullcalendar.io/docs/getting-started

  • En su sitio web seleccionamos la opción Download para descargar todo el paquete.

  • Creamos una carpeta llamada vendor y extraemos ahí la carpeta lib, cambiamos su nombre por fullcalendar.

  • Creamos en el directorio raiz del proyecto el archivo index.html y cargamos las dependencias:

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Calendario a Full</title>
    <!-- CSS: -->
    <link rel="stylesheet" href="vendor/fullcalendar/main.css">
</head>
<body>
    
    <!-- JS: -->
    <script src="vendor/fullcalendar/main.js"></script>
</body>
</html>

  • Ahora vamos a crear el directorio src y en el las carpetas css y js.

  • Accedemos a la carpeta js y creamos el archivo calendar.js

  • Regresamos a index.html , creamos un contenedor div para vincular el calendario e importamos el calendario al archivo:

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Calendario a Full</title>
    <link rel="stylesheet" href="vendor/fullcalendar/main.css">
</head>
<body>
    <!-- contenedor para renderizar el calendario: -->
    <div id="calendar"></div>
    
    <script src="vendor/fullcalendar/main.js"></script>
    <!-- Script para trabajar nuestro calendario -->
    <script src="src/js/calendar.js"></script>
</body>
</html>
  • Nos vamos ahora a calendar.js y creamos el objeto calendario:
// capturamos el div:
var calendarDiv = document.getElementById('calendar');

// construimos el objeto calendario:
var calendar = new FullCalendar.Calendar(calendarDiv, {
    initialView: 'dayGridMonth', // establecemos que la vista inicial sea todo el mes.
});

// cargamos el calendario:
calendar.render();

Ejecutamos el archivo index.html en el navegador para comprobar que se muestra el calendario.

⚠️ **GitHub.com Fallback** ⚠️