# nylas-selected-event-card

Source: https://developer.nylas.com/docs/reference/ui/selected-event-card/

The `nylas-selected-event-card` component is a UI component that displays the selected event card.

## Overview

- **Tag**: `<nylas-selected-event-card>`
- **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-selected-event-card></nylas-selected-event-card>
```

### React

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

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

## Props

| Property | Attribute | Type | Default | Required | Description |
| --- | --- | --- | --- | --- | --- |
| `hour12` | `hour-1-2` | boolean \| undefined | - | No | The 12-hour time format. |
| `selectedDate` | `selected-date` | Date \| undefined | - | No | The selected date. |
| `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. |
| `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 selected time. |
| `selectedTimezone` | `selected-timezone` | string | `Intl.DateTimeFormat().resolvedOptions().timeZone` | No | The selected timezone. |
| `themeConfig` | `theme-config` | any | - | No | The theme configuration. |

## CSS shadow parts

| Part | Description |
| --- | --- |
| `nsec` | The selected event card component. |
| `nsec__card` | The card component. |
| `nsec__date` | The date selected. |
| `nsec__icon` | The calendar icon. |
| `nsec__time` | The timeslot selected. |
| `nsec__timezone` | The timezone selected. |

## Dependencies

This component uses the following child components:

- [`<calendar-icon>`](/docs/reference/ui/calendar-icon/)
- [`<globe-icon>`](/docs/reference/ui/globe-icon/)

## Used by

This component is used inside:

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