Updates to booking

src/pages/schedule/BoatScheduleView.vue

@@ -1,12 +1,94 @@
 <template>
   <q-page padding>
-    <!-- content -->
+    <div class="subcontent">
+      <!-- <navigation-bar @today="onToday" @prev="onPrev" @next="onNext" /> -->
+
+      <div class="row justify-center">
+        <div
+          style="display: flex; max-width: 800px; width: 100%; height: 400px"
+        >
+          <q-calendar-day
+            ref="calendar"
+            v-model="selectedDate"
+            view="day"
+            :max-days="3"
+            bordered
+            animated
+            transition-next="slide-left"
+            transition-prev="slide-right"
+            @change="onChange"
+            @moved="onMoved"
+            @click-date="onClickDate"
+            @click-time="onClickTime"
+            @click-interval="onClickInterval"
+            @click-head-intervals="onClickHeadIntervals"
+            @click-head-day="onClickHeadDay"
+          >
+            <template #day-body="{ scope: { timestamp } }">
+              <template
+                v-for="event in scheduleStore.getBoatReservations(
+                  makeDateTime(timestamp)
+                )"
+                :key="event.id"
+              >
+                {{ timestamp }}
+                <div v-if="event.start !== undefined" class="my-event">
+                  <div class="title q-calendar__ellipsis">
+                    {{ event.user }}
+                    <q-tooltip>{{
+                      event.start + ' - ' + event.resource.name
+                    }}</q-tooltip>
+                  </div>
+                </div>
+              </template>
+            </template>
+          </q-calendar-day>
+        </div>
+      </div>
+    </div>
   </q-page>
 </template>
 
 <script setup lang="ts">
 import { useScheduleStore } from 'src/stores/schedule';
-
+import { ref } from 'vue';
 const scheduleStore = useScheduleStore();
-scheduleStore.loadSampleData();
+import { QCalendarDay, today, makeDateTime } from '@quasar/quasar-ui-qcalendar';
+
+const selectedDate = ref(today());
+
+// Use ref to get a reference to the QCalendarDay component
+const calendarRef = ref(QCalendarDay);
+
+// Method declarations
+function onToday() {
+  calendarRef.value.moveToToday();
+}
+function onPrev() {
+  calendarRef.value.prev();
+}
+function onNext() {
+  calendarRef.value.next();
+}
+function onMoved(data) {
+  console.log('onMoved', data);
+}
+function onChange(data) {
+  console.log('onChange', data);
+}
+function onClickDate(data) {
+  console.log('onClickDate', data);
+}
+function onClickTime(data) {
+  console.log('onClickTime', data);
+}
+function onClickInterval(data) {
+  console.log('onClickInterval', data);
+}
+function onClickHeadIntervals(data) {
+  console.log('onClickHeadIntervals', data);
+}
+function onClickHeadDay(data) {
+  console.log('onClickHeadDay', data);
+}
 </script>