Mikroformat für Kalendereinträge (hCalendar)
So wie das hCard-Mikroformat auf dem vCard-Format basiert, lehnt sich das hCalendar-Mikroformat an das iCalendar-Format an, das ebenso wie das vCard-Format ein Industriestandard ist. Allerdings unterstützen die meisten Anwendungen nur vCalendar, den Vorläufer des iCalendar-Formats. Auch dieses Format kennen Sie vielleicht aus Microsoft Outlook oder vergleichbaren Anwendungen als Export- und Import-Format für Terminkalendereinträge. Entsprechende Dateien haben die Standardendung .vcs oder .ics.
Um das hCalendar-Format besser zu verstehen, betrachten wir zunächst zwei Kalendereinträge im iCalendar-Format – zunächst ein Tagesereignis und dann einen Termin:
BEGIN:VCALENDAR VERSION:2.0 BEGIN:VEVENT DTSTART:20070406 DTEND:20070406 SUMMARY:Karfreitag END:VEVENT END:VCALENDAR
BEGIN:VCALENDAR VERSION:2.0 BEGIN:VEVENT DTSTART:20070510T200000 DTEND:20070510T235900 TZOFFSETFROM:+0100 LOCATION:Stragula Realwirtschaft SUMMARY:Jahresversammlung 2007 der gescheiterten Existenzen ATTENDEE;ROLE=OWNER;CN=Rainer Wahnsinn;MAILTO=rwahnsinn@example.com ATTENDEE;ROLE=ATTENDEE;CN=Anna Lyse;MAILTO=alyse@example.com END:VEVENT END:VCALENDAR
Die gewählten Beispiele sind recht einfach und beschreiben nur wenige typische Daten. Die Spezifikation des iCalendar-Formats kennt wesentlich mehr Eintragsmöglichkeiten, um auch Aspekte wie Teilnehmeranforderungen, wiederkehrende Termine, Alarmeinstellungen usw. zu speichern.
Die offizielle Spezifikation und Dokumentation des iCalendar-Formats finden Sie unter:
http://tools.ietf.org/html/rfc2445
RFC (Request for Comment) 2445
Die Datenstruktur weist die gleichen Merkmale auf wie diejenige des vCard-Formats. Der gesamte Kalendereintrag wird durch BEGIN:VCALENDAR eingeleitet und durch END:VCALENDAR abgeschlossen. Durch BEGIN:VEVENT bzw. END:VEVENT wird der Kalendereintrag typisiert. Termine und Tagesereignisse fallen unter die Kategorie VEVENT. Andere Kategorien sind VTODO (für Aufgaben) und VJOURNAL für Journaleinträge.
Terminanfang und -ende werden durch DTSTART bzw. DTEND definiert. Bei Tagesereignissen wie im ersten unserer Beispiele wird das Datum ausschließlich in Ziffernform notiert, wobei die ersten vier Ziffern für das Jahr stehen, die nächsten zwei Ziffern für den Monat und die letzten beiden für den Monatstag. Bei Uhrzeit-Terminen wie in unserem zweiten Beispiel folgt hinter der Datumsangabe ein T und dahinter die Uhrzeit als Folge von sechs Ziffern, wobei die ersten beiden Ziffern die Stunde bedeuten, die zweiten beiden die Minuten und die letzten beiden die Sekunden.
Bei Uhrzeitangaben ist auch die Angabe der Zeitzone sinnvoll. Dies geschieht durch TZOFFSETFROM. Deutschland beispielsweise hat die Zeitzone + 1 Stunde gegenüber der UTC-Zeit (Greenwich-Zeit). Notiert wird das in der Form +0100.
Wenn es für einen Termin einen Veranstaltungsort gibt, kann dieser durch LOCATION angegeben werden. Falls mit dem Ereignis auch eine Webadresse verknüpfbar ist, kann zusätzlich ein Feld URL notiert werden. SUMMARY ist das Feld für den Titel des Kalenderereignisses. Längere Beschreibungen können in einem zusätzlichen Feld DESCRIPTION stehen. Komplexer wird es wieder bei an ATTENDEE-Feldern. In diesen Feldern können Teilnehmer eingetragen werden, beispielsweise bei Meeting-Ereignissen. Für jeden namentlichen Teilnehmer wird ein ATTENDEE-Feld notiert. Im Unterfeld ROLE kann die Funktion des jeweiligen Teilnehmers angegeben werden. Die Wertzuweisung OWNER steht für den Organisator, Einladenden oder Hauptverantwortlichen des Ereignisses, und die Zuweisung ATTENDEE für normale Teilnehmer ohne spezielle Funktion. In den Feldern CN kann der Name des Teilnehmers angegeben werden, und bei MAILTO dessen Mailadresse.
Umsetzung ins hCalendar-Mikroformat
Beim Umsetzen dieser Datenstruktur in ein spezifikations-konformes hCalendar-Mikroformat haben Sie wieder ähnliche Freiheiten wie beim hCard-Format. Die Umsetzung geschieht durch Klassennamen, die über das class-Attribut in HTML notiert werden. Allerdings werden auch einige weitere Konventionen erwartet. Betrachten wir zunächst eine Umsetzung unseres ersten Beispiels (Kalendereintrag für Karfreitag 2007):
<ul class="vcalendar">
<!-- andere Feiertage -->
<li class="vevent">
<span class="summary">Karfreitag</span>:
<abbr class="dtstart" title="20070406"
style="border: none;">4. April 2007</abbr>
<abbr class="dtend" title="20070406"
style="display: none">4. April 2007</abbr>
</li>
</ul>
In dem Beispiel nehmen wir eine Aufzählungsliste mit Feiertagen an. Jeder Listeneintrag soll aus der Bezeichnung eines Feiertags und seinem Datum für das Jahr 2007 bestehen. Damit repräsentiert jedes li-Element ein Ereignis und bekommt aus diesem Grund im Start-Tag das Attribut class="vevent" zugewiesen. Dass die gesamte ul-Liste übrigens das Attribut class="vcalendar" erhält, ist keine zwingende Vorschrift. Der Klassenname vevent ist derjenige, der auslesender Software signalisiert, dass ein Kalendereintrag folgt.
In unserem Beispiel müssen die iCAL-Felder SUMMARY, DTSTART und DTEND für den Kalendereintrag umgesetzt werden. SUMMARY wird zu class="summary", wobei es egal ist, welches zugehörige HTML-Element gewählt wird (in unserem Fall ist es ein span-Element).
DTSTART und DTEND werden ebenfalls zu class-Attributzuweisungen. Hierbei ist jedoch zu beachten, dass die hCalender-Spezifikation für diese Felder das abbr-Element von HTML verlangt. Der Wert des Feldes wird, da die Notationsform zwar gut maschinenlesbar, für Menschen jedoch eine Zumutung ist, nicht als Elementinhalt, sondern im title-Attribut notiert. Im Elementinhalt des abbr-Elements kann dann ein beliebiger gewünschter Text stehen, um die Datums- und/oder Uhrzeitangabe zum Ereignis sprachabhängig und menschenlesbar wiederzugeben.
Da das abbr-Element in den meisten Browsern eine automatische Formatierung erhält (gepünktelte Unterstreichung), die aber im hiesigen Zusammenhang meist unerwünscht ist, sollte die CSS-Angabe border: none dafür sorgen, dass die entsprechende Formatierung unterdrückt wird.
In unserem Fall wollen wir ja nur ein Kalenderdatum ausgeben. Da stört natürlich der Eintrag mit class="dtend". Mit Hilfe der CSS-Angabe display: none unterdrücken wir die Anzeige.
Selbstverständlich können Sie solche CSS-Angaben auch in zentralen Stylesheets auf die Klasse anwenden, also in der Form:
abbr.dtstart { border: none; }
abbr.dtend { display: none; }
Die HTML-Umsetzung unseres zweiten iCalendar-Beispiels im hCalendar-Mikroformat könnte so aussehen:
<div class="vevent">
<h1 class="summary">Jahresversammlung 2007 der
gescheiterten Existenzen</h1>
<address class="location vcard"><span class="fn">
Stragula Realwirtschaft</span></address>
<table class="times">
<tr>
<td>Offizieller Beginn:</td>
<td><abbr class="dtstart" title="20070510T200000"
style="border: none;">10.05.2007, 20.00 Uhr</abbr></td>
</tr><tr>
<td>Offizielles Ende:</td>
<td><abbr class="dtend" title="20070510T235900"
style="display: none">Mitternacht</abbr></td>
</tr>
</table>
<h2>Teilnehmer</h2>
<ul>
<li class="attendee">
<span class="owner"><strong>Leiter:</strong>
<span class="cn">Rainer Wahnsinn</span>,
<a class="value" href="mailto:rwahnsinn@example.com">
rwahnsinn@example.com</a>
</span>
</li>
<li class="attendee">
<span class="cn">Anna Lyse</span>,
<a class="value" href="mailto:alyse@example.com">
alyse@example.com</a>
</span>
</li>
</ul>
</div>
In diesem Beispiel nehmen wir an, dass eine ganze Webseite für die Anzeige des Ereignisses spendiert wird. Deshalb setzen wir das Feld mit class="summary" kurzerhand in eine h1-Seitenüberschrift. Ein div-Bereich, der alle Auszeichnungen des Ereignisses umspannt, erhält das Signal-Attribut class="vevent".
Interessant wird es bei der Umsetzung des LOCATION-Feldes. Für eine tatsächlich existierende Örtlichkeit bietet es sich nämlich an, diese als hCard-Mikroformat auszuzeichnen. Deshalb haben wir die Angabe zu LOCATION in ein address-Element gepackt, dem mit class="location vcard" gleich zwei Mikroformat-Klassen zugewiesen werden. Zum einen wird signalisiert, dass dieses Element eine location-Angabe innerhalb des Kalenderereignisses enthält. Zum anderen wird ein vCard-Mikroformat eingeleitet. In unserem Beispiel haben wir nur den Namen einer Kneipe als Örtlichkeit angegeben. Der Inhalt des address-Elements beschränkt sich daher auf ein Element, das mit class="fn" den Namen der Kneipe enthält, in der die Veranstaltung stattfindet.
Die Angaben zu Anfang und Ende der Veranstaltung haben wir in eine kleine Tabelle gepackt, um die Inhalte tabulatorisch sauber auszurichten. Die eigentlichen Zeitangaben werden wie gefordert durch abbr-Elemente ausgezeichnet, wobei class="dtstart" und class="dtend" Anfangs- und Endzeitpunkt deklarieren, während das title-Attribut die normierte Datums-/Uhrzeitangabe enthält und der Elementinhalt aus einer frei wählbaren, auf der Webseite sichtbaren Darstellungsform der Zeitangaben besteht.
Die Teilnehmer erscheinen in einer Aufzählungsliste. Deren li-Elemente signalisieren durch die Angabe class="attendee", dass es sich um Teilnehmerangaben zum Ereignis handelt. Teilnehmernamen und ihre Mailadressen sind im Beispiel durch vCalendar-Syntax ausgezeichnet. An diesen Stellen könnten jedoch auch wieder vollständige vCard-Mikroformate notiert werden, um zu kennzeichnen, dass es sich um Kontaktangaben handelt.
Im Browser sieht diese HTML-Konstruktion ohne weitere CSS-Formatierung in etwa so aus:
Mit Hilfe von CSS lässt sich daraus jedoch ein ansprechend gestalteter Inhalt zaubern. Die Feinstrukturierung der Inhalte ist jedenfalls in ausreichendem Maße vorhanden, und das Markup ist ein wichtiger Input für Suchmaschinen, die Mikroformate bereits erkennen.