How to Embed a Google Calendar on Any Website

Whether you run a yoga studio, a community organization, a consulting firm, or an events venue, one of the most requested features from your website visitors is the ability to see your upcoming schedule without having to contact you. Embedding a Google Calendar directly on your website solves this problem instantly—visitors can see your availability, event dates, and schedules in real time, without you having to manually update a static events page.

This guide covers both the native Google Calendar iframe embed method and a more polished alternative for websites where design consistency and mobile responsiveness actually matter.

Why Display Your Google Calendar on Your Site?

The practical benefits of embedding a calendar on your website are straightforward:

• Reduces repetitive inquiries. If customers can see your hours, event dates, or availability directly on your site, they stop asking the same questions by email or phone.
• Keeps content current automatically. Add an event to Google Calendar once, and it appears on your website instantly—no CMS login required.
• Improves event discoverability. Visitors browsing your site encounter your events in context, rather than having to seek them out on a separate platform.
• Builds trust. An active, regularly-updated calendar signals that your business or organization is operational and engaged.

How to Get the iFrame Embed Code from Google Calendar Settings

Google provides a built-in way to generate an embed code for any calendar you own. The result is an <iframe> element you can paste into your website's HTML.

Step 1: Open Google Calendar Settings

1. Go to calendar.google.com and sign in.
2. In the left sidebar, find the calendar you want to embed under "My Calendars" or "Other Calendars".
3. Hover over the calendar name and click the three-dot menu (⋮) that appears.
4. Select "Settings and sharing" from the dropdown.

Step 2: Configure Sharing Permissions

Before embedding, the calendar must be set to public so that website visitors can see it without being signed in to Google.

1. In the calendar settings, scroll to the "Access permissions for events" section.
2. Check the box next to "Make available to public".
3. A warning will appear explaining that the calendar will be publicly visible. Confirm if you are comfortable with this—note that any events marked as "Private" will still be hidden.

Step 3: Copy the Embed Code

1. Scroll down to the "Integrate calendar" section.
2. You will see an "Embed code" field containing an <iframe> snippet. It will look similar to this:

<iframe 
  src="https://calendar.google.com/calendar/embed?src=your_calendar_id%40group.calendar.google.com&ctz=America%2FNew_York" 
  style="border: 0" 
  width="800" 
  height="600" 
  frameborder="0" 
  scrolling="no">
</iframe>

1. Click "Copy" to copy the code.
2. Paste this code into the HTML of the page where you want the calendar to appear.

Optional Customization via URL Parameters

Google allows limited customization via URL parameters in the src attribute:

• showTitle=0 — Hides the calendar title.
• showNav=0 — Hides the navigation arrows (previous/next month).
• showPrint=0 — Hides the print button.
• mode=AGENDA — Switches from month view to agenda list view.
• bgcolor=%23f5f5f5 — Sets the background color (URL-encoded hex value).

Example of a customized embed URL:

https://calendar.google.com/calendar/embed?src=YOUR_CALENDAR_ID&ctz=Europe/London&showTitle=0&showNav=1&mode=AGENDA

How to Make Your Embedded Google Calendar Responsive

The iframe Google generates has fixed pixel dimensions (width="800" height="600" by default). On mobile devices, this causes the calendar to either overflow its container or appear too small to interact with.

To make it responsive, wrap the iframe in a CSS container:

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

This technique uses the CSS "intrinsic ratio" pattern—the padding-bottom: 75% creates a container that maintains a 4:3 aspect ratio and scales fluidly to any screen width. Adjust the padding percentage to change the aspect ratio (e.g., 56.25% for 16:9).

The Ugly Truth About Native Google Calendar Embeds

The native Google Calendar iframe is functional, but it comes with significant limitations that become frustrating quickly for anyone who cares about their site's design quality:

• Visual design is fixed and distinctly Google. The calendar renders in Google's blue-and-white interface, which rarely matches any website's brand palette or typography. You cannot change fonts, colors, or the overall visual style.
• Limited layout options. You can switch between month, week, and agenda views, but you cannot create a fully custom layout—a horizontal scrolling carousel, a compact upcoming events list, or a tile-based visual display.
• No theming for dark mode. If your site uses a dark background, the embedded Google Calendar will appear as a jarring white box.
• Mobile experience is poor. Even with the responsive wrapper, the actual Google Calendar UI is not optimized for touch interactions. The text can be very small and difficult to tap accurately on small screens.
• No branding control. The embedded calendar displays Google's branding and interface regardless of your preferences.

For a simple internal tool or an intranet, these limitations are acceptable. For a public-facing website where you care about design consistency and user experience, they are real problems.

The Better Alternative: Using a Custom Event Calendar Widget

A custom event calendar widget connects to your Google Calendar data via the Google Calendar API and renders it using a fully customizable front-end component that matches your site's design.

With WidgetJar's Event Calendar Widget:

1. Connect your Google Calendar via a secure OAuth flow—one-time setup.
2. Choose your display layout: Monthly grid, upcoming events list, weekly agenda, or a compact sidebar widget.
3. Customize the design: Set colors, fonts, and card styles to match your brand.
4. Configure filtering: Show specific calendars or filter by event categories.
5. Copy the embed snippet and paste it anywhere on your site.

The result is a calendar that looks like it was designed for your website—not like a Google product that someone dropped in as an afterthought.

Platform Compatibility

WidgetJar's calendar widget works on any website that accepts HTML:

• WordPress: Paste in a Custom HTML block or use the theme editor.
• Wix: Add via the HTML iFrame element in the editor.
• Squarespace: Use a Code Block.
• Shopify: Add to a liquid template or page content area.
• Any HTML site: Paste the snippet directly into the <body> of your page.

---

Give Your Events the Presentation They Deserve

Google's default calendar embed is utilitarian at best and off-brand at worst. Your events deserve to be displayed in a way that reflects your brand's professionalism and visual identity.

Connect your Google Calendar to WidgetJar's Event Calendar Widget and get a stunning, responsive, fully branded event display that updates automatically whenever you add or change an event in Google Calendar.

Try WidgetJar's Event Calendar Widget for free →