10.2. Agregar eventos a la base de datos (PHP) - Piptonita/crear-calendario-FullCalendar GitHub Wiki

Vamos a ver como añadir los eventos a la base de datos.

  • Comenzamos editando index.html ya que vamos a meter los datos en una etiqueta form y pasarle unos campos name:
<!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>
                <hr> <!-- creamos una etiqueta form con el id form y le pasamos todos los input y buttons -->
                <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>
    <!-- Importamos el archivo nuevo -->
    <script src="src/js/calendarHelper.js"></script>
</body>
</html>
  • Lo siguiente que vamos a hacer es trabajar con el calendarHelper.js para crear una promesa y enviar la información al archivo eventos.php:
botonCrear = document.getElementById('crear');
botonCrear.addEventListener('click', ()=> {
    console.log(recuperarCampos());
    // vamos a enviar el formulario al backend para almacenar el evento:
    sendForm('crear');
    // cambiamos el addEvents por refetchEvents que ahora nos funcionará perfectamente:
    calendar.refetchEvents();
    cerrarModal();
    vaciarCampos();

});

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

botonBorrar = document.getElementById('borrar');
botonBorrar.addEventListener('click', ()=>{
    cerrarModal();
    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(){
    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;
}

// creamos la función que enviará el formulario:
function sendForm(opcion){ // le pasamos un parametro para establecer que tipo de acción hará esta petición
        // recuperamos los campos de formulario:
        let data = new FormData(document.getElementById('form'));
        // creamos la promesa que apunta hacia la ruta del archivo:
        fetch('./eventos.php?accion=' + opcion, {
            method: 'POST', // usaremos el metodo POST
            body: data // y le pasamos los datos del formulario.
        })
        .then((respuesta)=>{
            if(respuesta.ok){
                // si todo va bien veremos como respuesta el json: 
                return respuesta.text();
            }else{
                throw "Error en el envío del formulario";
            }
        })
        .then((texto)=>{
            //console.log(texto);
        })
        .catch((error)=>{
            //console.log(error);
        });
}
  • Y ahora vamos a crear un switch para comparar por parámetros el tipo de consulta que nos va a llegar y realizar la mas oportuna según opción editamos eventos.php:
<?php
    header('Content-Type: application/json');

    $pdo = new PDO("mysql:dbname=calendar;host=localhost;", "guillermo", "guillermo");
    // recuperamos de la url la opción:
    $opcion = (isset($_GET['accion'])) ?$_GET['accion'] : 'leer';
    
    // vamos a filtrar las fechas que entren de POST:
    if($_POST){
        // preguntamos si no esta vacio para añadir la hora:
        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'];
        }
    }


    // hacemos un switch para comprobar que opción nos ha llegado y devolver lo que sea oportuno:
    switch($opcion){
        case 'crear':
            // preparamos una consulta de inserción
            $sentenciaSQL = $pdo->prepare("INSERT INTO events(title,start,end,description,color,textColor) VALUES(:title, :start, :end, :description, :color, :textColor );");
            // y ahora la ejecutamos pasandole todos los campos que nos llegan por post:
            $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;
        default: // en default vamos a psara la consulta select que teníamos ya que es lo que hará siempre por defecto:
            $sentenciaSQL = $pdo->prepare("SELECT * FROM events");
            $sentenciaSQL->execute();
            $resultado= $sentenciaSQL->fetchALL(PDO::FETCH_ASSOC);
            echo json_encode($resultado);
        }

?>

Y con estos cambios arrancamos el servidor PHP con php -S localhost:8000 y deberíamos poder guardar eventos sin que estos se pierdan.

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