How to Embed Google Calendar in Squarespace

To embed Google Calendar in Squarespace, make the calendar public, copy its embed code from Settings and sharing, add an Embed block to your page, paste the code in as a Code Snippet, and change the width to 100% so it fits on phones.

That's the whole job, and it takes about ten minutes. The part people get stuck on is step one. Skip it and the calendar looks perfect to you and shows up blank for everyone else.

Step 1: Make your Google Calendar public

Google won't show a private calendar to anyone who isn't signed in as you, so the embed only works once the calendar is public. You have to do this on a computer. The Google Calendar phone app doesn't have the embed settings.

1. Open Google Calendar in a browser.
2. In the left sidebar under My calendars, hover over the calendar you want, click the three dots, and choose Settings and sharing.
3. Under Access permissions for events, check Make available to public.
4. Pick See all event details if visitors should see event names, or See only free/busy if you just want to show when you're available.

Google will warn you that public events are visible to anyone, including through Google search. Take that seriously. If your main calendar has personal appointments on it, create a separate calendar just for the events you want on your website and embed that one instead.

On a Google Workspace account, the public option can be grayed out. That means your admin has turned off sharing outside the organization, and they'll need to allow it.

Step 2: Copy the embed code

Stay on the same Settings and sharing page and scroll down to Integrate calendar. The Embed code box has the snippet you need. It starts with <iframe.

Before you copy it, click Customize. That opens Google's embed tool, where you can:

• Choose the default view: Week, Month or Agenda
• Hide the title, print icon, tabs and calendar list
• Set the time zone and background color
• Add more of your calendars to the same embed

Make your changes, then copy the updated code from the top of the Customize page. Hiding the print icon and the tabs makes the calendar look much less like a Google screen dropped into your site.

Step 3: Add it to your Squarespace page

1. Open the page in the Squarespace editor and click Edit.
2. In the section where the calendar should go, click Add Block and choose Embed.
3. Click the pencil icon on the block, then choose Code Snippet.
4. Paste your Google Calendar code into the Embed Data box and save.

A Code block works too, if you'd rather use that.

Don't judge it from the editor. Embeds often show up blank while you're editing and work fine on the live page, which sends a lot of people troubleshooting a problem they don't have. Save, exit, and reload the real page.

Step 4: Fix the size for mobile

Google's code comes with a fixed width of 800 pixels. On a phone that either cuts the calendar off or makes the whole page scroll sideways.

Open the snippet and change the width to 100%, then set a height that fits your calendar without an inner scrollbar. Around 600 pixels works for Month view. It should end up looking something like this:

<iframe src="https://calendar.google.com/calendar/embed?src=YOUR_CALENDAR_ID&ctz=America%2FDenver&mode=AGENDA&showPrint=0"
  style="border:0; width:100%; height:600px;" frameborder="0" scrolling="no"></iframe>

Month view gets cramped on a phone because every event gets squeezed into a tiny day square. If your calendar is mostly a list of upcoming events, set Agenda as the default view. It reads well on every screen size. That's the mode=AGENDA part of the code above.

Step 5: Check it as a visitor

Open the live page in a private or incognito window. That shows you what a visitor sees, because you're not signed in to Google there.

If the calendar is blank or asks you to sign in, it isn't public yet. Go back to step 1. If you see events but no titles, it's set to free/busy only. That's fine if it's what you wanted.

When something's still wrong

The times are off. The embed shows times in the time zone in its code, not the visitor's. Check the ctz= value in the snippet, or set the time zone in Customize and copy the code again.

Some events are missing. Only events on the calendar you embedded show up. If they live on a second calendar, add it in Customize or add a second src= value to the code. That calendar has to be public too.

New events aren't showing. The embed updates on its own, but it can take a few minutes. Reload the page before you change anything.

It doesn't match my site's fonts. It can't. The calendar is Google's page shown inside yours, so you only get the color options in Customize. If you want events styled like the rest of your site, a Squarespace Events page does that natively, but you'll add events there instead of in Google Calendar.

Google Calendar vs a booking tool

A Google Calendar embed shows a schedule. It can't take bookings. If you want clients to pick a time and get it on your calendar, you need a booking tool.

Calendly and Cal.com both do that, with reminders and two-way calendar sync, and both embed the same way as above. The video at the top of this post walks through Calendly. Cal.com has a generous free tier and it's what runs booking on my contact page. Squarespace Scheduling is the other option if you want everything under one login, though it's a paid add-on.

For a service business, a real booking tool almost always beats a contact form. Taking out the back-and-forth of finding a time is usually the difference between an inquiry and a booked call.

Keeping the page fast

Every embed loads scripts from another site, and booking tools are the heaviest. They load as soon as the page opens, even if nobody scrolls down to the calendar.

If the calendar sits low on a long page, it's worth loading it only when someone scrolls near it or clicks a button. On this site that change removed around ninety third-party requests from the first page load. It takes custom code rather than a setting, but on a page where the calendar is below the fold you'll feel the difference.

Frequently asked questions

Why is my embedded Google Calendar blank?

Almost always because the calendar isn't public. It looks fine to you because you're signed in to Google. Turn on Make available to public under Settings and sharing, then check the live page in a private window. Embeds also tend to look blank inside the Squarespace editor, so check the live page, not the editor.

Can I embed more than one Google Calendar?

Yes. In the Customize tool, tick every calendar you want to show before you copy the code, or add a second src= value to the embed URL. Each calendar needs to be public.

Can people book appointments through an embedded Google Calendar?

No. The embed only displays events. For bookings, link to a Google Calendar appointment schedule, or use Calendly, Cal.com or Squarespace Scheduling.

How do I make an embedded Google Calendar fit on mobile?

Change the width in the embed code to 100% and set a height that fits without an inner scrollbar. Agenda view reads much better than Month view on a phone.

Is it safe to make my Google Calendar public?

Only if everything on it is meant to be seen. Public events are visible to anyone, including through Google search. Keep a separate calendar for the events you want on your website and embed that one.

Want booking set up so it loads fast and looks like part of your site? Book a free call, and you can see the setup in action while you're there.

I'm Dylan, the designer behind Highr Labs and a Squarespace Circle Platinum Partner. I build custom Squarespace sites for businesses in Utah and across the US. More about me, or book a free call if you want to talk through a project.