A website that I’m currently working on redesigning uses Google Calendar to keep it’s visitors up-to-date with events. I’m building the site on WordPress and have been looking at the various options for combining the two. I realise that there are event calendar plugins, which would allow the site admins to manage events from WordPress itself, but as they are already using Google Calendar it wouldn’t make sense to confuse them with a new calendar system.
So, here’s a run-through of the various solutions I have discovered:
Copy and Paste iFrame Code
This is the snippet of code that Google provides in the Calendar settings. It looks something like this:
<iframe src="http://www.google.com/calendar/embed?src=EMAIL-ADDRESS&ctz=Europe/London" style="border:0" width="800" height="600" frameborder="0" scrolling="no"> </iframe>
This is definitely the simplest solution, just a matter of copying and pasting the code. There are also various options to customize the calendar (background colour, dimensions etc.).
There are quite a few drawbacks with this though, at least from my point of view. To start with,
<iframe>s are not great for accessibility or SEO and are not valid under XHTML 1.0 Strict or XHTML 1.1.
As I mentioned there are some customization options, but it’s not really customizable enough to get it to match a specific design so it tends to look a bit out of place.
Google Calendar Feed Parser Plugin
This plugin takes a Google Calendar XML feed and parses it to produce a list of events. You can then include the list wherever you like, by adding…
… into your template code at the required point.
I had a few issues getting the plugin working to begin with. With a feed URL copied directly from the Google Calendar settings, I just got errors. I tried changing the end of the URL to
/full rather than
/basic with no luck. After a while I found that adding…
… did the trick, I’m not sure why.
This plugin is nice and simple and gives lots of flexibility as to where the events can be displayed. However, the markup it produces consists of nested
<div>s rather than a list, which I think would be better semantics-wise. Also, you are limited to a list of events, there’s no way to display events in a month grid (like in the
<iframe> example above).
This plugin also uses a Google Calendar feed to create a list of events, which can then be displayed as a widget, or as a page.
Unfortunately, this plugin doesn’t seem to have been updated in a long time and I get errors when I try to install it in the current version of WordPress (2.9.2), so I haven’t been able to test it properly.
If I had got it to work, the major drawback (for me, at least) is that, again, you are limited to a list, no grids.
ICS Calendar Plugin
This plugin differs from the previous two, in that it uses an .ics file rather than an XML feed to gather event information from. This means that this plugin isn’t just limited to Google Calendars, but will work with various other calendars too, such as Outlook and iCal.
I had no problems at all setting up this plugin, it’s very straightforward. Also, it will display events in a grid as well as a list, which is what I have really been looking for.
icstag) and tags (
<style> in the
<body>) and isn’t brilliant for accessibility.
Despite the issues, this is still the best solution I’ve found so far and I’d certainly recommend it to anyone looking for a way to get a Google Calendar grid on their WordPress site.
None of the solutions I have found so far are entirely what I’m looking for. ICS Calendar comes close, but not close enough.
So, I think what I will do is produce my own solution, probably in the form of a plugin. I’ve never made a WordPress plugin before, so it will be a good learning exercise, if nothing else!
I’ll keep my blog updated with how I’m getting on
Update – I have now developed and released this plugin (Google Calendar Events). Take a look at the plugin homepage for more details.