10.1. Crear la base de datos y mostrar eventos (PHP) - Piptonita/crear-calendario-FullCalendar GitHub Wiki

Vamos a crear la base de datos, añadiremos algunos registros y los mostraremos en el calendario.

• Creamos una base de datos a la que llamaremos calendar y en ella la siguiente tabla:

CREATE TABLE `events` (
  `id` int(11) PRIMARY KEY AUTO_INCREMENT,
  `title` varchar(255) NOT NULL,
  `start` varchar(50),
  `end` varchar(50),
  `description` varchar(255),
  `color` varchar(7),
  `textColor` varchar(7)
) ENGINE=InnoDB DEFAULT CHARSET=utf8;

• Ahora añadimos algunos registros a la base de datos para poder mostrarlos en el calendario:

INSERT INTO events(title, start, end, description, color, textColor) VALUES ('Evento de prueba 1', '2020-09-01T12:00:00', '2020-09-05T12:00:00', 'Esto es un evento de prueba', '#F0F0F0', '#000000');
INSERT INTO events(title, start, end, description, color, textColor) VALUES ('Evento de prueba 2', '2020-09-07T12:00:00', '', 'Esto es otro evento de prueba', '#F0F0F0', '#000000');
INSERT INTO events(title, start, end, description, color, textColor) VALUES ('Evento de prueba 3', '2020-09-08', '', 'Esto es otro evento de prueba mas', '#F0F0F0', '#000000');

• vamos a crear un archivo en la raiz llamado eventos.php que se encargará de interactuar con la base de datos:

<?php
    // vamos a establecer que este archivo muestre los datos como un JSON:
    header('Content-Type: application/json');
    // ahora conectamos con la base de datos:
    $pdo = new PDO("mysql:dbname=calendar;host=localhost;", "guillermo", "guillermo");
    // preparamos la consulta:
    $sentenciaSQL = $pdo->prepare("SELECT * FROM events");
    // la ejecutamos:
    $sentenciaSQL->execute();
    // guardamos el resultado en una variable:
    $resultado= $sentenciaSQL->fetchALL(PDO::FETCH_ASSOC);
    // y lo codificamos en JSON a la vez que lo imprmimos:
    echo json_encode($resultado);
?>

Ahora si ejecutamos php -S localhost:8000 y nos vamos a la ruta http://localhost:8000/eventos.php podremos ver un JSON con las fechas.

• Ahora usamos esta ruta para reemplazar el valor de events en el calendario, para ello editamos calendar.js:

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(); 
            }
        }
    }, // al pasarle directamente la ruta del json events lo entenderá y los imprimirá:
    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;
        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();

Y con esto ya podemos ver los eventos que hay guardados en la base de datos.