Use Google Calendars on your website

December 21, 2011 Posted by Colin in Tip-sheets, Web Design

I tend to recommend a lot of google products. One that I recommend very often is the use of Google Calendars as a calendar of events on your website. Using Google Calendars saves you having to install and configure clunky event management plugins, and fits easily onto a page on your website using a little bit of embedding code. You can even have more than one calendar display at a time and choose which ones you want displayed from a little drop-down menu. I will briefly describe how this is done and include links to the Google documentation for each step. They do a much better job of explaining than I would.

The first thing you’re going to need is a Google-ID. If you have a gmail address, you already have one. If not, go and get one. This is your single sign-on to all of Google’s services. If you are setting something up for an organization, you probably want to get a Google-ID specifically for that organization so that you can share it with others. Here are instructions on how to sign up for your Google-ID.

Now that you have your new Google-ID go log into Google Calendars. The first thing you’ll have to do is create a new calendar. This will be the calendar that you embed on your website, so give it a meaningful name like “My Organization’s Events”. Make sure you set the visibility of the calendar to public. If you skip this step, nobody else will be able to see it. Finally you are ready to embed the calendar into your website by pasting the embed code into (for example) a page in WordPress.

If  you need to you can create more than one calendar and include them all in one calendar view. Just check off each of the calendars you want included in the list on the Google Calendars embedding page. If you find there are too many events in your combined calendars for the Month view, try changing to the Week or Agenda views. They are better able to display more entries in each day.

I’ve completed all of these steps in order to embed a calendar into this post that displays three Google Calendars. If you click on the little down arrow in the top right corner, you can choose which of the three calendars you’d like to see.