Web Hosting

How to Embed Google Calendar

Google CalendarI did a website for a client recently. It’s a sports bar and he wanted a calendar to display details and times of the different sports events he was going to be screening at the bar each weekend.

I always try to use commercially (or freely) available solutions for my clients.

First of all it’s cheaper for the client and, secondly, if I were to get squashed by a train, the client would still be able to use and update the site. They wouldn’t be dependent on me being there.

So there were a couple of options I could use to provide the calendar: a calendar plugin (since it’s a WordPress site), or I could embed Google Calendar.

And Google Calendar was the hands-down, no-brainer choice for two reasons:

  1. The client can easily access his Google account and update the calendar without having to go into WordPress. And the site is automatically and instantly updated whenever he makes a change.
  2. There’s less to go wrong, less to upgrade and less to slow down the site load-time, because it’s not a plugin.

Embedding Google Calendar

Google Calendar is a great solution for this type of application. But, as is typical of Google’s products, discovering how to customise its appearance and grab the customised embed code requires the detection skills of Sherlock Holmes.

So here’s how you do it.

Step 1:

Make sure Calendar is activated in your Google account

Step 2:

Once it’s activated go to Calendar and click Settings>Calendar Settings in the top right:

Embedding Google Calendar Step 1

Step 3:

On the Settings screen click the ‘Calendars’ tab:

Embedding Google Calendar Next Step

On the same screen, across towards the right, click on the link under ‘Sharing’ to enable sharing and then edit the settings:

Embedding Google Calendar Next Step

Step 4:

On the next screen that comes up click the ‘Calendar Details’ tab:

Embedding Google Calendar Next Step

And on the same screen look down to the ‘Embed this Calendar’ section and, across to the right, click the ‘Customise the color, size and other options’ link:

Embedding Google Calendar Next Step

Step 5:

On the screen that comes up choose your Calendar title and settings from the area on the left (inside the red box in the image below).

Once you’ve completed your settings, click the ‘Update HTML’ button and copy the code from the box at the top:

Embedding Google Calendar Next Steps

Step 6:

Paste the code into your site page.

That’s it – you’re all done!

In case you’re interested, here’s how it looks on the site I did for my client:

The Shamrock Irish Pub, Hong Kong.

If you have any questions leave me a comment!


Martin Malden

Web Hosting