How to Embed a Google Calendar on Your Website

Summary: This guide explains how to embed a Google Calendar on a page of your website. This will display your Google Calendar events for site visitors, but please note that it is a one-way sync; events from your site will not be added to your Google Calendar. 


Before You Begin

  • You must have your calendar's HTML embed code from Google Calendar. You can find instructions here.
  • You need to be logged into your website's admin panel with permissions to edit pages.

Step-by-Step Instructions

  1. Navigate to the page on your site where you want to add the calendar. Click the + icon to add a new block.
  2. Select the Text with Photo block from the block options.

    Screen_Shot_2022-06-29_at_12.51.03_PM.png

  3. Click the Edit Element button on the new block you just added.

    Screen_Shot_2022-06-29_at_12.51.47_PM.png

  4. Select the Source Code (< >) icon from the text editor's toolbar to open the code editor.
  5. Paste the HTML embed code you copied from your Google Calendar into the source code window and click Ok.
  6. Click the Save Block Element button to save your changes and publish the calendar.

Troubleshooting & FAQs

  • My calendar isn't displaying or shows an error: Ensure your Google Calendar's access permissions are set to 'Make available to public'. The embed feature will not work if the calendar is private.
  • How can I integrate my Tithely calendar? You can first connect your Tithely Calendar and then embed that consolidated Google Calendar onto your site using the steps above.

Related Articles