Web Administrator's Guide
Wednesday, August 17, 2022

How do I embed my Google calendar on my website?

How to embed your calendar on your website:
  1. Login to your Google account and click Settings beside the Calendar icon.
  2. In the calendar list on the left, click the down-arrow next to the calendar you want to embed, and select Calendar settings. (Alternatively, click the Settings link at the bottom of the calendar list, then click the name of the calendar.)
  3. Copy the iframe code displayed in the 'Embed This Calendar' section.
  4. Login to your website's control panel.
  5. Click Edit Web Pages under the Pages icon.
  6. Click the name of the page on which you want to display the calendar.
  7. Click the Source button on the toolbar.
  8. Paste the previously copied code into the source view of the page.
  9. Click Save and Preview to see the code in action.

If you would like to customize your embedded calendar, click the "Customize..." link above the iframe field to access the Google Embeddable Calendar Helper.  Select your options in the Calendar Helper and paste the customized iframe code in your website.

To display events from multiple calendars in the same embedded calendar, follow the instructions above to access the Google Embeddable Calendar Helper.  Then, select the checkbox next to each calendar you wish to display, in the section 'Calendars to Display'.

Note that you can change the amount of information available on your calendar's address by clicking the Change sharing settings link in the 'Calendar Address' section.

Technical:HTML / JavaScript / CSS

Previous Page