Squarespace Calendar: How to Embed One
To add a Squarespace calendar, embed it: copy the embed code from your calendar or booking tool, add an Embed block to your page, click the pencil icon, choose Code Snippet, and paste the code into the Embed Data box.
Getting your Squarespace calendar embed code
Start on your calendar platform rather than in Squarespace. You need the embed code before anything else.
In most tools it's under Share, Embed or Integrations. Google Calendar has it under Settings for the calendar you want, then Integrate calendar. Cal.com and Calendly both have embed options in their dashboards with a few layout choices.
Pick the inline embed rather than a popup or a button, because inline puts the calendar on the page where people can see it. Copy the whole snippet.
One thing to check on Google Calendar specifically: the calendar has to be public for an embed to show anything to visitors. It'll look fine to you while you're logged in and be blank for everyone else.
Pasting it into Squarespace
Go to the page and section where the calendar should appear. Click the plus icon to add a block and choose Embed.
Click the pencil icon to open the block, then click Code Snippet. Paste your code into the Embed Data box.
Save, then reload the live page rather than judging it from the editor. Embeds often render blank in the editor and work perfectly on the live site, which sends a lot of people troubleshooting a problem they don't have.
Fixing the sizing
The usual complaint is that the calendar is cut off, or has an odd scrollbar, or leaves a big gap under it.
That's because the embed code carries fixed pixel dimensions from the platform, and they rarely match your section. Most embed codes have height and width values you can edit directly in the snippet before pasting.
Increase the height until the whole calendar fits without an internal scrollbar. Set the width to 100% so it adapts to your layout instead of staying fixed.
Then check mobile, which is where fixed widths cause real damage by forcing the whole page to scroll sideways. If that happens, the width value is still fixed somewhere in the code.
Which booking tool to use
Google Calendar embeds are for showing availability or an events schedule. They don't take bookings.
Cal.com and Calendly both handle actual booking, with reminders and calendar sync. Cal.com has a generous free tier and is what runs the booking on my contact page.
Squarespace also has its own Scheduling product, which is worth considering if you want everything in one place, though it's a paid add-on.
For a service business, a real booking tool almost always beats a contact form. Removing the back-and-forth of finding a time is usually the difference between an inquiry and a booked call.
Keeping the page fast
Booking embeds are heavy. They load their own scripts, styles and often fonts, and they do it as soon as the page loads even if nobody scrolls to the calendar.
If your booking embed 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 initial page load.
That's custom code rather than a setting, but on a page where the calendar is below the fold it makes a genuine difference to how fast the page feels.
Frequently asked questions
Why is my embedded calendar not showing up?
Check the live page rather than the editor, since embeds often look blank while editing. If it's Google Calendar, make sure the calendar is set to public, or visitors see nothing while it looks fine to you.
How do I make an embedded calendar responsive?
Edit the width value in the embed code to 100% before pasting, and raise the height until the calendar fits without an internal scrollbar.
What is the best booking tool for Squarespace?
Cal.com and Calendly both embed cleanly and have solid free tiers. Squarespace Scheduling is worth it if you want everything under one login. Google Calendar only displays availability, it doesn't take bookings.
Do calendar embeds slow down my site?
Yes, more than most embeds, because they load their own scripts on every page view. Lazy-loading the embed until someone needs it is worth doing on longer pages.
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 are 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.
