10.3. Eliminar eventos de la base de datos (PHP) - Piptonita/crear-calendario-FullCalendar GitHub Wiki

Vamos a ver como se eliminaría un evento de la base de datos.

  • Lo primero que tenemos que hacer es añadir un campo id al modal para recuperarlo luego en el formulario:
<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Calendario a Full</title>
    <link rel="stylesheet" href="vendor/fullcalendar/main.css">
    <link rel="stylesheet" href="src/css/calendar.css">
</head>
<body>
    <div id="calendar"></div>

    <div id="modal">
        <div class="containerModal column">
            <form id="form">
                <h2 id="tituloEntrada">Añadir evento</h2>
                <!-- creamos un input que contenga el ID del evento -->
                <input type="text" id="id" name="id">
                <hr> 
                <input type="text" id="titulo" name="titulo" placeholder="Título del evento">
                <div class="row">
                    <input type="text" id="fechaInicio" name="fechaInicio" placeholder="Fecha de inicio">
                    <input type="text" id="horaInicio" name="horaInicio" placeholder="Hora de inicio (opcional)">
                </div>
                <div class="row">
                    <input type="text" id="fechaFin" name="fechaFin" placeholder="Fecha de finalización (opcional)">
                    <input type="text" id="horaFin" name="horaFin" placeholder="Hora de finalización (opcional)">
                </div>
                <textarea id="descripcion" name="descripcion" placeholder="Descripción del evento"></textarea>
                <div class="row">
                    <label for="color">Color de la tarjeta:</label>
                    <input type="color" id="color" name="color" value="#00C217">
                    <label for="textColor">Color del texto:</label>
                    <input type="color" id="textColor" name="textColor" value="#0018CC">
                </div>
            </form>
            <div class="row">
                <button id="editar">Editar</button>
                <button id="crear">Guardar</button>
                <button id="borrar">Eliminar</button>
                <button id="cancelar">Cancelar</button>
            </div>
        </div>
    </div>
    
    <script src="vendor/fullcalendar/main.js"></script>
    <script src="vendor/fullcalendar/locales/es.js"></script>
    <script src="src/js/calendar.js"></script>
    <script src="src/js/calendarHelper.js"></script>
</body>
</html>
  • Ahora tenemos que definir en calendar.js que al hacer click en un evento eventClick nos rellene el valor de id:
var calendarDiv = document.getElementById('calendar');


var calendar = new FullCalendar.Calendar(calendarDiv, {
    locales: 'es', 
    initialView: 'dayGridMonth', 
    headerToolbar: { 
        left: 'prev,crearEntrada', 
        center: 'title', 
        right: 'next',

    },
    footerToolbar: {
        left: 'prevYear',    
        center: 'dayGridMonth,timeGridWeek,timeGridDay,listMonth,today',
        right: 'nextYear'
    }, 
    buttonText: {
        today: 'Hoy',
        month: 'Mes',
        week: 'Semana',
        day: 'Día',
        list: 'Listado'
    },
    customButtons: { 
        crearEntrada: {
            text: 'Nuevo evento', 
            click: ()=>{ 
                abrirModal('crear'); 
                vaciarCampos(); 
            }
        }
    }, 
    events: "./eventos.php", 
    dateClick: (info) => {
        abrirModal('crear');

        var fecha = document.getElementById('fechaInicio');
        fecha.value = info.dateStr; 
        
    },
    eventClick: (info) => {
        document.getElementById('tituloEntrada').innerHTML = info.event.title;
        // vamos a recuperar ahora el id de nuestro evento:
        document.getElementById('id').value = info.event.id;
        document.getElementById('titulo').value = info.event.title;
        fechaInicio = cortarFecha(info.event.startStr);
        document.getElementById('fechaInicio').value = fechaInicio[0];

        if(fechaInicio.length > 1){
            document.getElementById('horaInicio').value = fechaInicio[1];
        }

        fechaFin = cortarFecha(info.event.endStr);
        document.getElementById('fechaFin').value = fechaFin[0];

        if(fechaFin.length > 1){
            document.getElementById('horaFin').value = fechaFin[1];
        }

        if(info.event.extendedProps.description){
            document.getElementById('descripcion').value = info.event.extendedProps.description;
        }
        
        document.getElementById('color').value = info.event.backgroundColor;
        document.getElementById('textColor').value = info.event.textColor;

        abrirModal('editar');
    },
    editable: true
    
});

calendar.render();

Este campo Id es un campo que definimos como clave primaria de cada registro en la base de datos. Al recuperar los datos este queda reflejado en cada evento.

  • Y ahora vamos a enviar el formulario desde javascript con la opción 'borrar' editamos calendarHelper.js:
botonCrear = document.getElementById('crear');
botonCrear.addEventListener('click', ()=> {
    sendForm('crear');
    calendar.refetchEvents();
    cerrarModal();
    vaciarCampos();

});

botonEditar = document.getElementById('editar');
botonEditar.addEventListener('click', ()=>{
    cerrarModal();
    calendar.refetchEvents();
    vaciarCampos();
});

botonBorrar = document.getElementById('borrar');
botonBorrar.addEventListener('click', ()=>{
    cerrarModal();
    // le pasamos la opción de borrar:
    sendForm('borrar');
    calendar.refetchEvents();
    vaciarCampos();
})

var modal = document.getElementById('modal');

function abrirModal(permisos){
    if(permisos == 'crear'){
        document.getElementById('editar').style.cssText = "display: none";
        document.getElementById('crear').style.cssText = "display: block";
        document.getElementById('borrar').style.cssText = "display: none";
    }else{
        document.getElementById('editar').style.cssText = "display: block";
        document.getElementById('crear').style.cssText = "display: none";
        document.getElementById('borrar').style.cssText = "display: block";
    }

    modal.style.cssText = "display: flex;";
    window.setTimeout(()=>{
        modal.style.cssText += "opacity: 1; transition: 0.5s";
    }, 10);
}

function recuperarCampos(){
    // cambiamos el tipo de dato ahora por un objeto:
    var nuevoEvento = {};
    nuevoEvento.title = document.getElementById('titulo').value;
    if(document.getElementById('horaInicio').value != ''){
        nuevoEvento.start = document.getElementById('fechaInicio').value + " " + document.getElementById('horaInicio').value;
    }else{
        nuevoEvento.start = document.getElementById('fechaInicio').value;
    }
    nuevoEvento.end = document.getElementById('fechaFin').value + " " + document.getElementById('horaFin').value;
    nuevoEvento.description = document.getElementById('descripcion').value;
    nuevoEvento.color = document.getElementById('color').value;
    nuevoEvento.textColor = document.getElementById('textColor').value;

    return nuevoEvento;
}

var botonCerrar = document.getElementById('cancelar');
botonCerrar.addEventListener('click', ()=>{
    cerrarModal();
    vaciarCampos();
});

function cerrarModal(){
    modal.style.cssText += 'opacity: 0; transition: 0.5s';
    window.setTimeout(()=>{
        modal.style.cssText = 'display: none';
    }, 500);
}

function vaciarCampos(){
    // también tenemos que vaciar el nuevo campo:
    document.getElementById('id').value = '';
    document.getElementById('titulo').value = '';
    document.getElementById('fechaInicio').value = '';
    document.getElementById('horaInicio').value = '';
    document.getElementById('fechaFin').value = '';
    document.getElementById('horaFin').value = '';
    document.getElementById('descripcion').value = '';
    document.getElementById('color').value = '#00C217';
    document.getElementById('textColor').value = '#0018CC';
}

function cortarFecha(fecha){
    fecha = fecha.split("T");
    if(fecha[1]){
        fecha[1] = fecha[1].substr(0,8);
    }
    return fecha;
}

function sendForm(opcion){ 
        let data = new FormData(document.getElementById('form'));
        fetch('./eventos.php?accion=' + opcion, {
            method: 'POST', 
            body: data 
        })
        .then((respuesta)=>{
            if(respuesta.ok){
                return respuesta.text();
            }else{
                throw "Error en el envío del formulario";
            }
        })
        .then((texto)=>{
            //console.log(texto);
        })
        .catch((error)=>{
            //console.log(error);
        });
}
  • Ahora vamos a crear la acción de borrar en eventos.php:
<?php
    header('Content-Type: application/json');

    $pdo = new PDO("mysql:dbname=calendar;host=localhost;", "guillermo", "guillermo");
    $opcion = (isset($_GET['accion'])) ?$_GET['accion'] : 'leer';
    
    if($_POST){
        if($_POST['horaInicio'] != ''){
            $fechaInicio = $_POST['fechaInicio'] . 'T' . $_POST['horaInicio'];
        }else{
            $fechaInicio = $_POST['fechaInicio'];
        }
        
        if($_POST['horaFin'] != ''){
            $fechaFin = $_POST['fechaFin'] . 'T' . $_POST['horaFin'];
        }else{
            $fechaFin = $_POST['fechaFin'];
        }
    }


    switch($opcion){
        case 'crear':
            $sentenciaSQL = $pdo->prepare("INSERT INTO events(title,start,end,description,color,textColor) VALUES(:title, :start, :end, :description, :color, :textColor );");
            $respuesta = $sentenciaSQL->execute(array(
                "title" => $_POST['titulo'],
                "start" => $fechaInicio, // aqui y en end ponemos las fechas filtradas
                "end" => $fechaFin,
                "description" => $_POST['descripcion'],
                "color" => $_POST['color'],
                "textColor" => $_POST['textColor']
            ));
            echo json_encode($resultado);
            break;
        case 'borrar': // creamos una nueva acción
            // realizamos la consulta y la ejecutamos.
            $sentenciaSQL = $pdo->prepare("DELETE FROM events WHERE id=:id;");
            $respuesta = $sentenciaSQL->execute(array(
                "id" => $_POST['id']
            ));
            echo json_encode($respuesta);
            break;
        default: 
            $sentenciaSQL = $pdo->prepare("SELECT * FROM events");
            $sentenciaSQL->execute();
            $resultado= $sentenciaSQL->fetchALL(PDO::FETCH_ASSOC);
            echo json_encode($resultado);
        }

?>

Ahora ya podemos arrancar el servidor y borrar eventos del calendario perfectamente.

Solo faltaría cambiar el campo input del formulario que contiene el id por hidden.

⚠️ **GitHub.com Fallback** ⚠️