Juin 2008
Remarque : Il s'agit d'un projet Open Source lancé par un Googleur et non d'une bibliothèque officiellement prise en charge. Nous invitons tous les utilisateurs intéressés à rejoindre le groupe et à participer :
Introduction
Vous est-il déjà arrivé de vouloir créer une expérience d'agenda personnalisée sur votre site Web à l'aide des données de Google Agenda, mais sans savoir comment les présenter visuellement ? Il semble qu'un grand nombre de développeurs partagent ce dilemme. Bien que l'API de données Google Agenda soit une API de services Web puissante, car elle vous permet d'exploiter la richesse de toutes vos données Google Agenda, elle demeure une API de données en lecture/écriture pure, sans provisionnement de visualisation des données.
Dans cet article, je vais vous présenter un exemple de bibliothèque que j'ai écrite pour résoudre ce problème. J'ai lancé le projet Open Source, Calendar Visualization (CalVis), qui vise à fournir une interface utilisateur (UI) simple et personnalisable pour présenter les données du compte Google Agenda. CalVis extrait des données directement de votre compte Google Agenda via l'API de données Google Agenda. (Note de l'éditeur : À compter de la version 3, Google Agenda n'utilise plus le format de données Google.) Il utilise la bibliothèque cliente JavaScript des données Google ci-dessous pour communiquer avec Google Agenda. Il est conçu pour optimiser la flexibilité de personnalisation.
CalVis est conçu pour éviter que les développeurs n'aient à recréer l'interface utilisateur enrichie de l'agenda. Les développeurs peuvent l'utiliser comme conteneur de modèles personnalisables pour superposer des données Google Agenda. Les développeurs peuvent utiliser CalVis pour afficher les données d'agenda et obtenir une intégration personnalisée approfondie avec leurs sites. Comme vous le verrez, une interface basée sur CalVis est entièrement personnalisable via JavaScript, HTML et CSS. Les développeurs peuvent déployer rapidement et facilement une interface d'agenda personnalisée avec un ensemble de composants essentiels pour afficher les données d'agenda.
Utiliser CalVis
Les étapes suivantes vous aident à utiliser CalVis pour votre développement.
Étape 1 : Charger la bibliothèque de visualisation de l'agenda
Vous devez d'abord inclure le composant Loader dans votre fichier HTML. Ce chargeur charge dynamiquement les classes principales de CalVis ainsi que ses bibliothèques dépendantes (comme la bibliothèque cliente JavaScript de données Google).
<script src="//gcal.appspot.com/calvis/calvis.js" type="text/javascript"></script>
Étape 2 : Décrire les attributs de style à l'aide de la feuille de style CSS
Comme dans cet exemple, le fichier CSS par défaut génère une apparence par défaut. Vous pouvez télécharger ce fichier CSS et le personnaliser pour qu'il soit totalement différent.
<link rel="stylesheet" type="text/css" href="//gcal.appspot.com/calvis/default.css" />
Étape 3 : Définissez la structure visuelle de l'interface de l'agenda avec du code HTML
CalVis est doté de plusieurs composants visuels prédéfinis qui constituent l'interface de l'agenda. L'organisation de ces composants de l'interface est définie par votre mise en page HTML.
Les composants d'UI de CalVis sont les suivants:
-
Contrôle de connexion (uniquement pour les agendas privés)
Il s'agit du composant HTML qui fournit le lien de connexion/déconnexion.
-
Contrôle de l'état
Il s'agit du composant HTML qui fournit des informations sur l'état ou des erreurs.
-
Contrôle de navigation
Il s'agit du composant HTML qui affiche la navigation dans l'agenda par rapport à la vue actuelle.
-
Contrôle des vues
Il s'agit du composant HTML qui affiche la sélection de vue de l'agenda. Seules les vues du mois ou de la semaine sont disponibles dans cette version.
-
Calendar Body
Il s'agit du composant HTML qui affiche l'agenda en question. Avec des grilles pour désigner des cellules de date individuelles.
-
Affichage des événements
Il s'agit du composant HTML qui affiche les détails de l'événement lors du déclenchement d'un événement. Seuls les déclencheurs d'événements de type "clic" et "mouseover" sont acceptés dans cette version.
Voici un exemple d'organisation visuelle de ces composants à l'aide d'une structure de table HTML de base :
<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>
|
|
Étape 4 : Initialisez et configurez CalVis avec JavaScript
Vous pouvez personnaliser n'importe quel comportement ou apparence à l'aide de JavaScript. N'oubliez pas que pour pouvoir modifier un objet en JavaScript, vous devez d'abord le charger dans le navigateur. Vous devez donc attendre que toutes les bibliothèques dépendantes soient chargées avec le chargeur CalVis. Vous devez pour cela utiliser la méthode calvis.ready(). Cette méthode utilise une méthode de rappel qui est invoquée lorsque toutes les bibliothèques sont chargées et que CalVis est prêt à être utilisé.
window.onload = function() {
calvis.ready(callback);
}
Dans la fonction de rappel, vous allez instancier une instance de l'objet calvis.Calendar. Vous devez maintenant attribuer les différents ID CSS (définis à partir de la mise en page HTML à l'étape 3) à mapper aux composants correspondants de l'interface utilisateur de l'agenda.
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');
Vous pouvez maintenant spécifier le compte Google Agenda à partir duquel CalVis doit extraire les données. Pour spécifier un agenda public, procédez comme suit :
// set the calenar to pull data from this Google Calendar account calendar.setPublicCalendar(calId);
Pour spécifier un agenda privé, vous devez également spécifier le composant HTML qui correspond au bouton de connexion :
// set the calenar to pull data from this Google Calendar account
calendar.setPrivateCalendar(calId);
calendar.setLoginControl('loginControlDiv');
Pour afficher les détails de l'événement, vous devez fournir une méthode de rappel. Ainsi, lorsqu'une liste d'événements dans l'agenda est déclenchée (par un "clic" ou un "événement de survol"), le rappel est appelé pour afficher les détails de l'événement. Exemple de rappel d'affichage d'un événement
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('');
}
Enfin, vous pouvez définir la vue par défaut de l'agenda (vue "Mois" ou "Semaine") et appeler la méthode "render()" pour afficher l'UI de l'agenda.
// set the default view to be "month"
calendar.setDefaultView('month');
// display the calendar
calendar.render();
Personnaliser le style
Pour personnaliser la taille, la couleur ou le style d'une cellule de date individuelle, il vous suffit de modifier les attributs de style CSS de quelques classes CSS prédéfinies. Par exemple, vous pouvez modifier la largeur et la hauteur de chaque cellule de date dans la vue "Mois" en remplaçant la classe CSS "monthViewCell" et la valeur "contentCell" par défaut.
Démonstration
Cette démonstration montre comment utiliser CalVis avec le style par défaut.
Cette démonstration montre comment utiliser CalVis avec personnalisation pour créer une application composite avec Google Maps et l'API YouTube.
Contribuer
CalVis d'un projet Open Source, dont le code source peut être téléchargé via Subversion sur Google Code Project Hosting
Ressources