93 Cargar Reservas de Citas Medicas en el Calendario del Sistema con LARAVEL(PHP-MySql) FullStack
Duración: 10 minDescripción
🗓️ Carga de Reservas de Citas en el Calendario FullCalendar
Esta lección se centra en la etapa final del proceso de reserva: obtener los datos de citas médicas guardados en la base de datos (tabla events) y mostrarlos de forma dinámica en el componente FullCalendar de la vista principal.
1. 💾 Recuperación y Envío de Eventos (Controlador)
Se modifica el método index del controlador principal (AdminController) para extraer todos los eventos registrados y pasarlos a la vista.
- Consulta a la Base de Datos: Se declara una variable $eventos que recupera todos los registros del modelo Event utilizando Event::all() [01:48].
- Envío a la Vista: La variable $eventos es enviada a la vista (admin.index) usando el método compact() para que esté disponible en el frontend [02:04].
2. 🔄 Iteración y Renderizado en la Vista (FullCalendar)
Se utiliza un bucle foreach dentro del bloque de configuración de JavaScript del FullCalendar para generar los eventos dinámicamente.
- Bucle foreach: Se itera sobre la colección $eventos recibida desde el controlador [02:43].
- Mapeo de Propiedades: Por cada evento, se mapean los campos de la base de datos a las propiedades requeridas por FullCalendar:
- title: Se utiliza el campo title del evento, que contiene la hora y la especialidad [03:25].
- start: Se utiliza el campo start del evento (que ahora incluye fecha y hora) para definir el inicio de la cita [04:33].
- end: Se utiliza el campo end del evento (que ahora incluye fecha y hora) para definir el final de la cita [05:15].
- color: Se mantiene el color predeterminado (red) [06:17].
Resultado
Una vez implementado, el sistema comienza a cargar todas las reservas de citas médicas de la base de datos en el calendario, donde se visualizan con su título y color correspondiente. Esto confirma que el flujo de registro y validación está completo y funcional [07:06].
3. ➡️ Próximo Paso: Filtrado por Consultorio
El próximo objetivo es mejorar la visualización del sistema de reservas creando calendarios específicos para cada consultorio o especialidad. Esto implicará el uso de AJAX para cargar de forma dinámica los eventos de un consultorio específico al hacer clic sobre él (ej. mostrar solo las citas de Pediatría) [09:17].
Lecciones
Apoya este proyecto
Si te gusta nuestro contenido, ¡apóyanos con una donación!
Donar por Airtm Donar por Binance¡Gracias por tu apoyo! ❤️
