43. Validar cruce de fechas - parte 2

 

 Validación de Cruce de Fechas (Parte 2): Lógica para Detectar Conflictos

En esta segunda parte, profundizamos en cómo detectar y manejar conflictos entre las fechas seleccionadas por el usuario y las reservas existentes en la base de datos. Incluye correcciones de código y explicación detallada de las imágenes proporcionadas.

---

🔍 Problema Central

Cuando un usuario intenta reservar una habitación, debemos validar si las fechas elegidas chocan con reservas ya existentes. Para esto, analizamos dos escenarios críticos:

1. Fecha de ingreso coincide exactamente con una reserva existente.

2. Rango de fechas se solapa parcial o totalmente con reservas previas.

---

📌 Implementación en Código

1. Primer Escenario: Fechas de Ingreso Idénticas

Si la fecha de ingreso del usuario (fechaIngreso) coincide con alguna fecha de ingreso en la base de datos (respuesta[i]["fecha_ingreso"]), la habitación NO está disponible.

Código Corregido (Imagen 1)

javascript

for (var i = 0; i < respuesta.length; i++) {
    if (fechaIngreso == respuesta[i]["fecha_ingreso"]) {
        opcion[i] = false; // Conflicto detectado
    } else {
        opcion[i] = true;  // Sin conflicto
    }
}

Explicación:

• Recorremos todas las reservas existentes (respuesta).

• Si hay coincidencia exacta, marcamos opcion[i] = false (no disponible).

---

2. Segundo Escenario: Validación de Disponibilidad

Usamos un array validarDisponibilidad para determinar si alguna de las fechas está ocupada.

Código Mejorado (Imagen 2)

javascript

let validarDisponibilidad = []; // Array para almacenar resultados

for (var i = 0; i < respuesta.length; i++) {
    if (opcion[i] == false) {
        validarDisponibilidad[i] = false; // Habitación ocupada
    } else {
        validarDisponibilidad[i] = true;  // Habitación disponible
    }
}

¿Qué hace?

• Si opcion[i] es false (conflicto), actualizamos validarDisponibilidad[i] a false.

• Si no hay conflicto, se marca como true.

---

3. Pintado Condicional en el Calendario

Dependiendo de validarDisponibilidad, mostramos:

• Fechas ocupadas (color marrón #847059).

• Fechas disponibles (color amarillo #FFCC29).

Código Final (Imagen 4)

javascript

if (!validarDisponibilidad[i]) { // Si NO hay disponibilidad
    totalEventos.push({
        start: respuesta[i]["fecha_ingreso"], 
        end: respuesta[i]["fecha_salida"], 
        rendering: 'background', 
        color: '#847059' // Marrón = ocupado
    });
} else { // Si SÍ hay disponibilidad
    totalEventos.push({
        start: fechaIngreso, 
        end: fechaSalida, 
        rendering: 'background', 
        color: '#FFCC29' // Amarillo = disponible
    });
}

Key Points:

• Usamos rendering: 'background' para evitar superposiciones visuales.

• El break detiene el ciclo al primer conflicto detectado.

---

🚨 Errores Comunes y Soluciones

1. Ciclo no se detiene:

   • Asegúrate de incluir break cuando validarDisponibilidad[i] == false.

   javascript

   if (!validarDisponibilidad[i]) {
       break; // Detener el ciclo
   }

2. Transparencia no deseada en eventos:

   • Agrega opacity: 1 en CSS:

   css

   .fc-event { opacity: 1 !important; }

3. Fechas no se pintan:

   • Verifica que totalEventos sea un array global:

   javascript

   let totalEventos = []; // Fuera del ciclo for

---

📌 Ejemplo Práctico

• Usuario selecciona: 21 al 24 de abril.

• BD tiene reserva: 21 al 23 de abril.

• Resultado:

  • Mensaje: "Lo sentimos, no hay disponibilidad para esas fechas".

  • Calendario: Muestra fechas ocupadas en marrón.

https://ejemplo.com/calendario-conflicto.png

---

🔜 Próximos Pasos

En la Parte 3, cubriremos:
✅ Validación de rangos solapados (ej: reserva del 16-19 vs. usuario 17-19).
✅ Mensajes dinámicos según el tipo de conflicto.
✅ Optimización de consultas SQL para mejorar rendimiento.

---

#JavaScript #PHP #FullCalendar #BaseDeDatos #DesarrolloWeb

¿Te gustaría el código completo? ¡Déjalo en los comentarios! 👇

Bonus: Si usas React/Vue, puedes adaptar esta lógica con hooks como useEffect.