Time Slot Picker
Pick available time slots with grid display
SaaSCalendar
Overview
TimeSlotPicker displays a grid of time slots with availability status (available, busy, blocked). Users can select an available slot for booking. Includes an optional legend and supports custom labels for i18n.
Usage
import { TimeSlotPicker } from "@leanicon/web-builder-library/saas";
const slots = [
{ startTime: "2026-03-25T09:00:00Z", endTime: "2026-03-25T09:30:00Z", status: "available" },
{ startTime: "2026-03-25T09:30:00Z", endTime: "2026-03-25T10:00:00Z", status: "busy" },
{ startTime: "2026-03-25T10:00:00Z", endTime: "2026-03-25T10:30:00Z", status: "available" },
];
<TimeSlotPicker
slots={slots}
date={new Date().toISOString()}
onSelect={(slot) => console.log("Selected:", slot)}
/>;Variants
Default
Friday, October 2, 2026(Today)
2 of 4 slots available
Available
Busy
Blocked
Selected
Default (Dark)
Friday, October 2, 2026(Today)
2 of 3 slots available
Available
Busy
Blocked
Selected
Loading
Friday, October 2, 2026(Today)
0 of 0 slots available
Available
Busy
Blocked
Selected
Loading time slots...
No Slots
Friday, October 2, 2026(Today)
0 of 0 slots available
Available
Busy
Blocked
Selected
No time slots available
All Busy
Friday, October 2, 2026(Today)
0 of 3 slots available
Available
Busy
Blocked
Selected
Hidden Legend
Friday, October 2, 2026(Today)
2 of 2 slots available
Custom Labels (Spanish)
Friday, October 2, 2026(Today)
1 of 2 slots available
Libre
Ocupado
Bloqueado
Seleccionado
Props
| Name | Type | Default | Required | Description |
|---|---|---|---|---|
slots | TimeSlot[] | — | Yes | Available time slots |
value | TimeSlot | null | — | No | Currently selected slot (controlled) |
selectedSlot | TimeSlot | null | — | No | Alias for value - currently selected slot |
defaultValue | TimeSlot | null | — | No | Default selected slot (uncontrolled) |
loading | boolean | false | No | Whether picker is in loading state |
disabled | boolean | false | No | Whether picker is disabled |
date | string | — | Yes | Date being displayed (ISO string) |
is24Hour | boolean | false | No | Use 24-hour time format |
slotDurationMinutes | number | 30 | No | Slot duration in minutes (for display) |
dayStartHour | number | 9 | No | Start hour of day (0-23) |
dayEndHour | number | 17 | No | End hour of day (0-23) |
columns | number | 4 | No | Number of columns in grid |
showLegend | boolean | true | No | Whether to show the status legend |
labels | TimeSlotPickerLabels | — | No | Custom labels for the picker UI |
className | string | — | No | Custom class name |
onSelect | ((slot: TimeSlot | null) => void) | — | No | Called when a slot is selected |
onDateChange | ((date: string) => void) | — | No | Called when date changes (for navigation) |