# nylas-event-calendar

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

## Overview

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

### React

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

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

## Props

| Property | Attribute | Type | Default | Required | Description |
| --- | --- | --- | --- | --- | --- |
| `calendars` | `calendars` | NylasCalendar[] \| undefined | - | No | The calendars prop |
| `currentUser` | `current-user` | undefined \| { id: string; email: string; name?: string \| undefined; provider?: string \| undefined; } | - | No | The current user prop |
| `groupEvents` | `group-events` | GroupEventAPIData[] \| undefined | - | No | The group events prop |
| `isLoading` | `is-loading` | boolean \| undefined | - | No | The is loading prop |
| `masterGroupEvents` | `master-group-events` | undefined \| { [x: string]: EventDetails; } | - | No | The master group events prop |
| `name` | `name` | string | `'page-name'` | No | The name of the component |
| `selectedConfiguration` | `selected-configuration` | GroupConfiguration \| 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. |
| `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 |
| --- | --- | --- |
| `calendarViewChanged` | { startTime: number; endTime: number; } |  |
| `createGroupEvent` | { title: string; description: string; location: string; eventTimeslot: { when: { start_time: number; end_time: number; start_timezone: string; end_timezone: string; }; recurrence: string[]; }; eventCapacity: number; conferencing?: Conference \| undefined; participants: { name: string; email: string; is_organizer?: boolean \| undefined; }[]; } |  |
| `deleteGroupEvent` | { data: GroupEventAPIData; action: "this" \| "future" \| "all"; } |  |
| `fetchMasterGroupEvent` | string |  |
| `groupEventSelected` | GroupEventAPIData |  |
| `importGroupEvent` | { event_id: string; calendar_id: string; } |  |
| `previosNextClicked` | { direction: "next" \| "prev"; view: "day" \| "week" \| "month"; currentViewRange: { startTime: number; endTime: number; }; } |  |
| `saveGroupEventChanges` | { data: GroupEventAPIData; action: "this" \| "future" \| "all"; } |  |
| `setCalendarViewDateRange` | { startTime: number; endTime: number; } |  |

## CSS shadow parts

| Part | Description |
| --- | --- |
| `nfbf__button-outline` |  |
| `nfbf__cancel-cta` |  |
| `nfbf__reschedule-cta` |  |
| `nfbf__title` |  |

## Dependencies

This component uses the following child components:

- [`<chevron-icon>`](/docs/reference/ui/chevron-icon/)
- [`<tooltip-component>`](/docs/reference/ui/tooltip-component/)
- [`<info-icon>`](/docs/reference/ui/info-icon/)
- [`<checkbox-group>`](/docs/reference/ui/checkbox-group/)
- [`<button-component>`](/docs/reference/ui/button-component/)
- [`<close-icon>`](/docs/reference/ui/close-icon/)
- [`<nylas-event-title>`](/docs/reference/ui/event-title/)
- [`<nylas-event-description>`](/docs/reference/ui/event-description/)
- [`<nylas-event-location>`](/docs/reference/ui/event-location/)
- [`<nylas-event-timeslot>`](/docs/reference/ui/event-timeslot/)
- [`<nylas-event-capacity>`](/docs/reference/ui/event-capacity/)
- [`<nylas-additional-participants>`](/docs/reference/ui/additional-participants/)
- [`<nylas-event-info>`](/docs/reference/ui/event-info/)
- [`<multi-select-dropdown>`](/docs/reference/ui/multi-select-dropdown/)

## Used by

This component is used inside:

- [`<nylas-editor-tabs-group>`](/docs/reference/ui/editor-tabs-group/)