Calendar.vue

<template>
  <div class="simple-example">
    <q-card>
      <vue-meeting-selector
        class="simple-example__meeting-selector"
        v-model="meeting"
        :date="date"
        :loading="loading"
        :class-names="classNames"
        :meetings-days="meetingsDays"
        @next-date="nextDate"
        @previous-date="previousDate"
      />
    </q-card>
    <p>
      meeting Selected:
      {{ meeting ? meeting : 'No Meeting selected' }}
    </p>
  </div>
</template>

<script>
import VueMeetingSelector from 'vue-meeting-selector'

export default {
  name: 'Calendar',
  components: {
    VueMeetingSelector
  },
  props: ['available'],
  data() {
    return {
      date: new Date(),
      meetingsDays: [],
      meeting: null,
      loading: true,
      nbDaysToDisplay: 5
    }
  },
  async created() {
    this.loading = true
    this.meetingsDays = await this.getMeetings(this.date)
    this.loading = false
  },
  methods: {
    getMeetings(date) {
      console.log(date)
      return this.available
    },
    async nextDate() {
      console.log('next date')
      this.loading = true
      const date = new Date(this.date)
      date.setDate(date.getDate() + 7)
      this.meetingsDays = await this.getMeetings(date)
      this.date = date
      this.loading = false
    },
    async previousDate() {
      console.log('previous date')
      this.loading = true
      const date = new Date(this.date)
      date.setDate(date.getDate() - 7)
      this.meetingsDays = await this.getMeetings(date)
      this.date = date
      this.loading = false
    }
  },
  computed: {
    classNames() {
      return {
        tabLoading: 'loading-div'
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.simple-example {
  margin-top: 3em;
  &__meeting-selector {
    max-width: 542px;
  }
}
// since our scss is scoped we need to use ::v-deep
::v-deep .loading-div {
  top: 58px !important;
}
</style>

data

available: [
        {
          date: '2021-02-08T01:01:00.000Z',
          slots: [
            {
              date: '2021-02-08T08:00:00.000Z'
            },
            {
              date: '2021-02-08T11:00:00.000Z'
            }
          ]
        },
        {
          date: '2021-02-22T01:01:00.000Z',
          slots: [
            {
              date: '2021-02-22T09:00:00.000Z'
            },
            {
              date: '2021-02-22T12:00:00.000Z'
            }
          ]
        },
        {
          date: '2021-03-01T01:01:00.000Z',
          slots: [
            {
              date: '2021-03-01T09:00:00.000Z'
            },
            {
              date: '2021-03-01T12:00:00.000Z'
            }
          ]
        },
        {
          date: '2021-03-08T01:01:00.000Z',
          slots: [
            {
              date: '2021-03-08T09:00:00.000Z'
            },
            {
              date: '2021-03-08T12:00:00.000Z'
            }
          ]
        }
      ]