Style your calendar widget

You style the calendar widget at three levels: site-wide brand styles in Customize → Global Styles, per-calendar overrides in the calendar editor, and custom CSS in the Advanced section of either surface. This guide explains which setting controls what, how to restyle one embed without touching the others, and when your changes go live.

Which setting controls what

Match your goal to the surface below. Site-wide settings change every calendar and the hosted event page; calendar editor settings change only the one calendar you open.

Set site-wide styles in Global Styles

Global Styles is the shared standard for your whole team: set it once and it applies to every calendar widget, the hosted public event page, and all outgoing emails.

1. Go to Customize → Global Styles in your Eventually dashboard.

2. Upload your logo and set the core color roles: Background, Container, Outline, Headings, Body, Buttons, and Accents. Button text color is computed automatically for contrast and cannot be set manually.

3. Set the Headings and Body font families and text colors in the Typography section. Each typography row shows a live WCAG contrast check against the background color.

4. Style the widget-specific groups as needed: View switcher, List day headers, Search, sort and filter, and the Divider control in the Header group.

You can also edit the shared standard directly on the canvas: click an editable element in Customize → Global Styles to open its styling popover, and the change applies across all calendars. Selector-only regions such as day cells and date badges have no popover.

If Global Styles is not enabled for your account, the legacy Customize → Brand page controls the same settings. For the full color and typography reference, see Brand settings: colors, logo, and fonts.

Sync your brand from Squarespace

Brand sync pulls your Squarespace site's logo, colors, and fonts into your brand settings, so the widget matches your site without manual setup. Sync during first-publish setup, or any time from Customize → Brand; with Global Styles enabled the entry appears as Global Styles and the control is Re-sync.

Sync imports your logo, applies your Squarespace palette to the color roles, and inherits your typefaces. When sync captures matching web font files from your site, those fonts load inside the widget iframe automatically.

Heading and body text colors are never synced: set them yourself so a re-sync never overwrites them. Any value you set manually takes priority over synced values. For the sync steps, failure messages, and password-protected sites, see Syncing your brand from Squarespace.

Customize one calendar without changing the others

Every calendar can override the shared standard. Settings you change in the calendar editor apply to that calendar only, and Global Styles stays untouched for every other widget on your site.

1. Go to Customize → Calendars and open the calendar you want to restyle.

2. Use the Colors section to set the Accents color and the Layout section to set Corners with Sharp, Soft, Round, or Pill. The Pre-sale strip region has a Layout control with Split and Centered options.

3. Click canvas elements to style per-calendar regions: the View switcher, Day headers, and the Search field, Sort button, Filter button, and Sort and filter menu regions. The Sort and filter menu region becomes selectable after you open the menu, and an open menu stays available while you style it.

4. Set per-calendar inheritance such as Theme (Light or Dark) and Body font.

To hand a setting back to the shared standard, use the Use Global Styles action on an individual control, or Use Global Styles for everything → to return the whole calendar.

The calendar's default view (Calendar, List, or Card) is also a per-calendar choice. On a single-event embed, set Image to Left, Right, Top, or None. For these and the other display settings, see Set up your calendar widget.

Each widget carries its own settings, so to show different content in different places, create a separate widget for each instance with its own filters; styling overrides are also per calendar, so each widget keeps its own look.

Set fonts

Set fonts site-wide in the Fonts group of Customize → Global Styles; an individual calendar can override with its own Body font in the editor. You do not need custom CSS for fonts that render: supported Google families you select load in the branded widget automatically, and fonts captured by brand sync are injected before any per-widget custom CSS.

A font outside the widget's built-in set shows a notice with a copyable @font-face snippet. Paste it into Custom CSS in the Advanced group of Customize → Global Styles, then save the site-level CSS. For how font loading, fallbacks, and approved font hosts work, see Matching your Squarespace fonts in the Eventually widget.

Add custom CSS

Two places accept custom CSS, and the location decides the scope: the Advanced section of the calendar editor styles that calendar's embeds, and the Advanced group of Customize → Global Styles styles every calendar site-wide. Either way, your styles apply to every embedded instance automatically and override defaults.

Custom CSS is kept by an allowlist: every selector must be rooted in the widget's .ev- classes, only the at-rules @media, @supports, @keyframes, and @font-face are supported, and each CSS string can declare at most 12 @font-face blocks whose sources use approved hosts. Custom CSS is limited to 64 KB (65,536 bytes), measured on the text you paste; saving is rejected rather than truncated when you exceed the limit. Unsupported content is omitted from the widget, hosted event pages, and previews. For the supported styling hooks, see the Widget CSS selector reference.

Decide whether your CSS reaches hosted event pages

By default, a widget's custom CSS styles only that widget's embed. To style the hosted /e/ event pages with the same design, designate that widget as the event page style.

1. Open Customize → Event Defaults.

2. In Public event page defaults, use the Event page style picker. Brand defaults (no widget) derives the look from your brand settings; choosing an existing widget mirrors its layout, colors, gallery mode, and custom CSS onto hosted pages, with an Edit selected design → link to jump to the widget builder.

Custom CSS on the widget you choose here styles your hosted event pages as well as that widget's own embed. Custom CSS on any other widget stays inside that widget's embed. The hosted page adds page-level chrome of its own, such as a brand backdrop, logo, and See all events → link, and event details always render inline on hosted pages regardless of the widget's event detail style. For the other event page settings, see Event defaults.

Preview your changes

The widget builder's Live Preview simulates the full customer journey through your widget, from browsing events to registration, so you can confirm styling before you embed. The branded preview on Set up your widget uses the same widget render path as the embed, so the fonts and styling you see there match what visitors get.

A few styling hooks appear only on the admin preview canvas, such as .ev-preview-registration; a live embed matches none of those, so styles aimed at them never reach your site. .ev-header-ghost is different: the widget renders it for the header-off state, so it can appear in a live embed and styles targeting it do work on your site.

When changes take effect

• Widget builder: save your changes in the widget builder and every embedded instance updates automatically. You do not need to re-copy the embed code.

• Event Defaults: save on the Event Defaults page and widgets pick up the change when they render; no re-saving or re-embedding is needed.

• Global Styles CSS: paste your CSS into Customize → Global Styles → Advanced and save the site-level CSS to apply it to every calendar.