Changed default event date to startDate

src/components/calendar/CalendarEventDetails.vue

@@ -11,7 +11,7 @@ const { defaultDate, getFormattedDateTitle } = useCalendar()
 
 const props = defineProps<{ event: CalendarEvent }>()
 
-const dateDifference: string = getRelativeString(defaultDate, props.event.date)
+const dateDifference: string = getRelativeString(defaultDate, props.event.startDate)
 </script>
 
 <template>
@@ -47,7 +47,7 @@ const dateDifference: string = getRelativeString(defaultDate, props.event.date)
       </div>
 
       <div class="mb-1 space-y-1">
-        <p class="font-semibold">{{ getFormattedDateTitle(event.date, true) }}</p>
+        <p class="font-semibold">{{ getFormattedDateTitle(event.startDate, true) }}</p>
         <p class="text-sm italic opacity-75 flex items-center gap-1">
           <PhHourglassMedium size="16" weight="fill" /> {{ dateDifference }}
         </p>

src/components/calendar/state/monthly/DayTile.vue

@@ -24,7 +24,7 @@ const { currentEvents } = storeToRefs(useCalendarEvents())
 
 const eventsForTheDay = computed(() => {
   return currentEvents.value.filter((currentEvent) => {
-    return areDatesIdentical(currentEvent.date, props.date)
+    return areDatesIdentical(currentEvent.startDate, props.date)
   })
 })
 

src/components/calendar/state/yearly/DayTile.vue

@@ -33,7 +33,7 @@ const isSelectedDate = computed<boolean>(() => {
 const hasAtLeastOneEvent = computed<boolean>(() => {
   return Boolean(
     currentEvents.value.find((currentEvent) => {
-      return areDatesIdentical(currentEvent.date, tileDate.value)
+      return areDatesIdentical(currentEvent.startDate, tileDate.value)
     })
   )
 })