A calendar for the month of January held in a male hand

Publicizing real-world events on web pages is a great idea, but it assumes that readers will frequently revisit the site, or record the time and location of the event themselves.

There are two ways that event information can be enhanced on web pages:

  1. Adding microformats and microdata to the HTML for enhanced access in search engines.
  2. Encoding event data as a separate downloadable file that can integrate the information with calendar applications such as Microsoft Outlook and Google Calendar.

Screenshot of Outlook Calendar with exported .ics filesAs we’ll see over the next series of articles, these two goals are interrelated; in this article, I’ll look at the second option. On the whole, the technique is closely related to adding personal information to contact management systems, a topic I covered earlier.

It’s possible to write the code for calendar events manually, but it’s easiest to create them using an application such as Outlook, iCal, or an online generator. From Outlook, simply drag an appointment from the calendar view to your desktop. Then rename the file appropriately, upload it to your server and add a link from the relevant web page:

<a href=showcase-night-1.ics>Add to your calendar</a>

As with .vcf files, you may find that your server does not deliver the .ics file correctly. If so, you will need to add the following line to your site’s .htaccess file:

AddType text/calendar .ics

There is one other possible quirk: the .ics file will tend to associate itself with  applications, but it’s possible that the user might prefer to use an online scheduling system such as Google Calendar. That becomes a somewhat trickier proposition to integrate on a web page: while it’s usually easier to leave it to the user to download the .ics file and add it to Google Calendar manually, it is possible to create separate links for online calendars, together with an Add to Facebook button, a topic I will cover in another article.

Photograph by Joe Lanman, used under a Creative Commons Attribution 2.0 Generic license

Enjoy this piece? I invite you to follow me at twitter.com/dudleystorey to learn more.