10.4. Actualizar eventos en la base de datos (PHP) - Piptonita/crear-calendario-FullCalendar GitHub Wiki

Vamos a actualizar eventos en la base de datos.

• Para empezar editamos el archivo calendarHelper.js para añadir el envio del formulario con el permiso editar:

botonCrear = document.getElementById('crear');
botonCrear.addEventListener('click', ()=> {
    sendForm('crear');
    calendar.refetchEvents();
    cerrarModal();
    vaciarCampos();

});

botonEditar = document.getElementById('editar');
botonEditar.addEventListener('click', ()=>{
    cerrarModal();
    // le pasamos el envio del formulario con el permiso editar:
    sendForm('editar');
    calendar.refetchEvents();
    vaciarCampos();
});

botonBorrar = document.getElementById('borrar');
botonBorrar.addEventListener('click', ()=>{
    cerrarModal();
    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(){
    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(){
    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 actualizamos el archivo eventos.php para crear la consulta que edite la base de datos:

<?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, 
                "end" => $fechaFin,
                "description" => $_POST['descripcion'],
                "color" => $_POST['color'],
                "textColor" => $_POST['textColor']
            ));
            echo json_encode($resultado);
            break;
        case 'borrar':
            $sentenciaSQL = $pdo->prepare("DELETE FROM events WHERE id=:id;");
            $respuesta = $sentenciaSQL->execute(array(
                "id" => $_POST['id']
            ));
            echo json_encode($respuesta);
            break;
        case 'editar': // creamos la opción editar:
            // le pasamos una consulta de actualización y la ejecutamos enviando todos los campos como en añadir:
            $sentenciaSQL = $pdo->prepare("UPDATE events SET title=:title,start=:start,end=:end,description=:description,color=:color,textColor=:textColor WHERE id=:id;");
            $respuesta = $sentenciaSQL->execute(array(
                "id" => $_POST['id'],
                "title" => $_POST['titulo'],
                "start" => $fechaInicio, 
                "end" => $fechaFin,
                "description" => $_POST['descripcion'],
                "color" => $_POST['color'],
                "textColor" => $_POST['textColor']
            ));
            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 editar eventos, nuestro calendario esta totalmente funcional.