Mar 9, 2026

How to Embed Google Calendar on Your Website

Google Calendar has a built-in embed feature that generates an iframe you can paste into any website. It’s useful for showing team availability, event schedules, or public booking windows without requiring visitors to leave your site. Here’s how to set it up.

1. Make the Calendar Public (Required)

Embedded calendars only display content if the calendar is set to public. Private or shared-with-specific-people calendars won’t work.

Go to calendar.google.com.
In the left sidebar, hover over the calendar you want to embed.
Click the three-dot menu (⋮) → Settings and sharing.
Under Access permissions, check Make available to public.
Select See all event details if you want full event info visible, or See only free/busy for a privacy-preserving availability view.

2. Get the Embed Code

In the calendar’s settings (same page as above), scroll down to Integrate calendar.
Find the Embed code section — it contains an <iframe> tag.
Click Customize to open a customization tool where you can adjust size, view, and which calendars to show.
Click Copy to copy the iframe code.

The code looks like:

<iframe src="https://calendar.google.com/calendar/embed?src=..."
  style="border: 0"
  width="800"
  height="600"
  frameborder="0"
  scrolling="no">
</iframe>

3. Customize the Embed

The customization tool (accessed via the Customize button) lets you adjust:

Title: Add a heading above the calendar, or leave blank.

View: Choose default view — Month, Week, Agenda. Week or Agenda tends to work better on smaller embeds.

Size: Set width and height in pixels. Common choices:

Full-width section: width="100%" height="600"
Sidebar widget: width="300" height="400"

Date: Set whether it opens to today (default) or a specific date.

Show/hide elements:

Navigation buttons
Print icon
Tabs (day/week/month switchers)
Calendar title
Timezone

Uncheck elements you don’t need to create a cleaner embed with less UI clutter.

4. Embed Multiple Calendars

You can embed multiple Google Calendars in a single iframe — useful for showing team calendars or combining work and personal schedules.

In the customization tool:

Under Other calendars, type the calendar ID or email address of each calendar to include.
Add multiple calendars by clicking Add.
Each added calendar appears in the preview alongside the primary one.

Each person or calendar will show in a different color (inherited from Google Calendar’s color assignment).

5. Paste the Code Into Your Website

Once you have the iframe code, paste it into your website’s HTML wherever you want the calendar to appear.

Squarespace: Add a Code Block and paste the iframe HTML.

WordPress: Use a Custom HTML block (Gutenberg editor) and paste the code.

Wix: Add an HTML iFrame element and paste the embed code.

Webflow: Use an Embed element and paste the code.

Raw HTML: Paste directly into your page’s HTML file.

6. Responsive Sizing

The Google Calendar embed doesn’t resize automatically for mobile. To make it responsive, wrap it in a container:

<div style="position: relative; padding-bottom: 75%; height: 0; overflow: hidden;">
  <iframe
    src="https://calendar.google.com/calendar/embed?src=..."
    style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: 0;"
    frameborder="0"
    scrolling="no">
  </iframe>
</div>

This creates a 4:3 aspect ratio container that scales to the parent width. Adjust padding-bottom to change the ratio.

7. Troubleshooting

Issue	Cause	Fix
Blank or “private” calendar shows	Calendar not set to public	Settings → Access permissions → Make available to public
Events not showing	Wrong calendar embedded	Verify the calendar ID in the embed URL matches the intended calendar
Embed not showing on website	iframes blocked by CMS	Use the CMS’s native iframe or embed block
Wrong time zone on embed	Viewer’s browser time zone differs	Add `&ctz=America/New_York` (or your zone) to the embed URL
Calendar updates not appearing	Caching	Google Calendar embeds have a short cache delay — updates appear within a few minutes

Limitations of the Google Calendar Embed

Read-only. Visitors can’t create or modify events from the embed.
Google branding. The embed includes Google Calendar branding and a link back to Google Calendar.
Limited styling. You can’t fully customize fonts or colors to match your site’s design.
No booking. If you want visitors to book time with you, the embed is the wrong tool — use a scheduling link from a tool like Carly or Calendly instead.

More on Google Calendar: How to share Google Calendar · How to set up a shared team calendar · Best meeting scheduling apps