hcalendar-example1-steps

From Microformats Wiki
Jump to navigation Jump to search

hCalendar Example 1 Steps

This is a step by step explanation of the first example in the hCalendar specification.

Example

Here is a sample event in iCalendar: 

BEGIN:VCALENDAR
PRODID:-//XYZproduct//EN
VERSION:2.0
BEGIN:VEVENT
URL:http://www.web2con.com/
DTSTART:20051005
DTEND:20051007
SUMMARY:Web 2.0 Conference
LOCATION:Argent Hotel, San Francisco, CA
END:VEVENT
END:VCALENDAR

and an equivalent in hCalendar: 

<span class="vcalendar">
 <span class="vevent">
  <a class="url" href="http://www.web2con.com/">
   <span class="summary">Web 2.0 Conference</span>:
   <span class="dtstart">20051005</span>-
   <span class="dtend">20051007</span>, 
   at the <span class="location">Argent Hotel, San Francisco, CA</span>
  </a>
 </span>
</span>

which could be displayed as:

Web 2.0 Conference: 20051005-20051007, at the Argent Hotel, San Francisco, CA


Note 1: The product information is not necessary since hCalendar is an interchange format. When transforming hCalendar back into iCalendar, the transforming engine should add its own product ID.

Note 2: A surrounding element is optional, and can be left out as such. It is optional since the context of a vcalendar is implied when a vevent is encountered. The implied context/scope is that of the document. Authors may explicitly use elements with class="vcalendar" to wrap sets of vevents that all belong to the same calendar, e.g. when publishing multiple calendars on the same page.

Note 3: The version information is unnecessary in hCalendar markup directly since the version will be defined by the profile of hCalendar that is used/referred to in the 'profile' attribute of the <head> element.

ISO8601 dates are however not very human friendly. In addition, the year is often understood implicitly by humans from the context. Thus this example could be improved by using <abbr> to make the date information more human readable, e.g. 

<span class="vevent">
 <a class="url" href="http://www.web2con.com/">
  <span class="summary">Web 2.0 Conference</span>: 
  <abbr class="dtstart" title="20051005">October 5</abbr>-
  <abbr class="dtend" title="20051007">7</abbr>,
 at the <span class="location">Argent Hotel, San Francisco, CA</span>
 </a>
</span>

which could be displayed as:

Web 2.0 Conference: October 5-7, at the Argent Hotel, San Francisco, CA


Back to the hCalendar specification.

Retrieved from "http://microformats.org/wiki/index.php?title=hcalendar-example1-steps&oldid=1675"