Adding a Google Calendar to a Page or Sidebar Widget

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. You create several calendars for different uses in the same Google Calendar and for each calendar you can choose to:

• keep private
• share with friends via email
• make public so others can subscribe to or view.

For example, you can create a personal calendar which you keep private, not viewable by others, and a school calendar that you share with parents, family and students.

Please note:

• The Calendar widget in Appearance > Widgets is not an events calendar;  it creates a calendar in your sidebar with clickable links to your blogs posts for particular dates.
• Dates that appear in bold type indicate dates you’ve posted.  It doesn’t let you setup a calendar of events.  It’s only use is to display links to your posts by date.

How to set up Google Calendar

Here’s how you set up a Google Calendar for school:

1.  Create a Gmail account (if you don’t have one).

2.  Go to Google Calendar and sign in with your Google Account.

3.  Click on Create a new Calendar under drop down menu next to My Calendar.

4.  Add Calendar Name (1), Description (2), select Make this Calendar public (3) and clickCreate Calendar (4).

5.  When you see “Warning:   Making your calendar public will make all events visible to the world, including via Google Search.  Are you sure? ”  you need to click Yes otherwise your students and parents won’t be able to view the calendar.

6.  If you expand the My Calendar menu you will now see your new calendar has been created.

7.  Now just click on Create to add an event to your Calendar.

8.  Add event title (1), date and time (2), Where (3), select your calendar (4) from the Calendar drop down menu (in our example it is Important Class dates), add a description and click Save(5).

9.  Your event will now be added to your Calendar.  You repeat this process to add events to your Calendar.

• Remember you can add and delete events from your Google Calendar at any time.
• All you need to do is log into your Google Calendar and update your events.

10.  You edit an event by clicking on the name of the event.  This opens the event in Edit mode where you just update the details then click Save.

 

Embedding Google Calendar on your blog

Google Calendars are normally added to either:

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

You add your Google Calendar to a text widget in your sidebar if you want the calendar viewable on all pages on your blog.  If you want to make your calendar easy to read you are better toembed it in a page on  your blog.

Adding a Google Calendar to your sidebar

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.