Booking Slots

Meeting booking: calendar, slots in the guest’s time zone, form and confirmation. Pro · Work and teams › Planning

Installation

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';

Props

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.

Related components

Calendar View — Event calendar
Scheduler — Scheduler: day, week, month and resource timeline, drag and drop, recurrence
Kanban Board — Task board
Gantt Chart — Gantt charts with dependencies and drag to reschedule
CRM Pipeline — Deal pipeline: stages, amounts and probabilities, drag between stages
Approval Flow — Multi-stage approvals: sequential and parallel stages, decisions with reasons, history
Goal Tracker — OKRs: objectives and key results, statuses, confidence, check-ins with history
Onboarding Checklist — Onboarding checklist: progress, hints with CTAs, dismissal and celebration
Course Path Navigator — Course map: modules, locks, progress and skills, a list on narrow screens
Team Members — Team members: roles, email invites, pending invitations, seat count
Org Chart — Org chart: zoomable, pannable tree with search and collapsible branches
Activity Feed — Activity feed

Previous: Gantt Chart · Next: CRM Pipeline · All Work and teams