Juni 2008
Hinweis: Dieses Open-Source-Projekt wurde von einem Google-Mitarbeiter gestartet und ist keine offizielle Bibliothek. Wir laden alle ein, die daran teilnehmen möchten.
Einführung
Wollten Sie schon einmal mithilfe von Google Kalender-Daten einen benutzerdefinierten Kalender auf Ihrer Website erstellen, sind sich aber nicht sicher, wie Sie die Kalenderdaten visuell darstellen sollen? Es scheint eine große Zahl von Entwicklern zu geben, die dieses Problem lösen. Die Google Calendar Data API ist eine leistungsstarke Webdienst-API, mit der Sie alle Ihre Google Kalender-Daten umfassend nutzen können. Sie ist jedoch eine reine Lese-/Schreib-API ohne Datenbereitstellung.
In diesem Artikel werde ich eine Beispielbibliothek demonstrieren, die ich zur Lösung dieses Problems geschrieben habe. Ich habe das Open-Source-Projekt CalVis (Kalendervisualisierung) gestartet, das eine einfache und anpassbare Benutzeroberfläche für die Präsentation von Daten aus dem Google Kalender-Konto bietet. CalVis bezieht Daten direkt über die Google Calendar Data API aus Ihrem Google Kalender-Konto. Hinweis des Herausgebers:Ab Version 3 wird in Google Kalender das Google-Datenformat nicht mehr verwendet. Für die Kommunikation mit Google Kalender wird die Google Data JavaScript-Clientbibliothek verwendet. So können Sie flexibel Anpassungen vornehmen.
CalVis soll Entwicklern die Möglichkeit geben, umfangreiche Kalender-UIs neu zu erstellen. Die Entwickler können es als anpassbaren Vorlagencontainer für Google Kalender-Daten verwenden. Entwickler können CalVis nutzen, um Kalenderdaten zu rendern und eine umfassende Integration mit ihren Websites zu erreichen. Wie Sie sehen werden, kann eine Oberfläche, die auf CalVis basiert, vollständig über JavaScript, HTML und CSS angepasst werden. Entwickler können schnell und einfach eine angepasste Kalenderoberfläche mit einer Reihe von wichtigen Kalendersteuerelementen bereitstellen, die ihre Kalenderdaten rendern.
CalVis verwenden
Die folgenden Schritte helfen Ihnen bei den ersten Schritten mit CalVis für Ihre Entwicklung.
Schritt 1: Bibliothek für die Kalendervisualisierung laden
Zuerst müssen Sie das Ladeprogramm in Ihre HTML-Datei aufnehmen. Mit diesem Loader werden die Kernklassen von CalVis sowie die abhängigen 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-Stylesheets verwenden, um Stilattribute zu beschreiben
Die Standard-CSS-Datei erzeugt ein Standarddesign wie in diesem Beispiel. Sie können diese CSS-Datei herunterladen und mit einem anderen Design versehen.
<link rel="stylesheet" type="text/css" href="//gcal.appspot.com/calvis/default.css" />
Schritt 3: Mit HTML die visuelle Struktur der Kalenderoberfläche darstellen
CalVis verfügt über mehrere vordefinierte visuelle Komponenten, die die Kalenderoberfläche ausmachen. Die strukturelle Anordnung dieser Oberflächenkomponenten wird durch Ihr HTML-Layout definiert.
Die UI-Komponenten von CalVis sind:
-
Anmeldesteuerung (nur für private Kalender)
Dies ist die HTML-Komponente für den Link zum An- und Abmelden.
-
Status Control
Dies ist die HTML-Komponente für Statusinformationen oder Fehler.
-
Navigationssteuerung
Dies ist die HTML-Komponente, mit der die Kalendernavigation in der aktuellen Ansicht gerendert wird.
-
Ansichtssteuerung
Dies ist die HTML-Komponente, die die Auswahl der Kalenderansicht rendert. In diesem Release sind nur Monats- oder Wochenansichten verfügbar.
-
Kalendertext
Dies ist die HTML-Komponente, die den eigentlichen Kalender rendert. Mit Rastern können Sie einzelne Datumszellen festlegen.
-
Ereignisanzeige
Dies ist die HTML-Komponente, mit der die Ereignisdetails bei einem Ereignistrigger gerendert werden. In diesem Release wird nur der Ereignistrigger „Klicken“ und „Mouseover“ unterstützt.
Beispiel für die visuelle Anordnung dieser Komponenten mit der grundlegenden HTML-Tabellenstruktur:
<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
Mit JavaScript können Sie das Verhalten und die Darstellung anpassen. Bevor Sie ein Objekt in JavaScript ändern können, muss es zuerst vom Browser geladen werden. Sie müssen also warten, bis alle abhängigen Bibliotheken mit dem CalVis-Loader geladen wurden. Dazu verwenden Sie die Methode calvis.ready(). Diese Methode verwendet eine Callback-Methode, die aufgerufen wird, wenn alle Bibliotheken geladen wurden und CalVis verwendet werden kann.
window.onload = function() {
calvis.ready(callback);
}
Innerhalb der Callback-Funktion instanziieren Sie eine Instanz des Objekts „calvis.Calendar“. Nun müssen Sie die verschiedenen CSS-IDs (diese werden im HTML-Layout definiert in Schritt 3) zuweisen, um sie den entsprechenden Kalender-UI-Komponenten zuzuordnen.
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');
Jetzt können Sie angeben, von welchem Google Kalender-Konto CalVis Daten abrufen soll. So legen Sie einen öffentlichen Kalender fest:
// set the calenar to pull data from this Google Calendar account calendar.setPublicCalendar(calId);
Um einen privaten Kalender festzulegen, müssen Sie auch die HTML-Komponente angeben, die der Schaltfläche für die Anmeldung entspricht:
// set the calenar to pull data from this Google Calendar account
calendar.setPrivateCalendar(calId);
calendar.setLoginControl('loginControlDiv');
Zum Anzeigen von Termindetails müssen Sie eine Callback-Methode angeben, damit beim Aufrufen eines Eintrags im Kalender (entweder durch Klick- oder Mouseover-Ereignis) der Callback zum Aufrufen der Termindetails aufgerufen wird. Ein Beispiel für einen Callback bei der Ereignisanzeige
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('');
}
Abschließend können Sie die Standardansicht des Kalenders (entweder „Monat“ oder „Woche“) und die Methode „render()“ aufrufen, um die Kalender-UI aufzurufen.
// set the default view to be "month"
calendar.setDefaultView('month');
// display the calendar
calendar.render();
Stil anpassen
Wenn Sie Größe, Farbe oder Stil einer einzelnen Datumszelle anpassen möchten, ändern Sie einfach die CSS-Stilattribute einiger vordefinierter CSS-Klassen. Sie können beispielsweise die Breite und Höhe jeder Datumszelle in Ihrer Monatsansicht ändern, indem Sie die Standard-CSS-Klasse monthViewCell und contentCell überschreiben.
Demo
Diese Demo zeigt die Verwendung von CalVis mit dem Standardstil.
In dieser Demo wird die Verwendung von CalVis mit benutzerdefinierter Anpassung zur Erstellung eines Mashups mit Google Maps und der YouTube API veranschaulicht.
Beitragen
CalVis ist ein Open-Source-Projekt, dessen Quellcode auf Google Code Project Hosting über Subversion heruntergeladen werden kann.
Ressourcen