Allow the modification of Timezone text (especially in Events)

Contribute Feature
1

Continuing the discussion from :globe_showing_europe_africa: New Calendar Feature: Show Local Time:

Our site(s) is/are almost exclusively restricted to our nation.

We have a particular problem where our timezone looks like a specific location in our country, and thus can confuse users when seen with the location field immediately beneath it:

image
image697Ă—221 16.1 KB

In this case, the (local) event is being held in a well known local establishment about 1000km away from the city of Auckland (in another city). Having the (Auckland) in there is quite misleading.

There has been some discussion in the linked thread about it:

It would be very helpful to be able to hide the timezone (especially in Events) for local events at the site level, but can’t see how to do this with CSS - and ask.discourse.com is no help.

Allied to this, it would be very helpful to be able to make local events the default.

1 Like
2

If understand right:

  • the event timezone city is only shown if Show Local Time is enabled in event settings
  • Show Local Time is disabled by default

image
image586Ă—492 27.5 KB

So I gather you have users enabling Show Local Time on events, and you don’t want this.

What if you hide the Show Local Time setting so it can’t be enabled?

.event-field.show-local-time {
    display: none;
}

image
image582Ă—376 16 KB

Then new events will at least display the time and timezone city of the user; an event created in Phoenix time will show my own local time and “Chicago.”

I don’t see a way to remove the city entirely – it’s a chunk of cooked content – and I suppose that might still be confusing. Maybe some javascript could act on text in parentheses within that selector? Best I can think of with CSS is to append an icon to encourage clicking for the timezone popup:

image

span.discourse-local-date.cooked-date::after {
    content: " ℹ️";
}
3

Thanks for your consideration of this and suggestions, Todd!

Not quite - this isn’t the problem. It doesn’t actually really matter if it is local or user (will be the same in most cases).

The issue is that our particular timezone is misleading due to the text it contains (it is the only New Zealand timezone). This also applies to you: in your example above, it implies the event will be held in Little Creek, Chicago.

This is what I’m going for instead:

image
image667Ă—218 9.53 KB

Well, after hitting my head against the vibe coding wall for a bit, I’ve got this bit of javascript (put in the JS tab of a local Theme Component) which is doing the trick for me:

import { apiInitializer } from "discourse/lib/api";

export default apiInitializer("swap-auckland-for-nz", (api) => {
  function swapTimezones(root = document) {
    root.querySelectorAll('.relative-time').forEach(elem => {
      if (elem.textContent && elem.textContent.includes('(Auckland)')) {
        elem.textContent = elem.textContent.replace('(Auckland)', '(NZ)');
      }
    });
  }

  api.onPageChange(() => {
    swapTimezones(document);

    // Set up persistent mutation observer for dynamic events/calendar output
    const observer = new MutationObserver(() => {
      swapTimezones(document);
    });

    observer.observe(document.body, { childList: true, subtree: true });

    // Optionally, also run again after other navigation events
    window.addEventListener("hashchange", () => swapTimezones(document));
    window.addEventListener("popstate", () => swapTimezones(document));
  });
});

If I find the time, I’ll wrap this up as an installable Theme Component so others can use it if desired.

4

I didn’t realize NZ was all one timezone, but by the time I was done there I had the feeling your issue would need javascript. Glad you got a JS solution working!

1 Like