Integrating a Google Calendar with your class web site

Integrating a Google Calendar with your class web site

When working with teachers in the creation of a classroom website, I am often asked about the ability to integrate some sort of assignment or deadline calendar with the site. Teachers want an easy way to show important dates and activities in the classroom. Other teachers want to make their whole site centered on the calendar.

Google Calendar makes these things easy. You can manage one calendar and have it appear multiple places. Events can include details and links, and it’s easy to schedule reoccurring activities.

Additionally, integrating and embedding your calendar in multiple places is simple, and students can copy your calendar to their existing Google Calendar to get easy reminders about upcoming events in your classroom.

Getting started is easy. Just follow the five steps below and you’ll have a classroom calendar on your website today.

Step 1: Add a calendar

Google Calendar gives you the ability to host as many calendars as you would like, so you can make a calendar for each class or subject you teach. Don’t use your main, personal, calendar for everything.

On the left of the screen, under your default calendar name, click “Add”.

Step 2: Set up your calendar

Give your calendar a clear name and make sure your time zone settings are correct.

The most important part of this step is getting your sharing settings correct. Make sure that your calendar is shared and public so that everyone can see it.

Click “Create Calendar” and agree that you want to make this calendar Public.

Step 3: Make your new calendar your default and customize it

For now, while your adding events, you’re going to want your new calendar to be your default view. This will put all new events on that calendar by default. Click the down arrow next to the name of your new calendar and select “Display Only This Calendar”. You only want a solid background behind the calendar you are currently adding events to. This saves time and prevents events from being placed on the wrong calendar.

After that, you can click the down arrow next to the name of your new calendar and customize what color you want new events to be.

When you are done adding events, you can go back and re-activate your other calendars by clicking their names again so they all have solid backgrounds.

Step 4: Adding Events

You can add events in a number of ways. You can even add events through SMS (texting) on your phone. To set SMS updates up, click on Settings, Calendar Settings, and then go to the Mobile Setup tab to enter in your phone information. You will get further instructions from there.

Most people will just want to be able to add events via the web. You can do this three ways.

  1. Click “Create Event” on the Top-Left of the screen. This brings up the most detailed way to add, describe, and schedule events.
  2. Click “Quick Add” which is an abbreviated way to add events, but it is very quick. You can add an event just by typing in something like “2-3pm October 3 Rough Drafts Due”
  3. Or, you can click on the calendar where and when you would like events to appear. This is great for visual people and makes it easy to add and change events. To schedule an event for a whole day, click the rectangle right under the date and type in the name of the event.

For all these options, make sure your events are appearing on your new calendar and not your default one.

Schedule as many events as you would like, knowing that you can always go back and schedule additional events, change events, and edit your calendar in any way. You can also go back and add new calendars for additional classes,events, or subjects. When you are ready to embed your calendar in your site, just go to the next step.

Step 5: Embedding Your Calendar

This step is broken down into 3 areas – Google Sites, WordPress, and other Web Site. Find the subject header for what you would like to do and follow the steps.

Step 5a: Embedding on your Google Site

Embedding your calendar via Google Sites is the easiest possible way to embed it.

Simply open the page you want to add your calendar on, click Edit. then go to Insert and select Calendar. Pick the calendar you want to embed and say Select. Then save your page and your calendar will appear.

To display multiple calendars in a single embedded calendar, after selecting your first calendar, select Display Another Calendar.

Save your calendar, save your page, and it should be working.

Step 5b: Embedding via WordPress

Under your Calendar, click Settings and then select the calendar you want to embed.

Scroll down and copy the embed code.

In WordPress, make a new post and go to the HTML view. Post in the embed code you just copied.

Publish your site and your calendar should appear.

Step5c: Embedding via html on any website, including Moodle

Under your Calendar, click Settings and then select the calendar you want to embed.
Scroll down and copy the embed code.
On your website, make sure you are editing in HTML. Paste the embed code in your editor and save what you’re doing. Your calendar should be embedded.
Posted under Featured, Main Menu, Technology, Tools by