# nylas-booked-event-card

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

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

## Overview

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

### React

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

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

## Props

| Property | Attribute | Type | Default | Required | Description |
| --- | --- | --- | --- | --- | --- |
| `bookingInfo` | `booking-info` | undefined \| { primaryParticipant: NylasSchedulerBookingParticipant; startTime?: Date \| undefined; endTime?: Date \| undefined; timezone?: string \| undefined; language?: string \| undefined; guests?: NylasSchedulerBookingParticipant[] \| undefined; additionalFields?: Record<string, { value: string; type?: string \| undefined; readOnly?: boolean \| undefined; }> \| undefined; } | - | No | The booking info used to book / reschedule the event. |
| `configSettings` | `config-settings` | any | - | No | The config settings for the scheduler. |
| `eventInfo` | `event-info` | { booking_id: string; organizer: { email: string; name: string; is_organizer?: boolean \| undefined; }; title: string; description: string; status: string; event_id: string; location: string; booking_ref: string; } | - | Yes | The booked event. |
| `hour12` | `hour-1-2` | boolean \| undefined | - | No | The 12-hour time format. |
| `isLoading` | `is-loading` | boolean \| undefined | - | No | The loading state prop. Used to display loading state when fetching availability. |
| `rescheduleBookingId` | `reschedule-booking-id` | string \| undefined | - | No | Booking flow type. |
| `selectedLanguage` | `selected-language` | string | `navigator.language` | No | The selected language. |
| `selectedTimeslot` | `selected-timeslot` | { start_time: Date; end_time: Date; emails?: string[] \| undefined; capacity?: number \| undefined; event_id?: string \| undefined; master_id?: string \| undefined; calendar_id?: string \| undefined; } | - | Yes | The selected timeslot. |
| `selectedTimezone` | `selected-timezone` | string | `Intl.DateTimeFormat().resolvedOptions().timeZone` | No | The selected timezone. |
| `themeConfig` | `theme-config` | any | - | No | The theme configuration. |

## Events

| Event | Detail | Description |
| --- | --- | --- |
| `cancelBookedEventValidationError` | { error: { title: string; message: string; }; } | This event is fired when an error occurs while cancelling the booking. |
| `cancelBookingButtonClicked` | { bookingId: string; } | Cancel booking button clicked event. |
| `rescheduleBookedEventError` | NylasSchedulerErrorResponse | This event is fired when an error occurs while rescheduling the booking. |
| `rescheduleButtonClicked` | { bookingId: string; errorHandler?: ((error: NylasSchedulerErrorResponse) => void) \| undefined; } | Reschedule button clicked event. |

## CSS shadow parts

| Part | Description |
| --- | --- |
| `nbec` | The booked event card host. |
| `nbec__button-outline` | The cancel & reschedule button CTA. |
| `nbec__cancel-cta` | The cancel button CTA. |
| `nbec__card` | The booked event card. |
| `nbec__description` | The description of the booked event card. |
| `nbec__reschedule-cta` | The reschedule button CTA. |
| `nbec__title` | The title of the booked event card. |

## Dependencies

This component uses the following child components:

- [`<globe-icon>`](/docs/reference/ui/globe-icon/)
- [`<calendar-check-icon>`](/docs/reference/ui/calendar-check-icon/)
- [`<checkmark-circle-icon>`](/docs/reference/ui/checkmark-circle-icon/)
- [`<button-component>`](/docs/reference/ui/button-component/)

## Used by

This component is used inside:

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