hCalendar Widget Example

hCalendarWidget is a JavaScript widget that loads hCalendar markup from the current page and displays them in a Google Calendar-style UI. It's really just a bit of glue code around the hCalendar microformat, and the FullCalendar JQuery plugin.

hCalendarWidget was created by martind.

Example

Here are a few events marked up with the hCalendar microformat:

Site Relaunch

• 2010-10-01: Milestone 1
• 2010-10-09: Milestone 2
• 2010-10-09 to 2010-10-18: QA
• 2010-10-25: Launch

Miracle Wax 2.0

• 2010-10-05: Project review
• 2010-10-06: Research
• 2010-10-07: Planning sessions

Calendar

And this is the information above presented as a calendar:

hCalendar Markup

The HTML markup is essentially the hCalendar microformat. We support the following fields:

• summary
• dtstart
• dtend
• location
• url

And we're introducing one new field: title, used as a means of categorisation. This allows you to group events relating to particular contexts. This is implemented as a title="..." HTML attribute on the vevent container tag (which means this still validates as XHTML.)

Example markup:

<span class="vevent" title="Site Relaunch">
	<span class="dtstart">2010-10-01</span>: <span class="summary">milestone 1</span>
</span>