You can use the Style Editor to customize the way your Events Page appears. This is a great way to align your events' design and presentation with your site's brand.
Note: The templates in the discontinued Marquee family have different style tweaks.
Landing page vs. event item pages
Before styling your events, it's a good idea to understand how Squarespace structures them on all sites. Events are organized in a two-part hierarchy: Events Pages, which create a browsable landing page, and then individual event item pages. These areas share some style tweaks, but also have their own style options.
To learn more, visit Using the Events Page.
Choose a layout
You can display events as a list or a calendar. Switch the display at any time in Page Settings. If you have multiple Events Pages, you can display some as calendars and some as lists. You might want to pick one to keep a consistent look.
- In the Pages panel, hover over an Events Page and click the .
- Use the Default Event View drop-down to select either List or Calendar.
- Click Save and refresh the page.
List View is a great option if you want your Events Page to look more like a blog than a calendar.
- Events display in a list with descriptions, excerpts, and thumbnail images.
- Use the List View option if you want to display upcoming and past events.
- You can display up to 30 past events.
In Calendar View, events display in a calendar with interactive features:
- If an event has a thumbnail image, the thumbnail displays. It's cropped to fit the square.
- If an event has an excerpt, it displays on hover.
- Arrow controls appear at the top to navigate by month.
- Any days without events will be gray.
- If a day has more than one event, every event's time and title display in the day's box. The height of the week expands, and thumbnails won't display.
The calendar adjusts to fit the browser window so it looks great on any device.
- When a browser’s width is smaller than 600 pixels, thumbnail images won't display.
- When a browser’s width is smaller than 300 pixels, the calendar stops showing excerpts.
Style the Events Page
After choosing between calendar or list view:
- Go to the Events Page.
- From the Home Menu, click Design, then Style Editor.
- Use the Events tweaks to adjust the landing page style.
- For tweaks specific to individual event item pages, first ensure Disable Item Pages is unchecked. Then exit the Style Editor, open an event, and re-enter the Style Editor.
For more help with opening the Style Editor, visit Making style changes.
- Click any area of the page in the preview to display only the style tweaks available for that area and hide the rest.
- If you have multiple Events Pages, style changes will apply to all of them to create a consistent look.
- Your template may support more features, such as banner images or page headers, that affect how the Events Page looks.
Style the landing page
In both calendar and list view:
- Check Disable Item Pages to disable the title links to individual event pages. When left unchecked, clicking an event's title opens the individual event page.
- Check 24-Hour Time to display event times in 24-hour international standard time display.
List view tweaks
Landing pages in the List style have more style options.
Choose how the list displays with the Stacked View tweak.
These tweaks adjust the thumbnail and date that can display next to or below the event details. Where they display depends on your Stacked View setting.
- Show Past Events - Show or hide past events.
- Show Thumbnails - Show or hide the thumbnail image that displays above or to the left of the event.
- Thumbnail Size - Set the shape of the thumbnail image.
- Show Date Tag - Show or hide the date tag that displays over or in place of the thumbnail image.
- Show Date Tag w/ Time - Include a time stamp with the date tag.
These tweaks affect the event listing:
- Show Categories - Show or hide the categories.
- Show Date - Show or hide the date.
- Show Time - Show or hide the time.
- Show Location - Show or hide the location.
- Show Export Links - Show or hide export links to Google Calendar or iCal.
- Show Social Buttons - Show or hide likes and a Share button.
- Show Show Excerpt - Show or hide the event description or excerpt text.
- Show Button - Show or hide a View Event button.
Style individual events
These tweaks affect individual event pages:
- Show Export Links - Add export links to Google Calendar or iCal.
- Show Social Buttons - Add likes and a Share button.
- Show Back Link - Add a Back To All Events link.
- 24-Hour Time - Display your event time using the 24-hour international standard time display.
- Stacked View - Choose the layout.