# nylas-specific-time-availability-picker

Source: https://developer.nylas.com/docs/reference/ui/specific-time-availability-picker/

The `nylas-specific-time-availability-picker` component allows selecting specific date/time availability slots.

## Overview

- **Tag**: `<nylas-specific-time-availability-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-specific-time-availability-picker></nylas-specific-time-availability-picker>
```

### React

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

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

## Props

| Property | Attribute | Type | Default | Required | Description |
| --- | --- | --- | --- | --- | --- |
| `defaultTimezone` | `default-timezone` | string | `Intl.DateTimeFormat().resolvedOptions().timeZone` | No | The default timezone or preset timezone. |
| `hideHeader` | `hide-header` | boolean | `false` | No |  |
| `name` | `name` | string | `'specific-time-availability'` | No | The name of the specific date availability picker. |
| `selectedConfiguration` | `selected-configuration` | Configuration \| undefined | - | No |  |
| `selectedLanguage` | `selected-language` | LANGUAGE_CODE.de \| LANGUAGE_CODE.en \| LANGUAGE_CODE.es \| LANGUAGE_CODE.fr \| LANGUAGE_CODE.ja \| LANGUAGE_CODE.ko \| LANGUAGE_CODE.nl \| LANGUAGE_CODE.sv \| LANGUAGE_CODE.zh \| undefined | - | No | The selected language. |
| `showHeader` | `show-header` | boolean | `true` | No | Whether to display the header section. |
| `specificTimesAvailability` | `specific-times-availability` | SpecificTimeAvailability[] \| undefined | - | No | The specific date open hours. |
| `themeConfig` | `theme-config` | undefined \| { '--nylas-primary'?: string \| undefined; '--nylas-info'?: string \| undefined; '--nylas-success'?: string \| undefined; '--nylas-warning'?: string \| undefined; '--nylas-error'?: string \| undefined; '--nylas-error-pressed'?: string \| undefined; '--nylas-base-0'?: string \| undefined; '--nylas-base-25'?: string \| undefined; '--nylas-base-50'?: string \| undefined; '--nylas-base-100'?: string \| undefined; '--nylas-base-200'?: string \| undefined; '--nylas-base-300'?: string \| undefined; '--nylas-base-400'?: string \| undefined; '--nylas-base-500'?: string \| undefined; '--nylas-base-600'?: string \| undefined; '--nylas-base-700'?: string \| undefined; '--nylas-base-800'?: string \| undefined; '--nylas-base-900'?: string \| undefined; '--nylas-base-950'?: string \| undefined; '--nylas-color-blue-50'?: string \| undefined; '--nylas-color-blue-100'?: string \| undefined; '--nylas-color-blue-300'?: string \| undefined; '--nylas-color-blue-500'?: string \| undefined; '--nylas-color-blue-700'?: string \| undefined; '--nylas-color-blue-900'?: string \| undefined; '--nylas-color-red-50'?: string \| undefined; '--nylas-color-red-100'?: string \| undefined; '--nylas-color-red-300'?: string \| undefined; '--nylas-color-red-500'?: string \| undefined; '--nylas-color-red-700'?: string \| undefined; '--nylas-color-red-900'?: string \| undefined; '--nylas-color-green-50'?: string \| undefined; '--nylas-color-green-100'?: string \| undefined; '--nylas-color-green-300'?: string \| undefined; '--nylas-color-green-500'?: string \| undefined; '--nylas-color-green-700'?: string \| undefined; '--nylas-color-green-900'?: string \| undefined; '--nylas-color-yellow-50'?: string \| undefined; '--nylas-color-yellow-100'?: string \| undefined; '--nylas-color-yellow-300'?: string \| undefined; '--nylas-color-yellow-500'?: string \| undefined; '--nylas-color-yellow-700'?: string \| undefined; '--nylas-color-yellow-900'?: string \| undefined; '--nylas-color-purple-50'?: string \| undefined; '--nylas-color-purple-100'?: string \| undefined; '--nylas-color-purple-300'?: string \| undefined; '--nylas-color-purple-500'?: string \| undefined; '--nylas-color-purple-700'?: string \| undefined; '--nylas-color-purple-900'?: string \| undefined; '--nylas-color-sky-50'?: string \| undefined; '--nylas-color-sky-100'?: string \| undefined; '--nylas-color-sky-300'?: string \| undefined; '--nylas-color-sky-500'?: string \| undefined; '--nylas-color-sky-700'?: string \| undefined; '--nylas-color-sky-900'?: string \| undefined; '--nylas-color-black'?: string \| undefined; '--nylas-color-grey-900'?: string \| undefined; '--nylas-color-grey-800'?: string \| undefined; '--nylas-color-grey-700'?: string \| undefined; '--nylas-color-grey-600'?: string \| undefined; '--nylas-color-grey-500'?: string \| undefined; '--nylas-color-grey-400'?: string \| undefined; '--nylas-color-grey-300'?: string \| undefined; '--nylas-color-grey-200'?: string \| undefined; '--nylas-color-grey-100'?: string \| undefined; '--nylas-color-grey-50'?: string \| undefined; '--nylas-color-white'?: string \| undefined; '--nylas-font-family'?: string \| undefined; '--nylas-font-size'?: string \| undefined; '--nylas-border-radius'?: string \| undefined; '--nylas-border-radius-2x'?: string \| undefined; '--nylas-border-radius-3x'?: string \| undefined; } | - | No | The theme configuration. |

## Events

| Event | Detail | Description |
| --- | --- | --- |
| `valueChanged` | { value: string; name: string; } | The event is fired when the specific date open hours change. |

## CSS shadow parts

| Part | Description |
| --- | --- |
| `nstap` | The root container |
| `nstap__action-buttons` | The action buttons container |
| `nstap__add-button` | The add new entry button |
| `nstap__add-button-container` | The add button container |
| `nstap__content` | The main content area |
| `nstap__date-input` |  |
| `nstap__date-input-container` | The date input container |
| `nstap__empty-icon` |  |
| `nstap__empty-state` | The empty state container |
| `nstap__empty-subtitle` |  |
| `nstap__empty-title` |  |
| `nstap__entry-content` | The entry content grid |
| `nstap__error-message` | The error message |
| `nstap__header` | The header section |
| `nstap__remove-button` | The remove entry button |
| `nstap__specific-time-entry` | An individual time entry card |
| `nstap__specific-times` | The specific time entries container |
| `nstap__specific-times-section` | The specific times section wrapper |
| `nstap__time-picker-container` | The time picker container |
| `nstap__time-picker-input` | The time picker input |
| `nstap__time-picker-times` | The time picker times dropdown |
| `nstap__time-pickers` | The time picker row |
| `nstap__timezone-button` | The timezone dropdown button |
| `nstap__timezone-dropdown-content` | The timezone dropdown content |
| `nstap__timezone-selector` | The timezone selector section |
| `nstap__toggle-button` | The toggle available/unavailable button |
| `nstap__unavailable-text` | The unavailable text label |

## Dependencies

This component uses the following child components:

- [`<tooltip-component>`](/docs/reference/ui/tooltip-component/)
- [`<info-icon>`](/docs/reference/ui/info-icon/)
- [`<select-dropdown>`](/docs/reference/ui/select-dropdown/)
- [`<globe-icon>`](/docs/reference/ui/globe-icon/)
- [`<calendar-icon>`](/docs/reference/ui/calendar-icon/)
- [`<nylas-date-component>`](/docs/reference/ui/date-component/)
- [`<nylas-time-window-picker>`](/docs/reference/ui/time-window-picker/)
- [`<close-icon>`](/docs/reference/ui/close-icon/)
- [`<button-component>`](/docs/reference/ui/button-component/)
- [`<add-circle-icon>`](/docs/reference/ui/add-circle-icon/)

## Used by

This component is used inside:

- [`<nylas-editor-tabs>`](/docs/reference/ui/editor-tabs/)
- [`<nylas-participants-custom-availability>`](/docs/reference/ui/participants-custom-availability/)