How To Remove Event Time from the Events Page in Squarespace 7.1

Jun 29

Squarespace 7.1 Events Page, there’s only one place Simple and stylish way to add and manage events on your site using Squarespace! But for many use cases (like full day conferences, internal, holidays, awareness campaigns, etc), the event time may not be relevant or even can be distracting.

If you are just looking for a clean date only, without showing a begin time and end time, here's a best practice approach to using a light-weight, code-nearly-free CSS modification.

Use Case Overview

Challenge:

In Squarespace 7.1, the date AND time is showing for all events, and there's no option to hide the time.

Goal:

To clean the event time and also keep the event date for all layouts:

Event List View
Event Detail View
Featured or Summary Events

Why Remove Time from Events?

Removing time from event listings serves both design and functional purposes:

  
        Objective
        Benefit
      
        Simplify layout
        Eliminates unnecessary visual clutter
      
        Focus on date-only events
        Ideal for all-day or multi-day activities
      
        Improve user clarity
        Prevents confusion when specific timing isn’t relevant
      
        Enhance design consistency
        Creates a cleaner, more minimal appearance

This is especially important for:

Art shows and exhibitions
Community awareness campaigns
Seasonal sales or product launches
Any date-driven content without a time-specific schedule

How to Hide Event Time in Squarespace 7.1

Step 1: Open Your CSS Editor

Go to your Squarespace dashboard
Navigate to:
Pages → Custom code → Custom CSS

Step 2: Add This Custom Code

Paste the following CSS into the Custom CSS panel:


/* Remove Time from All Event Displays */
.eventlist-meta-time,
.eventlist-time,
.eventlist-details-time,
.eventitem-meta-time,
.eventitem-time {
  display: none !important;
}

What This Does:

Targets all classes associated with the event time across all templates
Applies to both Event List and Event Detail views
Ensures clean removal without affecting the data or other layout components

Step 3: Save and Verify

Click the Save button in the CSS editor
Refresh your Events Page
You’ll now see only the event date, with no time displayed

Optional: Enhance the Date Display

If you'd like the date to stand out visually after removing the time, consider adding:


/* Optional Styling for Event Date */
.eventlist-meta-date {
  font-weight: 600;
  font-size: 18px;
  text-align: center;
}

This improves visual hierarchy, especially in list layouts or event collections.

Advanced Customization Options

Need finer control? We can tailor the experience further:

  
        Requirement
        Solution Available?
      
        Hide time only in list view
        Yes
      
        Keep time in detailed view only
        Yes
      
        Rearrange layout: Move date above title
        Yes
      
        Add icons or formatting to the date only
        Yes

Let us know what your ideal layout looks like we’ll provide the exact CSS.

Technical Notes

This method is non-destructive and fully reversible
Does not affect functionality or event data in the backend
Works seamlessly with all Squarespace 7.1 templates, including Brine, Paloma, Clune, and Nevins

Final Thoughts

That’s because, although Squarespace offers no native feature to hide Event Time, you effectively have the full freedom to decide how your events will look, keeping everything clean, minimal, intentional, and consistent with your brand’s look-and-feel.

Pro Tip: This pairs well with date badges, layout rearrangement, or collection-specific styles for a fully custom Events experience so your event calendar pops!

Summary

  
        Step
        Description
      
        Identify the issue
        Time is shown unnecessarily on the Events page
      
        Add custom CSS
        Target and hide event time classes
      
        Save and verify
        Ensure event time is hidden site-wide
      
        Optional styling
        Make dates bold, larger, or better aligned

Frequently Asked Questions (FAQ)

1: Can I hang onto an event date and remove the time only?

A: Yes—the CSS code shared in this guide only affects the elements related to the time; it leaves the date fully visible and unaffected for all event views.

2: Will masking the time impact the event data on my Squarespace?

A: No. This is the only way to visually hide the time with CSS. Whilst your backend data (Start/End times) is not affected and editable, you can always unhide them by removing the CSS.

3: Does this plugin work on all Squarespace 7.1 templates?

A: Yes. The CSS is scoped to generic class names (.eventlist-time, .eventitem-time, etc.) that are shared by all Squarespace 7.1 templates, such as Brine, Paloma, Clune, Nevins, and others.

4: What if I want to show the time on the event detail page but hide it from the list view?
A: That’s possible. You can use more specific CSS like this:


.eventlist-time,
.eventlist-meta-time {
  display: none !important;
}

This hides the time only on list views while keeping it visible on the full event page.

5: Does this CSS apply to featured or summary event blocks?

A: If records are played, is it that event time classes are reused? Most of the time, yes. But if you’re using a custom Summary Block layout, you will likely need to look into those selectors.