@asd20/ui 3.2.990 → 3.2.991

package/package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "@asd20/ui",
-  "version": "3.2.989",
+  "version": "3.2.990",
   "lockfileVersion": 1,
   "requires": true,
   "dependencies": {
@@ -11665,6 +11665,11 @@
         "@babel/runtime": "^7.21.0"
       }
     },
+    "date-fns-tz": {
+      "version": "1.1.7",
+      "resolved": "https://registry.npmjs.org/date-fns-tz/-/date-fns-tz-1.1.7.tgz",
+      "integrity": "sha512-xfL918kXO528DJ17Sao60H07rYv5L/X0Bp6zojDssuZAR/acYETDS9PaICKAnodcO9XVHL/0bpLRGKd7kNnvcQ=="
+    },
     "dateformat": {
       "version": "3.0.3",
       "resolved": "https://registry.npmjs.org/dateformat/-/dateformat-3.0.3.tgz",

package/package.json

@@ -5,7 +5,7 @@
     "*.scss",
     "*.vue"
   ],
-  "version": "3.2.990",
+  "version": "3.2.991",
   "private": false,
   "license": "MIT",
   "repository": {
@@ -31,6 +31,7 @@
     "basicscroll": "^3.0.2",
     "countup.js": "^2.0.0",
     "date-fns": "^2.30.0",
+    "date-fns-tz": "^1.1.7",
     "focus-trap": "^6.9.4",
     "focus-trap-vue": "^1.1.1",
     "js-cookie": "^2.2.1",

package/src/components/atoms/Asd20CalendarEventButton/index.vue

@@ -52,25 +52,19 @@ export default {
       }
     },
     startTime() {
-      return format(
-        parse(this.event.start, "yyyy-MM-dd'T'HH:mm:ssX", new Date()),
-        'h:mm aa'
-      )
+      const d = this.toDateSafe(this.event.start)
+      if (!d) return ''
+      return format(d, 'h:mm aa')
     },
     start() {
-      return format(
-        parse(this.event.start, "yyyy-MM-dd'T'HH:mm:ssX", new Date()),
-        'h:mm aa, MMMM dd yyyy'
-      )
+      const d = this.toDateSafe(this.event.start)
+      if (!d) return ''
+      return format(d, 'h:mm aa, MMMM dd yyyy')
     },
     end() {
-      return (
-        ' to ' +
-        format(
-          parse(this.event.end, "yyyy-MM-dd'T'HH:mm:ssX", new Date()),
-          'h:mm aa, MMMM dd yyyy'
-        )
-      )
+      const d = this.toDateSafe(this.event.end)
+      if (!d) return ''
+      return ' to ' + format(d, 'h:mm aa, MMMM dd yyyy')
     },
     sanitizedSummary() {
       return this.sanitizeSummary(this.event.summary)
@@ -104,8 +98,15 @@ export default {
       return summary.replace(pattern, 'vs. Multiple Schools')
     },
     formatDate(date, opts = { month: 'short', day: 'numeric' }) {
-      if (!date) return ''
-      return new Date(date).toLocaleDateString(undefined, opts)
+      const d = this.toDateSafe(date)
+      if (!d) return ''
+      return d.toLocaleDateString(undefined, opts)
+    },
+    toDateSafe(value) {
+      if (!value) return null;
+      if (value instanceof Date) return isNaN(value) ? null : value;
+      const d = new Date(value);
+      return isNaN(d) ? null : d;
     },
   },
 }

package/src/components/organisms/Asd20EventList/index.vue

@@ -11,7 +11,11 @@
           :key="day.unix"
           :label="`${day.weekday}, ${day.month} ${day.shortDay}, ${day.year}`"
         />
-        <asd20-list-item v-for="event in day.events" :key="event.uid" condensed>
+        <asd20-list-item
+          v-for="event in day.events"
+          :key="`${event.uid}-${new Date(event.start).getTime()}`"
+          condensed
+        >
           <asd20-calendar-event-button
             :event="event"
             large

package/src/helpers/expandEvents.js

@@ -1,39 +1,48 @@
 import { format, addDays, isSameDay } from 'date-fns'
+import { utcToZonedTime } from 'date-fns-tz'
+
+const MOUNTAIN_TZ = 'America/Denver'
+
+// Convert to Mountain Time
+function toMountain(dateLike) {
+  // Accepts string/Date; handles undefined/null gracefully
+  if (!dateLike) return null
+  return utcToZonedTime(new Date(dateLike), MOUNTAIN_TZ)
+}
 
 export default function expandEvents(events, includePastEvents = false) {
+  // Today in Mountain Time, at midnight
+  const now = new Date()
+  const today = toMountain(now)
+  today.setHours(0, 0, 0, 0)
+
   return events
     .reduce((acc, event) => {
-      // Use new Date() for ISO date strings
-      const start = new Date(event.start)
-      const end = event.end ? new Date(event.end) : start
-
-      const today = new Date()
-      today.setHours(0, 0, 0, 0)
+      // Always parse and convert to Mountain Time
+      const start = toMountain(event.start)
+      const end = event.end ? toMountain(event.end) : start
 
+      // Do all date math in Mountain Time
       const diffTime = end.getTime() - start.getTime()
       const diffHours = diffTime / (1000 * 60 * 60)
       let diffDays = Math.ceil(diffTime / (1000 * 60 * 60 * 24))
-
       if (diffDays === 0) diffDays = 1
 
       const isAllDay = event.allDay || diffHours >= 23
 
-      // Normalize for date-only comparisons
+      // Normalize for date-only comparisons (still in Mountain)
       const normalizedStart = new Date(start)
       normalizedStart.setHours(0, 0, 0, 0)
-
       const normalizedEnd = new Date(end)
       normalizedEnd.setHours(0, 0, 0, 0)
 
-      const isMultiDay =
-        diffDays > 1 || !isSameDay(normalizedStart, normalizedEnd)
+      const isMultiDay = diffDays > 1 || !isSameDay(normalizedStart, normalizedEnd)
 
       const expandedEvents = []
 
       if (isMultiDay) {
         for (let d = 0; d < diffDays; d++) {
           const currentDay = addDays(normalizedStart, d)
-
           if (includePastEvents || currentDay >= today) {
             expandedEvents.push({
               ...event,
@@ -54,7 +63,7 @@ export default function expandEvents(events, includePastEvents = false) {
         if (includePastEvents || normalizedStart >= today) {
           expandedEvents.push({
             ...event,
-            start: start, // keep original start WITH time
+            start: start, // Mountain Time, with time for timed events
             end: end,
             originalStart: null,
             allDay: isAllDay,

package/src/helpers/mapEventsToDays.js

@@ -1,7 +1,27 @@
-import { format, addDays, isSameDay, getDaysInMonth } from 'date-fns'
+import { format, addDays, getDaysInMonth } from 'date-fns'
+import { utcToZonedTime } from 'date-fns-tz'
+
+const MOUNTAIN_TZ = 'America/Denver'
+
+// Converts any date-like input to a Mountain Time Date object.
+function toMountain(dateLike) {
+  if (!dateLike) return null
+  return utcToZonedTime(new Date(dateLike), MOUNTAIN_TZ)
+}
+
+// Checks if two dates are the same day in Mountain Time.
+function isSameDayMT(dateLeft, dateRight) {
+  const d1 = toMountain(dateLeft)
+  const d2 = toMountain(dateRight)
+  return (
+    d1.getFullYear() === d2.getFullYear() &&
+    d1.getMonth() === d2.getMonth() &&
+    d1.getDate() === d2.getDate()
+  )
+}
 
 /**
- * Given an array of events, returns an array of days with events grouped by date.
+ * Given an array of events, returns an array of days with events grouped by date (in Mountain Time).
  */
 export default function mapEventsToDays(
   events,
@@ -9,28 +29,30 @@ export default function mapEventsToDays(
   month = 0,
   showAll = false
 ) {
-  const today = new Date()
+  const today = toMountain(new Date())
   today.setHours(0, 0, 0, 0)
 
   let days = []
 
   if (showAll) {
-    // Collect unique event dates
+    // Collect unique event dates (in Mountain Time)
     const uniqueDatesMap = new Map()
 
     events.forEach(event => {
-      const eventDate = new Date(event.start)
-      const dateKey = format(eventDate, 'yyyy-MM-dd')
+      const eventDate = toMountain(event.start)
+      const dateKey = format(eventDate, 'yyyy-MM-dd', { timeZone: MOUNTAIN_TZ })
       if (!uniqueDatesMap.has(dateKey)) {
         uniqueDatesMap.set(dateKey, eventDate)
       }
     })
 
-    days = Array.from(uniqueDatesMap.values()).map(date => createDayObject(date, events, false, today))
+    days = Array.from(uniqueDatesMap.values()).map(date =>
+      createDayObject(date, events, false, today)
+    )
   } else {
-    // Month view: create a full calendar grid
-    const firstDayOfMonth = new Date(year, month, 1)
-    const lastDayOfMonth = new Date(year, month + 1, 0)
+    // Month view: create a full calendar grid in Mountain Time
+    const firstDayOfMonth = toMountain(new Date(year, month, 1))
+    const lastDayOfMonth = toMountain(new Date(year, month + 1, 0))
     const daysInMonth = getDaysInMonth(firstDayOfMonth)
 
     const prevMonthDays = firstDayOfMonth.getDay()
@@ -44,28 +66,30 @@ export default function mapEventsToDays(
     }
   }
 
-  // Sort by unix timestamp (probably unnecessary unless something weird happens)
+  // Sort by unix timestamp
   return days.sort((a, b) => a.unix - b.unix)
 }
 
 /**
- * Builds a day object with events attached.
+ * Builds a day object (in Mountain Time) with events attached.
  */
 function createDayObject(date, events, outsideOfCurrentMonth = false, today) {
-  const normalizedDate = new Date(date)
+  const normalizedDate = toMountain(date)
   normalizedDate.setHours(0, 0, 0, 0)
 
   return {
     outsideOfCurrentMonth,
     date: normalizedDate,
     unix: normalizedDate.getTime(),
-    today: isSameDay(normalizedDate, today),
-    events: events.filter(event => isSameDay(new Date(event.start), normalizedDate)),
-    weekday: format(normalizedDate, 'EEEE'),
-    day: format(normalizedDate, 'dd'),
-    shortDay: format(normalizedDate, 'd'),
-    number: format(normalizedDate, 'd'),
-    month: format(normalizedDate, 'MMMM'),
-    year: format(normalizedDate, 'yyyy'),
+    today: isSameDayMT(normalizedDate, today),
+    events: events.filter(event =>
+      isSameDayMT(event.start, normalizedDate)
+    ),
+    weekday: format(normalizedDate, 'EEEE', { timeZone: MOUNTAIN_TZ }),
+    day: format(normalizedDate, 'dd', { timeZone: MOUNTAIN_TZ }),
+    shortDay: format(normalizedDate, 'd', { timeZone: MOUNTAIN_TZ }),
+    number: format(normalizedDate, 'd', { timeZone: MOUNTAIN_TZ }),
+    month: format(normalizedDate, 'MMMM', { timeZone: MOUNTAIN_TZ }),
+    year: format(normalizedDate, 'yyyy', { timeZone: MOUNTAIN_TZ }),
   }
 }