vue-meeting-selector

vue-meeting-selector

A fully-typed, accessible and customizable Vue component for displaying and selecting meeting slots grouped by day. Includes pagination, multi-selection, and render customization support.

• github
• doc

Dependencies

• vue: 3.x

Installation

# npm
npm install vue-meeting-selector
# pnpm
pnpm add vue-meeting-selector
# yarn
yarn add vue-meeting-selector

Exemple

<template>
  <div>
    <MeetingSelector
      v-model="meeting"
      v-model:skip="skip"
      :date="date"
      :meetings-by-days="meetingsDays"
      date-field-key="date"
      meeting-slots-key="slots"
      @next-date="nextDate"
      @previous-date="previousDate"
    />
    Meeting selected: {{ meeting }}
  </div>
</template>

<script setup lang="ts">
  import {
    MeetingSelector,
    generateMeetingsByDays,
    type MeetingsByDayGenerated,
    type MeetingSlotGenerated,
    type Time,
  } from 'vue-meeting-selector';
  import 'vue-meeting-selector/style.css';
  import { ref } from 'vue';

  const nbDaysToDisplay = 5;
  const date = ref(new Date());
  const meetingsDays = ref<MeetingsByDayGenerated[]>([]);
  const skip = ref(0);

  const meeting = ref<MeetingSlotGenerated | null>(null);
  const loading = ref(true);

  const nextDate = () => {
    loading.value = true;
    const start: Time = {
      hours: 8,
      minutes: 0,
    };
    const end: Time = {
      hours: 16,
      minutes: 0,
    };
    const dateCopy = new Date(date.value);
    const newDate = new Date(dateCopy.setDate(dateCopy.getDate() + 7));
    date.value = newDate;
    meetingsDays.value = generateMeetingsByDays(newDate, nbDaysToDisplay, start, end, 30);
    loading.value = false;
  };

  const previousDate = () => {
    loading.value = true;
    const start: Time = {
      hours: 8,
      minutes: 0,
    };
    const end: Time = {
      hours: 16,
      minutes: 0,
    };
    const dateCopy = new Date(date.value);
    dateCopy.setDate(dateCopy.getDate() - 7);
    const formattingDate = (dateToFormat: Date) => {
      const d = new Date(dateToFormat);
      const day = d.getDate() < 10 ? `0${d.getDate()}` : d.getDate();
      const month = d.getMonth() + 1 < 10 ? `0${d.getMonth() + 1}` : d.getMonth() + 1;
      const year = d.getFullYear();
      return `${year}-${month}-${day}`;
    };
    const newDate =
      formattingDate(new Date()) >= formattingDate(dateCopy) ? new Date() : new Date(dateCopy);
    date.value = newDate;
    meetingsDays.value = generateMeetingsByDays(newDate, nbDaysToDisplay, start, end, 30);
    loading.value = false;
  };

  const start: Time = {
    hours: 8,
    minutes: 0,
  };
  const end: Time = {
    hours: 16,
    minutes: 0,
  };
  meetingsDays.value = generateMeetingsByDays(date.value, nbDaysToDisplay, start, end, 30);
  loading.value = false;
</script>

Props

Utility Functions

generateMeetingsByDays(date, nbDays, startTime, endTime, interval) Creates mock or real meeting slots grouped by day, spaced at regular intervals.

import { generateMeetingsByDays } from 'react-meeting-selector';

Full API Reference

generatePlaceHolder(date, nbDays) Generates an array of empty days with no slots — useful for loading states.

import { generatePlaceHolder } from 'react-meeting-selector';

Full API Reference