How To Embed A Google Calendar In Your Blog Sidebar

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.  If you want to make your calendar easy to read you are better to embed it in a page on your blog.

Here is how to add a Google Calendar to your sidebar:

1.   Go to Calendar Settings in your Google Calendar.

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

3.  Select Show Title,  Navigation buttons (1), choose Agenda for the default view (2), adjust the width (3) and height (try 170 pixels first), and which calendars to display when embedded.

  • Maximum width for sidebar on most themes is about 170 pixels wide  We recommend you start with 170 pixels wide and adjust embed width depending on your theme.
  • We recommend you use Agenda view as default view as width of sidebars too narrow for Week or Month view.

4.  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.

5.  Go to Appearance > Widgets inside your dashboard.

6.  Drag a text widget into your sidebar.

7.  Paste the embed code for your Google Calendar into the text widget.

8.   Click Save and Close.

9.  View your Calendar in your sidebar.

  • You can adjust the size of your Calendar widget using the Google Embeddable Calendar Helper.
  • After adjusting the size you just replace the current code with your new code.

39 thoughts on “How To Embed A Google Calendar In Your Blog Sidebar

  1. So, for the above instructions to work, I must upgrade. Is this correct? Mine also disappears when I hit save.

  2. Would it also be possible for visitors of your website to make an appointment in the Google Calender on your website? Without them having a G-mail account?

  3. Hi. I have followed the directions in your tutorial but when I click “save” at the bottom of the text box in the sidebar the embed script disappears. What should I do?

    1. Hi there – the ability to embed in widgets is limited to our Pro and Campus blogs. In addition, each Pro blog can upgrade up to 50 additional blogs (usually student blogs) to allow embedding.

Leave a Reply

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