Explore shows event times in your timezone, not the event's #64

New issue

Open

opened 2026-10-03 19:44:42 +00:00 by jalenluorion · 0 comments

jalenluorion commented

2026-10-03 19:44:42 +00:00

Member

What's wrong
Explore cards, the event popover and the mobile event modal format times in the browser's timezone. Qatar campus (Doha) sections show times such as "12:00 - 1:15 AM" for a viewer in Pittsburgh, which is not when the class meets.

How to reproduce

With your computer in US Eastern time, open /explore (pick January 12, 2026 if the list is empty).
Search for a Qatar section (try "Doha" or a Qatar course number).
The card shows a time around midnight.

Expected
Times show in the event's own timezone (event_timezone), with a short zone label when it differs from the viewer's, for example "8:00 - 9:15 AM GMT+3".

Where to look

web/src/app/components/SearchResultSidebar.tsx: the card calls formatTimeRange(event.start_datetime, event.end_datetime); /events/ already returns event_timezone.
web/src/app/utils/dateService.ts: formatTimeRange and formatDate. Add an optional timeZone argument and pass it to every Intl.DateTimeFormat. The same-day check (toDateString()) and sameMeridiem (getHours()) are browser-local too and must use the target zone.
web/src/app/components/EventPopover.tsx and ModalEvent.tsx call the same helper.
"Use one time-range formatter everywhere" touches the same function; coordinate.

Done when

Doha events show their local meeting time with a zone label.
Pittsburgh events look unchanged for a Pittsburgh viewer.
Unit tests cover formatTimeRange with a timeZone.

**What's wrong** Explore cards, the event popover and the mobile event modal format times in the browser's timezone. Qatar campus (Doha) sections show times such as "12:00 - 1:15 AM" for a viewer in Pittsburgh, which is not when the class meets. **How to reproduce** 1. With your computer in US Eastern time, open /explore (pick January 12, 2026 if the list is empty). 2. Search for a Qatar section (try "Doha" or a Qatar course number). 3. The card shows a time around midnight. **Expected** Times show in the event's own timezone (`event_timezone`), with a short zone label when it differs from the viewer's, for example "8:00 - 9:15 AM GMT+3". **Where to look** - `web/src/app/components/SearchResultSidebar.tsx`: the card calls `formatTimeRange(event.start_datetime, event.end_datetime)`; `/events/` already returns `event_timezone`. - `web/src/app/utils/dateService.ts`: `formatTimeRange` and `formatDate`. Add an optional `timeZone` argument and pass it to every `Intl.DateTimeFormat`. The same-day check (`toDateString()`) and `sameMeridiem` (`getHours()`) are browser-local too and must use the target zone. - `web/src/app/components/EventPopover.tsx` and `ModalEvent.tsx` call the same helper. - "Use one time-range formatter everywhere" touches the same function; coordinate. **Done when** - [ ] Doha events show their local meeting time with a zone label. - [ ] Pittsburgh events look unchanged for a Pittsburgh viewer. - [ ] Unit tests cover `formatTimeRange` with a `timeZone`.

jalenluorion added this to the Phase 2 milestone

2026-10-03 19:44:42 +00:00

jalenluorion added the

frontend

intermediate

bug

labels

2026-10-03 19:44:42 +00:00

jalenluorion added this to the CMUCal project

2026-10-03 19:45:09 +00:00