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:
