# nylas-timeslot-picker

Source: https://developer.nylas.com/docs/reference/ui/timeslot-picker/

The `nylas-timeslot-picker` component is a UI component that allows users to select a timeslot from a list of available timeslots.

## Overview

- **Tag**: `<nylas-timeslot-picker>`
- **Encapsulation**: shadow

## Installation

### HTML / Web Component

```html
<script type="module" src="https://cdn.jsdelivr.net/npm/@nylas/web-elements/dist/cdn/nylas-web-elements/nylas-web-elements.esm.js"></script>
```

### React

```bash
npm install @nylas/react
```

## Usage

### HTML

```html
<nylas-timeslot-picker></nylas-timeslot-picker>
```

### React

```jsx
import { NylasTimeslotPicker } from '@nylas/react';

export default function Example() {
  return <NylasTimeslotPicker />;
}
```

## Props

| Property | Attribute | Type | Default | Required | Description |
| --- | --- | --- | --- | --- | --- |
| `availability` | `availability` | AvailabilityTimeslot[] \| undefined | - | No | The available timeslots to display for selection. |
| `hour12` | `hour-1-2` | boolean \| undefined | - | No | Whether to display times in 12-hour format. When undefined, uses locale default. |
| `isLoading` | `loading-state` | boolean \| undefined | - | No | Whether the component is in a loading state. Displays skeleton UI when true. |
| `selectedDate` | `selected-date` | Date \| undefined | `new Date()` | No | The date for which to show available timeslots. |
| `selectedLanguage` | `selected-language` | string \| undefined | - | No | The selected language for i18n. Controls time format localization. |
| `selectedTimeslot` | `selected-timeslot` | undefined \| { start_time: Date; end_time: Date; emails?: string[] \| undefined; capacity?: number \| undefined; event_id?: string \| undefined; master_id?: string \| undefined; calendar_id?: string \| undefined; } | - | No | The currently selected timeslot. Controls which timeslot appears highlighted. |
| `selectedTimezone` | `selected-timezone` | string | `Intl.DateTimeFormat().resolvedOptions().timeZone` | No | The IANA timezone identifier for time display (e.g., 'America/New_York'). |
| `themeConfig` | `theme-config` | any | - | No | Theme configuration object for custom styling. Keys are CSS custom property names. |

## Events

| Event | Detail | Description |
| --- | --- | --- |
| `timeslotConfirmed` | { timeslot: Timeslot; host: HTMLNylasTimeslotPickerElement; } | This event is fired when a timeslot is confirmed. By default, this will proceed to the booking form page. |
| `timeslotSelected` | { start_time: Date; end_time: Date; emails?: string[] \| undefined; capacity?: number \| undefined; event_id?: string \| undefined; master_id?: string \| undefined; calendar_id?: string \| undefined; } | This event is fired when a timeslot is selected. |
| `validateTimeslotError` | { error: string; type: "error" \| "info"; } |  |

## Methods

### `emitValidateTimeslotError`

**Signature**: `emitValidateTimeslotError(error: string, type: "error" | "info") => Promise<void>`

**Returns**: `Promise<void>`

## Slots

| Slot | Description |
| --- | --- |
| `timeslot-picker-cta-label` | The label for the timeslot picker CTA. Default is "Next". |

## CSS shadow parts

| Part | Description |
| --- | --- |
| `ntp` | The timeslot picker component. |
| `ntp__button-primary` | The timeslot picker CTA. |
| `ntp__time-label` |  |
| `ntp__time-picker-wrapper` | The timeslot picker wrapper. |
| `ntp__timeslot` | The timeslot button. |
| `ntp__timeslot--selected` | The selected timeslot button. |
| `ntp__timeslots` | The timeslot picker timeslots. |

## Dependencies

This component uses the following child components:

- [`<button-component>`](/docs/reference/ui/button-component/)

## Used by

This component is used inside:

- [`<nylas-scheduling>`](/docs/reference/ui/scheduling/)