Difference between revisions of "hcalendar-example1-steps"

From Microformats Wiki
hcalendar-example1-steps
Jump to navigation Jump to search
m (Reverted edit of 212.89.16.31, changed back to last version by 138.87.141.59)
m (Replace <entry-title> with {{DISPLAYTITLE:}})
 
(9 intermediate revisions by 3 users not shown)
Line 1: Line 1:
= hCalendar Example 1 Steps =
+
{{DISPLAYTITLE: hCalendar Example 1 Steps }}
 +
http://www.boogdesign.com/images/buttons/microformat_hcalendar.png
  
This is a step by step explanation of the first example in the [[hCalendar]] specification.
+
This is a step by step explanation of the first example in the [[hcalendar|hCalendar]] specification.
  
 
== Example ==
 
== Example ==
Here is a sample event in iCalendar:
+
Here is a sample event in an iCalendar:
 
+
<source lang=text>
<pre><nowiki>
 
 
BEGIN:VCALENDAR
 
BEGIN:VCALENDAR
 
PRODID:-//XYZproduct//EN
 
PRODID:-//XYZproduct//EN
 
VERSION:2.0
 
VERSION:2.0
 
BEGIN:VEVENT
 
BEGIN:VEVENT
URL:http://www.web2con.com/
+
URL:http://conferences.oreillynet.com/pub/w/40/program.html
 
DTSTART:20051005
 
DTSTART:20051005
DTEND:20051007
+
DTEND:20051008
 
SUMMARY:Web 2.0 Conference
 
SUMMARY:Web 2.0 Conference
LOCATION:Argent Hotel, San Francisco, CA
+
LOCATION:Argent Hotel\, San Francisco\, CA
 
END:VEVENT
 
END:VEVENT
 
END:VCALENDAR
 
END:VCALENDAR
</nowiki></pre>
+
</source>
  
and an equivalent in hCalendar:
+
and an equivalent event in hCalendar format:
  
<pre><nowiki>
+
<source lang=html4strict>
<span class="vcalendar">
+
<div class="vevent">
<span class="vevent">
+
<a class="url" href="http://conferences.oreillynet.com/pub/w/40/program.html/">
  <a class="url" href="http://www.web2con.com/">
+
  <span class="summary">Web 2.0 Conference</span></a>:  
  <span class="summary">Web 2.0 Conference</span>:
+
<span class="dtstart">2005-10-05</span>-  
  <span class="dtstart">20051005</span>-
+
<span class="dtend">2005-10-07</span>,
  <span class="dtend">20051007</span>,  
+
at the <span class="location">Argent Hotel, San Francisco, CA</span>
  at the <span class="location">Argent Hotel, San Francisco, CA</span>
+
</div>
  </a>
+
</source>
</span>
 
</span>
 
</nowiki></pre>
 
  
 
which could be displayed as:
 
which could be displayed as:
  
[http://www.web2con.com/ Web 2.0 Conference: 20051005-20051007, at the Argent Hotel, San Francisco, CA]
+
<div class="vevent">
 +
<span class="url" style="display:none"><!-- unfortunately display none'd to account for idiosyncrasy of wiki software, in practice use the example markup above, not this --> http://conferences.oreillynet.com/pub/w/40/program.html/</span>&nbsp;
 +
<span class="summary">[http://conferences.oreillynet.com/pub/w/40/program.html/ Web 2.0 Conference]</span>:  
 +
<span class="dtstart">2005-10-05</span>-
 +
<span class="dtend">2005-10-07</span>,
 +
at the <span class="location">Argent Hotel, San Francisco, CA</span>
 +
</div>
  
 +
Note that this is a '''live''' hCalendar microformat, which will be found on this page by parsers.
  
 
Note 1: The product information is not necessary since hCalendar is an interchange format.  When transforming hCalendar back into iCalendar, the transforming engine should add its own product ID.
 
Note 1: The product information is not necessary since hCalendar is an interchange format.  When transforming hCalendar back into iCalendar, the transforming engine should add its own product ID.
Line 46: Line 50:
 
Note 3: The version information is unnecessary in hCalendar markup directly since the version will be defined by the profile of hCalendar that is used/referred to in the 'profile' attribute of the <head> element.
 
Note 3: The version information is unnecessary in hCalendar markup directly since the version will be defined by the profile of hCalendar that is used/referred to in the 'profile' attribute of the <head> element.
  
ISO8601 dates are however not very human friendly. In addition, the year is often understood implicitly by humans from the context. Thus this example could be improved by using &lt;abbr&gt; to make the date information more human readable, e.g.
+
Note 4: ISO8601 dates without dashes are however not very human friendly, thus we've added dashes. In addition, the year is often understood implicitly by humans from the context. Thus this example could be improved by using &lt;abbr&gt; to make the date information more human readable and friendly, e.g.
  
<pre><nowiki>
+
<source lang=html4strict>
 
<span class="vevent">
 
<span class="vevent">
  <a class="url" href="http://www.web2con.com/">
+
  <a class="url" href="http://conferences.oreillynet.com/pub/w/40/program.html/">
   <span class="summary">Web 2.0 Conference</span>:  
+
   <span class="summary">Web 2.0 Conference</span></a>:  
   <abbr class="dtstart" title="20051005">October 5</abbr>-
+
   <abbr class="dtstart" title="2005-10-05">October 5</abbr>-
   <abbr class="dtend" title="20051007">7</abbr>,
+
   <abbr class="dtend" title="2005-10-07">7</abbr>,
 
  at the <span class="location">Argent Hotel, San Francisco, CA</span>
 
  at the <span class="location">Argent Hotel, San Francisco, CA</span>
</a>
 
 
</span>
 
</span>
</nowiki></pre>
+
</source>
  
 
which could be displayed as:
 
which could be displayed as:
  
[http://www.web2con.com/ Web 2.0 Conference: October 5-7, at the Argent Hotel, San Francisco, CA]
+
<div class="vevent">
 +
<span class="url" style="display:none"><!-- unfortunately display noned to account for idiosyncrasy of wiki software, in practice use the example markup above, not this --> http://conferences.oreillynet.com/pub/w/40/program.html/</span>&nbsp;
 +
<span class="summary">[http://conferences.oreillynet.com/pub/w/40/program.html/ Web 2.0 Conference]</span>:  
 +
<abbr class="dtstart" title="2005-10-05">October 5</abbr>-
 +
<abbr class="dtend" title="2005-10-07">7</abbr>,
 +
at the <span class="location">Argent Hotel, San Francisco, CA</span>
 +
</div>
  
 +
Note 5: The iCalendar has DTEND:20051008 (note the '''8''') vs. the hCalendar has the human visible (and actual) end date of 2005-10-07 (note the '''7'''). This is deliberate. In the case of the end datetime in iCalendar (DTEND), the date must be specified as a whole day after the last day since [http://lists.osafoundation.org/pipermail/ietf-calsify/2005-September/000769.html DTEND is exclusive in iCalendar]. This was very confusing for human authors so with microformats we have fixed this to be consistent with human expectations (visible end date is inclusive). See the [[dtend-issue]] for more details on research and resolution.
  
Back to the [[hCalendar]] specification.
+
==Related pages==
 +
{{hcalendar-related-pages}}

Latest revision as of 16:24, 18 July 2020

microformat_hcalendar.png

This is a step by step explanation of the first example in the hCalendar specification.

Example

Here is a sample event in an iCalendar:

BEGIN:VCALENDAR
PRODID:-//XYZproduct//EN
VERSION:2.0
BEGIN:VEVENT
URL:http://conferences.oreillynet.com/pub/w/40/program.html
DTSTART:20051005
DTEND:20051008
SUMMARY:Web 2.0 Conference
LOCATION:Argent Hotel\, San Francisco\, CA
END:VEVENT
END:VCALENDAR

and an equivalent event in hCalendar format:

<div class="vevent">
 <a class="url" href="http://conferences.oreillynet.com/pub/w/40/program.html/">
  <span class="summary">Web 2.0 Conference</span></a>: 
 <span class="dtstart">2005-10-05</span>- 
 <span class="dtend">2005-10-07</span>,
 at the <span class="location">Argent Hotel, San Francisco, CA</span>
</div>

which could be displayed as:

  Web 2.0 Conference: 2005-10-05- 2005-10-07, at the Argent Hotel, San Francisco, CA

Note that this is a live hCalendar microformat, which will be found on this page by parsers.

Note 1: The product information is not necessary since hCalendar is an interchange format. When transforming hCalendar back into iCalendar, the transforming engine should add its own product ID.

Note 2: A surrounding element is optional, and can be left out as such. It is optional since the context of a vcalendar is implied when a vevent is encountered. The implied context/scope is that of the document. Authors may explicitly use elements with class="vcalendar" to wrap sets of vevents that all belong to the same calendar, e.g. when publishing multiple calendars on the same page.

Note 3: The version information is unnecessary in hCalendar markup directly since the version will be defined by the profile of hCalendar that is used/referred to in the 'profile' attribute of the <head> element.

Note 4: ISO8601 dates without dashes are however not very human friendly, thus we've added dashes. In addition, the year is often understood implicitly by humans from the context. Thus this example could be improved by using <abbr> to make the date information more human readable and friendly, e.g.

<span class="vevent">
 <a class="url" href="http://conferences.oreillynet.com/pub/w/40/program.html/">
  <span class="summary">Web 2.0 Conference</span></a>: 
  <abbr class="dtstart" title="2005-10-05">October 5</abbr>-
  <abbr class="dtend" title="2005-10-07">7</abbr>,
 at the <span class="location">Argent Hotel, San Francisco, CA</span>
</span>

which could be displayed as:

  Web 2.0 Conference: October 5- 7, at the Argent Hotel, San Francisco, CA

Note 5: The iCalendar has DTEND:20051008 (note the 8) vs. the hCalendar has the human visible (and actual) end date of 2005-10-07 (note the 7). This is deliberate. In the case of the end datetime in iCalendar (DTEND), the date must be specified as a whole day after the last day since DTEND is exclusive in iCalendar. This was very confusing for human authors so with microformats we have fixed this to be consistent with human expectations (visible end date is inclusive). See the dtend-issue for more details on research and resolution.

Related pages

This specification is a work in progress. As additional aspects are discussed, understood, and written, they will be added. These thoughts, issues, and questions are kept in separate pages.