Lección: 61 Definir los HORARIOS de reservas en FULLCALENDAR en el SISTEMA VETERINARIO(PHPyMySql)FullStack

61 Definir los HORARIOS de reservas en FULLCALENDAR en el SISTEMA VETERINARIO(PHPyMySql)FullStack

Duración: 11 min

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

Descripción

🎬 Lección 61: Definición de los Horarios de Reserva en FullCalendar ⏰

El objetivo de esta lección es estructurar el modal de Bootstrap para que muestre la información completa del día seleccionado y definir los botones que representan los turnos disponibles para la reserva.

1. Concatenación de la Fecha Completa

Se actualiza el encabezado del modal para que, además de mostrar el día de la semana (Lunes, Martes, etc.), también muestre la fecha completa seleccionada (año, mes y día):

Día y Fecha: Dentro del script de dateClick, se concatena la variable que contiene el nombre del día (dias[numero_dia]) con la variable info.dateStr (que contiene la fecha en formato YYYY-MM-DD). [00:52]
Resultado: El modal ahora muestra: "Reserva tu cita para el día [Día de la Semana] YYYY-MM-DD". [01:03]

2. Definición de los Horarios de Reserva

Se establece la estructura de los horarios de atención del sistema de veterinaria dentro del cuerpo del modal:

Estructura: Se utiliza un diseño de dos columnas (col-md-6) de Bootstrap para organizar los turnos en "Turno Mañana" y "Turno Tarde". [01:42]
Turnos de 1 Hora: El instructor opta por definir turnos de una hora cada uno (en lugar de dos horas) para maximizar las opciones de reserva. [06:43]
Horarios Definidos:
- Turno Mañana: De 8:00 a 12:00 (8:00 a 9:00, 9:00 a 10:00, 10:00 a 11:00, 11:00 a 12:00).
- Turno Tarde: De 14:00 a 18:00 (2:00 PM a 3:00 PM, 3:00 PM a 4:00 PM, 4:00 PM a 5:00 PM, 5:00 PM a 6:00 PM). [07:18]

3. Identificación de los Botones de Horario

Para gestionar la selección de cada turno, se asigna un ID único a cada botón de horario:

Identificadores: Los botones se nombran secuencialmente: btn_h1 (8:00 a 9:00), btn_h2 (9:00 a 10:00), hasta btn_h8 (17:00 a 18:00). [08:48]
Lógica Futura: El instructor explica que estos IDs se usarán más adelante para cambiar el color o deshabilitar el botón si el horario ya está reservado. [07:41]

4. Preparación para el Formulario de Cita

Se introduce la lógica para manejar el clic en un turno de horario:

Segundo Modal: Se crea un segundo modal de Bootstrap llamado modal_formulario, que será donde residirá el formulario final de registro de la cita. [09:11]
Función click de jQuery: Se escribe una función en JavaScript que detecta el clic en el botón con ID #btn_h1 (el primer horario). [09:48]
Transición: Al hacer clic en un turno, se muestra una alerta (temporalmente) para confirmar que la detección del clic es correcta. En el próximo video, esta alerta se reemplazará por el código para abrir el modal_formulario. [11:00]

Hilari Web