Adding Google Calendar to the page

You can add a Google Calendar to your website. Doing so gives you these benefits:

  • When you add new events to the embedded Google Calendar, the web page automatically displays the new events.
  • Your teams or colleagues can have separate calendars that are displayed together on one website.
  • Your visitors can quickly save your event on their own Google Calendars.

Before you start adding

Step 1 - Get the embed code

  1. On a computer, open Google Calendar. You can only get the code to embed on your website from a browser, not the Google Calendar app.
  1. In the top right, click Settings:

google_calendar_1.png

  1. On the left side of the screen, click the name of the calendar you want to embed and scroll down to the Integrate calendar section in the vertical menu.

  2. Copy the iframe code displayed:

google_calendar_2.png

 

  1. Under the embed code, click Customize. Here you can customize the following settings:
  • Calendar title
  • Which elements to show
  • Width and height of the calendar window
  • The background color of the calendar
  • Border
  • The view (week, month, or by agenda)
  • Language and timezone

You can also opt to show more calendars in one view. Once done customizing, copy the embed code and keep it handy.

 

Step 2 - Add the Google Calendar to your page

  1. With the embed calendar code, go to the Sitebuilder. On the page where you want to show your calendar, click the +Add a block button.
  2. In the Block library, scroll down to the Other section and click on the HTML block. It will be added to the page.
  3. Click the </> icon to access the Custom HTML window. Paste the code into the field.
  4. Add <center></center> tags to the beginning and the end of the code:

 

Click Submit and Publish to make the changes live. Your page should look like this:

google_calendar_5.png

 

Let site visitors save a calendar event

You can add a Google Calendar button to your website so visitors can quickly save your event on their own Google Calendars. To let anyone save your calendar event, you'll need to make your calendar public.

  1. On a computer, open Google Calendar. You can only make changes to your calendar visibility from a computer, not the mobile app.
  2. On a public calendar, create or edit an event.
  3. Click on the event and in the new window, click on the Options button:

google_calendar_6.png

  1. Choose the option Publish event in the drop-down menu:

google_calendar_7.png

  1. In the Publish event window, copy the HTML code displayed:

google_calendar_8.png

Open the Sitebuilder, navigate to the area where you want the event button to be displayed, then paste this code in the same way as outlined in Step 2 above.

Screen_Shot_2020-09-15_at_20.07.30.png

Your page should look like this:

Screen_Shot_2020-09-15_at_20.20.00.png

Was this article helpful?
0 out of 0 found this helpful