[ Back to all articles ](https://addcal.co/blog.md)
google calendar calendar embed embeddable calendar how to
How to Embed Google Calendar on Your Website (and Make It Work on Phones)
=========================================================================
By Tom •November 8, 2026
Google Calendar has a built-in embed. It is free, it takes about two minutes, and for a plain calendar on a page it is the right answer more often than the paid calendar widgets would like you to think. This guide walks through the steps as Google's settings screen shows them in November 2026, then covers the parts the help page skips: the URL parameters, how to make the frame behave on phones, time zones, several calendars in one frame, and the three things the embed cannot do no matter how you configure it.
Short version: make the calendar public, copy the iframe from **Integrate calendar**, paste it into an HTML block. Everything after that is tuning.
One thing to know before you start. Google's embed really only works Google to Google. You edit in Google Calendar, and the only thing a visitor can do with what they see is copy it into a Google Calendar of their own. Someone on Apple Calendar or Outlook can read the frame and that's all. If your visitors mostly have Gmail accounts that is fine; if they do not, read the section on what the embed cannot do before you spend time on the styling.
Step 1: make the calendar public
--------------------------------
An embedded calendar shows events only to people who can see the calendar. If it's private, signed-out visitors get an empty frame or a "this calendar is private" notice, which is the single most common reason an embed appears broken.
1. Open [Google Calendar](https://calendar.google.com) on a computer. The embed code is not available in the mobile app.
2. In the left sidebar, hover over the calendar, click the three dots, then **Settings and sharing**.
3. Under **Access permissions for events**, tick **Make available to public**.
4. In the dropdown next to it, choose **See all event details**. The other option, free or busy only, produces a calendar of grey blocks with no titles.
Public means public. Anyone with the calendar's address can read every event on it, and Google will index them. Keep anything you would not put on the website itself on a separate calendar. [Google's page on public calendars](https://support.google.com/calendar/answer/37083) has the details.
Step 2: copy the embed code
---------------------------
1. On the same settings page, scroll to **Integrate calendar**.
2. Under **Embed code** you will see an iframe. Copy it as is if you want the defaults, or click **Customize** to change what the frame shows.
The generated code looks like this, with your calendar's address in the `src` parameter:
```
```
Google's help page documents two settings in the customiser: the dimensions, which must be at least 500 pixels each way, and whether to show navigation buttons. The customiser itself offers more. You can hide the title, date, print icon, view tabs, calendar list and time zone picker, pick a default view of week, month or agenda, set the first day of the week, the language, the background colour and the border, and tick several calendars to show them together, each in its own colour. Every one of those choices becomes a parameter in the iframe URL, which is the next section.
The URL parameters, so you can edit without the tool
----------------------------------------------------
Once you know the parameters you can change the embed in your page editor instead of going back to Google and copying the code again. These are the ones that matter:
| Parameter | What it does | Example |
| --- | --- | --- |
| `src` | The calendar to show. Repeat it for several calendars. | `src=events%40example.com` |
| `ctz` | The time zone events are displayed in. | `ctz=America%2FNew_York` |
| `mode` | Default view. | `mode=AGENDA`, `WEEK` or `MONTH` |
| `showTitle`, `showNav`, `showDate`, `showPrint`, `showTabs`, `showCalendars`, `showTz` | Hide a control with `0`. | `showPrint=0&showTz=0` |
| `wkst` | First day of the week: 1 Sunday, 2 Monday, 7 Saturday. | `wkst=2` |
| `bgcolor` | Frame background, URL-encoded hex. | `bgcolor=%23ffffff` |
| `color` | Event colour for the preceding `src`. | `color=%230B8043` |
| `hl` | Interface language. | `hl=en_GB` |
A stripped-down agenda of one calendar, Monday first, no chrome:
```
https://calendar.google.com/calendar/embed?src=events%40example.com&ctz=Europe%2FLondon&mode=AGENDA&wkst=2&showTitle=0&showPrint=0&showTabs=0&showCalendars=0&showTz=0
```
Step 3: paste it into your site
-------------------------------
Every site builder has a block that accepts raw HTML. The iframe goes in that block, nothing else changes.
- **WordPress.** Edit the page, add a **Custom HTML** block, paste, update. No plugin needed. WordPress.com needs a plan that allows custom code.
- **Squarespace.** Add a **Code** block with HTML selected. Code blocks need the Business plan or above.
- **Wix.** Add Elements, **Embed Code**, **Embed HTML**, paste. Wix wraps the embed in its own fixed-size frame, so size that frame to match your iframe.
- **Webflow.** Drag an **Embed** element onto the page and paste. It renders on the published site, not in the Designer.
- **Shopify.** Open the page under Online Store, Pages, switch the editor to **Show HTML**, paste.
- **Google Sites.** Skip the code entirely: **Insert**, **Calendar**, pick the calendar.
- **Plain HTML.** Paste the iframe where the calendar should appear.
Make it behave on phones
------------------------
This is the part the embed gets wrong out of the box. The iframe is a fixed 800 by 600 box. On a phone it overflows the page or shrinks until the month grid is unreadable, and the month view is the wrong view for a 390 pixel screen anyway.
Two fixes, and you want both. First, let the frame fill its container and keep its shape with a wrapper:
```
```
Second, show the agenda view on small screens. The embed can't switch views by screen width, so use two iframes, one with `mode=MONTH` and one with `mode=AGENDA`, and hide one of them with a media query:
```
```
It is two requests to Google instead of one, which is a fair trade for a calendar people can actually read on a phone. The wrapper CSS goes in your theme's custom CSS or inside the same HTML block.
Time zones
----------
The embed shows every event in one time zone, the one in `ctz`, for every visitor. It doesn't adapt to where the visitor is. If your events are in person, set `ctz` to the venue's zone and leave it. If your audience is spread across zones, leave the time zone picker visible (drop `showTz=0`) so visitors can switch it, and say the zone in the page copy next to the calendar. Events a visitor copies to their own Google Calendar do convert correctly, because the underlying event carries its real zone; it is only the display in the frame that is fixed.
Several calendars in one frame
------------------------------
Tick more than one calendar in the customiser, or add a second `src` to the URL by hand. Each calendar gets its own `color`. Every calendar in the frame has to be public in its own right, and the calendar list control (`showCalendars`) lets visitors toggle them. This is the usual setup for a school or a club: one calendar per team or year group, one frame on the website.
When the embedded calendar does not show events
-----------------------------------------------
- **Blank frame or a "private" notice.** The calendar is not public. Go back to step 1, and check each calendar if the frame shows several.
- **Some events missing.** Those events are on a calendar that is not ticked in the customiser, or the frame is showing a different month. Agenda view makes this obvious.
- **Times are wrong.** Check `ctz`. If it is absent, add it.
- **An edit in Google Calendar has not appeared.** The embed is served from Google's cache and can lag an edit by a few hours. Reloading the page doesn't force it.
- **Nothing renders at all.** The page editor stripped the iframe. Squarespace Personal, WordPress.com Free and Wix's plain text blocks all do this. Use the HTML block named above, or a plan that allows it.
What the Google Calendar embed cannot do
----------------------------------------
The limits are the same three in every version of this embed Google has shipped, and no parameter changes them.
1. **It looks like Google.** Google's fonts and colours, with the Google logo in the corner. `bgcolor` and the per-calendar colours are the whole of the styling control. If the calendar has to match a brand, the iframe won't.
2. **It is Google to Google only.** The **Add to Google Calendar** button at the bottom left subscribes a Google account to the whole calendar. For a single event you add a separate **Publish event** button per event, also Google only. A visitor on Apple Calendar or Outlook gets nothing, not even an ICS download, and there is no setting that changes it.
3. **It is a frame, not part of the page.** Fixed size, scrolls inside itself, no filtering, no search, and the content is invisible to your site's search and to search engines.
If none of those bites, stop here. The embed is free, it never caps anything, and you're already finished.
The alternative: keep Google Calendar, sync it into a branded widget
--------------------------------------------------------------------
If one of them does bite, the fix is not to stop using Google Calendar. Keep editing events there and sync them into a widget that renders in your own colours and gives visitors an add button for every calendar app. That is what we built AddCal for, so read the next paragraph as the vendor's view.
Google Calendar publishes a **Secret address in iCal format** on the same **Integrate calendar** section you used in step 2. Paste that into an [AddCal calendar](https://addcal.co/solutions/calendar-embed.md) as an external calendar and AddCal checks it about every hour, one way, so an edit in Google reaches your website on its own. The [sync guide](https://help.addcal.co/en/articles/11636046-sync-external-google-calendar) has the two screens. The embed snippet is one script tag and one div, it is responsive with a schedule view on phones, it uses your colours and fonts, visitors can add any event to Google, Apple, Outlook or Yahoo or download an ICS, and they can subscribe to the whole calendar from their own app. Creating the calendar and its public page is free; embedding it on your own site is Premium, $12 a month billed yearly or $15 monthly. The calendar does not need to be public on Google's side, because the secret address does the reading.
The same approach works with Outlook and iCloud, and with any calendar that publishes an ICS or webcal feed. For how AddCal compares with the other hosted widgets on price and features, see [seven embeddable calendar widgets compared](https://addcal.co/blog/embeddable-calendar-widgets-compared.md).
Frequently asked questions
--------------------------
### Is it free to embed a Google Calendar on a website?
Yes. The embed is part of every Google account, personal or Workspace, with no limit on views or events. The only requirement is that the calendar is public.
### Can I embed a private Google Calendar?
You can paste the iframe, but it only shows events to visitors who are signed into a Google account that already has access to the calendar. Everyone else sees an empty frame. For a members-only calendar, share the calendar with those people directly instead, or sync the secret iCal address into a widget that does not depend on Google sign-in.
### Why is my embedded Google Calendar not showing events?
Almost always because the calendar is not public, or because the events are on a second calendar that is not ticked in the embed. Open Settings and sharing, confirm Make available to public is ticked with See all event details, and check which calendars the customiser has selected. If the events exist but show at the wrong time, add the ctz parameter.
### How do I make the embedded Google Calendar responsive?
Wrap the iframe in a div with a percentage padding-bottom and position the iframe absolutely to fill it, so the frame scales with the page width. Then use a second iframe with mode=AGENDA and a media query to show the agenda view on screens under about 640 pixels, because the month grid is unreadable on a phone at any size.
### Can visitors add events from the embedded calendar to their own calendar?
Only to Google Calendar. The Add to Google Calendar button subscribes a Google account to the whole calendar, and the per-event Publish event button copies one event to Google. There is no Apple, Outlook or ICS option inside the frame. If your visitors use other calendar apps, sync the calendar into a widget that offers all of them, such as AddCal.
### Can I change the colours and fonts of the embedded Google Calendar?
Only the background colour, with the bgcolor parameter, and the event colour per calendar. Fonts, layout and the Google logo are fixed. For a calendar in your own brand, sync the Google Calendar into a widget that renders natively on your page.
### How do I embed Google Calendar in WordPress without a plugin?
Add a Custom HTML block to the page in the block editor and paste the iframe from Google Calendar's Integrate calendar section. Self-hosted WordPress accepts it for administrators with no plugin. WordPress.com strips iframes on the Free plan and needs a plan that allows custom code.
### Does the embedded calendar update automatically?
Yes. It reads the live calendar, so edits in Google Calendar appear without touching the website. The embed is cached on Google's side and an edit can take a few hours to show up in the frame.
Google Calendar is a trademark of Google LLC. UI labels and steps checked in November 2026.
Last updated on November 8, 2026
### Tom
Founder
Built Calndr.link in 2020 because an event link broke in Outlook and it annoyed him enough to fix it properly. Six years later he can tell you exactly how each calendar app mangles a timezone, which is a worse party trick than it sounds. Otherwise found hanging off a rock somewhere in Australia.
[GitHub](https://github.com/atymic)[X](https://x.com/atymic)
### Related articles
[7 embeddable calendar widgets compared, with 2026 prices Seven embeddable website calendars side by side: free plans, entry prices, what each can sync from Google or Outlook, and whether visitors can add an event to their own calendar, checked on each vendor's site.](https://addcal.co/blog/embeddable-calendar-widgets-compared.md)[How to Add an ICS File to Google Calendar Importing an ICS file into Google Calendar takes seconds on a laptop and is close to impossible in the mobile app. Here is the desktop import flow, how duplicate matching works, the mobile workarounds, and why subscribing often beats importing.](https://addcal.co/blog/how-to-add-an-ics-file-to-google-calendar.md)[ICS Timezone Wrong in Google Calendar: Why Events Shift, and the Fix An imported .ics lands at the wrong time in Google Calendar for one of three reasons: a zone name Google does not know, a floating time read in your zone, or a bad daylight-saving rule. How to tell which, and the fix for each.](https://addcal.co/blog/ics-timezone-wrong-in-google-calendar.md)
[ Browse all articles ](https://addcal.co/blog.md)