Updates to selection component

src/components/scheduling/BoatSelection.vue

@@ -1,8 +1,8 @@
 <template>
   <q-card-section style="max-width: 320px">
-    <div class="text-caption text-justify">
+    <div class="text-caption">
-      Use the calendar to pick a date. Tap a box in the grid for the boat and
+      Use the calendar to pick a date. Select an available boat and timeslot
-      start time. Select the duration below.
+      below.
     </div>
     <div
       style="
@@ -48,6 +48,7 @@
           ref="calendar"
           v-model="selectedDate"
           :disabled-before="disabledBefore"
+          :disabled-days="disabledDays()"
           animated
           bordered
           mini-mode
@@ -70,7 +71,9 @@
             <template v-slot:label="opt">
               <div class="row items-center">
                 {{ opt.label }} &nbsp;
-                <span v-if="opt.disable">Reserved by {{ opt.user }}</span>
+                <span class="text-caption" v-if="opt.disable"
+                  >Reserved by {{ opt.user }}</span
+                >
               </div></template
             >
           </q-option-group>
@@ -84,7 +87,7 @@
 import { ref } from 'vue';
 import {
   today,
-  parsed,
+  parseTimestamp,
   addToDate,
   Timestamp,
 } from '@quasar/quasar-ui-qcalendar';
@@ -115,7 +118,7 @@ const formattedMonth = computed(() => {
 });
 
 const disabledBefore = computed(() => {
-  const todayTs = parsed(today()) as Timestamp;
+  const todayTs = parseTimestamp(today()) as Timestamp;
   return addToDate(todayTs, { day: -1 }).date;
 });
 
@@ -134,6 +137,14 @@ function monthFormatter() {
   }
 }
 
+const disabledDays = () => {
+  // Placeholder.  This should actually compute days when boats aren't available.
+  const days = [];
+  const todayTs = parseTimestamp(today()) as Timestamp;
+  days.push(addToDate(todayTs, { day: 2 }).date);
+  return days;
+};
+
 const boatoptions = (boat: Boat) => {
   const options = useScheduleStore()
     .getTimeblocksForDate(date.extractDate(selectedDate.value, 'YYYY-MM-DD'))