Future Events Widget

Future Events came about because I wanted to display our Google Calendar on the site without using JavaScript or iframes. I like to avoid JavaScript because it makes the browser do extra work and some users block it anyway. Google Calendar lets you publish events from an iframe but the customization options are limited and the output doesn't match the look of our site. Thankfully, Google Calendar supplies public calendars with an RSS feed.

The Future Events widget is a combination of Google Calendar, Yahoo! Pipes and Blogger's Feed widget. The biggest hurdle was getting what I wanted out of Yahoo! Pipes. Yahoo! Pipes is a tremendous pain in the ass, especially when it comes to date handling. Nothing works the way you expect and it doesn't help that the modules are scantly documented. In the end I got what I wanted out of Yahoo! Pipes but it was a struggle.

Features / Benefits

  • Single and multi-day events are highlighted on the day they occur.
  • Events can be added to Google Calendar
  • Optional: Display a link to Google Calendar or the calendar's RSS feed.
  • Semi-automated: Edit your Google Calendar and new events will populate the list automatically.
  • No iframes!
  • No JavaScript!


A caveat of using the Feed widget is that expired items still show up on the list. By design the Feed widget caches the 5 most recent feed items and only drops the oldest when a new item takes its place. The workaround is to clone the pipe after an event passes and use the new pipe as the feed URL. For the same reason it's pointless to push the pipe through FeedBurner; once the event passes you have to burn a new feed.

To be fair, I'm using the Feed widget in a way Google never intended so I don't consider this a bug. I just hope in the future Google adds an option to the Feed widget so would save me the exercise of cloning new pipes.

If there's interest I'll post a tutorial so that others may implement this on their own Blogger layouts.

Special Thanks

I want to thank Kuswanto of Zeusbox Studio for letting me use a portion of his work for the calendar icons. The little green plus sign and RSS logo were sourced from his Feedicons 2 icon pack. The calendar was sourced from the Google Calendar favicon. If you want to edit these icons you'll have to ask Kuswanto, I gave him full ownership of the rights.

License: Creative Commons Attribution-No Derivative Works



MandM - #
March 14, 2009 at 10:05 PM
Nice work! Well done.
Alain-Christian - #
April 4, 2009 at 11:45 AM
Well it doesn't even work like it used to. Blogger changed something. It's totally ugly right now.

Add a Comment