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.
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.
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.
