Lección: 62 Formulario de reservas en FULLCALENDAR en el SISTEMA VETERINARIO (PHP y MySql) FullStack

62 Formulario de reservas en FULLCALENDAR en el SISTEMA VETERINARIO (PHP y MySql) FullStack

Duración: 10 min

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

Descripción

🎬 Lección 62: Formulario de Reservas en FullCalendar 📝

El objetivo principal es implementar la transición entre el modal de selección de horario y el modal de formulario de reserva, y estructurar los campos que se guardarán en la tabla de citas.

1. Transición entre Modales

Se configura el código para que, al seleccionar un horario, se cierre el modal de horarios y se abra el modal del formulario:

Cierre del Modal de Horarios: Se utiliza el atributo de Bootstrap data-bs-dismiss="modal" en cada uno de los ocho botones de horario (btn_h1 al btn_h8). Esta propiedad asegura que el modal que contiene los horarios (modal_reservas) se cierre automáticamente al hacer clic en un turno. [05:12]
Apertura del Modal de Formulario: Se reemplaza el alert temporal de la lección anterior por el código jQuery para mostrar el segundo modal (modal_formulario).
JavaScript
$('#modal_formulario').modal('show');
Al hacer clic en un turno, el modal de horarios se cierra y el modal de formulario se abre. [02:47]

2. Estructura del Formulario de Reserva

Se define el formulario (usando el tag <form>) dentro del modal_formulario, estructurado con un diseño de dos columnas (col-md-6) de Bootstrap, basándose en los campos de la tabla reservas de MySQL:

Campo	Propósito	Elemento HTML	Notas
Nombre de la Mascota	Recoger el nombre de la mascota.	Input de tipo text.	Ocupa seis columnas. [07:08]
Tipo de Servicio	Seleccionar el servicio a reservar.	Select (ComboBox) con opciones.	Se utiliza un select para predefinir los servicios disponibles (Ej: "Lavado", "Servicio 2", "Servicio 3"). [08:21]
Fecha de Reserva	Mostrar la fecha seleccionada.	Input de tipo text.	Este campo no debería ser modificable por el usuario, ya que la fecha se selecciona previamente en el calendario. [10:04]

3. Próximo Paso

El video concluye señalando que el siguiente paso fundamental será pasar la fecha y la hora seleccionadas desde el calendario (que ya se obtuvieron en el script) al campo "Fecha de Reserva" del nuevo formulario. [10:12]

Hilari Web