Cette page a été traduite par l'API Cloud Translation.

CalVis : créer une UI AJAX personnalisée pour votre agenda Google

Austin Chau, Google Developer Programs
juin 2008

Introduction
Utiliser CalVis
Personnaliser le style
Démo
Contribuer
Ressources

Remarque : Il s'agit d'un projet Open Source lancé par un employé de Google. Il ne s'agit pas d'une bibliothèque officiellement prise en charge. Nous invitons tous ceux qui le souhaitent à nous rejoindre et à contribuer :)

Introduction

Vous avez toujours voulu créer une expérience d'agenda personnalisée sur votre site Web à l'aide des données Google Agenda, mais vous ne savez pas comment présenter visuellement les données de l'agenda ? Il semble qu'un bon nombre de développeurs partagent ce dilemme. L'API Google Calendar Data est une API de service Web puissante qui vous permet d'exploiter toute la richesse de vos données Google Agenda. Toutefois, elle reste une API de données en lecture/écriture pure, sans aucune disposition pour la 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 d'un compte Google Agenda. CalVis extrait les données directement de votre compte Google Agenda via l'API Google Calendar Data. (Remarque de l'éditeur : Depuis la version 3, Google Agenda n'utilise plus le format Google Data.) Il utilise la bibliothèque cliente JavaScript Google Data sous-jacente pour communiquer avec Google Agenda et est conçu pour maximiser la flexibilité de la personnalisation.

CalVis est conçu pour éviter aux développeurs d'avoir à recréer l'expérience d'UI de calendrier enrichie. Les développeurs peuvent l'utiliser comme conteneur de modèle personnalisable pour superposer les données Google Agenda. Les développeurs peuvent utiliser CalVis pour afficher les données d'agenda et obtenir un niveau d'intégration personnalisé élevé avec leurs sites. Comme vous le verrez, une interface basée sur CalVis est entièrement personnalisable à l'aide de JavaScript, HTML et CSS. Les développeurs pourront déployer rapidement et facilement une interface de calendrier personnalisée avec un ensemble de composants de contrôle essentiels pour afficher les données du calendrier.

Utiliser CalVis

Les étapes suivantes vous aideront à commencer à utiliser CalVis pour votre développement.

Étape 1 : Charger la bibliothèque de visualisation de l'agenda

Vous devez d'abord inclure le chargeur dans votre fichier HTML. Ce chargeur charge dynamiquement les classes principales de CalVis ainsi que ses bibliothèques dépendantes (telles que la bibliothèque cliente JavaScript Google Data).

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

Étape 2 : Utilisez une feuille de style CSS pour décrire les attributs de style.

Le fichier CSS par défaut produira une apparence par défaut, comme dans cet exemple. Vous pouvez télécharger ce fichier CSS et le personnaliser pour lui donner une apparence complètement différente.

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

Étape 3 : Définir la structure visuelle de l'interface de l'agenda avec HTML

CalVis comporte plusieurs composants visuels prédéfinis qui constituent l'interface de l'agenda. L'agencement structurel de ces composants d'interface est défini par votre mise en page HTML.

Les composants de l'interface utilisateur de CalVis sont les suivants :

Login Control (only for private calendars)
This is the HTML component that provides the login/logout link.
Contrôle de l'état
: composant HTML qui fournit des informations sur l'état ou les erreurs.
Contrôle de navigation
: composant HTML qui affiche la navigation dans l'agenda en fonction de la vue actuelle.
Contrôle de la vue
Il s'agit du composant HTML qui affiche la sélection de la vue de l'agenda. Seules les vues mensuelle et hebdomadaire sont disponibles dans cette version.
Corps de l'agenda
: composant HTML qui affiche l'agenda. Avec des grilles pour désigner des cellules de date individuelles.
Affichage des événements
: composant HTML qui affiche les détails de l'événement lorsqu'un événement est déclenché. Seuls les déclencheurs d'événement "clic" et "survol" sont acceptés dans cette version.

Voici un exemple de la façon d'organiser visuellement ces composants à l'aide d'une structure de tableau 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 : Initialiser et configurer CalVis avec JavaScript

Vous pouvez personnaliser le comportement ou l'apparence à l'aide de JavaScript. N'oubliez pas qu'avant de pouvoir modifier un objet en JavaScript, il doit d'abord être chargé par le navigateur. Vous devez donc d'abord attendre que toutes les bibliothèques dépendantes soient chargées avec le chargeur CalVis. Pour ce faire, utilisez la méthode calvis.ready(). Cette méthode utilise une méthode de rappel qui sera appelée lorsque toutes les bibliothèques seront chargées et que CalVis sera prêt à être utilisé.

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

Dans la fonction de rappel, vous allez instancier un objet calvis.Calendar. Vous devez maintenant attribuer les différents ID CSS (définis à partir de la mise en page HTML à l'étape 3) aux composants correspondants de l'UI 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 désormais spécifier le compte Google Agenda à partir duquel CalVis doit extraire les données. Pour spécifier un agenda public :

// 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 correspondant 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 d'un événement, vous devez fournir une méthode de rappel. Ainsi, lorsqu'une fiche d'événement dans l'agenda est déclenchée (par un événement "click" ou "mouseover"), le rappel est invoqué pour afficher les détails de l'événement. Voici un exemple de rappel d'affichage d'é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 votre vue mensuelle en remplaçant les classes CSS par défaut monthViewCell et contentCell.

Démo

Cette démonstration montre comment utiliser CalVis avec le style par défaut.

Cette démonstration montre comment utiliser CalVis avec des personnalisations pour créer un mashup avec les API Google Maps et YouTube.

Contribuer

CalVis est un projet Open Source dont le code source est disponible en téléchargement via Subversion sur Google Code Project Hosting.

CalVis : créer une UI AJAX personnalisée pour votre agenda Google Restez organisé à l'aide des collections Enregistrez et classez les contenus selon vos préférences.