Google Calendar Embed: How to Add It to Any Website
Embed a Google Calendar on your website step by step: get the embed code, make it public safely, resize it for mobile, and fix a blank calendar.
To embed a Google Calendar, open the calendar’s settings on a computer, copy the embed code under Integrate calendar, and paste it into an HTML or embed block on your site. The calendar must be public for everyone to see it. This guide walks through each step, then covers privacy, sizing for phones, Eventbrite listings, and what to do when the calendar shows up blank.
TL;DR
-
Get the code in Google Calendar: Settings, pick the calendar, Integrate calendar, then Customize and copy the code. Do this on a computer, not in the mobile app.
-
Visitors only see the calendar if it is public. To show availability without details, choose the free/busy option.
-
Paste the code into a custom HTML or embed block. A plain text block is the most common reason an embed stays blank.
-
Eventbrite has its own embed tools for tickets and checkout, separate from the Google Calendar code.
-
If your page is a link-in-bio page, you may not need a full embed at all: a clear button to your calendar or booking page often works better on a phone.
Table of Contents
How to get the Google Calendar embed code
Google’s own instructions are short, and Google Calendar Help describes the same path on a computer. The steps:
-
Open Google Calendar on a computer.
-
Go to Settings and select the calendar you want to show in the left-hand list.
-
Scroll to Integrate calendar.
-
Under Embed code, click Customize to choose the display options.
-
Copy the generated code.
-
Paste it into your site where the calendar should appear.
If you do not need to change anything, you can also copy the code directly from the Embed code field. Using Customize first is better in most cases, because it lets you set the size and view before you copy.
The code you get is an iframe: a small window that loads the calendar from Google and shows it inside your page. Because it is loaded live, when you add or change an event in Google Calendar the embedded version updates without you touching your website again.
Make the calendar public first
An embedded calendar is only visible to people who have access to it, according to Google Calendar Help. If you want any visitor to see it, the calendar must be public. If you skip this step, visitors who are not signed in to an account with access will see an error or an empty frame, and it looks like your embed is broken.
You can change public sharing only from a computer. Google says these settings are not available in the mobile app.
Show availability without showing event details
Many freelancers and instructors want visitors to see when they are busy, not who they are meeting. Google offers this: on a public calendar, under Access permissions for events, select See only free/busy (hide details), as described on Google’s public calendar page.
Google also lets you keep a separate calendar just for public use. This is the cleanest setup for most people:
-
Keep your personal calendar private.
-
Create a second calendar named for the thing you want to show, such as “Classes” or “Open studio hours”.
-
Put only public events on that calendar, and embed that one.
This way you never have to wonder whether a dentist appointment is visible to the world.
Customize the embed so it fits your page
The Customize screen controls more than most people use. WordPress.com’s support page notes that the controls cover calendar details, width, height, color, language and time zone, and that the embed code updates as you change settings.
Choose a view
Pick the view that matches what visitors need:
| Your goal | Good view |
|---|---|
| Show a class or event schedule | Agenda, a simple list of what is coming up |
| Show monthly availability | Month |
| Show a week of sessions | Week |
For visitors on a phone, a list is nearly always easier to scan than a grid of tiny squares.
Size and navigation
Google recommends that width and height each be at least 500, per its embed instructions. The same page warns that if you turn off the navigation buttons, keyboard shortcuts become the only way to move between dates. Leave navigation on unless you have a reason to remove it.
Does it work on phones?
Mostly, yes. Google announced in September 2024 that embedded calendars received a responsive layout, along with a refreshed look, better spacing, and improved screen-reader and keyboard accessibility. That means an embed adapts to the screen it appears on rather than staying a fixed grid.
Still, a fixed pixel width in the code can fight your page. If the calendar looks cut off on a phone, try setting the iframe width to 100% in the code instead of a fixed number, and keep a sensible height. Then open the live page on a real phone, not just a narrow desktop window.
Let visitors add events to their own calendar
Visitors can subscribe using Add to Google Calendar at the lower left of the embed, as Google explains. For a recurring class or a monthly event series, this is a quiet bonus: people can pull your schedule into their own calendar once and never have to come back to check.
Where to paste the code
The code itself is the same everywhere. What differs is the block you paste it into.
WordPress
On WordPress.com, add a Google Calendar block, paste the code, select Embed, then preview the page, ideally in a new tab. The same page says the block is included on WordPress.com, while self-hosted WordPress.org sites can install the free Jetpack plugin to get it. If you prefer, a custom HTML block works too.
Other site builders
Most builders separate “embed” blocks, meant for supported services, from “code” blocks, meant for raw HTML. If a builder’s embed block rejects your iframe, switch to its code or custom HTML block. Check the result on the live site or in a private browser window, because logged-in editor previews sometimes behave differently from the public page.
Plain HTML
On a hand-built page, paste the iframe where you want it inside the body of the page. Nothing else is needed. If you want to place it in a centered column, wrap it in your usual container element.
Several calendars in one embed
You can show more than one calendar at once. Stony Brook University’s IT guide explains that multiple calendars can be combined, and that the person managing a calendar may need to grant access to it before you generate a combined embed. In practice: add each calendar in the customization tool, give each a distinct color, and confirm each one is public.
Embedding an event calendar on a website: other options
Google Calendar is not the only way to show events. Depending on what you do, one of these may fit better.
A booking page instead of a calendar
If visitors need to book you, a calendar full of busy blocks does not help much. Google’s appointment schedules give you a booking page you can share. According to Google Calendar Help, the booking page is always public, so anyone with the link can see it, along with your profile photo and account name. You can copy the link, or use Sharing options and Website embed to add a button to your site. Availability for appointment schedules depends on your Google account type, so confirm what your account offers.
A plugin-based events calendar
WordPress sites sometimes use a dedicated events plugin. The Events Calendar’s documentation says its embed feature can filter events by category or tag, generate a snippet to paste into an HTML block on another site, and show a month view in which clicked events open in a new tab. This suits sites that manage events inside WordPress and want to show them on a second site.
Eventbrite tickets and listings
If you sell tickets through Eventbrite, use Eventbrite’s own embed rather than a Google Calendar. There are two routes:
-
Embedded checkout. Eventbrite Help says to open the event dashboard, choose Marketing, then Embedded checkout, select Button or Embedded, copy the code and paste it into your site’s HTML. It requires access to your site’s HTML and an HTTPS certificate so attendees can complete registration.
-
Ticket widget. Eventbrite’s ticket widget page says to publish the event, open Manage, then Invite & Promote, Website Integrations and Widget, copy the generated HTML, and paste it where the ticket button or form should appear.
Developers who want more control can use the embedded checkout documentation, which describes modal and inline modes, an event ID, an optional container and height, and completion callbacks. The default container height is 425 pixels.
A good pattern is to use Google Calendar for the schedule overview, and Eventbrite for the ticket step on specific events.
Why your embedded calendar is blank or wrong
Most problems come down to a short list of causes. Work through them in order.
-
The code is incomplete. The Events Calendar’s troubleshooting notes start with checking that the full embed code was pasted. Copy it again, from the opening tag to the closing tag.
-
The wrong kind of block. Pasting into a text block can strip the code. AddCal’s help center lists this among common causes of blank embeds, along with unsupported scripts, blocked requests, no upcoming events, and ad blockers. Use a custom HTML block.
-
The calendar is not public. If you see an error inside the frame, go back to sharing settings on a computer and check the public setting.
-
Your site blocks iframes. The same Events Calendar page suggests checking iframe restrictions, connectivity, the browser cache and whether the source site is reachable. Security headers and HTTPS mismatches can also block an embed.
-
Caching. GravityKit’s documentation says cached sites can show blank or stale events for calendar plugins. If you run a caching plugin, clear the cache after you add the embed.
-
No upcoming events. An agenda view of a calendar with nothing scheduled looks empty. Add a test event to confirm the embed works.
-
An ad blocker. Your own browser extension can hide an embed. Test in a private window or on another device.
When you test, change one thing at a time. If you change three settings at once and the calendar appears, you will not know which one fixed it.
Perspective: when a button beats an embed
We build shapes for people who manage their whole online presence from a phone: instructors, freelancers, artists, small business owners. For them, the question behind “how do I embed my calendar” is usually “how do I make it easy for someone to book me or show up to my class?”
An embedded calendar is a good answer when your visitors need to scan a schedule on a desktop-style page. On a link-in-bio page, which people mostly open from a social app on a phone, we think the strongest pattern is different. Put one clear button at the top that goes straight to your schedule or booking page, then let the rest of the page do its job: show your work, your latest event, your shop link, your email signup.
That is why shapes is built around blocks, folders and tabs you edit directly on your phone, rather than templates or drag-and-drop. You can add the booking link, group your event links in a folder, and change the text in a minute, standing in the studio hallway. Our focus is a page that connects and organizes the services you already use, such as your calendar, your ticketing tool and your shop. We do not try to replace them.
Our advice: keep your Google Calendar as the source of truth, keep it public only where you mean to, and point people to it from one tidy page.
Chris
Using a calendar with a link-in-bio page
A link-in-bio page has a different job from a full website. Visitors arrive from a social profile, often for a few seconds, and want to do one thing. Here is how to make your calendar work in that setting.
Lead with the action
Name the button for what the visitor gets: “Book a session”, “See this month’s classes”, “Get tickets”. Avoid “My calendar”, which asks visitors to work out what to do next. Link it to your Google Calendar appointment page, your public calendar view, or your Eventbrite event page.
Group events in a folder or tab
If you run several events or class types, a single list gets long. Group them: one folder for weekly classes, one for workshops, one for private sessions. Shapes supports folders and tabs for exactly this kind of organization, and provider embeds for services you already use. If you need to paste your own embed code, that is a Pro feature, along with custom domains, analytics and up to five pages.
Schedule the changes
A seasonal promotion or a one-off event should not stay on your page after it ends. Shapes offers content scheduling, so you can set an event link to appear and disappear without remembering to edit the page. Draft edits can also be undone, which helps when you are experimenting from your phone.
Collect emails from people who are interested
Many visitors will look at a schedule and not book that day. An email signup on the same page lets you tell them when the next set of dates opens. Shapes collects signups, and on Pro you can download them as a CSV file. Shapes does not send email campaigns itself, so you would use the list with the email tool you already like.
For appointment-based work in particular, see how shapes works for appointment-based work.
Privacy and accessibility checklist
Before you publish, run through this list:
-
Is the embedded calendar the right one, and not your personal calendar?
-
Have you chosen full details or free/busy on purpose, using the access settings on Google’s public calendar page?
-
Do event titles and locations on the public calendar contain anything you would not put on a flyer, such as a client’s name or a home address?
-
Is navigation left on, so visitors can move between dates?
-
Have you opened the live page on a phone and on a desktop?
-
Does your page also link to the schedule as plain text, for people whose browser or ad blocker hides the embed?
The last point matters more than it looks. An embed is a convenience, not a guarantee. A plain link under it means nobody is stuck.
Try it on a phone-first page
If you want a simple page that points to your calendar, tickets, portfolio and shop, you can build it from your phone with shapes. The Free plan costs $0 per month and publishes a single page with shapes branding. Pro is $8 per month or $60 per year, and removes branding, adds up to five pages, custom domains, analytics, downloadable signups and custom code embeds.
See the details on the shapes pricing page, or start from the shapes homepage.
FAQ
Can I embed a Google Calendar from my phone?
You can paste an embed into a page from a phone, but the setup steps in Google Calendar, including getting the embed code and changing public sharing, are done from a computer. Google states that public-calendar sharing settings cannot be changed in the mobile app. Get the code on a computer, send it to yourself, then paste it from your phone.
Why does my embedded Google Calendar say I need permission?
The calendar is probably not public. Google says an embedded calendar is visible only to people who have access to it. Open the calendar’s sharing settings on a computer and make it available to the public, choosing full details or free/busy depending on how much you want to show.
What size should a Google Calendar embed be?
Google recommends a width and height of at least 500 each. On a phone-width page, set the width to 100% so the frame fits the screen, and keep the height tall enough to show several rows. Since Google’s 2024 update, embedded calendars use a responsive layout, but you should still check the live page on a phone.
Can I show only some events from my calendar?
Google’s embed shows what is on the calendars you select, so the simplest approach is a separate public calendar that holds only the events you want visitors to see. Keep your personal calendar private. If you run events in WordPress, a plugin can also filter by category or tag.
How do I embed an Eventbrite event on my website?
In the event dashboard, open Marketing, then Embedded checkout, choose Button or Embedded, copy the code and paste it into your site’s HTML. Your site needs an HTTPS certificate so attendees can complete registration. Eventbrite also offers a ticket widget under Manage, Invite & Promote, Website Integrations.
Sources
-
Create & manage a public Google calendar, Google Calendar Help
-
Google Workspace Updates: embedded Google Calendars design and accessibility update
-
Embedding Google Calendar(s) on a Web Page, Stony Brook University
-
Embed Your Calendar on Another Site, The Events Calendar documentation
-
Using Embedded Checkout to sell tickets on your website, Eventbrite Help
-
Calendar embed shows blank or does not load, AddCal Help Center
-
My calendar or events aren’t displaying, GravityKit documentation
Recommended
Make the page yours.
Build and preview for free. Choose a publishing plan only when you want the page live.