85 Como Instalar FullCalendar en la página principal del Sistema con LARAVEL(PHP-MySql) FullStack

Duración: 9 min
Módulo: 🔑 Seguridad, Roles y Permisos Lección 15 de 15

Descripción

🗓️🚀 Lección 85: Instalación y Configuración de FullCalendar en Laravel

Esta lección cubre la instalación, prueba e integración de la popular librería FullCalendar en el proyecto de Laravel, preparándola para ser utilizada en el dashboard del usuario para la gestión y reserva de citas.

1. Instalación y Prueba de Funcionalidad 🧪

El primer paso es incorporar la librería FullCalendar al proyecto para asegurar su compatibilidad y correcto funcionamiento.

  • Método de Instalación: Aunque FullCalendar permite la descarga o el uso de NPM, para la prueba inicial se utiliza la sintaxis CDN y los scripts de inicialización proporcionados por la documentación oficial [01:20].
  • Prueba Rápida: Los scripts se insertan directamente en la vista del dashboard del usuario para una prueba rápida [01:36].
  • Verificación: Se confirma que el calendario se renderiza correctamente, lo que garantiza la compatibilidad con la versión de jQuery que ya está siendo utilizada en el proyecto [02:43].

2. Integración Correcta en la Plantilla 🏗️

Para un manejo más limpio y modular, los archivos de la librería se integran en la plantilla principal del administrador:

  • Ubicación de Scripts: Las referencias a los archivos de FullCalendar se mueven al archivo admin/layout.blade.php, dentro de la sección de scripts [03:32].
  • Propósito: Esto asegura que la librería esté cargada y disponible en todas las vistas del panel de administración que la necesiten.

3. Configuración de Idioma (Español) 🇪🇸

Por defecto, FullCalendar se muestra en inglés, por lo que se procede a configurar la localización al español:

  • Archivo de Idioma: Se descarga el archivo de localización (es.global.js) del paquete de FullCalendar [05:16].
  • Ruta Pública: Se crea una nueva carpeta llamada fullcalendar dentro del directorio public y se coloca el archivo de idioma allí [05:45].
  • Inclusión en la Plantilla: Se incluye el archivo de idioma en la plantilla (admin/layout) utilizando la función URL de Laravel [06:53].
  • Inicialización con locale: Al inicializar el calendario en el script de la vista, se añade la opción locale: 'es' para aplicar la traducción [07:48].

Resultado: El calendario ahora se muestra completamente en español, incluyendo los nombres de los meses y los días de la semana, listo para cargar los datos de la base de datos [08:14].