Visual improvements

src/pages/schedule/BoatScheduleView.vue

@@ -1,44 +1,46 @@
 <template>
   <q-page padding>
-    <div class="subcontent">
-      <navigation-bar @today="onToday" @prev="onPrev" @next="onNext" />
-      <div class="row justify-center">
-        <q-calendar-scheduler
-          ref="calendar"
-          v-model="selectedDate"
-          v-model:model-resources="boatStore.boats"
-          resource-key="$id"
-          resource-label="displayName"
-          :weekdays="[1, 2, 3, 4, 5, 6, 0]"
-          view="week"
-          bordered
-          animated
-          cell-width="150px"
-          day-min-height="50px"
-          @change="onChange"
-          @moved="onMoved"
-          @click-date="onClickDate"
-          @click-time="onClickTime"
-          @click-interval="onClickInterval"
-          @click-head-day="onClickHeadDay"
-        >
-          <template #day="{ scope }">
-            <div v-for="event in boatReservationEvents(scope)" :key="event.id">
-              <div v-if="event.start !== undefined" class="booking-event">
-                <span class="title q-calendar__ellipsis">
-                  {{ useAuthStore().getUserNameById(event.user) }}
-                  <q-tooltip>{{
-                    event.start +
-                    ' - ' +
-                    boatStore.getBoatById(event.resource)?.name
-                  }}</q-tooltip>
-                </span>
-              </div>
+    <q-card class="subcontent">
+      <navigation-bar
+        @today="onToday"
+        @prev="onPrev"
+        @next="onNext" />
+      <q-calendar-scheduler
+        ref="calendar"
+        v-model="selectedDate"
+        v-model:model-resources="boatStore.boats"
+        resource-key="$id"
+        resource-label="displayName"
+        :weekdays="[1, 2, 3, 4, 5, 6, 0]"
+        :view="$q.screen.gt.md ? 'week' : 'day'"
+        bordered
+        animated
+        day-min-height="50px"
+        @change="onChange"
+        @moved="onMoved"
+        @click-date="onClickDate"
+        @click-time="onClickTime"
+        @click-interval="onClickInterval"
+        @click-head-day="onClickHeadDay">
+        <template #day="{ scope }">
+          <div
+            v-for="event in boatReservationEvents(scope)"
+            :key="event.id">
+            <div
+              v-if="event.start !== undefined"
+              class="booking-event">
+              <span class="title q-calendar__ellipsis">
+                {{ useAuthStore().getUserNameById(event.user) }} @
+                {{ renderTime(event.start) }}
+                <q-tooltip>
+                  {{ renderTime(event.start) + ' - ' + renderTime(event.end) }}
+                </q-tooltip>
+              </span>
             </div>
-          </template>
-        </q-calendar-scheduler>
-      </div>
-    </div>
+          </div>
+        </template>
+      </q-calendar-scheduler>
+    </q-card>
   </q-page>
 </template>
 
@@ -53,10 +55,12 @@ import { QCalendarScheduler } from '@quasar/quasar-ui-qcalendar';
 import { Timestamp } from '@quasar/quasar-ui-qcalendar';
 import { Boat, useBoatStore } from 'src/stores/boat';
 import NavigationBar from 'src/components/scheduling/NavigationBar.vue';
+import { useQuasar } from 'quasar';
 
 const selectedDate = ref(today());
 const boatStore = useBoatStore();
 const calendar = ref();
+const $q = useQuasar();
 
 interface DayScope {
   timestamp: Timestamp;
@@ -68,6 +72,10 @@ interface DayScope {
   droppable: boolean;
 }
 
+const renderTime = (dateString: string) => {
+  const date = new Date(dateString);
+  return date.toLocaleTimeString();
+};
 onMounted(() => boatStore.fetchBoats());
 // Method declarations