Tuesday, July 21, 2009

Embed a Google Calendar

One of the best features of Google Calendar is that you can embed it in other websites. For example, I embed a Google Calendar of my class assignments INSIDE the Desire2Learn course management system for my classes. Here are step by step instructions for embedding a Google Calendar in a blog or other webpage.

To embed a GoogleCalendar you will need the "embed code" (some scary-looking HTML). The embed code is only available for calendars you have chosen to share publicly. So, go to your panel of Google Calendars, and click on Settings to share a calendar and get the embed code.

1. Access Settings. Click on Settings in the lower left-hand calendar of the panel that lists all your Google Calendars.

2. Select Calendar. You will see a listing of ALL your Calendars. Find the calendar you want to embed, with a column that shows whether the calendar is shared.

3. Share calendar. Click on the share settings link for the individual calendar you want to embed:

To embed the calendar, it needs to be publicly shared:

4. Calendar detail. Next, click on the Calendar Details tab that you should see across the top of the screen. Change from Share this calendar:

By clicking on the Calendar Details tab instead:

5. Default embed code. There is a default embed code you can see on the Calendar Details screen - but what you really want to do is click on the link that says Customize, so you can change the height, width and other display options.

6. Customize embed code. It is important to change the height and width to what you want - and you can also select whether default view is Agenda, Weekly or Monthly, along with other options. You can then copy and paste the resulting HTML embed code that shows up in the box as you make your choices.

7. Cut-and-paste embed code. The specific instructions for how to add the HTML code will vary based on where you are publishing your content. For Blogger.com blogs, you can switch to the "Edit HTML" tab and insert the code.

Don't worry if it looks a little weird - sometimes the content will not display until you actually publish the webpage online and view it in a browser. For example, in Blogger.com, the embedded calendar does not display until you publish the blog page; what you will see instead is this (below). Don't worry: ou can use the Preview mode to check and make sure everything really is okay!

8. Publish the page. You can see the results of my embedded Roman Calendar below! :-)


dad said...

Hi Laura,
Thanks for the post, it was very helpful. Out of curiosity, have you discovered a way to allow for users to add dates/events to the calendars? A sort of community calendar?


Laura Gibbs said...

Hi Graham, yes indeed, you can "share" your calendar, in addition to making it public. It's not something I've done, since my interest is just in creating GoogleCalendars for my classes which the students can see and not edit, but there are some notes here at Google about how to let others edit your shared calendar.

johny radio said...

Very helpful.
Now, how can i make the 'more details' link redirect to a custom html page (instead of google calendar detail screen).

OR, how can i embed rich html content inside a google calendar details item? :)

many thanks

Laura Gibbs said...

You can include HTML in the file that you upload to GoogleCalendar in the details field - the only thing to be careful of is that since this will be a comma-delimited file, you cannot have commas in your text (or, rather, you have to go to a lot of trouble to include the commas, so it's better to avoid them).
You are limited, I THINK (you need to check Google Calendar Help to find out for sure) to standard HTML tags, so you cannot do a redirect, just a link.

Dylan said...

Your post was helpful. But I am running into one problem. My calendar is embedded in my website, but anoyone can go in and edit it. I thought it was to be read only. Any thoughts?


Laura Gibbs said...

Hi Dylan, giving permission to edit events is different from sharing a calendar; here's a screenshot of the sharing options: unless you specifically give a person the option to edit the calendar, they can just view it - they cannot edit it.

Here's a screenshot of what I mean.

So, you can invite people to view and edit your calendar, but you have to do that one by one. So far as I know, it is not possible to create a calendar that everybody can edit.

If you want to send me a link to your website, I'll be glad to take a look. You've got me curious just what could be going on. I use embedded calendars on all my course webpages (for example), and nobody but me can edit it.

VaL said...

Hi, that's great, thank you for this post.
Do you know how to embed a calender into a web page using a layout like this?
I have to publish the calendar on the left bar of my site and its widht is only 180px.

Laura Gibbs said...

Hi Val, I would suggest forcing the calendar to appear in AGENDA view. I guess that would work at 180 pixels, although I am not sure. Of the 3 viewing options, Agenda is the one that works best in a really narrow format. You can see an agenda view of a calendar here:
Calendar embedded with agenda view
I've never tried to make it as narrow as 180 pixels though! :-)

VaL said...

Laura, thanks for the answer.
I tried the agenda mode, but when you click on an event it creates a bubble that is oversized and then cut!
It seems that a mini-view is not supported by google calendars. :(

Laura Gibbs said...

Thanks for letting me know! Did you poke around the support columns for Blogger.com - maybe there is some version of Calendar they support as a gadget for a Blogger.com sidebar you could use... Blogger.com sidebars are sometimes pretty narrow; I've got a bunch of widgets that I built where I kept the image width at no more than 200 pixels for that reason. :-)

Laura Gyre said...


thanks for the tips. I'm currently trying to embed a google calendar in a blogger blog, and I'm getting the exact error message you show. In the preview, the calendar looks fine, but even when I publish and then visit the page, it doesn't show up. Any idea what my problem could be? thanks!

Braves93 said...

I currently cannot see my calendar unless I'm logged in to the Google Calendar account that I'm sharing. If I'm logged in, I can see it. If I'm not, I can only see the US calendar I subscribed to. Is there a way to make it permanently public so I don't have to be logged in for it to pull the information? Any help is greatly appreciated. Thanks!

Laura Gibbs said...

Public calendars do not require any kind of log-in - but if you want to combine them with other calendars, you do have to be logged on. But for example anyone can see my class calendar here; it's public, so no log-in is required: http://www.mythfolklore.net/3043mythfolklore/

Ray J said...

In public calendars I saw a seniors site that didn't allow the public to view details, then delete the event. I have a public website and a calender for dance events and can't find a way to stop anyone from deleting my events.

Laura Gibbs said...

Ray, I'm not sure I understand your question - I make my class calendars public for anyone to see, but only I can edit them. Here is one of my public calendars - Indian Epics. You can view it, but you cannot edit it in any way. If you want others to edit, you have to share with them specifically.

Ray J said...

www.ilovetodance.ca/Calender.htm is my calendar. As you will see you can go to "more details" and the public can modify or delete an dance events I set up.

Thanks you so much!

Laura Gibbs said...

I can go to more details, but I cannot do anything other than copy it to my own calendar. What you need to do is look at your calendar NOT LOGGED IN TO GOOGLE - for example, to test things like that, I never log in to Google on Safari (most of the time I use Firefox). So, when I want to see what a person other than me sees, I use Safari. Since I am not logged in to Google as you, I cannot delete events from your calendar - I can only copy them to my own. Here's a screenshot of what I see - I hope that helps!