Publish web content events in iCalendar format

A typical iCalendar file that represents a standard All Day event might look something like this:

BEGIN:VEVENT
DTSTART;VALUE=DATE:20060704
DTEND;VALUE=DATE:20060705
SUMMARY:Independence Day
END:VEVENT

This would create an All Day event called "Independence Day" on July 4.

If you wanted to add web content to this event, you just need to add a few additional fields to the event description in iCal (the added fields are in green boldface):

BEGIN:VEVENT
DTSTART;VALUE=DATE:20060704
DTEND;VALUE=DATE:20060705
SUMMARY:Independence Day
X-GOOGLE-CALENDAR-CONTENT-TITLE:Independence Day
X-GOOGLE-CALENDAR-CONTENT-ICON:http://www.google.com/calendar/images/google-holiday.gif
X-GOOGLE-CALENDAR-CONTENT-URL:http://www.google.com/logos/july4th06.gif
X-GOOGLE-CALENDAR-CONTENT-TYPE:image/gif
X-GOOGLE-CALENDAR-CONTENT-WIDTH:276
X-GOOGLE-CALENDAR-CONTENT-HEIGHT:120
END:VEVENT

These fields tell Google Calendar to display this event specially and where to find the additional web content associated with the event. The details for each of these fields are described below:

  • X-GOOGLE-CALENDAR-CONTENT-TITLE (required): Specifies the title of the event that appears in the header of the pop-up window and the tooltip that appears when hovering over the icon.
  • X-GOOGLE-CALENDAR-CONTENT-ICON (required): Specifies the icon that should be displayed at the top of each day. Icons may be in any image format that can be displayed in a web browser. The image will be scaled to display at 16x16.
  • X-GOOGLE-CALENDAR-CONTENT-URL: A link to the content to display in the pop-up window. You can link to an HTML file or image, as long as you properly set X-GOOGLE-CALENDAR-CONTENT-TYPE.
  • X-GOOGLE-CALENDAR-CONTENT-TYPE: Specifies the type of the content. Allowed values include text/html or image/*. This field is required if a CONTENT-URL is specified. If text/html is used, then the content will be displayed in an IFRAME; if image/* is used, then the content will be displayed in an IMG element.
  • X-GOOGLE-CALENDAR-CONTENT-WIDTH: Specifies the width (in pixels) of the IFRAME or IMG element.
  • X-GOOGLE-CALENDAR-CONTENT-HEIGHT: Specifies the height (in pixels) of the IFRAME or IMG element.