Booking Slots

Запись на встречу: календарь, слоты в часовом поясе гостя, форма и подтверждение. Pro · Работа и команды › Планирование

Установка

npx valyro-cli@latest login
npx valyro-cli@latest add booking-slots

npm install valyro-ui-pro

import 'valyro-ui-pro/styles.css';
import { BookingSlots } from 'valyro-ui-pro';

Пропсы

Prop	Type	Default
`title` *	`ReactNode`		Event name, e.g. "Product demo".
`description`	`ReactNode`		Event details in the side panel, under the duration, location and time zone.
`host`	`{ name: string; src?: string; title?: string }`		Person you meet with: avatar, name and job title above the event name.
`location`	`ReactNode`		Where the meeting happens, e.g. "Google Meet".
`availability` *	`WeeklyAvailability`		Working hours per weekday in `hostTimeZone`.
`hostTimeZone` *	`string`		IANA zone the availability is written in.
`overrides`	`Record<string, AvailabilityInterval[]>`		Host-local dates ("YYYY-MM-DD") with custom hours; an empty list is a day off.
`busy`	`BusyInterval[]`		Existing meetings and other busy time.
`durations`	`number[]`	`[30]`	Meeting lengths to choose from, in minutes. Default [30].
`duration`	`number`		Controlled `duration`; use with `onDurationChange`.
`defaultDuration`	`number`		Initial `duration` when uncontrolled.
`onDurationChange`	`(minutes: number) => void`		Called with the new `duration` when it changes.
`interval`	`number`		Minutes between slot starts. Defaults to the duration.
`bufferBefore`	`number`		Free minutes required before a slot; slots closer than this after a `busy` interval are hidden.
`bufferAfter`	`number`		Free minutes required after a slot; slots ending closer than this before a `busy` interval are hidden.
`minNotice`	`number`	`240`	Earliest bookable start in minutes from now. Default 240 (4 hours).
`bookingWindow`	`number`	`60`	How many days ahead can be booked. Default 60.
`timeZone`	`string`		The visitor's IANA zone. Defaults to the browser's.
`defaultTimeZone`	`string`		Initial `timeZone` when uncontrolled.
`onTimeZoneChange`	`(timeZone: string) => void`		Called with the new `timeZone` when it changes.
`defaultHourCycle`	`'h12' \| 'h23'`		Clock shown first; the visitor can switch. Default from the locale.
`date`	`Date \| null`		Selected day (a local date, like the calendar's), or null for none.
`defaultDate`	`Date \| 'first-available' \| null`		Day selected at first. `'first-available'`: the earliest day with open times in the month shown, until the visitor picks a day, so the times show straight away. Default none.
`onDateChange`	`(date: Date \| null) => void`		Called with the new `date` when it changes.
`defaultSlot`	`Date \| 'first-available' \| null`		Time selected at first. `'first-available'`: the first open time of the selected day, until the visitor picks one.
`defaultStep`	`'pick' \| 'details'`	`'pick'`	Step shown first: `details` opens on the form for the selected time (falls back to `pick` without one).
`onBook`	`(booking: BookingRequest) => unknown`		Books the slot. May return a promise; a rejection keeps the form open with an error.
`now`	`Date`		Current time, for slot cut-offs. Default `new Date()`.
`locale`	`string`		BCP 47 locale for numbers and dates; defaults to the ThemeProvider's, then the browser's.
`labels`	`Partial<BookingSlotsLabels>`		Overrides for the built-in English text; keys left out keep their defaults.

Booking Slots

Установка

Пропсы

Похожие компоненты