Displaying Google Calendar events in Umbraco

[12th October 2009 – I’ve just updated this post with a new version of the macro. It now groups events properly. Sorry to the guys/girls with multilingual sites, I haven’t put any effort into using Dictionary Items as I don’t currently require that functionality]

I’ve yet to see a good event calendar in any of the CMSes I’ve tried that properly handles recurring events and makes it easy for the layman to update calendar events. I’ve therefore recently implemented a small macro for Umbraco that displays Google Calendar events from a cached XML calendar feed. I did this using the excellent FeedCache plugin and some XSLT.

My one gripe with FeedCache is that you can’t edit the feeds.config file using ConfigTree, but rather need file-level access to it. This is a major bummer, as I wanted to test it on Umbraco Trials.

I won’t post any CSS, but the XSLT caters for styling as it uses bulleted lists and spans around key areas.

The feed will then be displayed similar to below:

Today

* Test Event (19:30-21:30)

Friday 16th October

* Meeting (19:30-21:30)

Sunday 18th October

* Seminar (10:30-12:30)
* Lunch (13:00-14:00)
* Games/Activities (14:30-15:30)

Here’s a screenshot of it working on an Umbraco Trials site. I found a random Google Calendar feed and used that for the demo. Note that I didn’t put any effort into styling the results:

image

Basically, what you need to do is:

  1. Install FeedCache
  2. Install the GCal Events List package
  3. Set up the calendar feed in FeedCache’s feeds.config. The feeds.config entry should look like this:
    [xml]<feed>
    <url><![CDATA[http://www.google.com/calendar/feeds/calendar@example.org/public/composite?orderby=starttime&sortorder=ascending&futureevents=true&singleevents=true]]> </url>
    <localFile>GoogleCalendarFeed.xml</localFile>
    </feed>[/xml]
  4. Insert a macro wherever you need it, and fill out the parameters;
    1. numberOfDays – (integer) how many days worth of events you would like to display
    2. xmlFileName (string) the exact file name of the cached XML file in the umbracopluginsFergusonMoriyamafeedcache folder. eg. googleEvents.xml
  5. Call FeedCache from your browser to trigger a pull of the feed(s): http://example.org/umbraco/plugins/FergusonMoriyama/FeedCache/FeedCache.aspx
  6. View the page that contains the macro inserted in step 4.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s