I cookie permettono il funzionamento di alcuni servizi di questo blog. Utilizzando questi servizi, accetti l'utilizzo dei cookie da parte nostra. Ok Rifiuta

Un ottimo calendario JQuery: Full Calendar

Sviluppando un sito web o un software web-based, di solito, abbiamo il bisogno di poter inserire un bel calendario che gestica degli eventi, oppure faccia da agenda di impegni per un utente. Realizzare un calendario da zero è abbastanza complicato, a causa del calcolo dei giorni mensili, del giorno di inizio di ogni mese ecc. Per ovviare velocemente a questo problema, nella rete Internet ci sono ottimi plugin dedicati allo scopo, ma il migliore è un plugin JQuery chiamato Full Calendar.

image1

Questo calendario integra una bellissima grafica e tutta la parte controller lato client che serve per gestire eventi o impegni. Utilizza molto AJAX per caricare gli eventi, magari da un database che abbiamo su un server remoto. E' perfettamente editabile e personalizzabile e ha già a disposizione determinate funzioni in Javascript per realizzare qualsiasi modifica agli eventi, anche tramite drag and drop. Vediamo di seguito un esempio per gestire eventi:

Innanzitutto mettiamo nel punto della nostra pagina HTML in cui vogliamo appaia il calendario, questo codice HTML

<div id='calendar'></div>

Ora inseriamo tra i tag head della nostra pagina lo script min del plugin (scaricabile da qui):

<script type="text/javascript" src="js/fullcalendar.min.js"></script>

A questo punto realizziamo lo script che inizializza il nostro calendario prendendo gli eventi da uno script lato server (in PHP in questo caso) codificati in un array JSON, in questo modo:

 $(document).ready(function() {
    
        $('#calendar').fullCalendar({
                        header: {
                            left: 'prev,next today',
                            center: 'title',     
                            right: 'month,agendaWeek'
                        },
            editable: false,
            
            events: "json-eventi.php", //script array JSON
            
            loading: function(bool) {
                if (bool) $('#loading').show();
                else $('#loading').hide();
            }
            
        });
        
    });

Il codice precedente è lato client, ma facciamo un esempio di come potrebbe essere lo script json-eventi.php:

<?php

include("funzioni.php");
/* l'array per full calendar deve avere questi campi personalizzabili

array(
            'id' => 111,
            'title' => "Event1",
            'start' => "$year-$month-10",
            'url' => "http://yahoo.com/"
        )*/
$result=calendar();//calendar è una funzione che restituisce l'array JSON formattato come sopra
echo json_encode($result);

?>

A questo punto il calendario apparirà nei tag div iniziali. Sul sito del plugin potrete vedere una ricca documentazione su qualsiasi operazione che dovrete fare con il calendario. Inoltre può essere integrato anche con la piattaforma Google Calendar, calendario molto usato da varie aziende, con cui potrete sincronizzare i vostri eventi.

Seguici su Facebook

Seguici su Google+

Renzo Cappelli

miafoto

Sono un appassionato di informatica, mi dedico allo sviluppo web e alla gestione dei sistemi web-based: realizzo siti e progetto software gestionale per privati e aziende. Ho tanta passione per tutto quello che riguarda il web e le nuove tecnologie, lavoro bene in team e collaboro con aziende e professionisti di settore.

Commenti

NON CI SONO ANCORA COMMENTI.

Lascia il tuo commento