Live Demo
I was recently tasked with adding a dynamic event calendar to a WordPress site. I considered several possible ideas including custom WordPress calendar plugins and even a great Flex event calendar. Then it occurred to me that I could simply embed a custom Google calendar. The initial configuration to set up the calendar size and permissions only needs to be done once, then client only needs to worry about logging in to Google and adding events!
How do we accomplish this miracle of web application goodness? First, you will need a Google account. If the site is for a client, you will probably want to create a new account specifically for them. Once this is done, navigate to Google Calendar and clicke “create” under “My Calendars” in the sidebar:
Then go ahead and give your calendar a name, description and location. Don’t forget to make sure that your calendar is set to be “public”; otherwise, other users will get a permissions error when trying to view the embedded calendar:
Click “Create Calendar” and select yes when Google warns you that this calendar will be visible to everyone in search results:
Now you will want to add a few events for testing purposes. Simply click any date and type something in the “What” field:
Now you are ready to configure how the calendar will appear when it is embedded on your site. Navigate to your calendar settings using the “My Calendars” module in the sidebar:
Scroll down to “Embed this Calendar” and select the “Customize the color, size and other options” link:
It is very likely that the default embed size of 800x600 is much larger than the WordPress template your site is using. This is where you will set the desired size, available navigation features, and the default calendar mode. My preference is to disable the calendar title since the WordPress post will have its own title, and to disable the Calendar list feature since I am only going to be sharing one calendar for now. If you will have a lot of events, you may want to consider choosing “Agenda” for the default mode since it will display your events in list format and will probably be easier for users to navigate in a blog format. I went with 600x400 for the new size of the calendar as well:
Copy the generated HTML and login to your WordPress site, create a new post (or page), give it a title, select HTML mode, paste in the new code, and save the post:
Your calendar should now be live. I suggest logging off of Google and checking the calendar again to make sure that it is indeed set to public. Remember, if you are viewing your calendar in one tab and you are adding new events in another tab, you will have to reload the page before your new events appear in the calendar.
So far this solution has worked really well for me. As always, I love to hear the good and the bad from anyone else tinkering with Google Calendar!