hCalendar Microformat

Roger Costello

Click arrow key () to navigate to next page

Purpose of the hCalendar Microformat

hCalendar Properties

hCalendar Properties

hCalendar Properties

Skeletal Structure

  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. </...>

hCalendar Profile

Format of the Date/Time Properties

Format of the Date/Time Properties

Machine vs Human Date/Time Values

Format of the duration Property

Machine vs Human duration Values

Example

  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>

Example (cont.)

  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.)

  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.)

  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.)

  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.)

  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.)

  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.)

  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.)

  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.)

dtend is Exclusive

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

hCalendar plus 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>.

hCalendar plus hCard plus geo

  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>

category Property

  1. There will be a meeting at 2 o'clock to discuss ...
  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

  1. The Web 2.0 Expo will be ...
  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>

dtstart, no dtend

  1. Their 5 year wedding anniversary is May 5th.
  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

  1. The 2 o'clock meeting has been cancelled.
  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

hCalendar Creator

hCalendar to .ics

Operator

Operator

web2-expo-plus-hCard-plus-geo.html displayed in Firefox shows three actions that can be taken

hCalendar Implementations

Lab 1

Continued ...