Clean up all kinds of typescript issues

src/components/scheduling/boat/BoatScheduleTableComponent.vue

@@ -15,7 +15,6 @@
         :short-interval-label="true"
         v-model="selectedDate"
         :column-count="boatData.length"
-        @change="changeEvent"
         v-touch-swipe.left.right="handleSwipe"
       >
         <template #head-day="{ scope }">
@@ -71,15 +70,13 @@ import {
   parseTimestamp,
   parseDate,
   addToDate,
-  makeDateTime,
 } from '@quasar/quasar-ui-qcalendar';
 import CalendarHeaderComponent from './CalendarHeaderComponent.vue';
 
 import { ref, computed, onMounted } from 'vue';
-import { Boat, useBoatStore } from 'src/stores/boat';
+import { useBoatStore } from 'src/stores/boat';
 import { useScheduleStore } from 'src/stores/schedule';
-import { Reservation, Timeblock } from 'src/stores/schedule.types';
-import { date } from 'quasar';
+import { Timeblock } from 'src/stores/schedule.types';
 
 const scheduleStore = useScheduleStore();
 const boatStore = useBoatStore();
@@ -98,18 +95,18 @@ onMounted(async () => {
 function handleSwipe({ ...event }) {
   event.direction === 'right' ? calendar.value?.prev() : calendar.value?.next();
 }
-function reservationStyles(
-  reservation: Reservation,
-  timeStartPos: (t: string) => string,
-  timeDurationHeight: (d: number) => string
-) {
-  return genericBlockStyle(
-    parseDate(reservation.start) as Timestamp,
-    parseDate(reservation.end) as Timestamp,
-    timeStartPos,
-    timeDurationHeight
-  );
-}
+// function reservationStyles(
+//   reservation: Reservation,
+//   timeStartPos: (t: string) => string,
+//   timeDurationHeight: (d: number) => string
+// ) {
+//   return genericBlockStyle(
+//     parseDate(reservation.start) as Timestamp,
+//     parseDate(reservation.end) as Timestamp,
+//     timeStartPos,
+//     timeDurationHeight
+//   );
+// }
 
 function blockStyles(
   block: Timeblock,
@@ -190,33 +187,33 @@ function getBoatBlocks(scope: DayBodyScope): Timeblock[] {
     : [];
 }
 
-function changeEvent({ start }: { start: string }) {
-  // const newBlocks = scheduleStore.getTimeblocksForDate(start);
-  // const reservations = scheduleStore.getBoatReservations(
-  //   parsed(start) as Timestamp
-  // );
-  // boatData.value.map((boat) => {
-  //   boat.reservations = reservations.filter(
-  //     (reservation) => reservation.resource === boat
-  //   );
-  //   boat.blocks = newBlocks.filter(
-  //     (block) =>
-  //       block.boatId === boat.$id &&
-  //       boat.reservations?.filter(
-  //         (r: Reservation) =>
-  //           r.start <
-  //             date.addToDate(makeDateTime(parsed(block.end) as Timestamp), {
-  //               hours: 4,
-  //             }) &&
-  //           r.end >
-  //             date.addToDate(makeDateTime(parsed(block.start) as Timestamp), {
-  //               hours: 4,
-  //             })
-  //       ).length == 0
-  //   );
-  // });
-  // setTimeout(() => calendar.value?.scrollToTime('09:00'), 100); // Should figure out why we need this setTimeout...
-}
+// function changeEvent({ start }: { start: string }) {
+// const newBlocks = scheduleStore.getTimeblocksForDate(start);
+// const reservations = scheduleStore.getBoatReservations(
+//   parsed(start) as Timestamp
+// );
+// boatData.value.map((boat) => {
+//   boat.reservations = reservations.filter(
+//     (reservation) => reservation.resource === boat
+//   );
+//   boat.blocks = newBlocks.filter(
+//     (block) =>
+//       block.boatId === boat.$id &&
+//       boat.reservations?.filter(
+//         (r: Reservation) =>
+//           r.start <
+//             date.addToDate(makeDateTime(parsed(block.end) as Timestamp), {
+//               hours: 4,
+//             }) &&
+//           r.end >
+//             date.addToDate(makeDateTime(parsed(block.start) as Timestamp), {
+//               hours: 4,
+//             })
+//       ).length == 0
+//   );
+// });
+// setTimeout(() => calendar.value?.scrollToTime('09:00'), 100); // Should figure out why we need this setTimeout...
+// }
 
 const disabledBefore = computed(() => {
   const todayTs = parseTimestamp(today()) as Timestamp;

src/components/scheduling/boat/CalendarHeaderComponent.vue

@@ -57,7 +57,7 @@ import { ref, reactive, computed } from 'vue';
 
 const selectedDate = defineModel<string>();
 
-const weekdays = reactive([0, 1, 2, 3, 4, 5, 6]),
+const weekdays = reactive([1, 2, 3, 4, 5, 6, 0]),
   locale = ref('en-CA'),
   monthFormatter = monthFormatterFunc(),
   dayFormatter = dayFormatterFunc(),
@@ -124,8 +124,14 @@ function dayClass(day: Timestamp) {
 }
 
 function monthFormatterFunc() {
-  const longOptions = { timeZone: 'UTC', month: 'long' };
-  const shortOptions = { timeZone: 'UTC', month: 'short' };
+  const longOptions: Intl.DateTimeFormatOptions = {
+    timeZone: 'UTC',
+    month: 'long',
+  };
+  const shortOptions: Intl.DateTimeFormatOptions = {
+    timeZone: 'UTC',
+    month: 'short',
+  };
 
   return createNativeLocaleFormatter(locale.value, (_tms, short) =>
     short ? shortOptions : longOptions
@@ -133,17 +139,28 @@ function monthFormatterFunc() {
 }
 
 function weekdayFormatterFunc() {
-  const longOptions = { timeZone: 'UTC', weekday: 'long' };
-  const shortOptions = { timeZone: 'UTC', weekday: 'short' };
-
+  const longOptions: Intl.DateTimeFormatOptions = {
+    timeZone: 'UTC',
+    weekday: 'long',
+  };
+  const shortOptions: Intl.DateTimeFormatOptions = {
+    timeZone: 'UTC',
+    weekday: 'short',
+  };
   return createNativeLocaleFormatter(locale.value, (_tms, short) =>
     short ? shortOptions : longOptions
   );
 }
 
 function dayFormatterFunc() {
-  const longOptions = { timeZone: 'UTC', day: '2-digit' };
-  const shortOptions = { timeZone: 'UTC', day: 'numeric' };
+  const longOptions: Intl.DateTimeFormatOptions = {
+    timeZone: 'UTC',
+    day: '2-digit',
+  };
+  const shortOptions: Intl.DateTimeFormatOptions = {
+    timeZone: 'UTC',
+    day: 'numeric',
+  };
 
   return createNativeLocaleFormatter(locale.value, (_tms, short) =>
     short ? shortOptions : longOptions