Set up your calendar widget
The calendar widget displays your events on any Squarespace page. Visitors can browse your schedule, view event details, and purchase tickets—all without leaving your site.
Create a calendar widget
Go to Customization → Widgets in your Eventually dashboard.
Click New widget.
Edit the widget name from "New Widget" to something descriptive.
After first publish
Your first-run single publish opens brand and embed setup in the dashboard drawer. Bulk publish, CSV first publish, demo mode, and already-finished onboarding open Set up your widget, where a default widget may already be seeded for the live preview and embed code. Either handoff is separate from creating widgets in Customization → Widgets. Use this article when you want full builder controls, folders, filters, or single-event layouts.
See also Finish setup on your dashboard for brand sync or skip, first embed or public-link copy, and how copied differs from live detection. Owner-only draft previews in the setup drawer are not live embeds.
Configure display settings
Use the Display tab to control how events appear in your widget.
Default View
Choose how events display in the calendar:
Calendar — A traditional monthly calendar view.
List — Events in a chronological list format.
Card — Events displayed as individual cards with featured images.
Choose which month the calendar opens on
In Calendar view, the widget opens on a starting month. Visitors can still move to other months afterward.
By default, the calendar opens on the current month. If the current month has no events, it opens on the month of the first upcoming event instead of showing an empty month. If there are no upcoming events, it stays on the current month.
To open on the first upcoming event’s month even when the current month still has past events, turn on Start calendar on first event in Event defaults. That setting is team-wide and applies when the widget renders—it is not saved on each widget.
The opening month is chosen from each widget’s own included events after category and tag filters, so a filtered widget can open on a different month than an unfiltered one.
When Limit By is set to Max events, the calendar keeps opening on the current month and does not use the first-event month inference. This start-month behavior applies to Calendar view and is separate from Past events in calendar and from the date-range limit.
The widget builder preview uses the same opening-month rules as the live embed.
Event Detail
Choose how event details appear when visitors click an event:
Inline — Opens details within the same page.
Takeover — Opens details in a full-screen view.
Gallery Mode
Choose how images display for events:
Thumbnails — Shows multiple images as small preview thumbnails below main image.
Arrows — Displays images in a carousel with navigation arrows.
To add and arrange images for your events, see Add multiple images to an event.
Visible Elements
Turn on or off the following elements:
Event Time
Tickets Left
Past Events
Sort and Filter
Description
Search Bar
Sold out Events
Calendar images
You can also set the maximum number of events or date range of events shown.
Keyboard and screen reader support
The embedded widget supports keyboard and screen reader browsing for event chips, search, Sort and Filter menus, and the event details overlay. Event chips announce their full calendar date, the search field is named Search events, Sort and Filter keep arrow-key focus inside the open menu, and the details step uses the Event details navigation landmark.
For the full visitor-facing behavior, see Keyboard and screen reader support for the calendar widget.
Customize branding
Use the Branding tab to adjust visual styling including accent color and header text.
Border Radius
Control the corner rounding on calendar cards. Adjust the slider to soften or sharpen the widget's appearance. The value displays in pixels (e.g., "12px").
Pre-sale Strip
The Pre-sale Strip control appears in the Card Style area of the Branding tab only when your team has pre-sales enabled. Choose between two layouts:
Split — The default. Places the message and the on-sale gate side by side at widths of 820px or more, and stacks them below that width.
Centered — Always stacks the message above a full-width on-sale rail and centers the message content.
Add custom CSS
For advanced styling, use the Advanced tab to enter custom CSS. Your styles apply directly to the embedded widget and override defaults.
Hide calendar background images
To remove the featured-event background images that fill day cells in the month grid, add this to the Advanced tab:
.ev-day-image {
background-image: none !important;
}Save the widget to apply the change to every embedded instance automatically.
Filter events
Use the Filtering tab to control which events appear in the widget. You can limit the widget by category, by tag, or both, so each page shows only the events you want.
Filter by category
Under Categories, select one or more category chips. The widget includes events that match any selected category. Click Clear filter under Categories to remove the category filter.
Filter by tag
If your team has tags, a Tags chip picker appears under Filtering. Select one or more tags to include only events that have at least one of those tags. The widget preview updates as soon as you select or clear a tag. Click Clear filter under Tags to remove the tag filter.
The Tags picker is hidden when your team has no tags. Create and assign tags from Manage tags for your events before you can filter a widget by tag.
Tag names are not shown to visitors in the widget. Filtering only changes which events appear; categories remain the visitor-facing labels. See Customize event categories.
Combine category and tag filters
Within Categories, an event matches if it has any of the selected categories. Within Tags, an event matches if it has any of the selected tags. When both filters have selections, an event must match the category filter and the tag filter.
Leave a filter empty, or never set a tag filter, to keep that facet unfiltered. Existing widgets without a tag selection keep their previous event set until you choose tags and click Save changes.
Saved filters apply automatically to every place the widget is embedded. You do not need to re-copy the embed code.
Skill levels for guests
When your team has saved a skill level scale, the widget shows the skill level for each event to guests and lets them filter by it. Without a saved scale, no skill-level display or filter appears.
On-scale levels appear as a strength meter on single-event views, registration modals, and hosted event pages. Numeric scales show a value such as 3 / 5; custom scales show the configured level label. Widget list rows show a compact filled-dot scale on desktop and mobile. Levels marked Not a rank, such as All levels, appear as plain text, and missing or unresolved levels show no skill-level treatment.
The widget filter menu shows a section named after your configured scale and lets guests filter the event list by its levels, including off-scale points.
Preview your widget
The Live Preview now simulates the full customer journey through your widget. Use it to walk through a realistic demo of browsing events, choosing tickets, and completing registration before you embed or share the widget.
Open the preview to start the interactive demo.
Move through the three stages:
Browse — Explore upcoming events. Use the Cards, List, or Calendar view toggle to see how your events appear in each layout.
Tickets — Select tickets and adjust quantities, then click Continue to attendee details to move forward.
Register — Enter attendee details such as First name, Last name, Email, and any custom fields you have configured. This shows exactly what your registrants will see.
Click Adjust to open the Adjust your preview modal. Update your inputs and click Rebuild → to regenerate the preview with new settings.
The preview is a live-looking demo, not a published event. It uses sample data to represent your branding, layout, and registration flow so you can confirm the experience before going live.
Embed the widget on Squarespace
In your widget builder, find the Embed code section.
Click Copy code to copy the embed snippet.
Open your Squarespace page editor.
Add a Code block where you want the calendar to appear.
Paste the embed code into the code block.
Save and publish your page.
The widget matches your Squarespace theme automatically. Visitors browse events and complete checkout without leaving your site.
Organize widgets with folders
Create multiple widgets with different settings for different pages, then group them into folders on the Calendar Widgets page to keep them organized.
Go to Customization → Widgets.
Click New folder, enter a name, and click Create.
Drag widgets into a folder, or drag them within a folder or the Ungrouped band to reorder.
To rename or delete a folder, open the more-options menu next to the folder name and choose Rename or Delete.
Deleting a folder does not delete the widgets inside it. They return to the Ungrouped band.
The same embed code displays the same widget everywhere. If you want different content in different places—for example, showing only workshops on one page and private events on another—create a separate widget for each instance with its own filters.
Update an embedded widget
Changes in the Eventually dashboard appear automatically in your embedded widget. You don't need to re-copy the embed code—just save your changes in the widget builder.
Single-event embed layouts
The single-event embed displays one specific event instead of a full calendar. Use it to highlight a featured workshop, class, or event on a dedicated landing page, or when you want registration to be the primary focus without calendar navigation.
Choose an event
When you create a single-event embed, the widget builder shows a Select Event control. Choose the event you want to display. The selected event is saved to the widget configuration, not to the embed snippet itself.
Select a layout
The Layout control determines how your event appears:
Image left — Displays the event image on the left side with event details and registration on the right. Best for wider pages where you want a balanced, horizontal presentation.
Image right — Displays the event image on the right side with event details and registration on the left. Use this when your page layout favors right-aligned visuals.
Stacked — Displays the event image above the event details and registration form. Best for narrower columns, mobile displays, or when the image should lead visually.
Hide the event image
Turn on Hide image to remove the event image entirely. The registration form and event details fill the content area without any image placeholder. This is useful when your event has no image, or when you're embedding the widget on a page that already features event imagery elsewhere.
If your event doesn't have an image uploaded, the widget automatically hides the image area regardless of the toggle setting.
Preview and embed
The embed code for a single-event widget only contains the widget ID. The event is resolved server-side when the widget loads, so visitors see the selected event's details and registration form. Changing the event in the Widget Builder and saving updates every existing embed automatically—no need to re-copy and re-paste the code.
Older single-event embeds that still include data-event-id continue to work and take precedence. You don't need to replace a working embed just to remove the attribute.
If no event is stored on the widget, the single-event embed falls back to the next upcoming event from your site.
Custom CSS in the Advanced tab applies to single-event embeds as well. You can fine-tune spacing, typography, or other styling beyond the layout options.
The hosted public event page at /e/:id uses the same underlying single-event widget configuration. Where an embed is placed inside a Squarespace page you control, the hosted page lives on Eventually and adds page-level chrome such as a brand backdrop, logo, and See all events → link. Both surfaces read from the same event data and registration flow. The hosted page appearance is controlled in Event Defaults under Public event page defaults.
Widget embed and SEO
The widget embed shell is always marked noindex so it does not compete with the hosted public page in search results. For registration and SEO, use the /e/:id link as the canonical public URL. For more about indexing rules and social metadata, see Public event page indexing and SEO.
How we know your widget is live
After you publish the page with the embedded widget, Eventually detects when the widget actually renders on your live site. This happens automatically in the background.
Previewing the widget from within your Eventually dashboard does not count as a live placement. Only visitors loading the widget on your published Squarespace page trigger detection.
Eventually records the first time the widget is seen on a live site and the host domain where it appeared. We store only distinct host domains, up to 20, and remove duplicates. This helps confirm your embed is working and track where your widget is running.
Widget detection relies on the visitor's browser and can be limited by privacy settings, ad blockers, or network restrictions. If your widget is visible on your site but has not been detected yet, the embed itself is still working correctly.