Lección: 60 MODAL de Bootstratp en FULLCALENDAR en el SISTEMA VETERINARIO (PHP y MySql) FullStack

60 MODAL de Bootstratp en FULLCALENDAR en el SISTEMA VETERINARIO (PHP y MySql) FullStack

Duración: 12 min

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

Descripción

🎬 Lección 60: Integración del Modal de Bootstrap en FullCalendar 🗓️

El objetivo de esta lección es implementar y mostrar dinámicamente el formulario de reserva (modal) al hacer clic en un día permitido del calendario, basándose en la lógica de restricción de días no laborables del video anterior.

1. Ajuste de la Lógica de Días Hábiles

El instructor refina el código JavaScript del evento dateClick para mostrar mensajes más específicos en la alerta de días no laborables:

Se utiliza una estructura if anidada para diferenciar si el día seleccionado es Sábado (= 5) o Domingo (= 6). [01:21]
Si el día es inhábil, se muestra la alerta correspondiente (ej. "No hay atención los días sábados").
La lógica de reserva (mostrar el modal) se ubica dentro de la cláusula else, asegurando que solo se ejecute si no es un día restringido. [04:09]

2. Implementación del Modal de Bootstrap

Se integra el componente Modal de Bootstrap para servir como la ventana de reserva:

Inclusión del HTML: Se copia el código HTML del modal de la documentación de Bootstrap y se pega al final del archivo PHP. [03:05]
Identificador: Se cambia el ID del modal a modal_reservas para facilitar su manipulación con jQuery. [03:37]
Activación Dinámica: Dentro del bloque else (días hábiles), se añade el código jQuery para abrir el modal:
JavaScript
$('#modal_reservas').modal('show');
Al hacer clic en un día hábil (Lunes a Viernes), el modal se abre inmediatamente. [04:49]

3. Mostrar el Día Seleccionado en el Modal

Para mejorar la experiencia del usuario, se personaliza el encabezado del modal para confirmar la fecha de la cita:

Espacio de Etiqueta: En el título del modal, se agrega una etiqueta <span> con el ID dia_de_la_semana. [07:46]
Array de Días de la Semana: Se define un array de JavaScript con los nombres de los días, donde el índice coincide con el número de día que devuelve FullCalendar (0 = Lunes, 1 = Martes, etc.). [09:56]
Carga de Contenido: Se utiliza jQuery para inyectar el nombre del día dentro de la etiqueta <span>:
JavaScript
// Inyecta el nombre del día en el modal $('#dia_de_la_semana').html(dias[numero_dia]);
De esta manera, el modal muestra dinámicamente: "Reserva tu cita para el día [Nombre del Día]". [11:29]

El instructor finaliza indicando que en la próxima lección se mostrará también la fecha exacta seleccionada y se comenzará a estructurar el formulario dentro del modal. [11:43]

Hilari Web