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.
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").
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. Filter by event type, category, or other criteria to show only relevant events on specific pages.
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.