bab-app/src/pages/schedule/BoatScheduleView.vue

<template>
  <q-page padding>
    <div class="subcontent">
      <!-- <navigation-bar @today="onToday" @prev="onPrev" @next="onNext" /> -->

      <div class="row justify-center">
        <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"
        >
          <template
            #day-body="{
              scope: { timestamp, timeStartPos, timeDurationHeight },
            }"
          >
            <template
              v-for="event in reservationEvents(timestamp)"
              :key="event.id"
            >
              <div
                v-if="event.start !== undefined"
                class="booking-event"
                :style="slotStyle(event, timeStartPos, timeDurationHeight)"
              >
                <span class="title q-calendar__ellipsis">
                  {{ event.user }}
                  <q-tooltip>{{
                    event.start + ' - ' + event.resource.name
                  }}</q-tooltip>
                </span>
              </div>
            </template>
          </template>
        </q-calendar-day>
      </div>
    </div>
  </q-page>
</template>

<script setup lang="ts">
import { Reservation, useScheduleStore } from 'src/stores/schedule';
import { ref } from 'vue';
const scheduleStore = useScheduleStore();
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();
}
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 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>