Jump to content

Setting timezones for individual events

Recommended Posts

Site URL: http://queerladymagician.com

I'm making event pages for a tour I'm going on soon. As it takes place in a different country to where I currently live, the timezones would be very different. Yet from the SquareSpace guides it looks like the timezone for events is set to my local timezone - which is going to be a problem for people who want to save the event to their own calendar!

Is there a way to set the timezone for each event based on the location of the event itself?

Link to comment
  • 2 months later...
  • 2 weeks later...

I'm wondering the same thing. The SquareSpace docs indicate that it's stuck on the local time of the publisher and doesn't automatically convert for a page visitor from a different time zone. "Start and end time. These are based on the time zone set in Language and Region Settings, and won't change based on a visitor's time zone."

If we're lucky, I'll assume that visitors can download a calendar invitation that may convert to local time. But for a general visitor, many events may look like they take place at a crazy time (for example, 3 a.m. Atlanta instead of 9 a.m. Paris). 

I'm surprised that we can't either customize the time as we publish or the site can't ask for location services to automatically convert to visitors' local timezones.

Link to comment
  • 2 weeks later...
  • 2 months later...

I'm in the same boat, as my organization's events are now almost entirely virtual. I chatted with customer support about this today with no new insights.

Currently, as a workaround, I think I'm going to switch to setting up my events as blog posts. I'll set the event date as the publish date but still publish the "blog post" well in advance of the event. (For instance, I can publish an event's "blog post" today with the supposed publication date of Sept. 20, so Sept. 20 will appear as the date below the event/"blog post" title. Then I'll just manually create Google Calendar links and add those, and type in the time, timezone, and the fact that it's virtual near the top of the "blog post." It's not a great solution, but it's the best workaround I've come up with. Since blogs, like events, are collections, this will still allow me to have "blog post" events feed into summary blocks elsewhere on my site. 

Link to comment
  • 4 weeks later...
  • 2 months later...
  • 4 weeks later...

I'm thinking that the only workaround will be to add a "Pseudo Element" via CSS that places the text "EST" (timezone) — and tell the client that all times added should be added IN YOUR OWN TIMEZONE. Then all listed times will appear with a trailing EST. 

If you know CSS, and how to inspect the code, you should be able to identify what element to override. 

More pseudo element information— applying content using "::after" can be found here: https://css-tricks.com/almanac/selectors/a/after-and-before/ 

Link to comment

* Based on my above suggestion, I'm providing code for you. 

Just tell the client "Set every event Start/End time based on your own timezone". Then add that three-letter tag to the CSS.

Live site: https://www.oliversacksdoc.com/events
Using "MOJAVE", the 7.0 template (based on Brine).  

You can see below (in my screenshot) where each of these elements will appear.

.eventlist-datetag span.event-time-12hr::after {
  content: "EST";
  padding-left: 4px;
  font-size: 12px;
  font-weight: bold;
}

.event-time-12hr-end::after {
  content: "Timezone: EST";
  padding-left: 10px;
  font-size: 16px;
  font-weight: bold;
}

Image 2020-12-17 15-44-39.png

Edited by Alan-Squareflair
Added a link, yo.
Link to comment
  • 2 months later...

@Alan-Squareflair When I insert that code, it shows up on the list view, but I would also like it to show up on the Calendar view. Currently, if I hover over the date of the event on my calendar, it shows the title of the event and the time, but without the timezone after. If I open the event, then I get the "Timezone: EST" after the time. Is there a way you know of to fix that? I'm using Brine 7.0.

Link to comment
  • 2 weeks later...
  • 5 months later...
  • 4 months later...
  • 4 months later...

I think I'm flabbergasted that, two years into most events being held virtually, Squarespace hasn't yet made a way to show event times in local timezones!

My business runs events with people across North America: only showing one time zone is a major problem! 

How major? About 20% of the way to getting me excited about creating a website on a different platform. Why? The lack of this means that I'm certain I'll have people signing up for events that they can't attend. This is a black mark on my company.

Gah.

Edited by brandonhendrickson

Run a test-prep company, and a group where little kids get together to make brunch and talk philosophy. Starting a school.

Link to comment
  • 1 month later...

Hi there!! Building a site, and came across the same issue!!! My client needs to show different time zones for different events. I've sent this issue to Squarespace Support, but in the meantime, I've found a workaround solution between the code on Alana Jade Studio's site: https://alanajadestudio.com/blog/add-timezone-to-squarespace-events -

.event-time-localized:after{content:" PST"}

And now you need to target individual events. To target an individual event, you need to grab the #item code (I use the Chrome extension "Squarespace ID Finder" - the item code is at the very top of the page), and then paste it before the code above. You'll do this for each event. (Don't use the section ID since the section ID is the same for all event pages.) Yes, it's annoying to have to add code for each event, but it's less annoying than having to show wacky times and telling attendees to do the time zone math!!!! 

Here an example of two events my client has in EST and PST:

//timezone targeting individual events//
#item-62947abcc910ce12ec8765ef
.event-time-localized:after{content:" EST"}

#item-62be361bed0cd557360d7737 
.event-time-localized:after{content:" PST"}

Now, this means that the time zone won't show on the main event overview page, so if anyone can figure out a way to target individual events on the main events page, I'm here for it!!! And I'll share here too if I figure it out. For multi-day events it's fine, because you have to click on the event to see the times, but single day events will just show the time you choose. For now, I'll just add the location and timezone to the beginning of the event excerpt.

Good luck!

Edited by StoriesAroundTheSun
Link to comment
  • 1 month later...


Hi everyone! So good news. I've figured out how to target both the individual event page AND the individual listing on the main events page to add multiple time zones for 7.1

So, as stated above, adding a single time zone to all events looks like this:

.event-time-localized:after {
  content: "EST";
  padding-left: 4px;
  font-size: 12px;
  text-transform: uppercase;
}

and you can add font and color stylings as you see fit. 

But lets say you need SEVERAL time zones for your events. 

To target an individual events page and change the time zone from EST to say, CST, you need to target the Item ID. Adding the "Find Squarespace IDs" plugin to your browser makes this easy. The code looks like this:

#item-62cede731029326783a956d3 (your ID number will be different) {
  .event-time-localized:after {
  content: "CST";
  padding-left: 4px;
  font-size: 12px;
  text-transform: uppercase;
}
}

However, there is a third step. Even though the individual events page will show CST, it will NOT show as CST on the main events listing page. And targeting that event to make this change is not as intuitive. 

Go to your main events listing page. Use the ID Finder to find the Section Id for the event listing. you're then going to target the individual event with :nth of type(#). This is based on the order your events are in on the page (so the top event would be 1, the one after 2, etc). The only caveat with using this method is that this nth of type will obviously change every time you make a new event, but its the only workaround i've found so far. Your code will look like this:

section[data-section-id="6234a612748f0177abe21b21"] (your section ID will be different) {
  :nth-of-type(3) (your number will be different depending on where the event is on the page) { 
  .event-time-localized:after {
      content: "CST" !important;
    }
  }
}

And there you have it. It is not acceptable that Squarespace has not added simple time-zone changes to their events, especially when so many companies have gone completely virtual since the pandemic. Hopefully, this helps everyone here. 

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.