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