Adding a Google Calendar to your blog

At uLearn I spoke about how I use a Google Calendar embedded into my class blog to help support communication to students and parents.  I've been contacted by a delegate from the conference to find out a bit more about how to make this happen.  So here is a quick and (hopefully) not to painful way to embed a Google calendar into your blog or wiki!

Log into your gmail account - you may need to create one if you don't already have one.

From here click on the 'Calendar' icon at the top of the page (alternatively log straight into your calendar using your Google account details).

Once you're into your calendar it's pretty simple to add appointments into your calendar by double clicking on the calendar and adding in the relevant details.

You can also add in stock standard calendars such as the NZ holidays calendar.  This is as simple as searching within the Google library of calendars down the left hand side of your calendar - click on 'Browse Interesting Calendars'.

When you are ready to share it you need to go to the cog on the top right hand corner of the screen which holds all of the setting options.  Here you need to click on 'Calendar Settings'.

Next is to click on the tab underneath the google logo that says 'Calendars'

All of your calendars will show up underneath the 'Calendars' tab -  you can have multiple calendars and set different audiences.

The first thing you need to do is click on 'Shared: Edit settings' and to then click on the tick box to make your calendar public.  This will allow people to be able to view your calendar without logging in.

Go back to your calendar settings, into the tab 'Calendar' and then click on your calendar.

You will then get another screen which has all your sharing settings.  This is where you have 2 options to either take the web address of your calendar or to take an embed code to embed into a blog page/wiki page etc

 To embed: copy and paste the code from the box on the right into your blog.

I use the calendar address link as I prefer using the standalone page format for the calendar.  So, where is says 'Calendar Address' click on the blue HTML button and copy the page url that it gives you in blue.

You have finished with your calendar for now - it's always a good idea to leave your calendar open in a tab to come back to.  Just incase you want to go back and make changes to your calendar.

The next step is to take a screenshot or find an image that you want the kids to use to get to the calendar.  I used a basic Google calendar text image for the kids.

Now head back to your blog - this tutorial is using blogger so you will have to adjust it slightly if you are using a different blogging format.

In blogger click on your blog title e.g. Electric Eight and then down the left hand side select 'Layout'.

When the layout page comes up - click on the button that says 'Add a Gadget'

From the selection choose 'Picture'

You could also use a range of different gadgets here e.g. the html or text gadgets but I prefer to use an image that the kids can link to the calendar from so I use the 'Picture' gadget.

The Configure Image box will pop up.  This is where you need to paste the link you copied earlier from your calendar into the 'Link' box.  In the 'Title' box give your calendar a name e.g. What's on? Our Calendar! etc  You then need to click on 'Upload an image' and upload your image from earlier.  Once this is loaded it will show up next to the work 'image' in the box.  Lastly, click on 'save'.

You'll see in the layout window that your gadget for your calendar will be at the top.  You can click and move this gadget around within the list so that it's in the place you would like it to be.  It doesn't have to stay at the top of your sidebar!

Last step! Click on 'Save arrangement' to save your new gadget.

Then click on 'View Blog' and down the left hand side of your blog you should see the gadget you have just added!

Click on your image in the sidebar to make sure that your calendar is showing up!

You now have a class calendar!

Extra goodies for people that like pretty things!

Just a little bit of an extra step here if you are interested in tweaking your calendar or changing the way it looks.  Go back to your calendar settings, into the tab 'Calendar' and then click on your calendar.

You will then get another screen which has all your sharing settings.

Where you would take the embed code there is a small piece of writing in blue that says

'Customize the color, size and other options' click on this to customise your blog.

It will give you a screen where you can change the look and format of your calendar.

One bonus here is that if you click on 'Agenda' under 'Default view' it will give you a list format of the calendar that can easily be embedded straight into your side bar using the embed code and a html gadget.

Example of what an Agenda view is:

Hope this helps you get started with adding a Google calendar to your class blog.  If you have any questions or would like anything clarified or if you have a great tip to make this process even simpler leave a comment!