Diese Seite wurde von der Cloud Translation API übersetzt.

CalVis: Eine benutzerdefinierte AJAX-Benutzeroberfläche für Google Kalender erstellen

Austin Chau, Google Developer Programs
Juni 2008

Einführung
CalVis verwenden
Stile anpassen
Demo
Beitragen
Ressourcen

Hinweis: Dies ist ein Open-Source-Projekt, das von einem Google-Mitarbeiter gestartet wurde und keine offiziell unterstützte Bibliothek ist. Wir laden alle Interessierten ein, mitzumachen und einen Beitrag zu leisten :)

Einführung

Wollten Sie schon immer einen benutzerdefinierten Kalender auf Ihrer Website erstellen, der auf Google Kalender-Daten basiert, wussten aber nicht genau, wie Sie die Kalenderdaten visuell präsentieren sollen? Anscheinend gibt es viele Entwickler, die dieses Dilemma teilen. Die Google Kalender Data API ist eine leistungsstarke Webdienst-API, mit der Sie auf alle Ihre Google Kalender-Daten zugreifen können. Sie ist jedoch eine reine Lese-/Schreib-API ohne Möglichkeit zur Datenvisualisierung.

In diesem Artikel stelle ich eine Beispielbibliothek vor, die ich geschrieben habe, um dieses Problem zu beheben. Ich habe das Open-Source-Projekt „Calendar Visualization“ (CalVis) gestartet, das eine einfache und anpassbare Benutzeroberfläche für die Darstellung von Daten aus einem Google-Kalenderkonto bieten soll. CalVis ruft Daten direkt über die Google Calendar Data API aus Ihrem Google-Kalenderkonto ab. Hinweis des Redakteurs:Ab Version 3 wird das Google-Datenformat nicht mehr in Google Kalender verwendet. Sie verwendet die Google Data JavaScript-Clientbibliothek, um mit Google Kalender zu kommunizieren, und ist so konzipiert, dass sie maximale Flexibilität bei der Anpassung bietet.

Mit CalVis müssen Entwickler die umfassende Kalender-UI nicht neu erstellen. Entwickler können ihn als anpassbaren Vorlagencontainer verwenden, um Google Kalender-Daten zu überlagern. Entwickler können mit CalVis Kalenderdaten rendern und eine umfassende benutzerdefinierte Integration in ihre Websites erreichen. Wie Sie sehen werden, lässt sich eine auf CalVis basierende Benutzeroberfläche vollständig mit JavaScript, HTML und CSS anpassen. Entwickler können schnell und einfach eine benutzerdefinierte Kalenderoberfläche mit einer Reihe wichtiger Kalendersteuerkomponenten bereitstellen, um Kalenderdaten zu rendern.

CalVis verwenden

Die folgenden Schritte helfen Ihnen bei den ersten Schritten mit CalVis für Ihre Entwicklung.

Schritt 1: Kalendervisualisierungsbibliothek laden

Zuerst müssen Sie den Loader in Ihre HTML-Datei einfügen. Mit diesem Loader werden die Kernklassen von CalVis sowie die zugehörigen Bibliotheken (z. B. die Google Data JavaScript-Clientbibliothek) dynamisch geladen.

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

Schritt 2: CSS-Stylesheet zum Beschreiben von Stilattributen verwenden

Die Standard-CSS-Datei erzeugt ein Standard-Look-and-Feel wie in diesem Beispiel. Sie können diese CSS-Datei herunterladen und anpassen, um ein völlig anderes Erscheinungsbild zu erhalten.

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

Schritt 3: Visuelle Struktur der Kalender-Benutzeroberfläche mit HTML festlegen

CalVis bietet mehrere vordefinierte visuelle Komponenten, aus denen die Kalenderoberfläche besteht. Die strukturelle Anordnung dieser Oberflächenkomponenten wird durch Ihr HTML-Layout definiert.

Die UI-Komponenten von CalVis sind:

Anmeldekontrolle (nur für private Kalender)
Diese HTML-Komponente enthält den An- und Abmeldelink.
Status Control
Dies ist die HTML-Komponente, die Statusinformationen oder Fehler bereitstellt.
Navigationssteuerung
Dies ist die HTML-Komponente, mit der die Kalendernavigation entsprechend der aktuellen Ansicht gerendert wird.
View Control
Dies ist die HTML-Komponente, mit der die Auswahl der Kalenderansicht gerendert wird. In dieser Version sind nur Monats- oder Wochenansichten verfügbar.
Calendar Body
Dies ist die HTML-Komponente, mit der der eigentliche Kalender gerendert wird. Mit Rastern zum Festlegen einzelner Datumszellen.
Event Display
: Dies ist die HTML-Komponente, mit der die Ereignisdetails bei einem Ereignistrigger gerendert werden. In dieser Version werden nur die Ereignistrigger „click“ und „mouseover“ unterstützt.

Ein Beispiel dafür, wie diese Komponenten mit einer einfachen HTML-Tabellenstruktur visuell angeordnet werden können:

  <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>

Schritt 4: CalVis mit JavaScript initialisieren und konfigurieren

Sie können das Verhalten oder Aussehen mithilfe von JavaScript anpassen. Bevor Sie ein Objekt in JavaScript ändern können, muss es zuerst vom Browser geladen werden. Sie müssen also zuerst warten, bis alle abhängigen Bibliotheken mit dem CalVis-Loader geladen wurden. Dies erfolgt mit der Methode calvis.ready(). Diese Methode verwendet eine Callback-Methode, die aufgerufen wird, wenn alle Bibliotheken geladen sind und CalVis verwendet werden kann.

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

In der Callback-Funktion instanziieren Sie eine Instanz des calvis.Calendar-Objekts. Nun müssen Sie die verschiedenen CSS-IDs (die im HTML-Layout in Schritt 3 definiert sind) den entsprechenden Komponenten der Kalender-Benutzeroberfläche zuordnen.

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');

Sie können jetzt festlegen, aus welchem Google-Kalenderkonto CalVis Daten abrufen soll. So geben Sie einen öffentlichen Kalender an:

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

Wenn Sie einen privaten Kalender angeben möchten, müssen Sie auch die HTML-Komponente angeben, die der Anmeldeschaltfläche entspricht:

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

Damit Ereignisdetails angezeigt werden können, müssen Sie eine Callback-Methode angeben. Wenn ein Ereigniseintrag im Kalender ausgelöst wird (entweder durch ein „click“- oder ein „mouseover“-Ereignis), wird der Callback aufgerufen, um die Ereignisdetails anzuzeigen. Beispiel für einen Callback zur Ereignisdarstellung:

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('');
}

Schließlich können Sie die Standardansicht des Kalenders (entweder eine Monats- oder eine Wochenansicht) festlegen und die Methode „render()“ aufrufen, um die Kalender-UI anzuzeigen:

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

// display the calendar
calendar.render();

Stile anpassen

Wenn Sie die Größe, Farbe oder den Stil einer einzelnen Datumszelle anpassen möchten, müssen Sie nur die CSS-Stilattribute einiger vordefinierter CSS-Klassen ändern. Sie können beispielsweise die Breite und Höhe der einzelnen Datumszellen in der Monatsansicht ändern, indem Sie die Standard-CSS-Klassen „monthViewCell“ und „contentCell“ überschreiben.

Demo

In dieser Demo wird die Verwendung von CalVis mit dem Standardstil veranschaulicht.

In dieser Demo wird gezeigt, wie CalVis mit Anpassungen verwendet wird, um ein Mashup mit der Google Maps API und der YouTube API zu erstellen.

Beitragen

CalVis ist ein Open-Source-Projekt, dessen Quellcode auf Google Code Project Hosting über Subversion heruntergeladen werden kann.

CalVis: Eine benutzerdefinierte AJAX-Benutzeroberfläche für Google Kalender erstellen Mit Sammlungen den Überblick behalten Sie können Inhalte basierend auf Ihren Einstellungen speichern und kategorisieren.