nylas-event-calendar

PreviewCode

import { NylasEventCalendar } from '@nylas/react';
import { mockConfig } from './mock-data';

export default function NylasEventCalendarExample() {
return (
<div className="inline-block border border-dashed border-gray-300 min-w-[400px] rounded-md p-4 justify-center">
  <NylasEventCalendar
    config={mockConfig}
    selectedConfiguration={mockConfig}
  />
</div>
);
}

Properties

calendars?

Name	calendars
Description	The calendars prop.
Type	NylasCalendar[] | undefined

currentUser?

Name	currentUser
Description	The current user prop.
Type	undefined | { id: string; email: string; name?: string | undefined; provider?: string | undefined; }

groupEvents?

Name	groupEvents
Description	The group events prop.
Type	GroupEventAPIData[] | undefined

isLoading?

Name	isLoading
Description	The is loading prop.
Type	boolean | undefined

masterGroupEvents?

Name	masterGroupEvents
Description	The master group events prop.
Type	undefined | { [x: string]: EventDetails; }

selectedLanguage?

Name	selectedLanguage
Description	The selected language.
Type	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

Standalone properties

The following props are automatically configured when used within NylasSchedulerEditor. Set these props manually only if you’re using the component independently.

name?

Name	name
Description	The name of the element.
Type	string
Default	'page-names'

selectedConfiguration?

Name	selectedConfiguration
Description	The selected Configuration.
Type	Configuration | undefined

themeConfig?

Name	themeConfig
Description	The theme configuration.
Type	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; }

Events

Event	Description
calendarViewChanged
createGroupEvent
deleteGroupEvent
fetchMasterGroupEvent
groupEventSelected
importGroupEvent
previousNextClicked
saveGroupEventChanges
setCalendarViewDateRange

CSS parts

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

Code samples

The nylas-event-calendar element is automatically included in the main NylasSchedulerEditor component. The following code samples show how to use the element on its own.

StandaloneEvent handlersCustom theme

<nylas-event-calendar
  name="event-calendar"
  calendars="your-calendars"
  current-user="your-current-user">
</nylas-event-calendar>

// Listen for calendar view changes
element.addEventListener('calendarViewChanged', (event) => {
  const { startTime, endTime } = event.detail;
  console.log('Calendar view changed:', { startTime, endTime });

  // Update your calendar view
  updateCalendarView(startTime, endTime);
});

// Listen for group event creation
element.addEventListener('createGroupEvent', (event) => {
  const eventData = event.detail;
  console.log('Creating group event:', eventData);

  // Handle event creation
  createGroupEvent(eventData);
});

// Listen for group event selection
element.addEventListener('groupEventSelected', (event) => {
  const eventData = event.detail;
  console.log('Group event selected:', eventData);

  // Handle event selection
  selectGroupEvent(eventData);
});

<nylas-event-calendar
  name="event-calendar"
  calendars="your-calendars"
  current-user="your-current-user"
  theme-config='{
    "--nylas-primary": "#007bff",
    "--nylas-base-100": "#ffffff",
    "--nylas-border-radius": "8px"
  }'>
</nylas-event-calendar>