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

What do you think?

Comments on this entry are closed.

  • David Dunford Sep 15, 2010 @ 5:52

    Nice to see your thinking long term for your clients.
    Have you thought about hosting their content on their own domain through and giving them access to a couple of video tutorials? So that they still know how everything works in the event you are squashed by a train? 😉
    Just a thought as they will then always own their material, not a third party who determines if it will stay live.
    Nice work by the way.

    • Martin Sep 15, 2010 @ 6:46

      David, hi,

      Yes – all my clients’ content is hosted on their own servers and domains.

      The video tutorials is a good idea and something I’ve been toying with for the people who buy Thesis from me. At the moment those ‘tutorials’ are done either face to face or via Skype – but videos would definitely be more scalable!



  • Harriet Sep 17, 2010 @ 4:26

    That looks like a really good tool, I wasn’t even aware of it! Thanks for sharing!

    • Martin Sep 17, 2010 @ 6:43

      You’re welcome, Harriet,



  • Pam Sep 21, 2010 @ 7:59

    Thanks Martin!
    I have been using the Google calendar on Whaling City Seafood for a while now and love the way it works! I like that I can update my Google Calendar and the website is automatically updated. I use Google Calendar to update my Outlook Calendar and my iPod Touch. Love only having to update one calendar and I can do that from anywhere I have an internet connection.

    • Martin Sep 21, 2010 @ 21:19

      Hi Pam,

      Good to see you back!

      Yes – Google Calendar does a great job for what my client is using it for. I do like being able to click on an event and see the full details.

      I hope everything is going well with you guys!



  • Mark Oct 2, 2010 @ 23:09

    I’ve done this for clients and agree it’s easy to use and functional. The only problem is the calendar is so darned ugly. Wish there were styling options.

    • Martin Oct 3, 2010 @ 7:25

      Hi Mark,

      There are some limited styling options – calendar title, background colours, fonts, language etc – but yes, it would be nice to have more!



  • Joe Langen Nov 4, 2010 @ 22:59

    We have found Google Calendar the best option to embed into our website. As an administrator, I have the option to search my calendar. I would like to offer this feature to visitors, but have not been able to discover how through Google or any discussion groups. Any thoughts on the matter?

    • Martin Nov 5, 2010 @ 6:45

      Hi Joe,

      No – I’ve never looked for this option, but it’s an interesting one.

      I’ll have a poke around and let you know if I find it,