nylas-additional-participants

The nylas-additional-participants element is a form input for adding additional participants to an event.

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

export default function NylasAdditionalParticipantsExample() {
return (
<div className="inline-block border border-dashed border-gray-300 rounded-md p-4 justify-center">
  <NylasAdditionalParticipants
    eventParticipants={[
      {
        email: '[email protected]',
        is_organizer: true,
        name: 'John Doe',
        availability: {
          calendar_ids: ['primary'],
        },
        booking: {
          calendar_id: 'primary',
        },
      },
      {
        email: '[email protected]',
        name: 'James Doe',
        availability: {
          calendar_ids: ['primary'],
        },
        booking: {
          calendar_id: 'primary',
        },
      },
    ]}
    participantOptions={[
      {
        name: 'Jane Doe',
        email: '[email protected]',
        calendars: [
          {
            id: '[email protected]',
            name: 'Jane Doe',
          },
        ],
      },
    ]}
  />
</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`

Standalone properties

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

`currentUser?`


Name	`currentUser`
Description	The logged in user.
Type	`undefined \| { id: string; email: string; name?: string \| undefined; provider?: string \| undefined; }`

`currentUserCalendars?`


Name	`currentUserCalendars`
Description	The list of user’s calendars.
Type	`Calendar[] \| undefined`

`eventParticipants?`


Name	`eventParticipants`
Description	The event participants.
Type	`Participant[] \| undefined`

`name?`


Name	`name`
Description	The name of the element.
Type	string
Default	`'participants'`

`participantOptions?`


Name	`participantOptions`
Description	The additional participants options from the Configuration.
Type	`AdditionalParticipant[] \| undefined`

`roundRobinConfig?`


Name	`roundRobinConfig`
Description	If the config is round-robin.
Type	boolean \| `undefined`

`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
`valueChanged`	Fired when the selected participants change.

CSS parts

Part	Description
`nadtnlpart`
`nadtnlpart__add-participant`	The add participant button of the element.
`nadtnlpart__content`	The content of the element.
`nadtnlpart__error`
`nadtnlpart__input`	The input of the element.
`nadtnlpart__input_group`	The input group of the element.
`nadtnlpart__input_wrapper`	The input wrapper of the element.
`nadtnlpart__org-as-participant`
`nadtnlpart__remove-participant`	The remove participant button of the element.
`nadtnlpart__subtitle`	The subtitle of the element.
`nadtnlpart__title`	The title of the element.

Code samples

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

<nylas-additional-participants
  name="participants"
  event-participants="event-participants"
  participant-options="participant-options"
  current-user="current-user"
  current-user-calendars="user-calendars">
</nylas-additional-participants>

// Listen for value changes
element.addEventListener('valueChanged', (event) => {
  const { value, name } = event.detail;
  console.log('Participants changed:', { value, name });

  // Parse the participants value
  const participants = JSON.parse(value);
  console.log('New participants:', participants);

  // Update your configuration
  updateParticipants(participants, name);
});

<nylas-additional-participants
  name="participants"
  event-participants="event-participants"
  participant-options="participant-options"
  theme-config='{
    "--nylas-primary": "#007bff",
    "--nylas-base-100": "#ffffff",
    "--nylas-border-radius": "8px"
  }'>
</nylas-additional-participants>