hcalendar-authoring: Difference between revisions

From Microformats Wiki
Jump to navigation Jump to search
(→‎Location Location Location: mention venue and dtend fix)
m (Replace <entry-title> with {{DISPLAYTITLE:}})
 
(4 intermediate revisions by 3 users not shown)
Line 1: Line 1:
<entry-title>hCalendar authoring</entry-title>
{{DISPLAYTITLE:hCalendar authoring}}
{{TOC-right}}
 
This page contains useful tips and guidelines for how to author [[hcalendar|hCalendar]] events, either from scratch, or by adding markup to existing content.
This page contains useful tips and guidelines for how to author [[hcalendar|hCalendar]] events, either from scratch, or by adding markup to existing content.


Line 39: Line 39:
For instance, assuming you have the following markup:  
For instance, assuming you have the following markup:  


<pre><nowiki>
<source lang=html4strict>
    <div class="someFoo">
<div class="someFoo">
      <p> This is my wonderful markup, it contains some event information inside of it</p>
  <p> This is my markup, it contains some event information</p>
      <h6>Some Wonderful Event</h6>
  <h6>Some Wonderful Event</h6>
      <p> From the people who brought you Great Times and Fun Lovin,  
  <p> From the people who brought you Great Times and Fun Lovin,  
          comes the Some Wonderful Event at the Local Sports Stadium.   
      comes the Some Wonderful Event at the Local Sports Stadium.   
          Come at <b>A Specified Time</b>, and enjoy yourself! </p>
      Come at <b>A Specified Time</b>, and enjoy yourself! </p>
    </div>
</div>
</nowiki></pre>
</source>


If you need to add an element with the class of "vevent" around your event content, you could re-use the existing div element, and add the class "vevent" to it like so:
If you need to add an element with the class of "vevent" around your event content, you could re-use the existing div element, and add the class "vevent" to it like so:
<pre><nowiki>
<source lang=html4strict>
    <div class="someFoo vevent">
<div class="someFoo vevent">
</nowiki></pre>
</source>
Similarly, if you decide not to re-purpose an existing container, you can just wrap the content around a new block:
Similarly, if you decide not to re-purpose an existing container, you can just wrap the content around a new block:
<pre><nowiki>
<source lang=html4strict>
    <div class="someFoo">
<div class="someFoo">
      <div class="vevent">
  <div class="vevent">
        <p> This is my wond...
    <p> This is my wond...
        ...
        ...
        ... and enjoy yourself! </p>
        ... and enjoy yourself! </p>
      </div>
  </div>
    </div>
</div>
</nowiki></pre>
</source>


=== The Importance of Time and Topic ===
=== The Importance of Time and Topic ===
Line 68: Line 68:
Several properties are required in hCalendar. At a minimum, an event needs a "summary" (AKA title) and "dtstart" (starting date time), as well as either a "dtend" (ending date time) or "duration". Thus be sure to mark up the name/summary/title of the event with the class name "summary".  E.g.  
Several properties are required in hCalendar. At a minimum, an event needs a "summary" (AKA title) and "dtstart" (starting date time), as well as either a "dtend" (ending date time) or "duration". Thus be sure to mark up the name/summary/title of the event with the class name "summary".  E.g.  


<pre><nowiki>
<source lang=html4strict>
<div class="vevent">
<div class="vevent">
  <span class="summary">An Event Apart, New York City, NY</span>,
  <span class="summary">An Event Apart, New York City, NY</span>,
  <abbr class="dtstart" title="2006-07-10">July 10</abbr>-<abbr class="dtend" title="2006-07-12">11th, 2006</abbr>
  <abbr class="dtstart" title="2006-07-10">July 10</abbr> -
</div></nowiki></pre>
<abbr class="dtend" title="2006-07-11">11th, 2006</abbr>
</div>
</source>


This event might be presented like:
This event might be presented like:


An Event Apart, New York City, NY, <abbr class="dtstart" title="2006-07-10">July 10</abbr>-<abbr class="dtend" title="2006-07-12">11th, 2006</abbr>
An Event Apart, New York City, NY, <abbr class="dtstart" title="2006-07-10">July 10</abbr> - <abbr class="dtend" title="2006-07-11">11th, 2006</abbr>


Note: the use of the abbr element's title attribute to mark up a machine readable absolute datetime in addition to the human readable text.  Note also that the machine readable ''ending'' date is the day ''after'' the date specified in the human readable content.  The reason for this is that hCalendar (due to iCalendar RFC2445) interprets an ending date without a time as an instant in time, that is midnight, the absolute beginning of that day, thus ending the event the day before.  See [[hcalendar|hCalendar]] and [[hcalendar-example1-steps]] for more details on the use of the abbr element in this fashion.
Note: the use of the abbr element's title attribute to mark up a machine readable absolute datetime in addition to the human readable text.


==== Separate dates and times ====
==== Separate dates and times ====
Often pages show the date of an event and its times separately, perhaps for stylistic or layout reasons, e.g. the [http://sphcm.washington.edu/cal/cal.asp SPHCM Events Calendar] puts the date in a stylistic heading (should probably be an <code>h3</code>), and the times following it:
Sometimes pages show the date of an event and its times separately, perhaps for stylistic or layout reasons, e.g. the [http://sphcm.washington.edu/cal/cal.asp SPHCM Events Calendar] puts the date in a heading, and the times following it in another div:
 
<source lang=html4strict>
...
<h3>October 2</h3>
<div>3:30 pm - 4:50 pm</div>
...
</source>
 
In such cases, rather than having to redo the markup (which may be serving other purposes) to combine the start date and time into a single element, use a wrapping div to mark up the date and start time with <code>dtstart</code> and a span for just the end time with <code>dtend</code>, e.g.: (whitespace added for readability)
 
<source lang=html4strict>
...
<div class="dtstart">
<h3><abbr class="value" title="2007-10-02">October 2</abbr></h3>
<div>
  <span class="value">3:30 pm</span> - <span class="dtend">4:50 pm</span>
</div>
</div>
...
</source>
 
This example makes use of the [[value-class-pattern]], specifically both the [[value-class-pattern#Date_and_time_values|date and time separation]] and [[value-class-pattern#hCalendar_dtend_implied_date|implied dtend date]] techniques.
 
Completed event example with date and times:


<pre><nowiki>
<source lang=html4strict>
<div class='eventdate'>October 2</div>
<div class="vevent">
<div class='eventtime'>3:30 pm - 4:50 pm</div>
  <h2 class="summary">Seminar on authoring vs examples</h2>
</nowiki></pre>
  <div class="dtstart">
    <h3><abbr class="value" title="2007-10-02">October 2</abbr></h3>
    <div>
      <span class="value">3:30 pm</span> - <span class="dtend">4:50 pm</span>
    </div>
  </div>
</div>
</source>


In such cases, rather than having to redo the markup (which may be serving other purposes) to combine the start date and time into a single element, just mark up the times by themselves as the <code>dtstart</code> and <code>dtend</code>, e.g.: (whitespace added for readability)
Here's another event with the times preceding the date, and location information as well:


<pre><nowiki>
<source lang=html4strict>
<div class='eventdate'>October 2</div>
<div class="vevent">
<div class='eventtime'>
  <div class="summary">How to take care of your markup</div>
<abbr class='dtstart' title='2007-10-02T15:30-0700'>3:30 pm</abbr> -
  <div class="dtstart">
<abbr class='dtend' title='2007-10-02T16:50-0700'>4:50 pm</abbr>
    Date: <span class="value">9am</span> - <span class="dtend">11am</span>,
    <abbr class="value" title="2011-09-15">9/15/2011</abbr>
  </div>
  <div>Location: <span class="location">123 Main st., Beaverton, OR</span></div>
</div>
</div>
</nowiki></pre>
</source>
 
Note that the location can be further marked up with the [[adr]] microformat. See the [[#Location_Location_Location|Location Examples]] section below for more details.
 


=== Eliminating Default Dotted Underline ===
=== Eliminating Default Dotted Underline ===
Line 107: Line 146:
In the above An Event Apart example, this would have the following effect (which may not look any different for some readers):
In the above An Event Apart example, this would have the following effect (which may not look any different for some readers):


An Event Apart, New York City, NY, <abbr style="border:0" class="dtstart" title="2006-07-10">July 10</abbr>-<abbr style="border:0" class="dtend" title="2006-07-12">11th, 2006</abbr>
An Event Apart, New York City, NY, <abbr style="border:0" class="dtstart" title="2006-07-10">July 10</abbr> - <abbr style="border:0" class="dtend" title="2006-07-11">11th, 2006</abbr>


=== Representative URLs ===
=== Representative URLs ===
Line 120: Line 159:
<div class="vevent">
<div class="vevent">
  <a href="http://aneventapart.com/events/2006/nyc/" class="summary url">An Event Apart, New York City, NY</a>,
  <a href="http://aneventapart.com/events/2006/nyc/" class="summary url">An Event Apart, New York City, NY</a>,
  <abbr class="dtstart" title="2006-07-10">July 10</abbr>-<abbr class="dtend" title="2006-07-12">11th, 2006</abbr>
  <abbr class="dtstart" title="2006-07-10">July 10</abbr> -  
<abbr class="dtend" title="2006-07-11">11th, 2006</abbr>
</div></nowiki></pre>
</div></nowiki></pre>


This event might be presented like:
This event might be presented like:


[http://aneventapart.com/events/2006/nyc/ An Event Apart, New York City, NY], <abbr style="border:0" class="dtstart" title="2006-07-10">July 10</abbr>-<abbr style="border:0" class="dtend" title="2006-07-12">11th, 2006</abbr>
[http://aneventapart.com/events/2006/nyc/ An Event Apart, New York City, NY], <abbr style="border:0" class="dtstart" title="2006-07-10">July 10</abbr> - <abbr style="border:0" class="dtend" title="2006-07-11">11th, 2006</abbr>


=== Location Location Location ===
=== Location Location Location ===
Line 135: Line 175:
  <a href="http://aneventapart.com/events/2006/nyc/" class="summary url">An Event Apart,  
  <a href="http://aneventapart.com/events/2006/nyc/" class="summary url">An Event Apart,  
   <span class="location">New York City, NY</span></a>,  
   <span class="location">New York City, NY</span></a>,  
  <abbr class="dtstart" title="2006-07-10">July 10</abbr>-<abbr class="dtend" title="2006-07-11">11th, 2006</abbr>
  <abbr class="dtstart" title="2006-07-10">July 10</abbr> -
<abbr class="dtend" title="2006-07-11">11th, 2006</abbr>
</div></nowiki></pre>
</div></nowiki></pre>


Line 143: Line 184:
<div class="vevent">
<div class="vevent">
  <a href="http://aneventapart.com/events/2006/nyc/" class="summary url">An Event Apart,  
  <a href="http://aneventapart.com/events/2006/nyc/" class="summary url">An Event Apart,  
   <span class="location adr"><span class="locality">New York City</span>, <span class="region">NY</span></span></a>,  
   <span class="location adr">
  <abbr class="dtstart" title="2006-07-10">July 10</abbr>-<abbr class="dtend" title="2006-07-11">11th, 2006</abbr>
  <span class="locality">New York City</span>,  
  <span class="region">NY</span></span></a>,  
  <abbr class="dtstart" title="2006-07-10">July 10</abbr> -  
<abbr class="dtend" title="2006-07-11">11th, 2006</abbr>
</div></nowiki></pre>
</div></nowiki></pre>


Line 154: Line 198:
   <span class="location vcard">
   <span class="location vcard">
   <span class="fn org">Scandinavia House</span>,
   <span class="fn org">Scandinavia House</span>,
   <span class="adr"><span class="locality">New York City</span>, <span class="region">NY</span></span>
   <span class="adr">
    <span class="locality">New York City</span>,  
    <span class="region">NY</span></span>
   </span></a>,
   </span></a>,
  <abbr class="dtstart" title="2006-07-10">July 10</abbr>-<abbr class="dtend" title="2006-07-11">11th, 2006</abbr>
  <abbr class="dtstart" title="2006-07-10">July 10</abbr> -  
<abbr class="dtend" title="2006-07-11">11th, 2006</abbr>
</div></nowiki></pre>
</div></nowiki></pre>


Line 173: Line 220:


<pre><nowiki>
<pre><nowiki>
<a href="http://feeds.technorati.com/events/http://tantek.com/">
<a href="http://h2vx.com/ics/http://microformats.org/wiki/events">
Add Events to Calendar
Add Events to Calendar
</a>
</a>
Line 179: Line 226:


<pre><nowiki>
<pre><nowiki>
<a href="webcal://feeds.technorati.com/events/http://tantek.com/">
<a href="webcal://h2vx.com/ics/http://microformats.org/wiki/events">
Subscribe to Events
Subscribe to Events
</a>
</a>
</nowiki></pre>
</nowiki></pre>


Simply substitute the link to your hCalendar events for the http://tantek.com/ URL above.
Simply substitute the link to your hCalendar events for the http://microformats.org/wiki/events URL above.


If you want, you can also use Brian Suda's hosted X2V service, or even download and install the X2V XSLT yourself and run it on your own server instead of using an online hCalendar to iCalendar (.ics) converter service.
If you want, you can also use Brian Suda's hosted X2V service, or even download and install the X2V XSLT yourself and run it on your own server instead of using an online hCalendar to iCalendar (.ics) converter service.

Latest revision as of 16:24, 18 July 2020


This page contains useful tips and guidelines for how to author hCalendar events, either from scratch, or by adding markup to existing content.

Goal: The goal of this document is to provide some good intuitive guidelines that should make it as easy and as quick as possible for any web author to create hCalendar events or add hCalendar markup to existing content.

Audience: Web authors and designers. This document is written for easy consumption and understanding by any web designer who knows at least enough (X)HTML and CSS to use HTML class names on elements and write CSS selectors that apply styles to those class names. Please help with clarifying/simplifying this document accordingly.

Author(s): Tantek Çelik

Creating new hCalendar events

Start with the hCalendar creator, and for additional fields and properties (e.g. contact, attendees, etc.), see the hCalendar examples page as well as the rest of this page.

Adding hCalendar markup to existing content

Minimal Markup Changes

The important thing to keep in mind when adding microformats to existing content, is the fact that microformats are designed so that they can be added with minimal (almost always no) changes to the existing presentation of the page. Thus keep this in mind: change as little markup as possible. If you want to fix various pages to be valid XHTML as well, that's a fine goal and highly encouraged.

Find Events

Start with looking for all mentions of events on a page, such as an "Upcoming Events" or "Recent Events" listing. Those are all potential hCalendar events - even more so if they are linked to their respective URLs (e.g. to single event pages with more details).

If an event is mentioned several times on a page, consider marking up an hCalendar event the mention which is the most persistent, detailed, definitive, or otherwise thorough. Ideally you might want to mark up all instances of a events with hCalendar, but for now, just keep it simple and mark up the most representative instance. (Perhaps the most "definitive" instance, which could also then be marked up with a <dfn> element around the summary/title of the event for additional semantic XHTML goodness.)

Determine The Surrounding Element for Each

For each event that you want to add hCalendar, find the smallest element that contains all the info about that event, without overlapping with any other event on the page.

Add the class name "vevent" to that element.

If there is no such element (perhaps the nearest enclosing element contains more than one event), then add a <span class="vevent">...</span> or <div class="vevent">...</div> that wraps the info about about that event and just that event.

The rest of the markup for this hCalendar event MUST go inside that element with the class name "vevent".

In all cases, where it says to add an element with class name of "xyz", if you can find an existing element that precisely surrounds the necessary content, then re-use that element and simply add the class name "xyz" to it (by adding it to the class attribute on the existing element, or by adding a new class attribute class="xyz" to elements without a class attribute).

For instance, assuming you have the following markup:

<div class="someFoo">
  <p> This is my markup, it contains some event information</p>
  <h6>Some Wonderful Event</h6>
  <p> From the people who brought you Great Times and Fun Lovin, 
      comes the Some Wonderful Event at the Local Sports Stadium.  
      Come at <b>A Specified Time</b>, and enjoy yourself! </p>
</div>

If you need to add an element with the class of "vevent" around your event content, you could re-use the existing div element, and add the class "vevent" to it like so:

<div class="someFoo vevent">

Similarly, if you decide not to re-purpose an existing container, you can just wrap the content around a new block:

<div class="someFoo">
  <div class="vevent">
    <p> This is my wond...
        ...
        ... and enjoy yourself! </p>
  </div>
</div>

The Importance of Time and Topic

Several properties are required in hCalendar. At a minimum, an event needs a "summary" (AKA title) and "dtstart" (starting date time), as well as either a "dtend" (ending date time) or "duration". Thus be sure to mark up the name/summary/title of the event with the class name "summary". E.g.

<div class="vevent">
 <span class="summary">An Event Apart, New York City, NY</span>,
 <abbr class="dtstart" title="2006-07-10">July 10</abbr> -
 <abbr class="dtend" title="2006-07-11">11th, 2006</abbr>
</div>

This event might be presented like:

An Event Apart, New York City, NY, July 10 - 11th, 2006

Note: the use of the abbr element's title attribute to mark up a machine readable absolute datetime in addition to the human readable text.

Separate dates and times

Sometimes pages show the date of an event and its times separately, perhaps for stylistic or layout reasons, e.g. the SPHCM Events Calendar puts the date in a heading, and the times following it in another div:

...
<h3>October 2</h3>
<div>3:30 pm - 4:50 pm</div>
...

In such cases, rather than having to redo the markup (which may be serving other purposes) to combine the start date and time into a single element, use a wrapping div to mark up the date and start time with dtstart and a span for just the end time with dtend, e.g.: (whitespace added for readability)

...
<div class="dtstart">
 <h3><abbr class="value" title="2007-10-02">October 2</abbr></h3>
 <div>
  <span class="value">3:30 pm</span> - <span class="dtend">4:50 pm</span>
 </div>
</div>
...

This example makes use of the value-class-pattern, specifically both the date and time separation and implied dtend date techniques.

Completed event example with date and times:

<div class="vevent">
  <h2 class="summary">Seminar on authoring vs examples</h2>
  <div class="dtstart">
    <h3><abbr class="value" title="2007-10-02">October 2</abbr></h3>
    <div>
      <span class="value">3:30 pm</span> - <span class="dtend">4:50 pm</span>
    </div>
  </div>
</div>

Here's another event with the times preceding the date, and location information as well:

<div class="vevent">
  <div class="summary">How to take care of your markup</div>
  <div class="dtstart">
    Date: <span class="value">9am</span> - <span class="dtend">11am</span>, 
    <abbr class="value" title="2011-09-15">9/15/2011</abbr>
  </div>
  <div>Location: <span class="location">123 Main st., Beaverton, OR</span></div>
</div>

Note that the location can be further marked up with the adr microformat. See the Location Examples section below for more details.


Eliminating Default Dotted Underline

Some browsers (Camino, Firefox, Mozilla) put a dotted underline or border on each abbr. You can use the following rule in your style sheet to eliminate this default presentation.

.vevent abbr{border:0}

In the above An Event Apart example, this would have the following effect (which may not look any different for some readers):

An Event Apart, New York City, NY, July 10 - 11th, 2006

Representative URLs

One of the most common patterns for events in web content is to link them to their definitive/preferred web site.

"Event Rolls" are a good example of this (see also XOXO for proper semantic list and outline markup).

Since the class attribute takes a space separated set of class names, one can often mark up the URL on the same element as the name, e.g. by replacing the first <span> in the above example with an <a href> hyperlink:

<div class="vevent">
 <a href="http://aneventapart.com/events/2006/nyc/" class="summary url">An Event Apart, New York City, NY</a>,
 <abbr class="dtstart" title="2006-07-10">July 10</abbr> - 
 <abbr class="dtend" title="2006-07-11">11th, 2006</abbr>
</div>

This event might be presented like:

An Event Apart, New York City, NY, July 10 - 11th, 2006

Location Location Location

As with real estate, the location of an event is quite relevant, and important to mark up properly. At a minimum, identify the location related information in the event and mark it up with the class name of "location", e.g. continuing with the above example:

<div class="vevent">
 <a href="http://aneventapart.com/events/2006/nyc/" class="summary url">An Event Apart, 
  <span class="location">New York City, NY</span></a>, 
 <abbr class="dtstart" title="2006-07-10">July 10</abbr> -
 <abbr class="dtend" title="2006-07-11">11th, 2006</abbr>
</div>

This is good, but can be made even better with the addition of the adr microformat to explicitly identify the city and state:

<div class="vevent">
 <a href="http://aneventapart.com/events/2006/nyc/" class="summary url">An Event Apart, 
  <span class="location adr">
   <span class="locality">New York City</span>, 
   <span class="region">NY</span></span></a>, 
 <abbr class="dtstart" title="2006-07-10">July 10</abbr> - 
 <abbr class="dtend" title="2006-07-11">11th, 2006</abbr>
</div>

Even better, if the location is a specific venue with a name, such as a business or organization, make the location into a complete hCard rather than just an adr:

<div class="vevent">
 <a href="http://aneventapart.com/events/2006/nyc/" class="summary url">An Event Apart, 
  <span class="location vcard">
   <span class="fn org">Scandinavia House</span>,
   <span class="adr">
    <span class="locality">New York City</span>, 
    <span class="region">NY</span></span>
  </span></a>,
 <abbr class="dtstart" title="2006-07-10">July 10</abbr> - 
 <abbr class="dtend" title="2006-07-11">11th, 2006</abbr>
</div>

More tips and guidelines

Feel free to add more tips that experience has taught you while marking up events with hCalendar, even if all you add is a brief catch phrase that reminds you.

  • How to mark up the contact and organizer
  • How to mark up attendees (including speakers)
  • ...

Add subscribe to events link

When you update your events to include hCalendar markup, you can also include "Add Events to Calendar" and/or "Subscribe to Events" links for the convenience of your users.

Here are examples of such links:

<a href="http://h2vx.com/ics/http://microformats.org/wiki/events">
Add Events to Calendar
</a>
<a href="webcal://h2vx.com/ics/http://microformats.org/wiki/events">
Subscribe to Events
</a>

Simply substitute the link to your hCalendar events for the http://microformats.org/wiki/events URL above.

If you want, you can also use Brian Suda's hosted X2V service, or even download and install the X2V XSLT yourself and run it on your own server instead of using an online hCalendar to iCalendar (.ics) converter service.

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.