Displaying Multiple Google Calendars on Your Website

April 20, 2012

Recently we needed to display all of our different athletics calendars into one calendar to display on our website. You may want to merge your different building calendars into one calendar or you may have several different clubs or groups that you want to make a “Social” calendar for. Google makes this very easy with their configuration tool. You can check out this company who did an awesome job, on working on our website.

To get started login to your Google Account and navigate to your calendar. Once you are in your calendar click on the sprocket or gear in the top right corner:

Once in your settings you should see a button that says “Calendars”

You should see a listing of all of your different calendars.

*Note: If you are trying to embed someone else’s calendar they have to be sharing it with you inorder to merge it.

Click on one of the calendars. You will now be presented with the calendar options as well as embed code. There will be a blue “HTML” icon about halfway down the page. Click on this.

You will now be presented with a dialog box that gives you the direct URL to your calendar. Below that you will see a link that will take you to the configuration tool. Click on the link.

Once on the configuration page make the changes on the left in order to build the calendar how you want it to look on your website. Once you have the calendar the way you want it click the “Update HTML” button.

Copy this code and enter into your website. Note many websites have different ways of handling HTML if you have trouble feel free to contact me and we can figure it out together.

Also if the size does not fit your website how you want it to you can change the height and width variables in the embed code.

If you have any problems or issues as always feel free to contact me!