3heads-gear3headschatchecklistglobehead-lockhead-plusimaclife-ringlogo-cornelllogo-melbournelogo-northhamptonlogo-portsmouthlogo-small logo-vancouverlogo-yokohamamail-line mail-wings pdf pie-chartplayplugprinter skype website
Print Friendly, PDF & Email

One way you can add a calendar to your site is 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 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.

The Calendar widget in Appearance > Widgets is not an events calendar;  it creates a calendar in your sidebar with clickable links to your published 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.

Set Up Google Calendar

Here’s how you set up a Google Calendar:

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

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

3.  On the left, next to “Other calendars,” click + > Create new calendar.

Create new calendar

4.  Add Calendar Name, Description, select time zone and click Create Calendar.

Add calendar information

5.  Click on Configure link.

Click on Configure

6. This take you to the Calendar Settings page. Scroll down to Access permissions for events and select Make available to public. 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 OK otherwise other people won’t be able to view the calendar.

Make available to public

Click on the Arrow next to Settings at the top of the page to return to your calendar.

Click on Settings

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

7.  Click on +Create to add an event to your Calendar.

Click on Create

8.  Add title, date and time, select your calendar from the Calendar drop down menu (in our example it is Important Class date), add a description and click Save.

Create the event

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

You can add and delete events from your Google Calendar at any time by logging in and updating the event.

10.  You edit an event by clicking on the name of the event then click the Edit link update the information and click Save.

Edit an event

Embed in Page

Google Calendars can be embedded into a page or a text widget using their embed code.

Go to Settings and Sharing in the Google Calendar you want to add (hover over the calendar you want to embed and click on the Options and select Settings and Sharing).

Select Settings and sharing

Scroll down to the Embed code and copy the embed code.

Click on Customize if you want to change the size of the Calendar or customise the look.

Click on Customize

How you add embed code depends on if you are using the block editor or the classic editor.

Block Editor

Add a custom HTML block if you are using the block editor.

To add custom HTML block you click on the + icon at the right of any empty block or at the top left of the editor then search for HTML and click on the custom HTML block icon.

Add custom HTML block

Here’s what it looks like when it’s added to the Block Editor.

HTML Block

Paste the embed code into the custom HTML block.

Paste the embed code

Click on Preview to view the calendar.

Preview calendar

Classic Editor

Your Add Media button on your classic editor is used to add embed code to a post or page.

Place your cursor in the page where you want the calendar to be embedded and click on Add Media button.

Click on Add Media

Click on Insert Embed Code.

Click on Embed code

Paste the embed code into the Insert Embed code box and click Insert into post.   

Paste embed code

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

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.