PLC Core

inicializarPlanificador({
    // ... otras opciones
    alClicEnEvento: (evento) => {
        // Lógica de Vanilla JS para poblar y abrir un modal/ventana:
        document.getElementById('modalDetalleTitulo').textContent = evento.description;
        document.getElementById('modalDetalleFecha').textContent = evento.date;
        document.getElementById('modalDetalleHora').textContent = evento.time;
        document.getElementById('modalDetalleDesc').textContent = evento.details;
        
        // Muestra el modal (asumiendo que tiene un ID 'miModalDetalle')
        document.getElementById('miModalDetalle').style.display = 'block'; 
    },
});

<div id="miModalDetalle" style="display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.5);">
    <div style="background: white; margin: 10% auto; padding: 20px; width: 80%;">
        <h3 id="modalDetalleTitulo"></h3>
        <p>Fecha: <span id="modalDetalleFecha"></span></p>
        <p>Hora: <span id="modalDetalleHora"></span></p>
        <p>Detalles: <span id="modalDetalleDesc"></span></p>
        <button onclick="document.getElementById('miModalDetalle').style.display='none';">Cerrar</button>
    </div>
</div>

// Asumimos que tiene un array 'eventosGlobales' fuera de la función de inicialización.
let eventosGlobales = [...eventosIniciales]; 
let planificadorInstancia; // Variable para almacenar la instancia del planificador

// Función principal para inicializar/re-inicializar
function cargarPlanificador() {
    planificadorInstancia = inicializarPlanificador({
        node: 'mi-planificador',
        eventos: eventosGlobales, // Usamos el array global
        
        // Callback para el botón '+ Nuevo'
        onNewEvent: (fechaSeleccionada) => {
            // 1. Pre-pobla la fecha en el formulario
            document.getElementById('formFecha').value = fechaSeleccionada;
            
            // 2. Muestra el modal del formulario
            document.getElementById('miModalForm').style.display = 'block';
        },
        // ... otros callbacks
    });
}


// ** Lógica para manejar el envío del formulario **
document.getElementById('miFormulario').addEventListener('submit', function(e) {
    e.preventDefault();
    
    const nuevoEvento = {
        date: document.getElementById('formFecha').value,
        time: document.getElementById('formHora').value,
        description: document.getElementById('formTitulo').value,
        details: document.getElementById('formDescripcion').value,
        category: document.getElementById('formCategoria').value,
    };

    // 1. Agregar el nuevo evento al array global
    eventosGlobales.push(nuevoEvento);

    // 2. Cerrar el modal
    document.getElementById('miModalForm').style.display = 'none';

    // 3. ¡MÁS IMPORTANTE! Vuelve a cargar el calendario con la lista actualizada.
    // Esto borra el viejo y dibuja el nuevo, incluyendo el evento recién creado.
    cargarPlanificador(); 
    
    alert('Evento creado y calendario actualizado.');
});


// Llamar al inicio para cargar la instancia
cargarPlanificador();