Tracked down a date bug. Also tried to optimize, but not sure it's necessary.

src/components/scheduling/boat/BoatScheduleTableComponent.vue

@@ -70,11 +70,10 @@ import {
   parseTimestamp,
   parseDate,
   addToDate,
-  getDate,
 } from '@quasar/quasar-ui-qcalendar';
 import CalendarHeaderComponent from './CalendarHeaderComponent.vue';
 
-import { ref, computed } from 'vue';
+import { ref, computed, onMounted } from 'vue';
 import { useBoatStore } from 'src/stores/boat';
 import { useScheduleStore } from 'src/stores/schedule';
 import { useAuthStore } from 'src/stores/auth';
@@ -90,6 +89,12 @@ const selectedDate = ref(today());
 
 const calendar = ref<QCalendarDay | null>(null);
 
+onMounted(async () => {
+  await useBoatStore().fetchBoats();
+  await scheduleStore.fetchIntervals();
+  await scheduleStore.fetchIntervalTemplates();
+});
+
 function handleSwipe({ ...event }) {
   event.direction === 'right' ? calendar.value?.prev() : calendar.value?.next();
 }
@@ -169,18 +174,24 @@ function selectBlock(event: MouseEvent, scope: DayBodyScope, block: Interval) {
     : (selectedBlock.value = block);
 }
 
-interface BoatBlocks {
-  [key: string]: Interval[];
-}
-
-const boatBlocks = computed((): BoatBlocks => {
+const boatBlocks = computed((): Record<string, Interval[]> => {
   return scheduleStore
     .getIntervalsForDate(selectedDate.value)
     .reduce((result, tb) => {
       if (!result[tb.boatId]) result[tb.boatId] = [];
       result[tb.boatId].push(tb);
       return result;
-    }, <BoatBlocks>{});
+    }, <Record<string, Interval[]>>{});
+});
+
+const boatReservations = computed((): Record<string, Reservation[]> => {
+  return reservationStore
+    .getReservationsByDate(selectedDate.value)
+    .reduce((result, reservation) => {
+      if (!result[reservation.resource]) result[reservation.resource] = [];
+      result[reservation.resource].push(reservation);
+      return result;
+    }, <Record<string, Reservation[]>>{});
 });
 
 function getBoatBlocks(scope: DayBodyScope): Interval[] {
@@ -189,9 +200,7 @@ function getBoatBlocks(scope: DayBodyScope): Interval[] {
 }
 function getBoatReservations(scope: DayBodyScope): Reservation[] {
   const boat = boats.value[scope.columnIndex];
-  return boat
-    ? reservationStore.getReservationsByDate(getDate(scope.timestamp), boat.$id)
-    : [];
+  return boat ? boatReservations.value[boat.$id] : [];
 }
 
 // function changeEvent({ start }: { start: string }) {