76 Ajustando el FULLCALENDAR para ESCOGER FECHAS de reservas en SISTEMA (PHP y MySql) FullStack
Duración: 9 minDescripción
🎬 Lección 76: Ajuste del FullCalendar para Escoger Fechas de Reservas 🗓️
El objetivo de esta lección es asegurar que el modal de reservas se inicialice correctamente (limpio) cada vez que el usuario hace clic en una nueva fecha, forzando la actualización del estado del calendario.
1. El Problema de Persistencia del Estado
El error detectado es que si un usuario hace clic en un día que tiene horarios reservados (que se pintan de rojo y se deshabilitan), y luego cierra el modal y hace clic en otro día sin refrescar la página, los horarios deshabilitados y pintados de rojo del día anterior persisten en el nuevo modal. [00:30] - [01:12]
2. Solución 1: Forzar el Refresco de Página
Para garantizar que el modal se inicialice desde cero, se elimina el botón de cancelar tradicional y se reemplaza por uno que fuerza la recarga de la página:
- Botón de Salida: Se modifica el botón de "Cancelar" dentro del modal para que sea un enlace (<a>) con un atributo href que apunta a la misma página. [01:19]
- Texto y Función: El botón se renombra a "Escoger otra fecha". Al hacer clic, la página se refresca, recargando el calendario y el script de verificación desde cero, lo que elimina el estado persistente de los horarios anteriores. [01:44] - [02:38]
3. Solución 2: Bloquear el Cierre Externo del Modal 🔒
Para obligar al usuario a usar el nuevo botón que incluye el refresco de página, se restringen las formas de salir del modal de Bootstrap:
- Propiedad data-backdrop: Se añade la propiedad data-backdrop="static" al código HTML del modal (#modal_reservas). Esto evita que el modal se cierre cuando el usuario hace clic fuera del área del diálogo. [03:38]
- Propiedad data-keyboard: Se añade la propiedad data-keyboard="false" al modal, lo que deshabilita la posibilidad de cerrar el modal presionando la tecla Escape. [03:59]
- Eliminación del Botón de Cierre Superior: Se elimina el botón de cierre (x) de la cabecera del modal (el header), asegurando que la única vía de escape sea el botón "Escoger otra fecha". [06:55]
4. Próximo Paso: Validación de Fechas Pasadas ⛔
El instructor identifica una mejora de usabilidad pendiente: validar que no se puedan reservar citas en fechas anteriores a la fecha actual, ya que no tiene sentido. [08:47] - [09:28]
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! ❤️
