Time Select

src/pages/schedule/BoatScheduleView.vue

@@ -4,63 +4,96 @@
       <!-- <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-day="onClickHeadDay"
         >
-          <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, timeStartPos, timeDurationHeight },
+            }"
           >
-            <template #day-body="{ scope: { timestamp } }">
-              <template
-                v-for="event in scheduleStore.getBoatReservations(
-                  makeDateTime(timestamp)
-                )"
-                :key="event.id"
+            <template
+              v-for="event in reservationEvents(timestamp)"
+              :key="event.id"
+            >
+              <div
+                v-if="event.start !== undefined"
+                class="booking-event"
+                :style="slotStyle(event, timeStartPos, timeDurationHeight)"
               >
-                {{ 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>
+                <span class="title q-calendar__ellipsis">
+                  {{ event.user }}
+                  <q-tooltip>{{
+                    event.start + ' - ' + event.resource.name
+                  }}</q-tooltip>
+                </span>
+              </div>
             </template>
-          </q-calendar-day>
-        </div>
+          </template>
+        </q-calendar-day>
       </div>
     </div>
   </q-page>
 </template>
 
 <script setup lang="ts">
-import { useScheduleStore } from 'src/stores/schedule';
+import { Reservation, useScheduleStore } from 'src/stores/schedule';
 import { ref } from 'vue';
 const scheduleStore = useScheduleStore();
-import { makeDateTime, today } from '@quasar/quasar-ui-qcalendar';
+import {
+  TimestampOrNull,
+  makeDateTime,
+  makeDate,
+  parseDate,
+  today,
+} from '@quasar/quasar-ui-qcalendar';
 import { QCalendarDay } from '@quasar/quasar-ui-qcalendar';
+import { date } from 'quasar';
+import { Timestamp } 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 slotStyle(
+  event: Reservation,
+  timeStartPos: (time: TimestampOrNull) => string,
+  timeDurationHeight: (minutes: number) => string
+) {
+  const s = {
+    top: '',
+    height: '',
+    'align-items': 'flex-start',
+  };
+  if (timeStartPos && timeDurationHeight) {
+    s.top = timeStartPos(parseDate(event.start)) + 'px';
+    s.height =
+      timeDurationHeight(date.getDateDiff(event.end, event.start, 'minutes')) +
+      'px';
+  }
+  return s;
+}
+
+function reservationEvents(timestamp: Timestamp) {
+  return scheduleStore.getBoatReservations(timestamp);
+}
+
 function onToday() {
   calendarRef.value.moveToToday();
 }
@@ -85,10 +118,28 @@ function onClickTime(data) {
 function onClickInterval(data) {
   console.log('onClickInterval', data);
 }
-function onClickHeadIntervals(data) {
-  console.log('onClickHeadIntervals', data);
-}
 function onClickHeadDay(data) {
   console.log('onClickHeadDay', data);
 }
 </script>
+
+<style lang="sass" scoped>
+.booking-event
+  position: absolute
+  font-size: 12px
+  justify-content: space-evenly
+  margin: 0 1px
+  text-overflow: ellipsis
+  overflow: hidden
+  color: white
+  max-width: 100%
+  background: #027BE3FF
+  cursor: pointer
+
+.title
+  position: relative
+  display: flex
+  justify-content: center
+  align-items: center
+  height: 100%
+</style>