nylas-event-info

The nylas-event-info element is an input form for event information such as title, description, duration, location. This element is a container for the nylas-event-title, nylas-event-description, nylas-event-duration, and nylas-event-location elements.

import { NylasEventInfo } from '@nylas/react';

export default function NylasEventInfoExample() {
  return (
    <div className="inline-block border border-dashed border-gray-300 min-w-[400px] rounded-md p-4 justify-center">
      <NylasEventInfo
        eventTitle="Team Meeting"
        eventDescription="Weekly team sync"
        eventLocation="Conference Room A"
      />
    </div>
  );
}

Properties

`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`

`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; }`

Slots

Slot	Description
`inputs`	The event information inputs. This includes the event title, description, duration, and location components.

CSS parts

Part	Description
`nei__title`

Code samples

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

<nylas-event-info>
  <div slot="inputs">
    <nylas-event-title></nylas-event-title>
    <nylas-event-description></nylas-event-description>
    <nylas-event-duration></nylas-event-duration>
    <nylas-event-location></nylas-event-location>
  </div>
</nylas-event-info>

<nylas-event-info>
  <div slot="inputs">
    <!-- Custom layout for event inputs -->
    <div class="event-inputs-grid">
      <div class="title-section">
        <nylas-event-title></nylas-event-title>
      </div>

      <div class="description-section">
        <nylas-event-description></nylas-event-description>
      </div>

      <div class="duration-location-row">
        <nylas-event-duration></nylas-event-duration>
        <nylas-event-location></nylas-event-location>
      </div>
    </div>
  </div>
</nylas-event-info>

<nylas-event-info
  theme-config='{
    "--nylas-primary": "#007bff",
    "--nylas-base-100": "#ffffff",
    "--nylas-border-radius": "8px"
  }'>
  <div slot="inputs">
    <nylas-event-title></nylas-event-title>
    <nylas-event-description></nylas-event-description>
    <nylas-event-duration></nylas-event-duration>
    <nylas-event-location></nylas-event-location>
  </div>
</nylas-event-info>