nylas-cancelled-event-card

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

PreviewCode

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

export default function NylasCancelledEventCardExample() {
const mockEventInfo = {
booking_id: "booking_123",
organizer: {
  email: "[email protected]",
  name: "John Doe"
},
title: "Cancelled Meeting",
description: "This meeting was cancelled",
status: "cancelled",
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">
  <NylasCancelledEventCard
    eventInfo={mockEventInfo}
  />
</div>
);
}

Properties

cancelledEventInfo?

Name	cancelledEventInfo
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
cancelledEventCardError	Fired when an error occurs.
closeCancelEventCardClicked	Fired when the close button is clicked on the cancelled event card.

CSS parts

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

Code samples

The nylas-cancelled-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-cancelled-event-card
  cancelled-event-info='{
    "booking_id": "booking_123",
    "organizer": {
      "email": "[email protected]",
      "name": "John Doe"
    },
    "title": "Cancelled Meeting",
    "description": "This meeting was cancelled",
    "status": "cancelled",
    "event_id": "event_456",
    "location": "Conference Room A",
    "booking_ref": "ref_789"
  }'>
</nylas-cancelled-event-card>

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

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

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