How to add a Google Calendar to your Class Website / Edublog

Update: This works on a self-hosted WordPress site. It should work with a Edublogs.org Pro account. (Embedding videos, javascript and more code is a Premium feature.) It does not work with a free WordPress.com site because for security reasons, WordPress.com doesn’t allow the iframe code required for Google Calendar.

We’ve added a Google Calendar to our class website / edublog which is powered by WordPress. You can see what it looks like here.

Google Calendar is pretty easy to use. You can read more about it here as well as create an account. It’s actually quite easy to add a Google Calendar to your WordPress site. Here’s how we did it.

Step 1

Click the down arrow beside one of the calendars you want to share. Look for “My Calendars” on the left.

Step 2

Click on “Calendar Settings” in the pop up menu.

Step 3

Scroll down until you see “Embed this Calendar”. Click on the link that says “Customize the color, size, and other options”

Step 4

Customize your calendar. You can change the title, decide on which buttons you want to show, as well as other features. (In the new default WordPress theme (Twenty-Ten), we used a width of 650 pixels to fill the screen.

When you are done customizing your calendar, copy and paste the code.

Step 5

Go to the WordPress Post or Page that you want to insert your Google Calendar.

Click on the “HTML” view and then insert your Google Calendar code.

Click on Update or Publish your page to the world and your Google Calendar is there!

How to use your Class Calendar

Now that you’ve set up your Google Calendar on your class website / edublog, don’t touch the page it’s on. (We’re serious. It’ll disappear on you. See this note.) You can add and change calendar events from your Google account.

Important Notes / Frequently Asked Questions

My Google Calendar shows up but some of my events are missing (It says that “Events from one or more calendars could not be shown here because you do not have the permission to view them.”)

No problem. It just means that you haven’t shared your Google Calendar with the public. So unless you’re logged into your google account and you have permission to view this calendar, you won’t be able to see it on your class site / edublog.

Here’s how to make your Google calendars public so that anyone can see them. (They also appear in Google search – they’re that public.)

Step 1

Click on the “Settings” link at the bottom of  your “My Calendars” list

Step 2

You should see a list of your calendars. Click on the “Share this calendar” link.

(You’ll have to do these steps for each calendar that you want to make public.)

Step 3

Click the checkbox beside “Make this calendar public”.

Don’t click the second “share only my free/busy information (hide details) checkbox. If you choose this option, then your class calendar won’t actually show your calendar events. It’ll just show that you’re busy at that time.

Click on “save ”

Step 4

Read the warning: “Making your calendar public will make all events visible to the world, including via Google search. Are you sure?”

Click on the yes.We want this calendar to be visible to the world so that everyone (i.e. our parents and students) can see it.

(What if I don’t want my calendar to be public and visible to the world, including in search engines.)

Step 5

Congratulations. All of your calendar events should appear on your class website.

Why does my Google Calendar disappear all of a sudden? I went back to the HTML editor and the code is gone!

Annoying isn’t it?

First of all, the type of code that the Google uses to embedded their calendar is called an iframe. You can cut and paste some code into Wordpress using the HTML editor (Step 5), but WordPress doesn’t really like  iframes.  In fact, WordPress will automatically delete your iframe when it finds it.

What? I thought you said we could embed a Google Calendar into WordPress. You can. You just can’t edit your iframe code (or the page it’s in) once it’s in there.

Once you copy and paste your Google code and click update, your Google Calendar will appear on your WordPress blog. But… if you switch to Visual mode, or try to edit that page again, WordPress will realize there’s iframe code and delete your Google Calendar. Even if you switch back to the HTML editor, your Google Calendar code will be gone.

We end up having to copy-and-paste our iframe code from Google Calendar everytime we want to add some words to our calendar page. But to be perfectly honest, once things are set up the way you like it, you won’t have to edit your calendar page because you’ll be using your Google account to add or change calendar events.

What if I don’t want my calendar to be public and visible to the world, including in search engines

In order for the events on your class calendar to show up on your class website, you need to make your Google Calendar public – which means that search engines will crawl your site and your information can show up in Google, Yahoo, Bing, etc.

If you have a private class blog / edublog and you want to keep your class events private, then using Google Calendar might not be your best option.

You could keep your calendar private in Google and share it with all of your students and parents. That way, visitors would have to log into their Google accounts to be able to see the events. If you’re not logged in, the calendar will simply say that you don’t have permission to view some of the events. This is pretty unrealistic because not everyone will have a google account, and it’s unrealistic to expect visitors to log into their google accounts first to see the calendar events.

Your second option is to install a WordPress calendar plugin. There are lots of other WordPress Calendar plugins to choose from. (What’s a plugin?)

If you have any questions or ideas, feel free to leave a comment below.