hCalendar Microformat (part 2)

Roger Costello

Click arrow key () to navigate to next page

Recurring Events

• In part 1 of this tutorial on the hCalendar Microformat we saw how to mark up "one time" events.
• Frequently, however, events are recurring
  • Example: A wedding anniversary (event) recurs each year
• The following slides describe how to markup recurring events.

rrule Property

• rrule - use to specify a "recurrence rule", i.e. how often the event recurs.
• Example: consider this HTML text:

1. His wedding anniversary is yearly on Oct. 5

• This is a recurring event. The rrule property can be used to indicate the frequency of recurrence:

1. His <span class="category">wedding anniversary</span> is
2. <span class="rrule">
3. <span class="freq">yearly</span>
4. </span>
5. on <abbr class="dtstart" title="2001-10-05">Oct. 5</abbr>

• Notice that I added information not present in the original version - the zeroeth anniversary (i.e. the wedding date).

Alternate Representation

• An alternate way of expressing the above rrule is with the abbr element:

1. <abbr class="rrule" title="freq=yearly">yearly</abbr>

• This is the recommended approach.

rrule Subproperties

• freq is a subproperty of rrule. It is mandatory. Here are the legal values of freq:
  • yearly, monthly, weekly, daily, hourly, minutely, secondly
• There are "qualifier" subproperties of freq. These refine the freq value.
• freq qualifier: interval
• Example: here's how to indicate that the event recurs every other week:

1. <abbr class="rrule" title="freq=weekly;interval=2">...</abbr>

freq Qualifiers

• freq qualifier: count
• Example: here's how to indicate that the event recurs every other day and there will be 10 events:

1. <abbr class="rrule" title="freq=daily;interval=2;count=10">...</abbr>

• The order in which the qualifiers are specified is irrelevant, thus this is equivalent:

1. <abbr class="rrule" title="freq=daily;count=10;interval=2">...</abbr>

freq Qualifiers

• freq qualifier: until
• Example: here's how to indicate that the event recurs every month until Jan. 1, 2008:

1. <abbr class="rrule" title="freq=monthly;until=2008-01-01">...</abbr>

• Note: count and until are mutually exclusive: use one or the other, but not both.

freq Qualifiers

• freq qualifiers: bysecond, byminute, byhour, byday, bymonthday, byyearday, byweekno, bymonth
• These qualifiers are used to specify the second or minute or hour or day ... that the event occurs on.
• Personal note: I find it easier to replace (in my mind) "by" with "on". Thus, I mentally replace bymonth=1, with onmonth=1 (the event occurs on the first month).
• Example: here's how to indicate that the event recurs every year (forever) on January:

1. <abbr class="rrule" title="freq=yearly;bymonth=1">...</abbr>

by_____ Qualifiers

• Example: here's how to indicate that the event recurs every year (forever) on January, June, and December:

1. <abbr class="rrule" title="freq=yearly;bymonth=1,6,12">...</abbr>

• The value of all the by_____ qualifiers are lists. In the example above we see a list of three values. In the example on the previous slide we saw a list of one value.

by_____ Qualifiers

• The value of each of these is an integer (with a restricted range):
  • bysecond (0-59)
  • byminute (0-59)
  • byhour (0-23)
  • bymonthday (1-31)
  • byyearday (1-366)
  • byweekno (1-53)
  • bymonth (1-12)
• The value of byday is one of:
  • SU, MO, TU, WE, TH, FR, SA (these values are case-insensitive)

by_____ Qualifiers

• Example: here's how to indicate that the event recurs every week on Tuesday, for 10 weeks:

1. <abbr class="rrule" title="freq=weekly;byday=tu;count=10">...</abbr>

• Example: here's how to indicate that the event recurs every week on Tuesday and Thursday, at 9:30am until August 14, 2007:

1. freq=weekly;byday=tu,th;byhour=9;byminute=30;until=2007-08-14

Negative Values

• These by_____ qualifiers can have negative values:
  • bymonthday (-31 to -1)
  • byyearday (-366 to -1)
  • byweekno (-53 to -1)
  • bymonth (-12 to -1)
• A negative value means, "the n'th from the end". For example, here's how to indicate that the event recurs every month, on the last day:

1. <abbr class="rrule" title="freq=monthly;bymonthday=-1">...</abbr>

Example

• Markup this HTML text using the hCalendar Microformat:

1. <h1>Pardon the Interruption</h1>
2. <p><a href="http://sports.espn.go.com/espntv/espnShow?showID=EOPT">Pardon the Interruption</a>
3. is a TV sports show. It airs Monday to Friday at 5:30pm ET on ESPN.
4. The hosts of the show are longtime friends Tony Kornheiser and Michael Wilbon.
5. They discuss - and frequently argue over - the top stories of the day in "sports... and other stuff".
6. </p>

• View example02 (no rrule) in a browser.

Here is the Marked up HTML Text

1. <h1>Pardon the Interruption</h1>
2. <p class="vevent">
3. <a class="url uid summary" href="http://sports.espn.go.com/...">Pardon the Interruption</a>
4. is a <span class="category">TV</span> <span class="category">sports</span> show.
5. <abbr class="dtstart" title="2001-10-22">It airs</abbr>
6. <abbr class="rrule" title="freq=weekly;byday=mo,tu,we,th,fr;byhour=17;byminute=30">
7. Monday to Friday at 5:30pm</abbr>
8. <abbr class="tzid" title="US-Eastern">ET</abbr> on ESPN.
9. The hosts of the show are longtime friends
10. <span class="hcard">
11. <span class="fn n">
12. <span class="given-name">Tony</span>
13. <span class="family-name">Kornheiser</span>
14. </span>
15. </span>
16. and ... (hCard for Michael Wilbon not shown)
17. <span class="description">They discuss - and frequently argue over - the top stories of the
18. day in "sports... and other stuff".</span>
19. </p>

Here is the Marked up HTML Text

1. <h1>Pardon the Interruption</h1>
2. <p class="vevent">
3. <a class="url uid summary" href="http://sports.espn.go.com/...">Pardon the Interruption</a>
4. is a <span class="category">TV</span> <span class="category">sports</span> show.
5. <abbr class="dtstart" title="2001-10-22">It airs</abbr>
6. <abbr class="rrule" title="freq=weekly;byday=mo,tu,we,th,fr;byhour=17;byminute=30">
7. Monday to Friday at 5:30pm</abbr>
8. <abbr class="tzid" title="US-Eastern">ET</abbr> on ESPN.
9. The hosts of the show are longtime friends
10. <span class="hcard">
11. <span class="fn n">
12. <span class="given-name">Tony</span>
13. <span class="family-name">Kornheiser</span>
14. </span>
15. </span>
16. and ... (hCard for Michael Wilbon not shown)
17. <span class="description">They discuss - and frequently argue over - the top stories of the
18. day in "sports... and other stuff".</span>
19. </p>

Here is the Marked up HTML Text

1. <h1>Pardon the Interruption</h1>
2. <p class="vevent">
3. <a class="url uid summary" href="http://sports.espn.go.com/...">Pardon the Interruption</a>
4. is a <span class="category">TV</span> <span class="category">sports</span> show.
5. <abbr class="dtstart" title="2001-10-22">It airs</abbr>
6. <abbr class="rrule" title="freq=weekly;byday=mo,tu,we,th,fr;byhour=17;byminute=30">
7. Monday to Friday at 5:30pm</abbr>
8. <abbr class="tzid" title="US-Eastern">ET</abbr> on ESPN.
9. The hosts of the show are longtime friends
10. <span class="hcard">
11. <span class="fn n">
12. <span class="given-name">Tony</span>
13. <span class="family-name">Kornheiser</span>
14. </span>
15. </span>
16. and ... (hCard for Michael Wilbon not shown)
17. <span class="description">They discuss - and frequently argue over - the top stories of the
18. day in "sports... and other stuff".</span>
19. </p>

Here is the Marked up HTML Text

1. <h1>Pardon the Interruption</h1>
2. <p class="vevent">
3. <a class="url uid summary" href="http://sports.espn.go.com/...">Pardon the Interruption</a>
4. is a <span class="category">TV</span> <span class="category">sports</span> show.
5. <abbr class="dtstart" title="2001-10-22">It airs</abbr>
6. <abbr class="rrule" title="freq=weekly;byday=mo,tu,we,th,fr;byhour=17;byminute=30">
7. Monday to Friday at 5:30pm</abbr>
8. <abbr class="tzid" title="US-Eastern">ET</abbr> on ESPN.
9. The hosts of the show are longtime friends
10. <span class="hcard">
11. <span class="fn n">
12. <span class="given-name">Tony</span>
13. <span class="family-name">Kornheiser</span>
14. </span>
15. </span>
16. and ... (hCard for Michael Wilbon not shown)
17. <span class="description">They discuss - and frequently argue over - the top stories of the
18. day in "sports... and other stuff".</span>
19. </p>

Here is the Marked up HTML Text

1. <h1>Pardon the Interruption</h1>
2. <p class="vevent">
3. <a class="url uid summary" href="http://sports.espn.go.com/...">Pardon the Interruption</a>
4. is a <span class="category">TV</span> <span class="category">sports</span> show.
5. <abbr class="dtstart" title="2001-10-22">It airs</abbr>
6. <abbr class="rrule" title="freq=weekly;byday=mo,tu,we,th,fr;byhour=17;byminute=30">
7. Monday to Friday at 5:30pm</abbr>
8. <abbr class="tzid" title="US-Eastern">ET</abbr> on ESPN.
9. The hosts of the show are longtime friends
10. <span class="hcard">
11. <span class="fn n">
12. <span class="given-name">Tony</span>
13. <span class="family-name">Kornheiser</span>
14. </span>
15. </span>
16. and ... (hCard for Michael Wilbon not shown)
17. <span class="description">They discuss - and frequently argue over - the top stories of the
18. day in "sports... and other stuff".</span>
19. </p>

Here is the Marked up HTML Text

1. <h1>Pardon the Interruption</h1>
2. <p class="vevent">
3. <a class="url uid summary" href="http://sports.espn.go.com/...">Pardon the Interruption</a>
4. is a <span class="category">TV</span> <span class="category">sports</span> show.
5. <abbr class="dtstart" title="2001-10-22">It airs</abbr>
6. <abbr class="rrule" title="freq=weekly;byday=mo,tu,we,th,fr;byhour=17;byminute=30">
7. Monday to Friday at 5:30pm</abbr>
8. <abbr class="tzid" title="US-Eastern">ET</abbr> on ESPN.
9. The hosts of the show are longtime friends
10. <span class="hcard">
11. <span class="fn n">
12. <span class="given-name">Tony</span>
13. <span class="family-name">Kornheiser</span>
14. </span>
15. </span>
16. and ... (hCard for Michael Wilbon not shown)
17. <span class="description">They discuss - and frequently argue over - the top stories of the
18. day in "sports... and other stuff".</span>
19. </p>

Here is the Marked up HTML Text

1. <h1>Pardon the Interruption</h1>
2. <p class="vevent">
3. <a class="url uid summary" href="http://sports.espn.go.com/...">Pardon the Interruption</a>
4. is a <span class="category">TV</span> <span class="category">sports</span> show.
5. <abbr class="dtstart" title="2001-10-22">It airs</abbr>
6. <abbr class="rrule" title="freq=weekly;byday=mo,tu,we,th,fr;byhour=17;byminute=30">
7. Monday to Friday at 5:30pm</abbr>
8. <abbr class="tzid" title="US-Eastern">ET</abbr> on ESPN.
9. The hosts of the show are longtime friends
10. <span class="hcard">
11. <span class="fn n">
12. <span class="given-name">Tony</span>
13. <span class="family-name">Kornheiser</span>
14. </span>
15. </span>
16. and ... (hCard for Michael Wilbon not shown)
17. <span class="description">They discuss - and frequently argue over - the top stories of the
18. day in "sports... and other stuff".</span>
19. </p>

Here is the Marked up HTML Text

1. <h1>Pardon the Interruption</h1>
2. <p class="vevent">
3. <a class="url uid summary" href="http://sports.espn.go.com/...">Pardon the Interruption</a>
4. is a <span class="category">TV</span> <span class="category">sports</span> show.
5. <abbr class="dtstart" title="2001-10-22">It airs</abbr>
6. <abbr class="rrule" title="freq=weekly;byday=mo,tu,we,th,fr;byhour=17;byminute=30">
7. Monday to Friday at 5:30pm</abbr>
8. <abbr class="tzid" title="US-Eastern">ET</abbr> on ESPN.
9. The hosts of the show are longtime friends
10. <span class="hcard">
11. <span class="fn n">
12. <span class="given-name">Tony</span>
13. <span class="family-name">Kornheiser</span>
14. </span>
15. </span>
16. and ... (hCard for Michael Wilbon not shown)
17. <span class="description">They discuss - and frequently argue over - the top stories of the
18. day in "sports... and other stuff".</span>
19. </p>

Example (cont.)

• The example introduced another property: tzid. This property is used to specify a time zone.
• View example02 (with rrule) in a browser.

rdate Property

• rrule is good at expressing regularly recurring events.
• But it is not good at expressing irregularly occuring events.
  • Example: the XML conference recurs every year, but always on a different date.
• rdate allows you to list (enumerate) the datetimes of the recurring event.
• Example: markup this HTML text using rdate:

1. The first XML conference was Dec. 7, 2001. Since then
2. the conference was held on Dec. 19, 2002, Nov. 29, 2003,
3. Dec. 1, 2004, Dec. 3, 2005, and Nov. 18, 2006. This year it
4. will be held on Dec. 6.

• View example03 (no rdate) in a browser.

rdate Property

• Here is the marked up HTML text:

1. The first <span class="summary" >XML conference</span> was
2. <abbr class="dtstart" title="2001-12-07">Dec. 7, 2001</abbr>. Since then
3. the <span class="category">conference</span> was held on
4. <abbr class="rdate" title="2001-12-07,
5. 2002-12-19,
6. 2003-11-29,
7. 2004-12-01,
8. 2005-12-03,
9. 2006-11-18,
10. 2007-12-06">Dec. 19, 2002, Nov. 29, 2003,
11. Dec. 1, 2004, Dec. 3, 2005,
12. and Nov. 18, 2006. This year
13. it will be held on Dec. 6.
14. </abbr>

• The value of rdate is a comma-separated list of datetimes.

Expressing Durations

• With rdate we can specify the duration of a recurring event.
• Example: markup this HTML text:

1. He worked at Sam's Garage June 1 - Aug. 29, 2001,
2. June 5 - Aug. 30, 2002, and June 2 - Sept. 1, 2003.

Expressing Durations

• Here is the marked up text:

1. He worked at Sam's Garage
2. <abbr class="rdate" title="2001-06-01/2001-08-29,
3. 2002-06-05/2002-08-30,
4. 2003-06-02/2003-09-01">
5. <abbr class="dtstart" title="2001-06-01">June 1</abbr> - Aug. 29, 2001, June 5 - Aug. 30, 2002, and
6. June 2 - Sept. 1, 2003.
7. </abbr>

• The duration is specified by: datetime#1/datetime#2.

Lab 2

• Markup this HTML using hCalendar properties: Nanotechnology-Meetings.html
• Name the new version of the HTML file: revised-Nanotechnology-Meetings.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