Customize Your Squarespace Website
Event Calendars in Squarespace

Add a Google Calendar

Complete & Continue Next Lesson Learn More

Keep your followers connected and in the loop!

Integrating your Google Calendar with your Squarespace website is quick and simple to set up. By doing so, you can prominently display upcoming events, appointments, or your general availability directly on your site.

This makes it convenient for visitors to stay informed about updates and effortless for you to keep your schedule organized and up to date.

Steps to Add Google Calendar to Squarespace

STEP 1 - Sign in to your Google Calendar Page :

  1. Open Google Calendar in a web browser and sign in with your Google account (https://calendar.google.com).

  2. Hover over the calendar you want to use and click the three dots and click “Settings and Sharing”.

  3. In the "Settings" page, scroll down and click "Integrate calendar" section.

  4. Locate "Embed code" and copy this code.

    • OPTIONAL: Click "Customize" where can adjust the settings such as: the calendar size, default view, and more.

STEP 2 - Log into Squarespace to add the code:

  1. Open Squarespace and log in to your account.

    • 💡HINT: On your website homepage, add /config to the end of the URL to go directly to your website dashboard.

  2. Click the page where where you want to add the calendar.

  3. Navigate to the section on that page where you want to add the calendar, or add a new section.

  4. Click “Edit”.

  5. Hover over the target section and click "+ADD BLOCK".

    • 💡HINT: If you already have a calendar embedded that you are replacing, click on the current embed code block and delete.

  6. Scroll down and click “↓ Embed” to add a new content block.

  7. In the Embed block, click on the pencil icon > Code Snippet > Embed data”.

  8. Paste the Google Calendar embed code you copied earlier into the Embed Block.

  9. Click “Save” to further edit the page or “Publish” to go live immediately.

Step 3 - Adjust the Layout (Optional):

After embedding the calendar, you might need to adjust the layout or styling to fit your website’s design. Squarespace may offer limited customization options through the "Design" panel, but more extensive customizations typically require CSS adjustments.

If you need the calendar to be responsive (i.e., adapt to different screen sizes), you may need to add some custom CSS. For example, you can use custom code injection to make the calendar responsive.

TIPS:

Permissions and Privacy: Ensure that your Google Calendar is set to “Public” if you want visitors to view it without any issues. If the calendar is private, only users with appropriate permissions will be able to see it.

Customization: The default appearance of the Google Calendar might not perfectly match the styling of your Squarespace site. Limited customization is available directly in Google Calendar, but more advanced styling might require custom CSS or third-party tools.

Mobile Responsiveness: Sometimes, embedded calendars do not automatically adjust well on mobile devices. If your calendar does not display correctly on mobile devices, you may need to implement custom CSS to ensure it is responsive.

Testing: After embedding the calendar, test it on different devices and browsers to ensure it looks and functions as intended.