Add a Google Calendar to Your Website

First things first…

  1. Open your the page you wish to add the calendar using the Page Builder functionality.
  2. Drag and drop an HTML block to the location you’d like to show the calendar.
  3. Paste the following code into the HTML block – be sure to example embed code with your calendar’s embed code.
    • [iframe src=”https://calendar.google.com/calendar/embed?src=timbertrailpto%40gmail.com&ctz=America%2FDenver” style=”border: 0″ width=”800″ height=”600″ frameborder=”0″ scrolling=”no”]
  4. Save the block and publish the page.

That’s it!

To find the calendar’s embed code, follow these steps… (you may need to ask the administrator of the calendar to provide this to you)

  • Log into your Google account and go to Calendar 
  • Look for and click on the three dots next to the calendar you want to use (you don’t have to use your main calendar, you can always create a second or special calendar for this purpose).

    How to Show (ie “Embed”) a Google Calendar On Your Website

  • Click Settings and sharing from the options pop-up you see when clicking on the three dots.
  • Scroll down the Calendar settings page until you find the Integrate calendar section and copy the iframe code displayed.
  • Under the embed code, click Customize.
  • Choose your options, then copy the HTML code displayed.

** To make your calendar visible to everyone and not only those you share it with, you will need to make it public. To do this, enable the box next to Make available to public under Access permissions.

Did this answer your question? Thanks for the feedback There was a problem submitting your feedback. Please try again later.