Setting timezones for individual events

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?

Did you ever get a response to this??

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.

SAME! We need help with this. Did anybody figure it out?

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. 

Actually, my workaround will be problematic, as summary blocks display events in chronological order (with next upcoming event at the top) and blog posts in reverse chronological order (with most recently published at the top). Sad day!

I need time zone support, too. I live in the USA but my website is about Italy and all of my online events need to be able to display time for the viewer, not for me the creator. 

I have the same problem.... anybody able to find a workaround?

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/ 

* 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;
}

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

@Alan-Squareflair I did this and it worked for single day event. But, what if we have also multiple days event ? For example we have an event which continues for 3 days, what should we do for that? Please help!

Updated code for Squarespace 7.1:

.event-time-localized:after {
  content: "Timezone: PDT";
  padding-left: 4px;
  font-size: 12px;
  font-weight: bold;
}

On 3/17/2021 at 2:47 PM, Haseeb said:

@Alan-Squareflair I did this and it worked for single day event. But, what if we have also multiple days event ? For example we have an event which continues for 3 days, what should we do for that? Please help!

Can anyone answer this?

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.

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!

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. 

Thanks to everyone for your responses above. 

We're running into huge problems with this on our website. We need site members to be able to see events in their local timezone. 

We added the code to get "Timezone: CST" posted after events. The problem though is that using the calendar block, the events will show up on the calendar on the *day of the local timezone of the visitor* but doesn't change the time. 

For example, if we have an event on Oct 24 at 7pm CST, and one of our members in Asia is looking at the website calendar, it shows up as 7pm, but on *Oct 25*. So squarespace is obviously pulling location data from their IP address, but it is problematically shifting it to the proper day for the viewer, but not adjusting the time. 

Part of why this is problematic is because our users are fine to convert the event date/time from CST to their local date/time, but when looking at the calendar of events, an event that is Oct 24 at 7pm CST is showing for them Oct 25 at 7pm CST. 

Any thoughts or advice on this?

WHY CAN'T SQUARESPACE MAKE THIS ADJUSTMENT TO ALLOW TIMES TO CHANGE PER VIEWER'S IP ADDRESS?!