Buscar e renderizar eventos de MySQL para FullCalendar.js

Este pequeno tutorial irá ensinar a você os fundamentos da busca de eventos do MySQL e renderizar os dados com FullCalendar.js usando PHP, Javascript e PDO. Vamos fazer isso em 2 etapas fáceis.

1. Crie um arquivo html que produzirá o resultado final:

calendar.html

<div id="calendar"></div>

$(document).ready(function() {
    var calendar = $('#calendar').fullCalendar({
        defaultView: 'agendaWeek',
        events: {
            url: 'json-events-feed.php',
            type: 'POST', // Send post data
            error: function() {
                alert('There was an error while fetching events.');
            }
        }
    });
});

1. Crie um arquivo php que ecoará nossos eventos no formato json:

events.php

try {

    // Connect to database
    $connection = new PDO($url, $username, $password);

    // Prepare and execute query
    $query = "SELECT * FROM events";
    $sth = $connection->prepare($query);
    $sth->execute();

    // Returning array
    $events = array();

    // Fetch results
    while ($row = $sth->fetch(PDO::FETCH_ASSOC) {

        $e = array();
        $e['id'] = $row['id'];
        $e['title'] = "Lorem Ipsum";
        $e['start'] = $row['start'];
        $e['end'] = $row['end'];
        $e['allDay'] = false;

        // Merge the event array into the return array
        array_push($events, $e);

    }

    // Output json for our calendar
    echo json_encode($events);
    exit();

} catch (PDOException $e){
    echo $e->getMessage();
}

Claro, há espaço para otimização e personalização adicional. Confira a API para a lista completa de recursos.

Diverta-se!