Timetable studioCALM TECH

Your draft stays in this browser

01 / CONNECT

Your calendar.
Your website.

Connect once. Your class schedule stays up to date from Google Calendar.

Schedule source

Google Calendar ID

Google Calendar → Settings → your calendar → Integrate calendar → Calendar ID.

Google Calendar API key

Use a restricted browser API key, not an OAuth client secret. It is not saved in this browser.

First time connecting?

Create a separate calendar for public classes. Enable Make available to public → See all event details.
In Google Cloud, enable Google Calendar API, then create an API key.
Restrict the key to Google Calendar API and Websites. Allow your Squarespace site and this editor’s address.

For Sophie’s Squarespace test site, allow:

https://sophie-calmtech.squarespace.com
https://sophie-calmtech.squarespace.com/*

For your own site, replace these with its exact origin and origin/* entry. Include a custom domain only if you use it.

Keep customer names, attendee lists and private notes off this public calendar. Reading it does not require Google sign-in.

Class time zoneUse the studio’s time zone, not necessarily your device’s.

Where visitors book

Default booking page OptionalUsed when a class does not have its own booking link.Contact page OptionalA helpful fallback when there is no booking page.

Advanced: edit Google events

For a dedicated calendar you own. Google requests access to events on your owned calendars; this helper only updates the calendar selected above, one occurrence at a time.

OAuth web client IDOnly needed for optional write-back. Not required to display your public calendar.

02 / CONTENT

Edit your classes.

Select a class, or use its pencil icon in the preview. Changes are not published until you update the embed.

Class details

Choose a class

Class title

RepeatsDayDate Start timeMinutes

Price labelTeacherLocationShort description

Booking & visibility

Booking statusClass booking linkLeave blank to use the default booking page in Design.Waitlist linkShow this class in the embed

Visibility is embed-only. It never deletes the Google event.

SAVE DESTINATIONEmbed only

Edits appear in the preview and your next embed code. Google Calendar is unchanged.

03 / DESIGN

Familiar, but yours.

Choose the elements and styles you need. Your website supplies the fonts, colors and background.

Typography

Use your site styles, or override only the size. Custom values accept px, em, rem, %, vw and other supported CSS length units.

Class titles

Squarespace styleSize

Class titles size

Adjust class titles size

Class details

Squarespace styleSize

Class details size

Adjust class details size

Supporting text

Squarespace styleSize

Supporting text size

Adjust supporting text size

Times, prices & button text

Class time

Size

Class time size

Adjust class time size

Price

Size

Price size

Adjust price size

Button text

Size

Button text size

Adjust button text size

Colors

The published embed follows the section palette. Custom colors override only the selected element.

Class titles

Class titles CSS color

Opacity%

Class details

Class details CSS color

Opacity%

Supporting text

Supporting text CSS color

Opacity%

Class dots

Class dots CSS color

Opacity%

Dividers

Dividers CSS color

Opacity%

Custom fields accept hex, rgb(), hsl() and other browser-supported CSS colors. Always check contrast on your website.

Week cards & class dots

Show week cardsShow the dot beside each class titleDot colorsEach dot is one scheduled class. Repeated class names keep the same tint.Show class color key

One dot per class. Tints stay consistent. Dots overlap in the week cards and sit beside class titles.

Visible details

Time zoneDurationDescriptionTeacherLocationPriceBooking actionsFooter note

Heading & wording

Use my existing Squarespace heading and eyebrow

The preview includes stand-in text blocks. In this mode, edit those blocks directly in Squarespace; they are not duplicated in the embed.

Schedule headingShow eyebrowEyebrowFooter note

Booking buttons

Button styleButton wordingOpen links

A class’s own link takes priority. Full or cancelled classes never use the normal booking fallback.

Button colors

Background

Background CSS color

Opacity%

Text

Text CSS color

Opacity%

Border

Border CSS color

Opacity%

Preview button state

Style preview only. On your site, classes without a booking destination show a disabled button. Closed, full and past classes cannot book.

Layout & past classes

Section heightSteady reserves space for the busiest loaded week; no clipping.Past classes

Content and design are saved only in this browser. API credentials are not saved. This is not a cloud account.

04 / EMBED

Ready for your page.

Copy your embed into Squarespace. Your calendar continues to supply the schedule.

THIS EMBED WILL USESample preview only

Calendar changes update automatically when visitors load your page. After changing the design or embed-only content here, generate and replace the embed code.

Squarespace installation code

Install in Squarespace

Use a Code block in HTML mode.
Replace all the previous code. Keep Display Source off.
Set the section background and spacing in Squarespace.
Save and test the visitor-facing page and its booking links.

Your plan must support JavaScript in Code blocks. The helper’s panels are not added to Squarespace’s native sidebar.

No live calendar changesv4

Live previewSample classes

Preview color theme

Example preview. Connect your calendar to see your classes.Preview only · no bookings taken

Transparent embed · your Squarespace section owns the spacingSophie preview · final site styles come from Squarespace

Booking preview

This is a preview. On your website, visitors follow the booking link you supplied. Reservations and payments happen with your booking provider.

Review Google update

This updates one dated occurrence in the named Google Calendar, not the full recurring series. It does not change a separate booking service.

Changed class metadata is saved as a plain-text description. Other notes are retained; review the complete replacement below.

I have checked the calendar, date and changes above.