# Time Slot Scheduler
URL: /docs/web/components/time-slot-scheduler

Time Slot Scheduler component.

**Demo:**

```tsx
'use client';

import { TimeSlotScheduler } from '@docyrus/ui/components/time-slot-scheduler';

import { getTimeSlotSchedulerData } from '@/data/time-slot-scheduler-data';

export function TimeSlotSchedulerDemo() {
  const {
    user, event, reservations, unavailableSlots, timezones
  }
    = getTimeSlotSchedulerData();

  return (
    <div className="overflow-x-auto">
      <div className="min-w-225">
        <TimeSlotScheduler
          user={user}
          event={event}
          reservations={reservations}
          unavailableSlots={unavailableSlots}
          timezones={timezones}
          defaultTimezone="America/New_York"
          slotCapacity={3}
          showReservationDetail
          onSelect={(slot) => {
            console.info('Selected slot:', slot);
          }} />
      </div>
    </div>
  );
}
```

## Installation

```bash
pnpm dlx @docyrus/cli add @docyrus/ui-time-slot-scheduler
```

**Dependencies:**
- [date-fns](https://www.npmjs.com/package/date-fns)
- [lucide-react](https://www.npmjs.com/package/lucide-react)
- [class-variance-authority](https://www.npmjs.com/package/class-variance-authority)

## Usage

```tsx
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";

```

## 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` | — |