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:
<... class="vcalendar">
<... class="vevent">
-- info about event 1 --
</...>
<... class="vevent">
-- info about event 2 --
</...>
<... class="vevent">
-- info about event 3 --
</...>
</...>
vcalendar is optional. If you are providing information about just one event then omit it, and use vevent as
the root class.
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)
The Web 2.0 expo ends on April 18, yet dtend specifies the 19th:
<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:
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:
There will be a meeting at 2 o'clock to discuss ...
Here is the marked up text:
There will be a <span class="category">meeting</span> at
<abbr class="dtstart" title="14:00:00">2 o'clock</abbr> to
<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:
The Web 2.0 Expo will be ...
Here is the marked up text:
The <a href="http://en.wikipedia.org/wiki/Web_2.0" class="category" rel="tag">Web 2.0</a>
<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:
Their 5 year wedding anniversary is May 5th.
Here is the marked up text:
Their 5 year <a href="http://en.wikipedia.org/wiki/Wedding" class="category" rel="tag">wedding</a>
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:
The 2 o'clock meeting has been cancelled.
Here is the marked up text:
The <abbr class="dtstart" title="2007-03-17T14:00:00">2 o'clock</abbr>
<span class="category">meeting</span> has been
<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