July 23, 2008

hCalendar microformat example

Created at http://microformats.org/code/hcalendar/creator

Install the Firefox add-on Operator to see microformats in action.

Without specific times:


September 9th : 13th, 2008
2008 NAGW National Conference all day at Pheasant Run Resort and Spa, St. Charles, IL

The NAGW National Conference is the premier conference for local and regional government web professionals. Local, regional, state and federal government web professionals join their peers at the conference for three days of education, training and networking in a relaxed professional environment.



Code for the above:
<div id="hcalendar-2008-NAGW-National-Conference-all-day" class="vevent">
<a href="http://nagw.org/index.php/annual-conference" class="url">
<abbr title="2008-09-09" class="dtstart">September 9th</abbr> : <abbr title="2008-09-13" class="dtend">13th, 2008</abbr>
<span class="summary">2008 NAGW National Conference all day</span> at <span class="location">Pheasant Run Resort and Spa, St. Charles, IL</span></a>
<div class="description">The NAGW National Conference is the premier conference for local and regional government web professionals. Local, regional, state and federal government web professionals join their peers at the conference for three days of education, training and networking in a relaxed professional environment.</div>
</div>

September 12th was chosen as the end date, but September 13th shows up as the end date here. When exported to Outlook, the end date is September 12th. This can be confusing, but we could change the text to say the 12th as long as we leave the title attributes alone.

Let's see what happens when we put in a start time of 8:00 a.m. on September 9th and an end time of 12:00 p.m. on September:



September 9th 8am : 12th 12pm, 2008 :
2008 NAGW National Conference all day at Pheasant Run Resort and Spa, St. Charles, IL

The NAGW National Conference is the premier conference for local and regional government web professionals. Local, regional, state and federal government web professionals join their peers at the conference for three days of education, training and networking in a relaxed professional environment.



Code for the above:
<div id="hcalendar-2008-NAGW-National-Conference-all-day" class="vevent">
<a href="http://nagw.org/index.php/annual-conference" class="url">
<abbr title="2008-09-09T08:00-06:0000" class="dtstart">September 9th 8am</abbr> : <abbr title="2008-09-12T12:00-06:00" class="dtend">12th 12pm, 2008</abbr> :
<span class="summary">2008 NAGW National Conference all day</span> at <span class="location">Pheasant Run Resort and Spa, St. Charles, IL</span></a>
<div class="description">The NAGW National Conference is the premier conference for local and regional government web professionals. Local, regional, state and federal government web professionals join their peers at the conference for three days of education, training and networking in a relaxed professional environment.</div>
</div>

The title attributes here cause an accessibility issue, though, as the Jaws screen reader will read these as numbers and not as time. The <a href="http://www.webstandards.org/2007/04/27/haccessibility/">accessibility task force</a> from <a href="http://www.webstandards.org">webstandards.org</a> recommends using the span tag instead of abbr to reduce the occurrence of this issue.

If you ever need to use an afternoon or evening time, remember to express the time in 24-hour/military time (Example: 1:00 p.m. would be 13:00.).
Post a Comment