Tutorial #11
Embed a Google Calendar Basic   2013-11-05


Providing users a live calendar of events is a very useful feature for sports teams, bands, theaters, etc. Google Calendar is a nice way to implement this. This tutorial walks you through creating a public calendar and embedding it on a web page. The result will look something like this:

Screenshot of the demo for this tutorial

Step by Step

To use Google Calendar you need a Google Account.

1: Go to your Google Calendar. On the left of the page, click the down arrow to the right of My calendars and select Create new calendar.

2: Fill out the form and check Share this calendar with others and Make this calendar public - then click Create Calendar.

Create New Calendar form

3: That will take you back to your calendar and after a few seconds your new calendar will appear on the left under My Calendars. Click the down arrow to the right of the new calendar and select Calendar Settings - this brings up a 'Details' page.

Create New Calendar form

4: Scroll down the 'Details' page and you will see a section called Embed This Calendar which we are going to ignore, and right below this, one called Calendar Address. Click the blue HTML button.

Create New Calendar form

5: In the Calendar Address dialog that appears, click the configuration tool link.

Create New Calendar form

6: You now have a page showing what the calendar will look like, with various controls to customize what is displayed. The width and height settings are probably the most useful.

Make sure that the Calendars to Display section is correct - you don't want to share your presonal calendar.

When you have it looking the way you want, click Update HTML in the top right corner and then copy and paste the HTML code in the box at the top.

7: Paste the code into your web page, save and reload. You should see your calendar. Go to your main calendar page and add an event. Come back to your embedded calendar, refresh the page and you should see the new event.

Create New Calendar form

If your organization uses Google Apps then your Apps Administrator will need to allow Calendar Sharing across the domain. If not then external users will not see the details of shared events. If you have an Individual Google account, this will not be a problem.

Understanding the Code

As with most of the embedded widgets that I cover here, this one takes the form of an iframe that takes its src from a remote URL https://www.google.com/calendar/embed. The URL parameters are best left alone. If you want to customize the calendar, do that on Google's site, regenerate the code and copy the updated version into your page.

Code for this Tutorial

Share this tutorial

Comment on this Tutorial

comments powered by Disqus