hCalendar Microformat

Roger Costello

Click arrow key () to navigate to next page

Purpose of the hCalendar Microformat

• The purpose of the hCalendar Microformat is to provide information about an event (the kind of information you would put on your calendar), such as:
  • summary of the event (e.g., "Meeting with my stock broker to discuss investment strategies")
  • date/time of the event (e.g., Start time: Feb. 1 at 2pm; End time: 3pm)
  • location of the event (e.g., broker's office in Boston)
• hCalendar is a 1:1 HTML representation of iCalendar [RFC 2445]
• Note: iCalendar is based on vCalendar.

hCalendar Properties

• Here is the mandatory information that you must provide for an event:
  • dtstart (date/time of the start of the event)
  • summary (short synopsis of the event, title of the event, name of the event)

hCalendar Properties

• Here is the optional information that you may provide for an event:
  • Indicate the end of the event with one of these:
    • dtend (date/time of the end of the event)
    • duration (length of the event)
  • category (common values: MEETING, APPOINTMENT, CONFERENCE, EXPO; note: this property may be repeated, i.e., an event may be associated with several categories)
  • location (where the event is to be held)
  • url (a URL to a page that contains the definitive/preferred information about the event)
  • description (a more detailed synopsis of the event than that provided by summary)
  • last-modified (date/time the information was updated)

hCalendar Properties

• Here is the optional information that you may provide for an event (cont.):
  • status (values are: TENTATIVE, CONFIRMED, or CANCELLED)
  • class (access classification of the event information; values are: PUBLIC, PRIVATE, or CONFIDENTIAL)
  • uid (a globally unique identifier; typically a URL is used)
  • dtstamp (date/time of when the document containing the event information was created)

Skeletal Structure

• Here is the skeletal structure of an hCalendar Microformat:

1. <... class="vcalendar">
2. <... class="vevent">
3. -- info about event 1 --
4. </...>
5. <... class="vevent">
6. -- info about event 2 --
7. </...>
8. <... class="vevent">
9. -- info about event 3 --
10. </...>
11. </...>

• vcalendar is optional. If you are providing information about just one event then omit it, and use vevent as the root class.

hCalendar Profile

• The hCalendar profile URL is: http://microformats.org/wiki/hcalendar-profile

Format of the Date/Time Properties

• The value of dtstart, dtend, last-modified, dtstamp is a datetime.
• Datetimes are specified as an ISO8601 datetime.
• The ISO8601 format is:
  • YYYY-MM-DDThh:mm:ss.sss
  • YYYY-MM-DDThh:mm:ss.sssZ
  • YYYY-MM-DDThh:mm:ss.sss+hh (or -hh)
• "T" separates the date and the time
• If you just have a date then omit the "T" and the stuff following it
• If you just have a time then omit the "T" and the stuff preceding it
• ".sss" is optional (fractional seconds is optional)

Format of the Date/Time Properties

• YYYY-MM-DDThh:mm:ss.sss indicates the date/time is expressed in local time
• YYYY-MM-DDThh:mm:ss.sssZ indicates the date/time is expressed in Greenwich Mean Time (Zulu Time)
• YYYY-MM-DDThh:mm:ss.sss+hh (or -hh) indicates the date/time is +hh (or -hh) hours offset from GMT
• Here are some examples:
  • 2007-05-10T14:00:00 means May 10, 2007 at 2:00pm local time
  • 2007-05-10 means May 10, 2007
  • 2007-05 means May, 2007
  • 2007 means 2007
  • 14:00:00-05 means 2:00pm local time, which is 5 hours behind GMT (London's time), so it's 7:00pm in London

Machine vs Human Date/Time Values

• All date/time values should be expressed using the <abbr> element, e.g.,
  • <abbr class="dtstart" title="2007-05-10T14:00:00">2 o'clock</abbr>
• Machines (Web applications) will use the value of the title attribute
• Browsers, of course, display the value of the abbr element
• Thus, the abbr element gives us a way of providing a date/time in two formats - one format that is well-suited to machines, and one format that is well-suited to humans!

Format of the duration Property

• The duration property is specified as period (P) of time (see section 4.3.6 of RFC2445)
• The duration format is (fill in ___ with digit(s)):
  • P___D (P15D means 15 days)
  • P___DT___H (P15DT10H means 15 days, 10 hours)
  • P___DT___H___M (P15DT10H20M means 15 days, 10 hours, 20 minutes)
  • P___DT___H___M___S (P15DT10H20M12S means 15 days, 10 hours, 20 minutes, 12 seconds)
  • P___W (P7W means 7 weeks)
  • PT___H (PT5H means 5 hours)
  • PT___H___M (PT5H3M means 5 hours, 3 minutes)
  • PT___H___M___S (PT5H3M59S means 5 hours, 3 minutes, 59 seconds)

Machine vs Human duration Values

• All duration values should be expressed using the <abbr> element, e.g.,
  • <abbr class="duration" title="PT1H">1 hour</abbr>
  • <abbr class="duration" title="PT15M">15 minutes</abbr>

Example

• Markup this HTML text using the hCalendar properties:

1. <head>
2. <title>Web 2.0 Expo</title>
3. </head>
4. <body>
5. <h1>Web 2.0 Expo</h1>
6. <p>Registration is now open for <a href="http://www.web2expo.com/">Web 2.0 Expo</a>,
7. the first event specifically designed to help teach Web 2.0 techniques and best
8. practices to people in the trenches directly involved in the design, development,
9. engineering, marketing, and business of second-generation internet technology.
10. <a href="http://www.web2expo.com/pub/w/53/register.html">Register now</a> and save
11. up to $200 on registration fees. Web 2.0 Expo happens April 15-18 at Moscone West
12. in San Francisco, CA.
13. </p>
14. </body>

• View example01 (no hCalendar) in a browser.

Example (cont.)

• Here is the marked up HTML text:

1. <head profile="http://microformats.org/wiki/hcalendar-profile">
2. <title>Web 2.0 Expo</title>
3. </head>
4. <body>
5. <h1>Web 2.0 Expo</h1>
6. <p class="vevent">Registration is now open for
7. <a class="url uid summary" href="http://www.web2expo.com/">Web 2.0
8. <span class="category">Expo</span></a>,
9. <span class="description">the first event specifically designed to help teach
10. Web 2.0 techniques and best practices to people in the trenches directly
11. involved in the design, development, engineering, marketing, and business of
12. second-generation internet technology.</span>
13. <a href="http://www.web2expo.com/pub/w/53/register.html">Register now</a> and save
14. up to $200 on registration fees. Web 2.0 Expo happens
15. <abbr class="dtstart" title="2007-04-15">April 15</abbr>-
16. <abbr class="dtend" title="2007-04-19">18</abbr>
17. at <span class="location">Moscone West in San Francisco, CA</span>.
18. </p>

Example (cont.)

• Here is the marked up HTML text:

1. <head profile="http://microformats.org/wiki/hcalendar-profile">
2. <title>Web 2.0 Expo</title>
3. </head>
4. <body>
5. <h1>Web 2.0 Expo</h1>
6. <p class="vevent">Registration is now open for
7. <a class="url uid summary" href="http://www.web2expo.com/">Web 2.0
8. <span class="category">Expo</span></a>,
9. <span class="description">the first event specifically designed to help teach
10. Web 2.0 techniques and best practices to people in the trenches directly
11. involved in the design, development, engineering, marketing, and business of
12. second-generation internet technology.</span>
13. <a href="http://www.web2expo.com/pub/w/53/register.html">Register now</a> and save
14. up to $200 on registration fees. Web 2.0 Expo happens
15. <abbr class="dtstart" title="2007-04-15">April 15</abbr>-
16. <abbr class="dtend" title="2007-04-19">18</abbr>
17. at <span class="location">Moscone West in San Francisco, CA</span>.
18. </p>

Example (cont.)

• Here is the marked up HTML text:

1. <head profile="http://microformats.org/wiki/hcalendar-profile">
2. <title>Web 2.0 Expo</title>
3. </head>
4. <body>
5. <h1>Web 2.0 Expo</h1>
6. <p class="vevent">Registration is now open for
7. <a class="url uid summary" href="http://www.web2expo.com/">Web 2.0
8. <span class="category">Expo</span></a>,
9. <span class="description">the first event specifically designed to help teach
10. Web 2.0 techniques and best practices to people in the trenches directly
11. involved in the design, development, engineering, marketing, and business of
12. second-generation internet technology.</span>
13. <a href="http://www.web2expo.com/pub/w/53/register.html">Register now</a> and save
14. up to $200 on registration fees. Web 2.0 Expo happens
15. <abbr class="dtstart" title="2007-04-15">April 15</abbr>-
16. <abbr class="dtend" title="2007-04-19">18</abbr>
17. at <span class="location">Moscone West in San Francisco, CA</span>.
18. </p>

Example (cont.)

• Here is the marked up HTML text:

1. <head profile="http://microformats.org/wiki/hcalendar-profile">
2. <title>Web 2.0 Expo</title>
3. </head>
4. <body>
5. <h1>Web 2.0 Expo</h1>
6. <p class="vevent">Registration is now open for
7. <a class="url uid summary" href="http://www.web2expo.com/">Web 2.0
8. <span class="category">Expo</span></a>,
9. <span class="description">the first event specifically designed to help teach
10. Web 2.0 techniques and best practices to people in the trenches directly
11. involved in the design, development, engineering, marketing, and business of
12. second-generation internet technology.</span>
13. <a href="http://www.web2expo.com/pub/w/53/register.html">Register now</a> and save
14. up to $200 on registration fees. Web 2.0 Expo happens
15. <abbr class="dtstart" title="2007-04-15">April 15</abbr>-
16. <abbr class="dtend" title="2007-04-19">18</abbr>
17. at <span class="location">Moscone West in San Francisco, CA</span>.
18. </p>

Example (cont.)

• Here is the marked up HTML text:

1. <head profile="http://microformats.org/wiki/hcalendar-profile">
2. <title>Web 2.0 Expo</title>
3. </head>
4. <body>
5. <h1>Web 2.0 Expo</h1>
6. <p class="vevent">Registration is now open for
7. <a class="url uid summary" href="http://www.web2expo.com/">Web 2.0
8. <span class="category">Expo</span></a>,
9. <span class="description">the first event specifically designed to help teach
10. Web 2.0 techniques and best practices to people in the trenches directly
11. involved in the design, development, engineering, marketing, and business of
12. second-generation internet technology.</span>
13. <a href="http://www.web2expo.com/pub/w/53/register.html">Register now</a> and save
14. up to $200 on registration fees. Web 2.0 Expo happens
15. <abbr class="dtstart" title="2007-04-15">April 15</abbr>-
16. <abbr class="dtend" title="2007-04-19">18</abbr>
17. at <span class="location">Moscone West in San Francisco, CA</span>.
18. </p>

Example (cont.)

• Here is the marked up HTML text:

1. <head profile="http://microformats.org/wiki/hcalendar-profile">
2. <title>Web 2.0 Expo</title>
3. </head>
4. <body>
5. <h1>Web 2.0 Expo</h1>
6. <p class="vevent">Registration is now open for
7. <a class="url uid summary" href="http://www.web2expo.com/">Web 2.0
8. <span class="category">Expo</span></a>,
9. <span class="description">the first event specifically designed to help teach
10. Web 2.0 techniques and best practices to people in the trenches directly
11. involved in the design, development, engineering, marketing, and business of
12. second-generation internet technology.</span>
13. <a href="http://www.web2expo.com/pub/w/53/register.html">Register now</a> and save
14. up to $200 on registration fees. Web 2.0 Expo happens
15. <abbr class="dtstart" title="2007-04-15">April 15</abbr>-
16. <abbr class="dtend" title="2007-04-19">18</abbr>
17. at <span class="location">Moscone West in San Francisco, CA</span>.
18. </p>

Example (cont.)

• Here is the marked up HTML text:

1. <head profile="http://microformats.org/wiki/hcalendar-profile">
2. <title>Web 2.0 Expo</title>
3. </head>
4. <body>
5. <h1>Web 2.0 Expo</h1>
6. <p class="vevent">Registration is now open for
7. <a class="url uid summary" href="http://www.web2expo.com/">Web 2.0
8. <span class="category">Expo</span></a>,
9. <span class="description">the first event specifically designed to help teach
10. Web 2.0 techniques and best practices to people in the trenches directly
11. involved in the design, development, engineering, marketing, and business of
12. second-generation internet technology.</span>
13. <a href="http://www.web2expo.com/pub/w/53/register.html">Register now</a> and save
14. up to $200 on registration fees. Web 2.0 Expo happens
15. <abbr class="dtstart" title="2007-04-15">April 15</abbr>-
16. <abbr class="dtend" title="2007-04-19">18</abbr>
17. at <span class="location">Moscone West in San Francisco, CA</span>.
18. </p>

Example (cont.)

• Here is the marked up HTML text:

1. <head profile="http://microformats.org/wiki/hcalendar-profile">
2. <title>Web 2.0 Expo</title>
3. </head>
4. <body>
5. <h1>Web 2.0 Expo</h1>
6. <p class="vevent">Registration is now open for
7. <a class="url uid summary" href="http://www.web2expo.com/">Web 2.0
8. <span class="category">Expo</span></a>,
9. <span class="description">the first event specifically designed to help teach
10. Web 2.0 techniques and best practices to people in the trenches directly
11. involved in the design, development, engineering, marketing, and business of
12. second-generation internet technology.</span>
13. <a href="http://www.web2expo.com/pub/w/53/register.html">Register now</a> and save
14. up to $200 on registration fees. Web 2.0 Expo happens
15. <abbr class="dtstart" title="2007-04-15">April 15</abbr>-
16. <abbr class="dtend" title="2007-04-19">18</abbr>
17. at <span class="location">Moscone West in San Francisco, CA</span>.
18. </p>

dtend is Exclusive

• The Web 2.0 expo ends on April 18, yet dtend specifies the 19th:

1. <abbr class="dtend" title="2007-04-19">18</abbr>

• (Recall that machines use the value of title as the value of dtend, not the value of abbr.)
• When dtend is specified using just a date (no time specified) then the time is the first second of the date that is specified, e.g., 00:00:01 on the 19th.
• Thus, by setting dtend to April 19th we are indicating that the Web 2.0 expo runs till midnight April 18.

hCalendar plus hCard

• We can further enrich the semantics of the Web 2.0 event description by adding an hCard:

1. ...
2. <span class="location vcard">
3. <span class="fn org">Moscone West</span>
4. <span class="adr">
5. in <span class="locality">San Francisco</span>,
6. <span class="region">CA</span>
7. </span>
8. </span>.

• View example01 (hCalendar + hCard) in a browser.

hCalendar plus hCard plus geo

• We can further enrich the semantics of the Web 2.0 event description by adding geo location:

1. ...
2. <span class="location vcard">
3. <abbr class="geo" title="37.774200;-122.417068">
4. <span class="fn org">Moscone West</span>
5. </abbr>
6. <span class="adr">
7. in <span class="locality">San Francisco</span>,
8. <span class="region">CA</span>
9. </span>
10. </span>

• View example01 (hCalendar + hCard + geo) in a browser.

category Property

• category - use to specify a category for an event. Multiple categories may be specified. The categories are useful to search engines in finding events of a particular category.
  • Some example values for category include: "anniversary", "appointment", "business", "education", "holiday", "meeting", "miscellaneous", "non-working hours", "not in office", "personal", "phone call", "sick day", special occassion", "travel", "vacation", "expo", "conference"
• Example: markup this HTML text using the hCalendar properties:

1. There will be a meeting at 2 o'clock to discuss ...

• Here is the marked up text:

1. There will be a <span class="category">meeting</span> at
2. <abbr class="dtstart" title="14:00:00">2 o'clock</abbr> to
3. <span class="summary">discuss ...</span>

category Property

• An alternate viewpoint is that we are "tagging" the event.
• We already have an elemental Microformat for tagging content (rel-tag). So, we can use a tag to give the category property its value.
• Example: markup this HTML text using the hCalendar properties:

1. The Web 2.0 Expo will be ...

• Here is the marked up text:

1. The <a href="http://en.wikipedia.org/wiki/Web_2.0" class="category" rel="tag">Web 2.0</a>
2. <span class="category">Expo</span>

• Notice that two categories are specified: Web_2.0 (tag) and Expo.

dtstart, no dtend

• An event with a dtstart property but no dtend property is intended to represent an event that is associated with a calendar date.
• Example: markup this HTML text using the hCalendar properties:

1. Their 5 year wedding anniversary is May 5th.

• Here is the marked up text:

1. Their 5 year <a href="http://en.wikipedia.org/wiki/Wedding" class="category" rel="tag">wedding</a>
2. <span class="category">anniversary</span> is
3. <abbr class="dtstart" title="2007-05-05">May 5th</abbr>.

status Property

• status - use to specify the overall status or confirmation of an event. For example, an organizer of an event can indicate that a meeting is tentative, confirmed or cancelled.
• Example: markup this HTML text using the hCalendar properties:

1. The 2 o'clock meeting has been cancelled.

• Here is the marked up text:

1. The <abbr class="dtstart" title="2007-03-17T14:00:00">2 o'clock</abbr>
2. <span class="category">meeting</span> has been
3. <span class="status">cancelled</abbr>.

last-modified Property

• last-modified - use to specify the date and time that the event information was last revised.
• This information is analogous to the modification date and time for a file in a file system.

hCalendar Creator

• There is an online tool to help you automatically generate a vevent: hCalendar Creator
• Go to the Web site and type in your event information.
• Now you can take the XHTML it generates and copy and paste it into your (X)HTML document.
• Thus, you can instantly add event information to a Web page!

hCalendar to .ics

• Brian Suda has created an XSLT stylesheet which extracts an hCalendar event and generates a calendar .ics file: hCalendar to .ics

Operator

• Open web2-expo-plus-hCard-plus-geo.html (example01) in Firefox. Operator can do three things on this HTML file:
  • It can extract the geo Microformat and show the location of Moscone West on Google Maps
  • It can extract the calendar event and add the event to your Google Calendar
  • It can extract the hCard (for Moscone West) and add it as a contact in your email system

Operator

hCalendar Implementations

• Here is a list of hCalendar implementations: http://microformats.org/wiki/hcalendar-implementations

Lab 1

• Markup this HTML using hCalendar properties: Cognition-Emotion-Motivation-Conference.html
• Name the new version of the HTML file: revised-Cognition-Emotion-Motivation-Conference.html
• After marking up the HTML with the hCalendar properties:
  1. Validate your HTML using the W3C HTML validator: http://validator.w3.org/
  2. Use Operator to add the event to your Google Calendar. Be sure to click "Save Changes" on the Google Calendar page.
     • Create a Google Calendar account.
     • View your calendar: http://www.google.com/calendar/render