feat(events): admin list and homepage render events in displayTimezone
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:
parent
75b1f84d18
commit
49f4eae11c
2 changed files with 20 additions and 13 deletions
|
|
@ -92,8 +92,8 @@
|
|||
<span class="badge" :class="event.eventType">{{ event.eventType }}</span>
|
||||
</td>
|
||||
<td class="col-date">
|
||||
<span class="date-main">{{ formatDate(event.startDate) }}</span>
|
||||
<span class="date-time">{{ formatTime(event.startDate) }}</span>
|
||||
<span class="date-main">{{ formatDate(event) }}</span>
|
||||
<span class="date-time">{{ formatTime(event) }}</span>
|
||||
</td>
|
||||
<td>
|
||||
<span :class="['status-pill', `status-${getEventStatus(event).toLowerCase()}`]">
|
||||
|
|
@ -190,8 +190,8 @@
|
|||
<span class="badge" :class="event.eventType">{{ event.eventType }}</span>
|
||||
</td>
|
||||
<td class="col-date">
|
||||
<span class="date-main">{{ formatDate(event.startDate) }}</span>
|
||||
<span class="date-time">{{ formatTime(event.startDate) }}</span>
|
||||
<span class="date-main">{{ formatDate(event) }}</span>
|
||||
<span class="date-time">{{ formatTime(event) }}</span>
|
||||
</td>
|
||||
<td>
|
||||
<span :class="['status-pill', `status-${getEventStatus(event).toLowerCase()}`]">
|
||||
|
|
@ -349,19 +349,23 @@ watch([searchQuery, typeFilter, seriesFilter], () => {
|
|||
pastPage.value = 1
|
||||
})
|
||||
|
||||
const formatDate = (dateString) => {
|
||||
return new Date(dateString).toLocaleDateString('en-US', {
|
||||
const formatDate = (event) => {
|
||||
if (!event?.startDate) return ''
|
||||
return new Date(event.startDate).toLocaleDateString('en-US', {
|
||||
month: 'short',
|
||||
day: 'numeric',
|
||||
year: 'numeric',
|
||||
timeZone: event.displayTimezone || 'America/Toronto',
|
||||
})
|
||||
}
|
||||
|
||||
const formatTime = (dateString) => {
|
||||
return new Date(dateString).toLocaleTimeString('en-US', {
|
||||
const formatTime = (event) => {
|
||||
if (!event?.startDate) return ''
|
||||
return new Date(event.startDate).toLocaleTimeString('en-US', {
|
||||
hour: 'numeric',
|
||||
minute: '2-digit',
|
||||
hour12: true,
|
||||
timeZone: event.displayTimezone || 'America/Toronto',
|
||||
})
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -42,7 +42,7 @@
|
|||
<div v-if="events?.length" class="event-list">
|
||||
<div v-for="event in events" :key="event._id" class="event-item">
|
||||
<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">
|
||||
<NuxtLink :to="`/events/${event.slug || event._id}`">{{
|
||||
event.title
|
||||
|
|
@ -168,10 +168,13 @@ const circleData = [
|
|||
},
|
||||
];
|
||||
|
||||
const formatDate = (dateStr) => {
|
||||
if (!dateStr) return "";
|
||||
const d = new Date(dateStr);
|
||||
return d.toLocaleDateString("en-US", { month: "short", day: "numeric" });
|
||||
const formatDate = (event) => {
|
||||
if (!event?.startDate) return "";
|
||||
return new Date(event.startDate).toLocaleDateString("en-US", {
|
||||
month: "short",
|
||||
day: "numeric",
|
||||
timeZone: event.displayTimezone || "America/Toronto",
|
||||
});
|
||||
};
|
||||
</script>
|
||||
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue