Giugno 2008
Nota: questo è un progetto open source avviato da un Googler e non una libreria supportata ufficialmente. Invitiamo tutti coloro che sono interessati a partecipare e a contribuire :)
Introduzione
Hai mai voluto creare un'esperienza di calendario personalizzata sul tuo sito web utilizzando i dati di Google Calendar, ma non sai bene come mostrarli visivamente? Sembra che un buon numero di sviluppatori condivida questo dilemma. Sebbene l'API di dati di Google Calendar sia una potente API del servizio web perché consente di attingere alla ricchezza di tutti i propri dati di Google Calendar, rimane una pura API di dati di lettura/scrittura senza provisioning per la visualizzazione dei dati.
In questo articolo dimostrerò una libreria di esempio che ho scritto per alleviare il problema. Ho avviato il progetto open source, Calendar Preview (CalVis), che mira a fornire un'interfaccia utente (UI) semplice e personalizzabile per presentare i dati dell'account Google Calendar. CalVis richiama i dati direttamente dal tuo account Google Calendar tramite l'API di dati di Google Calendar. Nota del redattore: a partire dalla v3, Google Calendar non utilizza più il formato dei dati di Google Utilizza la libreria client di JavaScript di Google Data per comunicare con Google Calendar ed è progettata per massimizzare la personalizzazione.
CalVis è progettato per evitare agli sviluppatori di ricreare la ricca esperienza nell'interfaccia utente del calendario. Gli sviluppatori possono utilizzarlo come contenitore di modelli personalizzabile per sovrapporre i dati di Google Calendar. Gli sviluppatori possono utilizzare CalVis per eseguire il rendering dei dati del calendario e per ottenere un livello profondo di integrazione personalizzata con i loro siti. Come scoprirai, un'interfaccia basata su CalVis è completamente personalizzabile tramite JavaScript, HTML e CSS. Gli sviluppatori possono eseguire il deployment di un'interfaccia di calendario personalizzata in modo facile e veloce con una serie di componenti di controllo essenziali per il rendering dei dati del calendario.
Utilizzo di CalVis
I seguenti passaggi ti consentono di iniziare a utilizzare CalVis per lo sviluppo.
Passaggio 1: carica la libreria di Visualizzazione calendario
Innanzitutto, devi includere il caricatore nel file HTML. Questo caricatore carica dinamicamente le classi principali di CalVis e le sue 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 genererà un aspetto e un aspetto predefiniti, proprio come questo esempio. Puoi scaricare questo file CSS e personalizzarlo per avere un aspetto completamente diverso.
<link rel="stylesheet" type="text/css" href="//gcal.appspot.com/calvis/default.css" />
Passaggio 3 - Delinea la struttura visiva dell'interfaccia di calendario con codice HTML
CalVis offre diversi componenti visivi predefiniti che compongono l'interfaccia del calendario. La disposizione strutturale di questi componenti dell'interfaccia è definita dal layout HTML.
I componenti della UI di CalVis sono:
-
Controllo accesso (solo per i calendari privati)
È il componente HTML che fornisce il link di accesso/disconnessione.
-
Controllo dello stato
Questo è il componente HTML che fornisce informazioni sullo stato o errori.
-
Controllo di navigazione
Si tratta del componente HTML che esegue il rendering della navigazione del calendario in relazione alla visualizzazione corrente.
-
Controllo delle visualizzazioni
Si tratta del componente HTML che esegue il rendering della selezione della visualizzazione del calendario; in questa versione sono disponibili solo le visualizzazioni mensili o settimanali.
-
Calendar Body
È il componente HTML che esegue il rendering del calendario effettivo. Con griglie per designare singole celle di data.
-
Visualizzazione evento
Si tratta del componente HTML che esegue il rendering dei dettagli dell'evento dopo l'attivazione di un evento. In questa release sono supportati solo gli attivatori di eventi "Clic" 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, utilizzando il metodo calvis.ready(). Questo metodo utilizza un metodo di callback che viene richiamato quando tutte le librerie vengono caricate e CalVis è pronto per essere utilizzato.
window.onload = function() {
calvis.ready(callback);
}
All'interno della funzione di callback, creerai un'istanza di un'istanza dell'oggetto calvis.Calendar. Ora devi assegnare i vari ID CSS (definiti dal layout HTML nel passaggio 3) per mapparli ai componenti dell'interfaccia utente del calendario corrispondenti.
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 eseguire il pull dei 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 specificare anche 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 attivata una scheda dell'evento nel calendario (mediante evento "clic" o "mouseover"), il callback venga richiamato per visualizzare i dettagli dell'evento. Un esempio di callback di visualizzazione di un 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 (una visualizzazione "mese" o "settimana") e richiamare il metodo rendering() per visualizzare l'interfaccia utente 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 Mese sostituendo la classe CSS standard monthViewCell e contentCell.
Demo
Questa demo mostra l'utilizzo di CalVis con lo stile predefinito.
Questa demo mostra come utilizzare CalVis con la personalizzazione per creare un mashup con Google Maps e l'API di YouTube.
Contribuisci
CalVis un progetto open source, il cui codice sorgente è disponibile per il download tramite Subversion su Google Code Project Hosting.
Risorse