Event Calendar Component - Scheduler UI Components

Event Calendar Component - Scheduler UI Components

nylas-event-calendar

Properties

Property	Attribute	Description	Type	Default
`calendars`		The calendars prop	`NylasCalendar[] \| undefined`	`undefined`
`currentUser`		The current user prop	`undefined \| { id: string; email: string; name?: string \| undefined; provider?: string \| undefined; }`	`undefined`
`groupEvents`		The group events prop	`GroupEventAPIData[] \| undefined`	`undefined`
`isLoading`		The is loading prop	`boolean \| undefined`	`undefined`
`masterGroupEvents`		The master group events prop	`undefined \| { [x: string]: EventDetails; }`	`undefined`
`selectedLanguage`		The selected language.	`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`	`undefined`

Standalone Props

ⓘ NOTE: The following props are automatically configured when used within nylas-scheduler-editor. Set these props manually only if you’re using the component independently.

Property	Attribute	Description	Type	Default
`name`		The name of the component	`string`	`'page-name'`
`selectedConfiguration`		The selected configuration	`GroupConfiguration \| undefined`	`undefined`
`themeConfig`		The theme configuration.	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; }	`undefined`

Events

Event	Description	Type
`calendarViewChanged`		`CustomEvent<{ startTime: number; endTime: number; }>`
`createGroupEvent`		`CustomEvent<{ title: string; description: string; location: string; eventTimeslot: { when: { start_time: number; end_time: number; start_timezone: string; end_timezone: string; }; recurrence: string[]; }; eventCapacity: number; conferencing?: Conference \| undefined; participants: { name: string; email: string; is_organizer?: boolean \| undefined; }[]; }>`
`deleteGroupEvent`		`CustomEvent<{ data: GroupEventAPIData; action: "this" \| "future" \| "all"; }>`
`fetchMasterGroupEvent`		`CustomEvent<string>`
`groupEventSelected`		`CustomEvent<GroupEventAPIData>`
`importGroupEvent`		`CustomEvent<{ event_id: string; calendar_id: string; }>`
`previosNextClicked`		`CustomEvent<{ direction: "next" \| "prev"; view: "day" \| "week" \| "month"; currentViewRange: { startTime: number; endTime: number; }; }>`
`saveGroupEventChanges`		`CustomEvent<{ data: GroupEventAPIData; action: "this" \| "future" \| "all"; }>`
`setCalendarViewDateRange`		`CustomEvent<{ startTime: number; endTime: number; }>`

Shadow Parts

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

Built with StencilJS