Note: While our most popular guides have been translated into Spanish, some guides are only available in English.
Styling the Events Page

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 Marquee, Adversary, Alex, Eamon, Ginger, Mint, and Shift templates (discontinued) have different style tweaks than all other templates.

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.

  1. In the Pages panel, hover over an Events Page and click the gear-icon.
  2. Use the Default Event View drop-down to select either List or Calendar.
  3. Click Save and refresh the page.

List layout

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.

Calendar layout

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:

  1. Go to the Events Page.
  2. From the Home Menu, click Design, then Style Editor.
  3. Use the Events tweaks to adjust the landing page style.
  4. 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.

Tips:

  • 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

These tweaks apply to all templates except Marquee, Adversary, Alex, Eamon, Ginger, Mint, and Shift.

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 for all templates except Marquee, Adversary, Alex, Eamon, Ginger, Mint, and Shift:

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

Marquee, Adversary, Alex, Eamon, Ginger, Mint, and Shift

Marquee, Adversary, Alex, Eamon, Ginger, Mint, and Shift have their own style settings for the Events Page. 

After choosing between calendar or list view, open the Style Editor and experiment with these tweaks:

  • Event Time Format - Display your event time using the 24-hour international standard time display.
  • Event Excerpts - Show or hide the event description or excerpt text.
  • Event List Date - Display or hide the date in list view.
  • Event List Time - Displays or hide the time in list view.
  • Event List Address - Display or hide the address in list view.
  • Event iCal/gCal Links - Display or hide the links on individual event pages.
  • Event Calendar Compact View
  • Events Layout: Columns, Simple
  • Events Width: Full, Narrow - Appears when Events Layout: Simple is selected.
Was this article helpful?
10 out of 33 found this helpful
Styling the Events Page