jennie/ghostguild-org
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

feat(events): admin list and homepage render events in displayTimezone

Browse source 
Two more sites that used viewer-local formatting: the admin events
index and the homepage event blocks. Switch both to take the event and
pass event.displayTimezone to the formatter so admins see events at
their intended wall-clock (and admins viewing across the world see
the same time).
This commit is contained in:
Jennie Robinson Faber 2026-05-19 10:48:50 +01:00
parent 75b1f84d18
commit 49f4eae11c
2 changed files with 20 additions and 13 deletions
Download patch file Download diff file Expand all files Collapse all files

20
app/pages/admin/events/index.vue
View file

@ -92,8 +92,8 @@
<span class="badge" :class="event.eventType">{{ event.eventType }}</span> <span class="badge" :class="event.eventType">{{ event.eventType }}</span>
</td> </td>
<td class="col-date"> <td class="col-date">
<span class="date-main">{{ formatDate(event.startDate) }}</span> <span class="date-main">{{ formatDate(event) }}</span>
<span class="date-time">{{ formatTime(event.startDate) }}</span> <span class="date-time">{{ formatTime(event) }}</span>
</td> </td>
<td> <td>
<span :class="['status-pill', `status-${getEventStatus(event).toLowerCase()}`]"> <span :class="['status-pill', `status-${getEventStatus(event).toLowerCase()}`]">
@ -190,8 +190,8 @@
<span class="badge" :class="event.eventType">{{ event.eventType }}</span> <span class="badge" :class="event.eventType">{{ event.eventType }}</span>
</td> </td>
<td class="col-date"> <td class="col-date">
<span class="date-main">{{ formatDate(event.startDate) }}</span> <span class="date-main">{{ formatDate(event) }}</span>
<span class="date-time">{{ formatTime(event.startDate) }}</span> <span class="date-time">{{ formatTime(event) }}</span>
</td> </td>
<td> <td>
<span :class="['status-pill', `status-${getEventStatus(event).toLowerCase()}`]"> <span :class="['status-pill', `status-${getEventStatus(event).toLowerCase()}`]">
@ -349,19 +349,23 @@ watch([searchQuery, typeFilter, seriesFilter], () => {
pastPage.value = 1 pastPage.value = 1
}) })
const formatDate = (dateString) => { const formatDate = (event) => {
return new Date(dateString).toLocaleDateString('en-US', { if (!event?.startDate) return ''
return new Date(event.startDate).toLocaleDateString('en-US', {
month: 'short', month: 'short',
day: 'numeric', day: 'numeric',
year: 'numeric', year: 'numeric',
timeZone: event.displayTimezone || 'America/Toronto',
}) })
} }
const formatTime = (dateString) => { const formatTime = (event) => {
return new Date(dateString).toLocaleTimeString('en-US', { if (!event?.startDate) return ''
return new Date(event.startDate).toLocaleTimeString('en-US', {
hour: 'numeric', hour: 'numeric',
minute: '2-digit', minute: '2-digit',
hour12: true, hour12: true,
timeZone: event.displayTimezone || 'America/Toronto',
}) })
} }

13
app/pages/index.vue
View file

@ -42,7 +42,7 @@
<div v-if="events?.length" class="event-list"> <div v-if="events?.length" class="event-list">
<div v-for="event in events" :key="event._id" class="event-item"> <div v-for="event in events" :key="event._id" class="event-item">
<div class="block-inset event-item-inner"> <div class="block-inset event-item-inner">
<span class="event-date">{{ formatDate(event.startDate) }}</span> <span class="event-date">{{ formatDate(event) }}</span>
<span class="event-title"> <span class="event-title">
<NuxtLink :to="`/events/${event.slug || event._id}`">{{ <NuxtLink :to="`/events/${event.slug || event._id}`">{{
event.title event.title
@ -168,10 +168,13 @@ const circleData = [
}, },
]; ];
const formatDate = (dateStr) => { const formatDate = (event) => {
if (!dateStr) return ""; if (!event?.startDate) return "";
const d = new Date(dateStr); return new Date(event.startDate).toLocaleDateString("en-US", {
return d.toLocaleDateString("en-US", { month: "short", day: "numeric" }); month: "short",
day: "numeric",
timeZone: event.displayTimezone || "America/Toronto",
});
}; };
</script> </script>