TimeSlotScheduler

Installation

pnpm dlx @docyrus/cli add @docyrus/rn-time-slot-scheduler

pnpm add date-fns

Usage

import { TimeSlotScheduler } from '@/components/docyrus-native/time-slot-scheduler';
import type { SlotSelectPayload, TimeSlotReservation } from '@/components/docyrus-native/time-slot-scheduler';

const reservations: TimeSlotReservation[] = [
  { id: 'r1', name: 'Ayşe Demir', email: 'ayse@example.com', startTime: '2026-09-24T10:00:00.000Z', endTime: '2026-09-24T10:30:00.000Z' },
];

const [slot, setSlot] = useState<SlotSelectPayload | null>(null);

<TimeSlotScheduler
  startTime="09:00"
  endTime="17:00"
  slotSize={30}
  slotCapacity={3}
  reservations={reservations}
  unavailableSlots={[{ day: '1', startTime: '12:00', endTime: '13:00' }]}
  user={{ fullName: 'Erhan Erdoğan', email: 'erhan@example.com' }}
  event={{ subject: 'Product demo', duration: '30 min', location: 'Google Meet' }}
  timezones={[{ value: 'Europe/Istanbul', label: 'Istanbul', offset: 'GMT+3' }]}
  defaultTimezone="Europe/Istanbul"
  showReservationDetail
  selectedSlot={slot}
  onSelect={setSlot}
/>

Multiple selection (native-only)

const [slots, setSlots] = useState<SlotSelectPayload[]>([]);

<TimeSlotScheduler
  selectionMode="multiple"
  selectedSlots={slots}
  onSelectionChange={setSlots}
/>

Behavior

• Slot generation — slots are generated from startTime → endTime in slotSize steps (shared logic with web: lib/time-slot-utils.ts). Each slot gets a status: available, partial (some capacity used), full, unavailable (inside an unavailableSlots range), past, or disabled (outside minDate / maxDate), plus a disabledReason.
• Columns mode — the week (Monday start, weekends only when showSaturday / showSunday) as a horizontally paged day list: 3 day columns per page in portrait, 5 in landscape, or columnsPerPage. The header navigates week by week and has a Today button.
• Month mode — the native MiniCalendar with a dot on every day that still has an available or partial slot, and the picked day's slot list below it. Month navigation is handled by the calendar itself. The list always shows a day (the anchor date until another day is picked), unlike web which shows a "select a day" prompt.
• Selecting — tap an enabled slot to select it (onSelect with an ISO SlotSelectPayload). In selectionMode="multiple" a tap toggles the slot and onSelectionChange receives the full selection.
• Reservations — with showReservationDetail, long-press a slot to open a bottom sheet listing its reservations (web: popover). Tapping a disabled slot opens the same sheet with the disabled reason (web: tooltip).
• Summary card — user, event and timezones render in a collapsible header card (web: sidebar). The timezone select only reports the value (onTimezoneChange); slot times are not converted, same as web.
• Formatting — slot times use useDateFormat().formatTime when a DateFormatProvider / DocyrusTenantProvider is mounted, otherwise the web h:mm AM format. All copy goes through useUiTranslation() with the web ui.timeSlot.* keys.

API Reference

TimeSlotReservation

UnavailableRange

SchedulerUser

SchedulerEvent

TimezoneOption

SlotSelectPayload

TimeSlot / DaySlots

TimeSlot is the generated slot (id, day, startTime, endTime, startISO, endISO, status: SlotStatus, disabledReason?: DisabledReason, capacity, reservationCount, remainingCapacity, reservations). DaySlots groups a day's slots (date, dayLabel, dateLabel, fullLabel, isToday, isWeekend, slots, hasAvailability).

Translation keys

ui.timeSlot.previousWeek, ui.timeSlot.nextWeek, ui.common.today, ui.timeSlot.columnsView, ui.timeSlot.monthView, ui.timeSlot.duration, ui.timeSlot.location, ui.timeSlot.timezone, ui.timeSlot.selectTimezone, ui.timeSlot.noSlotsAvailable, ui.timeSlot.of, ui.timeSlot.booked, ui.timeSlot.pastSlot, ui.timeSlot.full, ui.timeSlot.unavailable, ui.timeSlot.beforeMinDate, ui.timeSlot.afterMaxDate — the same keys as the web component.

Type Exports