Add swipe

src/components/scheduling/boat/BoatScheduleTableComponent.vue

@@ -1,10 +1,10 @@
 <template>
-  <div class="q-px-sm">
+  <div>
     <CalendarHeaderComponent v-model="selectedDate" />
     <div class="boat-schedule-table-component">
       <QCalendarDay
         ref="calendar"
-        class="q-pt-xs"
+        class="q-pa-xs"
         flat
         animated
         dense
@@ -16,6 +16,7 @@
         v-model="selectedDate"
         :column-count="boats.length"
         @change="scrollToEvent()"
+        v-touch-swipe.left.right="handleSwipe"
       >
         <template #head-day="{ scope }">
           <div style="text-align: center; font-weight: 800">
@@ -56,6 +57,7 @@ import CalendarHeaderComponent from './CalendarHeaderComponent.vue';
 import { ref, reactive, computed } from 'vue';
 import { useBoatStore } from 'src/stores/boat';
 import { Timeblock, useScheduleStore } from 'src/stores/schedule';
+import { TouchSwipeValue } from 'quasar';
 
 const scheduleStore = useScheduleStore();
 const boatStore = useBoatStore();
@@ -69,6 +71,9 @@ const boats = boatStore.boats;
 
 const calendar = ref<QCalendarDay | null>(null);
 
+function handleSwipe(event: Event) {
+  event.direction === 'right' ? calendar.value?.prev() : calendar.value?.next();
+}
 function blockStyles(
   block: Timeblock,
   timeStartPos: (t: string) => string,