Usare AJAX con jQuery FullCalendar

FullCalendar è un ottimo e completo calendario usabile attraverso jQuery; una dimostrazione la potete alla pagina strumenti di questo stesso blog.

Uno dei punti di forza è che può prendere gli eventi del giorno da un database usando AJAX.

Oggi vediamo proprio questo.

Cominciamo con l'inclusione delle librerie che ci servono:

<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<link rel="stylesheet" type="text/css" href="http://cdnjs.cloudflare.com/ajax/libs/fullcalendar/2.1.1/fullcalendar.min.css">
<script defer type="text/javascript" src="js/moment.js"></script>
<script defer type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/fullcalendar/2.1.1/fullcalendar.min.js"></script>

Come vedete è richiesto jQuery, la libreria moment.js e files per FullCalendar.

Questo il semplice HTML, con due righe di CSS:

<style>
    #script-warning { display: none;background: #eee;border-bottom: 1px solid #ddd;padding: 0 10px;
                  line-height: 40px;text-align: center;font-weight: bold;font-size: 12px;color: red; }
    #loading { display: none;position: absolute;top: 10px;right: 10px; }
</style>
<div id="script-warning"><h2>ERRORE</h2></div>
<div id="loading"><h2>Loading...</h2></div>
<div id="calendar"></div>

Per inizializzare la libreria:

<script>
    $(function () {
            $('#calendar').fullCalendar({
                header: {
                    left: 'prev,next today',
                    center: 'title',
                    right: 'month,agendaWeek,agendaDay'
                },
                defaultDate: new Date(),
                editable: false,
                events: {
                    url: "calendar.php",
                    error: function () {
                        $('#script-warning').show();
                    }
                },
                loading: function (bool) {
                    $('#loading').toggle(bool);
                }
            });
    });
</script>

Abbiamo indicato di prendere i dati da un file PHP, che restituirà i dati in formato JSON:

$rows = array();
foreach ($articoli as $a) {
    $rows[] = array(
        'start' => date('Y-m-d', strtotime($a['a_creazione'])),
        'title' => $a['a_titolo'],
        'id' => $a['a_id'],
        'alias' => $a['a_alias']
    );
}
echo json_encode($rows);

E questo è quanto!

Enjoy!