Questa pagina è stata tradotta dall'API Cloud Translation.

CalVis: Creating a customized AJAX UI for your Google Calendar

Austin Chau, Google Developer Programs
Giugno 2008

Introduzione
Utilizzo di CalVis
Personalizzare lo stile
Demo
Contribuisci
Risorse

Nota: questo è un progetto open source avviato da un Googler e non una libreria supportata ufficialmente. Invitiamo tutti gli interessati a partecipare e contribuire :)

Introduzione

Hai mai voluto creare un'esperienza di calendario personalizzata sul tuo sito web utilizzando i dati di Google Calendar, ma non sapevi bene come presentarli visivamente? Sembra che molti sviluppatori condividano questo dilemma. Sebbene l'API di dati di Google Calendar sia un'API di servizi web potente in quanto consente di accedere alla ricchezza di tutti i dati di Google Calendar, rimane un'API di dati di sola lettura/scrittura senza alcuna disposizione per la visualizzazione dei dati.

In questo articolo, mostrerò una libreria di esempio che ho scritto per alleviare questo problema. Ho avviato il progetto open source Calendar Visualization (CalVis), che mira a fornire un'interfaccia utente (UI) semplice e personalizzabile per presentare i dati dell'account Google Calendar. CalVis estrae i dati direttamente dal tuo account Google Calendar tramite l'API Google Calendar Data. (Nota del redattore: a partire dalla versione 3, Google Calendar non utilizza più il formato Google Data.) Utilizza la libreria client JavaScript Google Data sottostante per comunicare con Google Calendar ed è progettata per massimizzare la flessibilità nella personalizzazione.

CalVis è progettato per evitare agli sviluppatori di dover ricreare l'esperienza dell'interfaccia utente del calendario avanzato. Gli sviluppatori possono utilizzarlo come contenitore di modelli personalizzabili per sovrapporre i dati di Google Calendar. Gli sviluppatori possono utilizzare CalVis per eseguire il rendering dei dati del calendario e ottenere un livello elevato di integrazione personalizzata con i loro siti. Come vedrai, un'interfaccia basata su CalVis è completamente personalizzabile tramite JavaScript, HTML e CSS. Gli sviluppatori potranno eseguire il deployment in modo rapido e semplice di un'interfaccia del calendario personalizzata con un insieme di componenti di controllo essenziali per il rendering dei dati del calendario.

Utilizzo di CalVis

I seguenti passaggi ti aiutano a iniziare a utilizzare CalVis per lo sviluppo.

Passaggio 1: carica la libreria di visualizzazione del calendario

Innanzitutto, devi includere il caricatore nel file HTML. Questo caricatore carica dinamicamente le classi principali di CalVis e le relative librerie dipendenti (come la libreria client JavaScript di Google Data).

<script src="//gcal.appspot.com/calvis/calvis.js" type="text/javascript"></script>

Passaggio 2: utilizza il foglio di stile CSS per descrivere gli attributi di stile.

Il file CSS predefinito produrrà un aspetto predefinito proprio come questo esempio. Puoi scaricare questo file CSS e personalizzarlo per ottenere un aspetto completamente diverso.

<link rel="stylesheet" type="text/css" href="//gcal.appspot.com/calvis/default.css" />

Passaggio 3: definisci la struttura visiva dell'interfaccia del calendario con HTML

CalVis ha diversi componenti visivi predefiniti che compongono l'interfaccia del calendario. La disposizione strutturale di questi componenti dell'interfaccia è definita dal layout HTML.

I componenti dell'interfaccia utente di CalVis sono:

Controllo accesso (solo per i calendari privati)
Questo è il componente HTML che fornisce il link di accesso/disconnessione.
Controllo stato
: questo è il componente HTML che fornisce informazioni sullo stato o sugli errori.
Controllo di navigazione
: questo è il componente HTML che esegue il rendering della navigazione del calendario rispetto alla visualizzazione corrente.
Controllo visualizzazione
Questo è il componente HTML che esegue il rendering della selezione della visualizzazione del calendario. In questa release sono disponibili solo le visualizzazioni mensile o settimanale.
Corpo del calendario
Questo è il componente HTML che esegue il rendering del calendario vero e proprio. Con griglie per designare le singole celle di data.
Visualizzazione evento
Si tratta del componente HTML che esegue il rendering dei dettagli dell'evento in seguito a un trigger evento. In questa release sono supportati solo i trigger evento "click" e "mouseover".

Un esempio di come disporre visivamente questi componenti utilizzando la struttura di base della tabella HTML:

  <table style="width: 800px;">
    <tr>
      <td colspan="2" valign="top">
        <div style="float: left;" id="loginControlDiv"></div>
        <div style="float: right;" id="statusControlDiv"></div>
      </td>
    </tr>      
    <tr>
      <td valign="top">
        <div id="navControlDiv"></div>
      </td>
      <td valign="top" align="right">
        <div id="viewControlDiv"></div>
      </td>
    </tr>
    <tr>
      <td colspan="2" valign="top">
        <div id="calendarBodyDiv"></div>
      </td>
    </tr>
    <tr>
      <td colspan="2" valign="top">
        <div id="eventDisplayDiv"></div>
      </td>
    </tr>
  </table>

Passaggio 4: inizializza e configura CalVis con JavaScript

Puoi personalizzare qualsiasi comportamento o aspetto utilizzando JavaScript. Tieni presente che, prima di poter modificare un oggetto in JavaScript, questo deve essere caricato dal browser, quindi devi prima attendere che tutte le librerie dipendenti vengano caricate con il caricatore CalVis. Questa operazione viene eseguita con il metodo calvis.ready(). Questo metodo accetta un metodo di callback che verrà richiamato quando tutte le librerie sono caricate e CalVis è pronto per essere utilizzato.

window.onload = function() {
  calvis.ready(callback);
}

All'interno della funzione di callback, creerai un'istanza dell'oggetto calvis.Calendar. Ora devi assegnare i vari ID CSS (definiti dal layout HTML nel passaggio 3) in modo che corrispondano ai componenti dell'interfaccia utente del calendario.

var calId = 'developer-calendar@google.com';

var calendar = new calvis.Calendar();

// set the CSS IDs for various visual components for the calendar container
calendar.setCalendarBody('calendarBodyDiv');
calendar.setStatusControl('statusControlDiv');
calendar.setNavControl('navControlDiv');
calendar.setViewControl('viewControlDiv');

Ora puoi specificare da quale account Google Calendar CalVis deve estrarre i dati. Per specificare un calendario pubblico:

// set the calenar to pull data from this Google Calendar account
calendar.setPublicCalendar(calId);

Per specificare un calendario privato, devi anche specificare il componente HTML corrispondente al pulsante di accesso:

// set the calenar to pull data from this Google Calendar account
calendar.setPrivateCalendar(calId);
calendar.setLoginControl('loginControlDiv');

Per visualizzare i dettagli dell'evento, devi fornire un metodo di callback in modo che quando viene attivato un elenco di eventi nel calendario (tramite l'evento "click" o "mouseover"), il callback venga richiamato per visualizzare i dettagli dell'evento. Esempio di callback di visualizzazione dell'evento:

calendar.setEventCallback('click', displayEvent);

function displayEvent(event) {    
  var title = event.getTitle().getText();  
  var date = event.getTimes()[0].getStartTime().getDate();
  var content = event.getContent().getText();  
  
  var eventHtml = [;
  eventHtml.push(date.toString());
  eventHtml.push('<br><br>');
  eventHtml.push('<b>Event title:</b> ');
  eventHtml.push(title);
  eventHtml.push('<br>');
  eventHtml.push('<br>');
  eventHtml.push('<b>Description:</b>');
  eventHtml.push('<p style="font-size: 11px;">');
  eventHtml.push(content); 
  eventHtml.push('</p>');
  eventHtml.push('<br>');

  document.getElementById('eventDisplayDiv').innerHTML = eventHtml.join('');
}

Infine, puoi impostare la visualizzazione predefinita del calendario (visualizzazione "mese" o "settimana") e richiamare il metodo render() per visualizzare la UI del calendario:

// set the default view to be "month"
calendar.setDefaultView('month');

// display the calendar
calendar.render();

Personalizza lo stile

Per personalizzare le dimensioni, il colore o lo stile di una singola cella di data, devi solo modificare gli attributi di stile CSS di alcune classi CSS predefinite. Ad esempio, puoi modificare la larghezza e l'altezza di ogni cella di data nella visualizzazione mensile eseguendo l'override delle classi CSS predefinite monthViewCell e contentCell.

Demo

Questa demo mostra l'utilizzo di CalVis con lo stile predefinito.

Questa demo mostra l'utilizzo di CalVis con la personalizzazione per creare un mashup con l'API Google Maps e YouTube.

Contribuisci

CalVis è un progetto open source, il cui codice sorgente è disponibile per il download tramite Subversion su Google Code Project Hosting.

CalVis: Creating a customized AJAX UI for your Google Calendar Mantieni tutto organizzato con le raccolte Salva e classifica i contenuti in base alle tue preferenze.