How To Embed a Google Calendar In A Blog Page

The best option for adding a calendar to your blog is to using a Google Calendar.

Google Calendar is a free web-based calendar which you can use for keeping track of important events in one place from any computer or mobile device anywhere.  Here’s the instructions for setting up a Google calendar.

Google Calendars are normally added to either:

  1. A page.
  2. A text widget in your blog sidebar.

Embedding a Google Calendar is your sidebar is a good option but it does make the calendar small.

The best option for embedding a larger calendar is to embed it into a page.

Here is how to add a Google Calendar to a page:

1.  Completely write your page including adding title, any text and images.

2.   Click on Save Draft, previewed your post and make all necessary edits.

3.  Click on Preview to previewed your page.

4.  Check your page and make all necessary edits.

5.  Go to Calendar Settings in your Google Calendar.

6.  Click on Customise the color, size and other options next to Embed this Calendar.

7.  Choose which options you want to Show on your calendar (1), the default view (2), adjust the width and height (3), select the Week Starts on day(4). and which calendars (5) to display when embedded.

  • Maximum width for pages on most themes is 450 pixels wide.
  • Agenda is often used as default view as it displays the event details nicely when embedded.

8.  Click on Update HTML (1) and then copy the HTML code (2)

  • TIP – place cursor in HTML box, hold Ctrl and then press A to select all the HTML code then press Ctrl and C to copy.

9.  Click on HTML Tab on your page editor.

10.  Paste the embed code into your page where you want it to appear then click Publish.

  • Don’t click back to Visual Tab before hitting Publish as it can break the embed code.
  • Immediately close your page once you’ve published.
  • Change back to Visual Editing mode when you write your next page by clicking on the Visual tab.

11.  When you view the page on your blog you will now see your Calendar embedded.

12.  Please note if your readers see the message you don’t have permission to view this calendar it means you didn’t make your calendar public and you need to change your Calendar Settings to Public by going to the Share this Calendar tab.

15 thoughts on “How To Embed a Google Calendar In A Blog Page

  1. I just created a blog in blogger and added a google calendar to it. If a reader clicks on a calendar event can they access my actual calendar?

    Thanks

  2. I have created a blog page myself a few years ago, and currently am working as a youth pastor with my wife. I am trying to upload a google calendar I created for our youth events, so parents can keep track of what’s going on..and for those without Facebook. However any time I try adding the embed code I copied to either a new page or the “text” box on the right side, the link disappears. I have, when creating a new page, clicked on the html tab as well….not sure what I am doing wrong, or why it won’t work. Any help?

  3. @ezw0003 Good to hear that your teacher has started you using Google Calendars. It’s my most important calendar and keeps me on track. Glad my post helped. Google tools have so many layers — I now have discovered more about gmail which just amazes me.

  4. I am taking at class in college and one of our assignments is to make a teacher webpages. In this assignment we had to have a link to a calender. Our teacher advised us to make a google calender and link it to our page. This google calender has been very helpful to me not just with this assignment but with keeping up with day to day activies. however this blog helped me learn more about google calender and more fun ways to use it. THank you

  5. @Robert Simpson Unfortunately it looks like there is no option to change the display to just Monday to Friday. But changing it to Week starts on Monday may help. Hopefully eventually Google realised this would be a good option and makes the changes.

  6. I’ve embedded a Google calendar on a page to track the use of our school’s Student Response Systems. In Google Calendar Settings you can remove the weekend days by checking NO under Show Weekends, but on the embed page setup it doesn’t seem to carryover this setting. I would like to maximize the space on the calendar to include just M-F. Is this possible?
    http://ferryway.edublogs.org/qwizdom/
    -Robert

  7. @Nathan Toft Thanks for the links to your class blog and school calendar. I’ve added the link to your class blog to the post so that others can check it out for ideas.

    Thanks also for reminding me about your screencast on how to Embed a Google Calendar — I had totally forgot about it so have also inserted a link to your post so people can check it out.

    @Claire Excellent idea about teachers sharing the calendar so that they can coordinate scheduling of activities. So obvious yet hadn’t thought of doing that. More than happy to write the how-to posts — if you can think of topics I should cover on The Edublogger please let me know. Always looking for ideas.

  8. Google Calendar has been a great way to communicate with my students and their families. I have 4 different school calendars; one for each of the grades I teach. I’ve posted each grade calendar on a separate page to make it easier for the students, but when I’m in Google Calendar I can see all the grades at once (all colour coded) which makes planning easier.

    Sharing the calendar has been great, as Nathan mentioned above. My colleague and I share the grade calendars and it is helpful to see when she is scheduling tests etc so that we don’t hammer the kids with lots of things at once.

    Thanks for all the great how to posts Sue!

  9. Hi,

    I’ve found having the Google Calendar embedded as a page to be very useful. Here’s what it looks like on my class site:

    http://grade5nt.edublogs.org/calendar/

    Five teachers in my school share access to a Google calendar. They use it to post all sorts of events ranging from pictures days to music and sport practices. And, a big benefit for me, it doesn’t fall into one teacher’s lap to post everything for a school of 800 students.

    Sharing a Google Calendar with the entire school has proven to be very handy when practices and field trips get canceled at the last second. All the teacher has to do is update the calendar, and, assuming the students are accustomed to checking the school site for last second changes, it will automatically show up on the school site. Here’s how it looks:

    http://alornecassidyes.ocdsb.ca/calendar.htm

    Thanks Sue for creating these clear instructions. I’ve created a screencast (a video of me taking you through the steps) that follows similar steps. You can find it at:

    http://portablepd.edublogs.org/2008/07/04/how-to-embed-a-google-calendar-into-an-edublogs-blog/

Leave a Reply to Ryan Cancel reply

Your email address will not be published. Required fields are marked *