nylas-confirmed-event-card

The nylas-confirmed-event-card element displays the confirmed event card.

PreviewCode

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

export default function NylasConfirmedEventCardExample() {
const mockEventInfo = {
booking_id: "booking_123",
organizer: {
  email: "[email protected]",
  name: "John Doe"
},
title: "Confirmed Meeting",
description: "This meeting is confirmed",
status: "confirmed",
event_id: "event_456",
location: "Conference Room A",
booking_ref: "ref_789"
};

return (
<div className="inline-block border border-dashed border-gray-300 min-w-[400px] rounded-md p-4 justify-center">
  <NylasConfirmedEventCard
    eventInfo={mockEventInfo}
  />
</div>
);
}

Properties

confirmedEventInfo?

Name	confirmedEventInfo
Description	The participant’s name who booked the event/is logged in.
Type	{ booking_id?: string | undefined; organizer?: { email: string; name: string; is_organizer?: boolean | undefined; } | undefined; title?: string | undefined; description?: string | undefined; status?: string | undefined; event_id?: string | undefined; location?: string | undefined; booking_ref?: string | undefined; }

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 NylasScheduling. Set these props manually only if you’re using the component independently.

configSettings?

Name	configSettings
Description	The Configuration settings for the Scheduler.
Type	undefined | { configuration_id: string; booking?: { additional_fields: Record<string, string>; additional_guests: { email: string; name: string; }[]; booking_ref: string; booking_ref_salt: string; guest: { email: string; name: string; }; timezone: string; email_language: string; event_data: { location: string; when: { start_time: Date; end_time: Date; end_timezone: string; start_timezone: string; object: string; }; }; event_organizer: { name: string; email: string; is_organizer: boolean; }; } | undefined; scheduler: { available_days_in_future: number; min_cancellation_notice: number; min_booking_notice: number; rescheduling_url?: string | undefined; cancellation_url?: string | undefined; cancellation_policy?: string | undefined; hide_additional_guests?: boolean | undefined; hide_cancellation_options?: boolean | undefined; hide_rescheduling_options?: boolean | undefined; additional_fields?: Record<string, AdditionalFields> | undefined; confirmation_redirect_url?: string | undefined; organizer_confirmation_url?: string | undefined; }; organizer: { name: string; email: string; }; slug: string; appearance: Appearance; booking_type: string; name: string; }

themeConfig?

Name	themeConfig
Description	The theme configuration.
Type	any

Events

Event	Description
closeConfirmEventCardClicked	Fired when the close button is clicked on the confirmed event card.
confirmedEventCardError	Fired when an error occurs.

CSS parts

Part	Description
ncec	The confirmed event card host.
ncec__button-outline	The close button CTA.
ncec__card	The confirmed event card.
ncec__description	The description of the confirmed event card.
ncec__icon	The calendar icon.
ncec__title	The title of the confirmed event card.

Code samples

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

StandaloneEvent handlersCustom theme

<nylas-confirmed-event-card
  confirmed-event-info='{
    "booking_id": "booking_123",
    "organizer": {
      "email": "[email protected]",
      "name": "John Doe"
    },
    "title": "Confirmed Meeting",
    "description": "This meeting is confirmed",
    "status": "confirmed",
    "event_id": "event_456",
    "location": "Conference Room A",
    "booking_ref": "ref_789"
  }'>
</nylas-confirmed-event-card>

// Listen for close button clicks
element.addEventListener('closeConfirmEventCardClicked', (event) => {
  console.log('Close button clicked');
  // Hide the card or navigate away
});

// Listen for errors
element.addEventListener('confirmedEventCardError', (event) => {
  console.log('Card error:', event.detail);
  // Display error message to user
});

<nylas-confirmed-event-card
  confirmed-event-info='{...}'
  theme-config='{
    "--nylas-primary": "#059669",
    "--nylas-base-100": "#ffffff",
    "--nylas-border-radius": "8px"
  }'>
</nylas-confirmed-event-card>