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.
npm install vue-meeting-selectorA fully-typed, accessible and customizable Vue component for displaying and selecting meeting slots grouped by day. Includes pagination, multi-selection, and render customization support.
- vue: 3.x
``bash`npm
npm install vue-meeting-selectorpnpm
pnpm add vue-meeting-selectoryarn
yarn add vue-meeting-selector
`html
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 }}
`
| Prop | Type | Default | Required | Description |
| ----------------- | -------------------------- | ------- | -------- | ---------------------------------------------------------- |
| meetingsByDays | MDay[] | — | true | List of grouped meeting slots by day. |dateFieldKey
| | DateFieldKey | — | true | The key used to extract the slot date (e.g., 'startAt'). |meetingSlotsKey
| | MeetingSlotsKey | — | true | The key used to extract the list of slots of the day. |date
| | Date | — | true | The currently selected or reference date. |modelValue
| | MSlot \| MSlot[] \| null | — | true | Selected slot(s), used with v-model. |multi
| | boolean | false | false | Enables multiple slot selection. |calendarOptions
| | CalendarOptions | {} | false | Configuration options for calendar display. |loading
| | boolean | false | false | Whether the calendar is in a loading state. |skip
| | number | -1 | false | Number of slot rows to skip. Useful for pagination. |
generateMeetingsByDays(date, nbDays, startTime, endTime, interval)
Creates mock or real meeting slots grouped by day, spaced at regular intervals.
`typescript`
import { generateMeetingsByDays } from 'react-meeting-selector';
generatePlaceHolder(date, nbDays)
Generates an array of empty days with no slots — useful for loading states.
`typescript``
import { generatePlaceHolder } from 'react-meeting-selector';