Components
Client Only
Installation
pnpm dlx @docyrus/cli add @docyrus/ui-time-slot-schedulerRequired Packages(1 package)
pnpm add date-fnsUI Primitives(8 components)
npx shadcn@latest add avatar button popover scroll-area select separator toggle-group tooltipUsage
import {
TimeSlotScheduler
} from "@docyrus/ui/components/time-slot-scheduler";
import type {
DaySlots,
DisabledReason,
SchedulerEvent,
SchedulerUser,
SlotSelectPayload,
SlotStatus,
TimeSlot,
TimeSlotReservation,
TimeSlotSchedulerMode,
TimeSlotSchedulerProps,
TimezoneOption,
UnavailableRange
} from "@docyrus/ui/components/time-slot-scheduler";
<TimeSlotScheduler />API Reference
| Prop | Type | Default |
|---|---|---|
className | string | — |
Components
| Component | Description |
|---|---|
TimeSlotScheduler | Public export |
TimeSlotSchedulerProvider | Internal — time-slot-scheduler-context.tsx |
Type Exports
| Type | Description |
|---|---|
DaySlots | — |
DisabledReason | — |
SchedulerEvent | — |
SchedulerUser | — |
SlotSelectPayload | — |
SlotStatus | — |
TimeSlot | — |
TimeSlotReservation | — |
TimeSlotSchedulerMode | — |
TimeSlotSchedulerProps | — |
TimezoneOption | — |
UnavailableRange | — |
Type Reference
DaySlots
| Field | Type | Description |
|---|---|---|
date | Date | — |
dayLabel | string | — |
dateLabel | string | — |
fullLabel | string | — |
isToday | boolean | — |
isWeekend | boolean | — |
slots | Array<TimeSlot> | — |
hasAvailability | boolean | — |
DisabledReason
"past" | "full" | "unavailable" | "before-min-date" | "after-max-date"
SchedulerEvent
| Field | Type | Description |
|---|---|---|
subject | string | — |
duration | string | — |
location | string | — |
description | string | — |
icon | ReactNode | — |
SchedulerUser
| Field | Type | Description |
|---|---|---|
fullName | string | — |
email | string | — |
avatarUrl | string | — |
SlotSelectPayload
| Field | Type | Description |
|---|---|---|
day | Date | — |
startTime | string | — |
endTime | string | — |
startISO | string | — |
endISO | string | — |
capacity | number | — |
reservationCount | number | — |
remainingCapacity | number | — |
reservations | Array<TimeSlotReservation> | — |
SlotStatus
"available" | "partial" | "full" | "unavailable" | "past" | "disabled"
TimeSlot
| Field | Type | Description |
|---|---|---|
id | string | — |
name | string | — |
email | string | — |
avatarUrl | string | — |
startTime | string | — |
endTime | string | — |
TimeSlotReservation
| Field | Type | Description |
|---|---|---|
id | string | — |
name | string | — |
email | string | — |
avatarUrl | string | — |
startTime | string | — |
endTime | string | — |
TimeSlotSchedulerMode
"columns" | "month"
TimeSlotSchedulerProps
| Field | Type | Description |
|---|---|---|
startTime | string | — |
endTime | string | — |
slotSize | number | — |
slotCapacity | number | — |
reservations | Array<TimeSlotReservation> | — |
unavailableSlots | Array<UnavailableRange> | — |
user | SchedulerUser | — |
event | SchedulerEvent | — |
mode | TimeSlotSchedulerMode | — |
defaultMode | TimeSlotSchedulerMode | — |
onModeChange | (mode: TimeSlotSchedulerMode) => void | — |
defaultDate | Date | — |
minDate | Date | — |
maxDate | Date | — |
showSaturday | boolean | — |
showSunday | boolean | — |
timezone | string | — |
defaultTimezone | string | — |
timezones | Array<TimezoneOption> | — |
onTimezoneChange | (tz: string) => void | — |
showReservationDetail | boolean | — |
selectedSlot | SlotSelectPayload | null | — |
defaultSelectedSlot | SlotSelectPayload | null | — |
onSelect | (payload: SlotSelectPayload) => void | — |
className | string | — |
TimezoneOption
| Field | Type | Description |
|---|---|---|
value | string | — |
label | string | — |
offset | string | — |
UnavailableRange
| Field | Type | Description |
|---|---|---|
day | string | — |
startTime | string | — |
endTime | string | — |