42. Validar cruce de fechas - parte 1

Visualización de Fechas Ocupadas en un Calendario con FullCalendar

En este artículo, profundizaremos en cómo mostrar fechas ocupadas en un calendario interactivo, diferenciando claramente entre las fechas seleccionadas por el usuario y las que están ocupadas según la base de datos.

Los Dos Tipos de Eventos Clave

1. Evento del Usuario (Selección Actual)

Este evento representa las fechas que el usuario está intentando reservar:

javascript

{
    start: fechaIngreso,       // Fecha de inicio seleccionada por el usuario
    end: fechaSalida,          // Fecha de fin seleccionada por el usuario
    rendering: 'background',   // Se muestra como fondo (no como evento puntual)
    color: '#FFCC29'           // Color amarillo para distinguir la selección actual
}

Características:

• Color amarillo (#FFCC29): Un color llamativo pero no alarmante, ideal para mostrar la selección actual

• Fondo (background): Se muestra como un bloque de color que abarca todo el rango de fechas

• Datos dinámicos: fechaIngreso y fechaSalida son variables que contienen lo que el usuario ha seleccionado en el formulario

2. Evento de la Base de Datos (Fechas Ocupadas)

Este evento muestra las fechas que ya están reservadas según los registros de la base de datos:

javascript

{
    start: respuesta[i]["fecha_ingreso"],  // Fecha de inicio ocupada (desde BD)
    end: respuesta[i]["fecha_salida"],     // Fecha de fin ocupada (desde BD)
    rendering: 'background',              // También se muestra como fondo
    color: '#847059'                      // Color marrón para fechas ocupadas
}

Características:

• Color marrón (#847059): Un color más neutro pero visible, que contrasta con la selección del usuario

• Múltiples instancias: Como está dentro de un bucle, puede mostrar múltiples rangos ocupados

• Datos dinámicos: respuesta[i] contiene cada registro de la base de datos, donde i es el índice del bucle

Visualización Conjunta

Cuando ambos tipos de eventos se muestran juntos en el calendario:

1. El usuario ve inmediatamente:

   • Su selección actual (en amarillo brillante)

   • Los periodos ocupados (en marrón)

   • Los solapamientos (cuando su selección coincide con fechas ocupadas)

2. Ventajas de este enfoque:

   • Intuitivo: Colores distintos para diferentes tipos de información

   • Prevención de errores: Evita que el usuario intente reservar fechas no disponibles

   • Feedback inmediato: No necesita enviar el formulario para ver disponibilidad

Mejora Potencial

Actualmente, el código recrea el calendario en cada iteración del bucle. Una versión optimizada podría ser:

javascript

var eventos = [{
    start: fechaIngreso,
    end: fechaSalida,
    rendering: 'background',
    color: '#FFCC29'
}];

for(var i = 0; i < respuesta.length; i++) {
    eventos.push({
        start: respuesta[i]["fecha_ingreso"],
        end: respuesta[i]["fecha_salida"],
        rendering: 'background',
        color: '#847059'
    });
}

$('#calendar').fullCalendar({
    header: {
        left: 'prev',
        center: 'title',
        right: 'next'
    },
    events: eventos
});

Cómo Mostrar Fechas Disponibles y Reservadas en un Calendario (Paso a Paso)
En este post, explicaré cómo mostrar fechas seleccionadas por el usuario y fechas ya reservadas en una base de datos, evitando que se crucen. Usaremos JavaScript y FullCalendar para lograrlo.
🔹 Paso 1: Definir un Array para Almacenar Todos los Eventos
Primero, necesitamos un array donde guardaremos todas las fechas importantes:
Las fechas que el usuario quiere reservar.
Las fechas que ya están ocupadas (según la base de datos).
javascript
var totalEventos = [];  // Array vacío para almacenar eventos
📌 ¿Por qué?
Si no usamos un array, solo se mostraría una reserva a la vez (y necesitamos ver todas).
🔹 Paso 2: Configurar el Calendario Fuera del Bucle
Inicialmente, el calendario se generaba dentro del bucle for, lo que hacía que solo mostrara una reserva.
✅ Solución: Lo movemos fuera del bucle para que muestre todas las reservas.
javascript
else {
    for(var i = 0; i < respuesta.length; i++) {
        // Aquí procesaremos cada reserva
    }

    // El calendario se genera FUERA del bucle
    $("#calendar").fullCalendar({
        header: {
            left: 'prev',
            center: 'title',
            right: 'next'
        },
        events: []  // Por ahora vacío, luego lo llenaremos
    });
}
🔹 Paso 3: Agregar Eventos al Array (Dentro del Bucle)
Ahora, dentro del for, agregamos cada reserva al array totalEventos.
Cada evento tiene:
start: Fecha de inicio.
end: Fecha de salida.
rendering: 'background': Para que aparezca como fondo (no como evento clickeable).
color: Para diferenciar fechas seleccionadas (amarillo) y ocupadas (café).
javascript
else {
    for(var i = 0; i < respuesta.length; i++) {
        totalEventos.push(
            {
                "start": fechaIngresso,  // Fecha que el usuario quiere reservar
                "end": fechaSalida,
                "rendering": 'background',
                "color": '#FFCC29'  // Amarillo (fechas seleccionadas)
            },
            {
                "start": respuesta[i]["fecha_ingreso"],  // Fecha ocupada en BD
                "end": respuesta[i]["fecha_salida"],
                "rendering": 'background',
                "color": '#847059'  // Café (fechas ocupadas)
            }
        );
    }
}
📌 ¿Qué hace esto?
Por cada reserva en la base de datos, agrega dos bloques de fechas:
Las que el usuario quiere reservar (amarillo).
Las que ya están ocupadas (café).
🔹 Paso 4: Pasar el Array al Calendario
Ahora, usamos totalEventos para llenar el calendario.
javascript
$("#calendar").fullCalendar({
    header: {
        left: 'prev',
        center: 'title',
        right: 'next'
    },
    events: totalEventos  // Aquí pasamos TODAS las fechas
});
📌 ¿Por qué esto funciona mejor?
Antes, el calendario solo recibía una reserva a la vez.
Ahora, recibe todas las reservas en un solo array.
🔹 Paso 5: Resultado Final
Al juntar todo, el código queda así:
javascript
var totalEventos = [];  // Paso 1: Array para eventos

else {
    for(var i = 0; i < respuesta.length; i++) {
        // Paso 3: Agregar cada reserva al array
        totalEventos.push(
            {
                "start": fechaIngresso,
                "end": fechaSalida,
                "rendering": 'background',
                "color": '#FFCC29'
            },
            {
                "start": respuesta[i]["fecha_ingreso"],
                "end": respuesta[i]["fecha_salida"],
                "rendering": 'background',
                "color": '#847059'
            }
        );
    }

    // Paso 4: Generar el calendario con TODOS los eventos
    $("#calendar").fullCalendar({
        header: {
            left: 'prev',
            center: 'title',
            right: 'next'
        },
        events: totalEventos  // Paso 6: Array completo
    });
}
🔹 Paso 6: ¿Qué Logramos?
✅ Visualización clara:
Fechas seleccionadas (amarillo).
Fechas ocupadas (café).
✅ Evita cruces de fechas:
Si el usuario elige una fecha ocupada, se verá en café y podrá elegir otra.
✅ Múltiples reservas:
Ahora el calendario muestra todas las reservas, no solo una.
📢 Conclusión
Con estos 6 pasos, logramos un sistema que:
1️⃣ Almacena todas las fechas en un array.
2️⃣ Muestra fechas seleccionadas y ocupadas en colores distintos.
3️⃣ Evita reservas duplicadas al comparar con la base de datos.