How to Embed a Google Calendar on Your Squarespace Site (The Responsive Way)
While Squarespace features a native Events page, many businesses, organizations, and busy professionals prefer the robust functionality of Google Calendar. It’s easier to update on the fly, handles recurring events like a charm, and syncs seamlessly across your entire team's devices.
Fortunately, adding your Google Calendar to a Squarespace site is incredibly straightforward. Thanks to Squarespace’s Fluid Engine editor, you can position it exactly where you want it.
The secret trick? Making sure that embedded calendar doesn't break when someone views it on a phone. Here is the step-by-step guide to embedding a clean, mobile-responsive Google Calendar on your Squarespace site.
Step 1: Grab Your Embed Code from Google Calendar
Before heading to Squarespace, you need to get the specific piece of HTML code from your Google Calendar account.
Open Google Calendar on a desktop browser.
In the left sidebar, find the calendar you want to embed under "My Calendars."
Hover over the calendar name, click the three vertical dots, and select Settings and sharing.
Ensure your calendar is public (under "Access permissions for events," check the box for Make available to public so your site visitors can actually see the events).
Scroll down to the Integrate calendar section.
Copy the code block listed under Embed code. It will start with <iframe src=....
💡 Pro Tip: If you want to customize the colors, default views (month, week, agenda), or hide specific elements like the title, click the Customize button right above the embed code before copying it.
Step 2: Add a Code Block to Your Squarespace Page
Now that you have your code, head over to your Squarespace account.
Navigate to the page where you want the calendar to live and click Edit in the top-left corner.
If you are using a Fluid Engine section, click Add Block in the top-left corner of the section.
Select Code from the block menu.
Click the Edit icon (the pencil) on the new Code Block.
Delete any placeholder text and paste your Google Calendar embed code into the box.
Step 3: The Secret Trick for Mobile Responsiveness
By default, Google Calendar generates embed codes with a fixed pixel width (usually something like width="800"). If you leave it like this, your calendar will look fine on a computer but will completely break and overflow off the screen on mobile devices.
To fix this, scan through your pasted code inside the Squarespace code block until you find the text that says width="800" (or whatever number Google assigned it).
Change that exact portion to: width="100%"
Do not touch the height setting (height="600"), as a fixed height is fine. By changing the width to 100%, you are telling the calendar to automatically expand or contract to perfectly fit whatever size container it is placed in.
Step 4: Scale and Position via Fluid Engine
Now that your code is set to stretch dynamically, use Squarespace's drag-and-drop editor to make it look great.
For Desktop Layout:
Click and drag the edges of the Code Block to resize the bounding box. Stretch it out wide so the monthly or weekly view has plenty of room to breathe.
For Mobile Layout:
Don't skip this step! Fluid Engine requires you to design your mobile layout independently.
Click the Mobile View icon in the top-right corner of the Squarespace editor.
Look at how your calendar is sitting. It will likely look squished or out of place.
Click and drag the Code Block to reposition it, and stretch the width of the block to the full edges of the mobile screen grid. Because we changed the width to 100% in Step 3, the calendar will automatically adjust to fit this smaller mobile box.
Step 5: Save and Test
Once you are happy with the placement on both desktop and mobile layouts:
Click Save in the top-left corner of the page editor.
Log out of your editor or open an incognito window to view the live page.
Check it on your smartphone to ensure the calendar scales down neatly without cutting off text.
Summary
Where do I get the code? Go to Google Calendar > Settings and sharing > Integrate calendar > Copy the Embed Code. (Make sure the calendar is set to "Public").
How do I insert it into Squarespace? Use a Code Block inside any Fluid Engine section and paste the code.
How do I make it mobile-friendly? Find width="800" (or similar number) inside the pasted HTML code and change it to width="100%".
What is the final step? Adjust the bounding box using the drag-and-drop editor in both Desktop and Mobile views inside Squarespace, then save and test.
