@asd20/ui 3.2.945 → 3.2.947

package/package.json

@@ -5,7 +5,7 @@
     "*.scss",
     "*.vue"
   ],
-  "version": "3.2.945",
+  "version": "3.2.947",
   "private": false,
   "license": "MIT",
   "repository": {

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

@@ -6,18 +6,29 @@
     target="_blank"
     :style="{ '--accent-color': event.calendarColor }"
   >
-    <span class="title"
-      ><span>{{ sanitizedSummary }}</span></span
-    >
-    <span class="time">{{ start }}{{ end }}</span>
-    <span class="start-time">{{ startTime }}</span>
-    <span v-if="event.location.length > 0" class="location">
+    <span class="title">
+      <span>{{ sanitizedSummary }}</span>
+    </span>
+
+    <!-- Show time if NOT all-day -->
+    <span v-if="!event.allDay" class="time"> {{ start }}{{ end }} </span>
+
+    <!-- Show start-time if NOT all-day -->
+    <span v-if="!event.allDay" class="start-time">
+      {{ startTime }}
+    </span>
+
+    <!-- Show location if NOT all-day and location exists -->
+    <span v-if="!event.allDay && event.location.length > 0" class="location">
       {{ event.location }}
     </span>
+
+    <!-- Optional: show description if you want -->
     <span class="description">{{ event.description }}</span>
   </button>
 </template>
 
+
 <script>
 import { format, parse } from 'date-fns'
 
@@ -32,8 +43,7 @@ export default {
       return {
         'asd20-calendar-event-button': true,
         'asd20-calendar-event-button--large': this.large,
-        'asd20-calendar-event-button--all-day':
-          this.event.allday || this.event.multiDay,
+        'asd20-calendar-event-button--all-day': this.event.allDay,
       }
     },
     startTime() {
@@ -45,7 +55,7 @@ export default {
     start() {
       return format(
         parse(this.event.start, "yyyy-MM-dd'T'HH:mm:ssX", new Date()),
-        'h:mm aa, MMMM DD YYYY'
+        'h:mm aa, MMMM dd yyyy'
       )
     },
     end() {
@@ -53,7 +63,7 @@ export default {
         ' to ' +
         format(
           parse(this.event.end, "yyyy-MM-dd'T'HH:mm:ssX", new Date()),
-          'h:mm aa, MMMM DD YYYY'
+          'h:mm aa, MMMM dd yyyy'
         )
       )
     },
@@ -62,7 +72,6 @@ export default {
     },
   },
   methods: {
-    // specifically for rSchool events that have extraneous school names in the summary
     sanitizeSummary(summary) {
       if (!summary) return summary
       const pattern = /vs\.[^>]*>Multiple Schools/
@@ -70,6 +79,8 @@ export default {
     },
   },
 }
+
+
 </script>
 
 

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

@@ -1,5 +1,16 @@
 <template>
   <div :class="classes">
+    <!-- Weekday header -->
+    <div class="asd20-calendar__weekdays">
+      <div
+        v-for="(dayName, index) in weekdayNames"
+        :key="index"
+        class="asd20-calendar__weekday"
+      >
+        {{ shortWeekdays ? dayName.charAt(0) : dayName }}
+      </div>
+    </div>
+    <!-- Days -->
     <ol class="asd20-calendar__days">
       <li
         class="asd20-calendar__day"
@@ -14,18 +25,23 @@
         @click="onClickDay($event, day)"
       >
         <div class="asd20-calendar__date">
-          <span class="weekday">{{ day.weekday }}</span>
           <span class="month">{{ day.month }}</span>
           <span class="day">{{ day.number }}</span>
           <span class="year">{{ day.year }}</span>
         </div>
-        <div class="asd20-calendar__events">
-          <Asd20CalendarEventButton
-            v-for="(event, index) in day.events"
-            :key="index"
-            :event="event"
-            @click.native="onEventClick(event)"
-          ></Asd20CalendarEventButton>
+        <div>
+          <div
+            class="asd20-calendar__events"
+            v-if="!annualView || !day.outsideOfCurrentMonth"
+          >
+            <Asd20CalendarEventButton
+              v-for="(event, index) in day.events"
+              :key="index"
+              :event="event"
+              :class="day.events.length > 1 ? 'small-dot' : ''"
+              @click.native="onEventClick(event)"
+            />
+          </div>
         </div>
       </li>
     </ol>
@@ -67,6 +83,8 @@ export default {
     month: { type: Number, default: new Date().getMonth() },
     year: { type: Number, default: new Date().getFullYear() },
     absolute: { type: Boolean, default: true },
+    shortWeekdays: { type: Boolean, default: false },
+    annualView: { type: Boolean, default: false },
   },
 
   data: () => ({
@@ -92,10 +110,18 @@ export default {
       return {
         'asd20-calendar': true,
         'asd20-calendar--absolute': this.absolute,
+        'asd20-calendar--annual': this.annualView,
       }
     },
     days() {
-      return mapEventsToDays(expandEvents(this.events), this.year, this.month)
+      return mapEventsToDays(
+        expandEvents(this.events, this.annualView),
+        this.year,
+        this.month,
+      )
+    },
+    weekdayNames() {
+      return ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'];
     },
   },
   methods: {
@@ -131,6 +157,22 @@ $accent: var(--color__accent);
     right: 0;
   }
 
+  &__weekdays {
+    display: flex;
+    justify-content: space-around;
+    align-items: center;
+    flex-grow: 0;
+    flex-shrink: 0;
+    width: 100%;
+    height: space(0.875);
+    margin-bottom: space(0.125);
+    padding: 0 space(0.125);
+    background: var(--color__accent-t80);
+    color: var(--color__primary);
+    font-size: 0.875rem;
+    line-height: 1;
+  }
+
   &__day-events {
     flex-grow: 1;
     &::v-deep .asd20-calendar-event-button:not(:last-of-type) {
@@ -154,7 +196,6 @@ $accent: var(--color__accent);
     height: 40%;
     width: 100%;
     flex-shrink: 0;
-    // margin-right: space(-0.25);
   }
   &__day {
     position: relative;
@@ -246,6 +287,111 @@ $accent: var(--color__accent);
       }
     }
   }
+  &--annual {
+    .asd20-calendar__weekdays {
+      padding: 0;
+    }
+    .asd20-calendar__days {
+      position: relative;
+      list-style: none;
+      margin: 0 0 0 0;
+      padding: 0;
+      position: relative;
+      flex-grow: 0;
+      display: flex;
+      justify-content: flex-start;
+      align-items: stretch;
+      flex-wrap: wrap;
+      height: 40%;
+      width: 100%;
+      flex-shrink: 0;
+    }
+
+    .asd20-calendar__day {
+      position: relative;
+      font-size: 1rem;
+      margin-bottom: 0;
+      padding: 0;
+      width: calc(100% / 7);
+      flex-grow: 1;
+      display: flex;
+      flex-direction:column;
+      align-items: flex-start;
+      background-color: var(--website-page__alternate-background-t70);
+      min-height: 2rem;
+      outline: 1px solid var(--color__tertiary);
+      border: none;
+      box-shadow: none;
+      &.today {
+        &::v-deep .day::after {
+          content: none;
+          display: none;
+        }
+      }
+    }
+    .asd20-calendar__day-events {
+      display: none !important;
+    }
+
+    .asd20-calendar__date {
+      position: static;
+      font-size: 0.875rem;
+      margin: 0 0 0.125rem 0.125rem;
+
+      .day {
+        display: inline;
+        width: auto;
+        height: auto;
+        padding: 0;
+        font-size: 0.875rem;
+      }
+
+      .weekday,
+      .month,
+      .year {
+        display: none;
+      }
+    }
+
+    .asd20-calendar__events {
+      position: static;
+      display: flex;
+      flex-direction: row;
+      width: 100%;
+      justify-content: center;
+
+      &::v-deep .asd20-calendar-event-button {
+        background: transparent;
+        padding: 0;
+        width: space(0.375);
+        height: space(0.375);
+        // margin-right: space(0.0625);
+        .title::before {
+          width: 10px;
+          height: 10px;
+          margin: 0;
+
+        }
+        .title span {
+          display: none;
+        }
+      }
+      &::v-deep .small-dot {
+        width: space(0.25);
+        height: space(0.25);
+        .title::before {
+          width: 6px;
+          height: 6px;
+        }
+      }
+    }
+    .outside {
+      .asd20-calendar__date .day {
+        display: none;
+      }
+    }
+  }
+
 }
 
 @media (max-width: 767px) {
@@ -282,10 +428,10 @@ $accent: var(--color__accent);
       // min-height: calc(100% / 5);
 
       &:nth-child(n + 1):nth-child(-n + 7) {
-        margin-top: space(1);
+        // margin-top: space(1);
 
-        box-shadow: 0 -1px 0 0 var(--color__tertiary),
-          0 1px 0 0 var(--color__tertiary), -1px 0 0 0 var(--color__tertiary);
+        // box-shadow: 0 -1px 0 0 var(--color__tertiary),
+        //   0 1px 0 0 var(--color__tertiary), -1px 0 0 0 var(--color__tertiary);
 
         &::v-deep .asd20-calendar__date {
           width: 100%;
@@ -309,10 +455,10 @@ $accent: var(--color__accent);
         }
       }
 
-      &:nth-child(n + 1):nth-child(1) {
-        box-shadow: 0 -1px 0 0 var(--color__tertiary),
-          0 1px 0 0 var(--color__tertiary);
-      }
+      // &:nth-child(n + 1):nth-child(1) {
+      //   box-shadow: 0 -1px 0 0 var(--color__tertiary),
+      //     0 1px 0 0 var(--color__tertiary);
+      // }
 
       &.selected {
         // outline: none;
@@ -376,4 +522,5 @@ $accent: var(--color__accent);
     }
   }
 }
+
 </style>

package/src/data/events/district-events.json

@@ -29,8 +29,8 @@
       "summary": "Winter Break - No School",
       "description": "No School",
       "location": "AAHS",
-      "start": "2024-12-19T07:00:00Z",
-      "end": "2025-01-05T07:00:00Z",
+      "start": "2025-12-19T07:00:00Z",
+      "end": "2026-01-05T07:00:00Z",
       "dtstamp": "2024-12-19T07:00:00Z",
       "class": "",
       "priority": "",
@@ -53,11 +53,11 @@
       "id": null,
       "uid": "MDQwMDAwMDA4MjAwRTAwMDc0QzVCNzEwMUE4MkUwMDgwMDAwMDAwMERFRTE5NzcxNThBQ0RBMDEwMDAwMDAwMDAwMDAwMDAwMTAwMDAwMDBFOEVBMjc5NkM0MDI3RjRGODFFNzY1QzQ0M0VGMDA0Mw==",
       "type": "event",
-      "summary": "Winter Break - Break",
-      "description": "",
+      "summary": "Choir Performance",
+      "description": "There will be a Choir Performance on December 25... If you can believe that.",
       "location": "AAHS",
-      "start": "2024-12-25T17:00:00Z",
-      "end": "2024-12-25T17:30:00Z",
+      "start": "2025-12-25T17:00:00Z",
+      "end": "2025-12-25T17:30:00Z",
       "dtstamp": "2024-12-25T17:00:00Z",
       "class": "",
       "priority": "",
@@ -83,8 +83,8 @@
       "summary": "All State Choir",
       "description": "",
       "location": "Denver Center for the Performing Arts (1101 13th St, Denver, CO 80204, United States)",
-      "start": "2025-01-09T17:00:00Z",
-      "end": "2025-01-11T17:30:00Z",
+      "start": "2026-01-09T17:00:00Z",
+      "end": "2026-01-11T17:30:00Z",
       "dtstamp": "2025-01-09T17:00:00Z",
       "class": "",
       "priority": "",
@@ -110,8 +110,8 @@
       "summary": "First day of second semester",
       "description": "<ul><li>In-person attendance is limited to boardroom capacity of 70 audience members per the Colorado Springs Fire Marshall.</li><li>Note, those who attend in person may be captured on camera during the live feed and recorded versions of the meeting.</li><li>The meeting link will be available the week of the meeting.</li></ul><br/>We invite public comment at our meetings.<br/><br/><ul><li>You must sign-up to speak between 7 a.m. and 1 p.m., the day of the board meeting by completing our Public <a href=\"https://forms.office.com/r/4nRw9yhyeS\" target=\"_blank\">Comment Form</a>.</li><li>You must be present and available to speak in-person at the podium when called upon.</li><li>You cannot provide virtual public comment.</li><li>If you cannot attend in-person, we invite you to submit your comments in writing via the Public <a href=\"https://forms.office.com/r/4nRw9yhyeS\" target=\"_blank\">Comment Form</a>. Written comments submitted through the Public Comment Form will not be read publicly at the board meeting, but they will be included as part of the public record in the minutes for the meeting.</li></ul>",
       "location": "AAHS",
-      "start": "2025-01-05T07:00:00Z",
-      "end": "2025-01-06T07:00:00Z",
+      "start": "2026-01-05T07:00:00Z",
+      "end": "2026-01-06T07:00:00Z",
       "dtstamp": "2025-01-05T07:00:00Z",
       "class": "",
       "priority": "",
@@ -137,8 +137,8 @@
       "summary": "Boys Varsity  vs. CoronadoDohertyLibertyMullenPalmer RidgePine CreekPueblo WestRampartRock CanyonThunderRidge'>Multiple Schools (Home)",
       "description": "Type: Kadet Kickoff Tournament Opponent: CoronadoDohertyLibertyMullenPalmer RidgePine CreekPueblo WestRampartRock CanyonThunderRidge'>Multiple Schools Comments: Confirmed",
       "location": "AAHS Media Center",
-      "start": "2025-01-19T08:20:00Z",
-      "end": "2025-01-19T08:20:00Z",
+      "start": "2026-01-19T08:20:00Z",
+      "end": "2026-01-19T08:20:00Z",
       "dtstamp": "2025-01-19T20:20:00Z",
       "class": "",
       "priority": "",
@@ -164,8 +164,8 @@
       "summary": "Choice Night",
       "description": "",
       "location": "AAHS Media Center",
-      "start": "2025-01-20T01:00:00Z",
-      "end": "2025-01-20T03:00:00Z",
+      "start": "2026-01-20T01:00:00Z",
+      "end": "2026-01-20T03:00:00Z",
       "dtstamp": "2025-01-20T01:00:00Z",
       "class": "",
       "priority": "",
@@ -191,8 +191,8 @@
       "summary": "8th Grade Information Night",
       "description": "",
       "location": "AAHS Gyms",
-      "start": "2025-02-10T01:00:00Z",
-      "end": "2025-02-10T03:00:00Z",
+      "start": "2026-02-10T01:00:00Z",
+      "end": "2026-02-10T03:00:00Z",
       "dtstamp": "2025-02-10T01:00:00Z",
       "class": "",
       "priority": "",
@@ -218,8 +218,8 @@
       "summary": "Parent-teacher Conferences",
       "description": "",
       "location": "",
-      "start": "2025-03-22T21:30:00Z",
-      "end": "2025-03-23T01:30:00Z",
+      "start": "2026-03-22T21:30:00Z",
+      "end": "2026-03-23T01:30:00Z",
       "dtstamp": "2025-03-22T21:30:00Z",
       "class": "",
       "priority": "",
@@ -245,8 +245,8 @@
       "summary": "Parent-Teacher Conferences",
       "description": "",
       "location": "",
-      "start": "2025-03-23T22:00:00Z",
-      "end": "2025-03-24T01:00:00Z",
+      "start": "2026-03-23T22:00:00Z",
+      "end": "2026-03-24T01:00:00Z",
       "dtstamp": "2025-03-23T22:00:00Z",
       "class": "",
       "priority": "",
@@ -300,7 +300,7 @@
       "description": "",
       "location": "",
       "start": "2025-03-27T06:00:00Z",
-      "end": "2025-03-28T06:00:00Z",
+      "end": "2025-03-31T06:00:00Z",
       "dtstamp": "2025-03-27T06:00:00Z",
       "class": "",
       "priority": "",
@@ -323,7 +323,7 @@
       "id": null,
       "uid": "MDQwMDAwMDA4MjAwRTAwMDc0QzVCNzEwMUE4MkUwMDgwMDAwMDAwMDIyQzE3RTIwRjYwQkQ5MDEwMDAwMDAwMDAwMDAwMDAwMTAwMDAwMDAzRjdENDg0MzUyQjdEQTQ1ODc1QjQwRDE2MEQ2NkEwOA==",
       "type": "event",
-      "summary": "No school - Spring Break",
+      "summary": "No school - Spring Break Intermission",
       "description": "",
       "location": "",
       "start": "2025-03-28T06:00:00Z",

package/src/helpers/expandEvents.js

@@ -3,93 +3,96 @@ import format from 'date-fns/format'
 import addDays from 'date-fns/add_days'
 import isSameDay from 'date-fns/is_same_day'
 
-/**
- * Expands an array of events, creating new events for those
- * that span multiple days, and adding metadata.
- *
- * @export
- * @param {*} events
- * @returns An array of expanded events
- */
-export default function expandEvents(events) {
+export default function expandEvents(events, includePastEvents = false) {
   return events
-    .reduce((a, event) => {
-      // Parse the event start and end times
+    .reduce((acc, event) => {
       const start = parse(event.start)
       const end = event.end ? parse(event.end) : start
 
-      // Normalize today's date to ignore time
       const today = new Date()
       today.setHours(0, 0, 0, 0)
-      // console.log('Today:', today)
 
-      const diffTime = Math.abs(end.getTime() - start.getTime())
-      const diffHours = Math.ceil(diffTime / (1000 * 60 * 60))
-      const diffDays = Math.ceil(diffTime / (1000 * 60 * 60 * 24))
-      const multiDay = !isSameDay(start, end)
-      const allDay = !event.end || (diffHours > 23 && diffHours < 25)
-      const endTimeUndetermined = event.end && event.end === event.start
+      const diffTime = end.getTime() - start.getTime()
+      const diffHours = diffTime / (1000 * 60 * 60)
+      let diffDays = Math.ceil(diffTime / (1000 * 60 * 60 * 24))
 
-      if (multiDay && !allDay) {
-        // Expand multi-day events
+      // Safety net for zero-day events
+      if (diffDays === 0) diffDays = 1
+
+      const isAllDay = event.allDay || diffHours >= 23
+
+      // Normalize for date-only comparisons
+      const normalizedStart = new Date(start)
+      normalizedStart.setHours(0, 0, 0, 0)
+
+      const normalizedEnd = new Date(end)
+      normalizedEnd.setHours(0, 0, 0, 0)
+
+      // let isMultiDay
+
+      // if (isAllDay && diffDays === 1) {
+      //   // All-day event lasting exactly one day → NOT multi-day
+      //   isMultiDay = false
+      // } else {
+      //   isMultiDay = !isSameDay(normalizedStart, normalizedEnd)
+      // }
+
+      const isMultiDay =
+        diffDays > 1 || !isSameDay(normalizedStart, normalizedEnd)
+
+      const expandedEvents = []
+
+      if (isMultiDay) {
+        // Multi-day event expansion
         for (let d = 0; d < diffDays; d++) {
-          const newStart = addDays(start, d)
-          // Normalize newStart to ignore time
-          newStart.setHours(0, 0, 0, 0)
-          // console.log('newStart:', newStart)
+          const currentDay = addDays(normalizedStart, d)
 
-          if (newStart >= today) {
-            a.push({
+          if (includePastEvents || currentDay >= today) {
+            expandedEvents.push({
               ...event,
-              start: newStart,
-              end: end,
+              start: currentDay,
+              end: normalizedEnd,
               originalStart: start,
-              allDay: start.getHours() === 0,
-              endTimeUndetermined,
-              multiDay,
-              weekday: format(newStart, 'dddd'),
-              day: format(newStart, 'DD'),
-              number: format(newStart, 'D'),
-              month: format(newStart, 'MMMM'),
-              year: format(newStart, 'YYYY'),
+              allDay: true,
+              multiDay: true,
+              weekday: format(currentDay, 'dddd'),
+              day: format(currentDay, 'DD'),
+              number: format(currentDay, 'D'),
+              month: format(currentDay, 'MMMM'),
+              year: format(currentDay, 'YYYY')
             })
           }
         }
       } else {
-        // Normalize start date for single-day events
-        const normalizedStart = new Date(start)
-        normalizedStart.setHours(0, 0, 0, 0)
-        // console.log('normailizedStart:', normalizedStart)
-
-        if (normalizedStart >= today) {
-          a.push({
+        // Single-day event
+        if (includePastEvents || normalizedStart >= today) {
+          expandedEvents.push({
             ...event,
-            start: start,
+            start: start, // keep original start WITH time
             end: end,
             originalStart: null,
-            allDay,
-            endTimeUndetermined,
-            multiDay,
-            weekday: format(start, 'dddd'),
-            day: format(start, 'DD'),
-            number: format(start, 'D'),
-            month: format(start, 'MMMM'),
-            year: format(start, 'YYYY'),
+            allDay: isAllDay,
+            multiDay: false,
+            weekday: format(normalizedStart, 'dddd'),
+            day: format(normalizedStart, 'DD'),
+            number: format(normalizedStart, 'D'),
+            month: format(normalizedStart, 'MMMM'),
+            year: format(normalizedStart, 'YYYY')
           })
         }
       }
-      return a
+
+      return acc.concat(expandedEvents)
     }, [])
-    .reduce((a, e) => {
-      // Remove duplicates
-      const hasDuplicate = a.some(
-        ae => ae.summary === e.summary && ae.start.getTime() === e.start.getTime() && ae.end.getTime() === e.end.getTime()
+    .reduce((acc, e) => {
+      const hasDuplicate = acc.some(
+        ae =>
+          ae.summary === e.summary &&
+          ae.start.getTime() === e.start.getTime() &&
+          ae.end.getTime() === e.end.getTime()
       )
-      if (!hasDuplicate) a.push(e)
-      return a
+      if (!hasDuplicate) acc.push(e)
+      return acc
     }, [])
-    .sort((a, b) => {
-      // Sort events by start date
-      return a.start.getTime() - b.start.getTime()
-    })
+    .sort((a, b) => a.start.getTime() - b.start.getTime())
 }

package/src/helpers/mapEventsToDays.js

@@ -5,14 +5,14 @@ import isSameDay from 'date-fns/is_same_day'
 import getDaysInMonth from 'date-fns/get_days_in_month'
 
 /**
- * Given an array of events
+ * Given an array of events, returns an array of days with events grouped by date.
  *
  * @export
- * @param {*} events
- * @param {number} [year=0]
- * @param {number} [month=0]
- * @param {boolean} [showAll=false]
- * @returns An array days with just their events
+ * @param {Array} events - Array of events (should already be expanded if needed)
+ * @param {number} year - Target year (used when showAll is false)
+ * @param {number} month - Target month (zero-indexed, used when showAll is false)
+ * @param {boolean} showAll - If true, returns only days with events (useful for agenda views)
+ * @returns {Array} Array of day objects { date, events, ... }
  */
 export default function mapEventsToDays(
   events,
@@ -20,67 +20,69 @@ export default function mapEventsToDays(
   month = 0,
   showAll = false
 ) {
-  // Array to store days
+  const today = new Date()
+  today.setHours(0, 0, 0, 0)
+
   let days = []
 
-  // If we are supposed to show all days, even outside of current month (whole start-end range)
   if (showAll) {
-    // Store dates from events
-    let dates = events
-      // Get unique dates
-      .reduce((results, e) => {
-        let d = parse(e.start)
-        let f = format(d, 'YYYY-MM-DD')
-        if (results.indexOf(f) === -1) {
-          results.push(f)
-        }
-        return results
-      }, [])
-    // parse unique dates
-    dates.map(f => parse(f))
+    // Collect unique event dates
+    const uniqueDatesMap = new Map()
 
-    // Map dates to days, with events inserted, formatted elements
-    days = dates.map(d => {
-      return {
-        outsideOfCurrentMonth: false,
-        date: d,
-        unix: d.valueOf(),
-        today: isSameDay(d, parse(new Date())),
-        events: events.filter(event => isSameDay(d, parse(event.start))),
-        weekday: format(d, 'dddd'),
-        day: format(d, 'DD'),
-        shortDay: format(d, 'D'),
-        number: format(d, 'D'),
-        month: format(d, 'MMMM'),
-        year: format(d, 'YYYY'),
+    events.forEach(event => {
+      const eventDate = parse(event.start)
+      const dateKey = format(eventDate, 'YYYY-MM-DD')
+      if (!uniqueDatesMap.has(dateKey)) {
+        uniqueDatesMap.set(dateKey, eventDate)
       }
     })
+
+    days = Array.from(uniqueDatesMap.values()).map(date => createDayObject(date, events, false, today))
   } else {
-    let firstd = new Date(year, month, 1)
-    let lastd = new Date(year, month + 1, 0)
-    let daysInMonth = getDaysInMonth(firstd) // Total days in month
-    let previousMonthDays = firstd.getDay() // Day of week of first day of month
-    let offset = previousMonthDays * -1
-    let nextMonthDays = offset + (6 - lastd.getDay())
-    let total = daysInMonth + previousMonthDays + nextMonthDays
+    // Month view: create a full calendar grid
+    const firstDayOfMonth = new Date(year, month, 1)
+    const lastDayOfMonth = new Date(year, month + 1, 0)
+    const daysInMonth = getDaysInMonth(firstDayOfMonth)
+
+    const prevMonthDays = firstDayOfMonth.getDay() // How many days to show before the 1st of the month (0=Sunday)
+    const nextMonthDays = 6 - lastDayOfMonth.getDay() // How many days to show after the last day of the month
+    const totalDays = daysInMonth + prevMonthDays + nextMonthDays
 
-    // Loop through each date
-    for (let i = offset; i < total; i++) {
-      let d = addDays(firstd, i)
-      days.push({
-        outsideOfCurrentMonth: i < 0 || i > daysInMonth - 1 ? true : false,
-        date: d,
-        unix: d.valueOf(),
-        today: isSameDay(d, parse(new Date())),
-        events: events.filter(event => isSameDay(d, parse(event.start))),
-        weekday: format(d, 'dddd'),
-        day: format(d, 'DD'),
-        number: format(d, 'D'),
-        month: format(d, 'MMMM'),
-        year: format(d, 'YYYY'),
-      })
+    for (let i = -prevMonthDays; i < totalDays - prevMonthDays; i++) {
+      const date = addDays(firstDayOfMonth, i)
+      const outsideOfCurrentMonth = i < 0 || i >= daysInMonth
+      days.push(createDayObject(date, events, outsideOfCurrentMonth, today))
     }
   }
 
-  return days.sort((a, b) => (a.unix > b.unix ? 1 : b.unix > a.unix ? -1 : 0))
+  // Sort by unix timestamp (probably unnecessary unless something weird happens)
+  return days.sort((a, b) => a.unix - b.unix)
+}
+
+/**
+ * Builds a day object with events attached.
+ *
+ * @param {Date} date - The date this day represents.
+ * @param {Array} events - The full events list.
+ * @param {boolean} outsideOfCurrentMonth - Whether this date is outside the target month.
+ * @param {Date} today - Today's date (normalized to 00:00).
+ * @returns {Object} The day object.
+ */
+function createDayObject(date, events, outsideOfCurrentMonth = false, today) {
+  const normalizedDate = new Date(date)
+  normalizedDate.setHours(0, 0, 0, 0)
+
+  return {
+    outsideOfCurrentMonth,
+    date: normalizedDate,
+    unix: normalizedDate.getTime(),
+    today: isSameDay(normalizedDate, today),
+    events: events.filter(event => isSameDay(parse(event.start), normalizedDate)),
+    weekday: format(normalizedDate, 'dddd'),
+    day: format(normalizedDate, 'DD'),
+    shortDay: format(normalizedDate, 'D'),
+    number: format(normalizedDate, 'D'),
+    month: format(normalizedDate, 'MMMM'),
+    year: format(normalizedDate, 'YYYY'),
+  }
 }