Lección: 59 Mostrar datos de cada evento y día con FULLCALENDAR en el SISTEMA VETERINARIO(PHPyMySql)FullStack

59 Mostrar datos de cada evento y día con FULLCALENDAR en el SISTEMA VETERINARIO(PHPyMySql)FullStack

Duración: 12 min

Módulo: 📅 Desarrollo del Módulo de Reservas con FullCalendar Lección 5 de 9

Descripción

🎬 Lección 59: Mostrar Datos de Eventos y Días con FullCalendar 🖱️

Esta lección cubre la configuración de propiedades en el script de FullCalendar para permitir la interacción del usuario y la validación de días disponibles.

1. Propiedades de Interacción

Se añaden y configuran propiedades esenciales en la inicialización del calendario para mejorar la usabilidad:

editable: true
- Permite que los eventos existentes (citas) se muestren con un cursor de mano al pasar sobre ellos, dando la sensación de que son elementos accionables. [02:50]
selectable: true
- Permite que el usuario pueda hacer clic y seleccionar un día en la cuadrícula del calendario. [03:22]

2. Eventos Click y Date Click

El instructor configura dos funciones de callback (eventos) para manejar la interacción del usuario:

eventClick:
- Se utiliza para capturar información cuando el usuario hace clic en un evento existente (una cita ya registrada).
- Muestra una alerta con el título y la fecha de inicio del evento al hacer clic. [01:35]
dateClick:
- Se utiliza para capturar la fecha cuando el usuario hace clic en un día (para realizar una nueva reserva).
- Este evento se usará para abrir el formulario de reserva (modal). [05:36]

3. Lógica de Restricción de Días Hábiles

Se implementa una validación dentro de la función dateClick para evitar que se agenden citas en días no laborables:

Obtención de la Fecha: El script recupera la fecha seleccionada (dateStr) del calendario. [07:27]
Conversión a Día Numérico: La fecha se convierte a un número de día de la semana, donde el domingo es 0, el lunes es 1, y así sucesivamente hasta el sábado que es 6. [08:52]
Validación de Fin de Semana: Se utiliza una sentencia if para preguntar si el día numérico es igual a 5 (Sábado) o 6 (Domingo). [11:05]
Bloqueo: Si se selecciona un fin de semana, se muestra un mensaje de alerta: "no hay atención en este día", impidiendo que se abra el modal de reserva. [11:33]

El video concluye con la promesa de mostrar en la próxima lección la implementación del modal de reserva que se abrirá solo cuando se seleccione un día hábil. [11:53]

Hilari Web