UNPKG

devextreme-angular

Version:

DevExtreme UI and Visualization Components for Angular

1 lines • 87.2 kB
{"version":3,"file":"devextreme-angular-ui-scheduler.mjs","sources":["../../../dist/ui/scheduler/index.ts","../../../dist/ui/scheduler/devextreme-angular-ui-scheduler.ts"],"sourcesContent":["/*!\n * devextreme-angular\n * Version: 26.1.3\n * Build date: Wed Jun 10 2026\n *\n * Copyright (c) 2012 - 2026 Developer Express Inc. ALL RIGHTS RESERVED\n *\n * This software may be modified and distributed under the terms\n * of the MIT license. See the LICENSE file in the root of the project for details.\n *\n * https://github.com/DevExpress/DevExtreme\n */\n\n/* tslint:disable:max-line-length */\n\n\nimport {\n TransferState,\n Component,\n NgModule,\n ElementRef,\n NgZone,\n PLATFORM_ID,\n Inject,\n\n Input,\n Output,\n OnDestroy,\n EventEmitter,\n OnChanges,\n DoCheck,\n SimpleChanges,\n ContentChildren,\n QueryList\n} from '@angular/core';\n\n\nimport type dxSortable from 'devextreme/ui/sortable';\nimport type dxDraggable from 'devextreme/ui/draggable';\nimport type { default as dxScheduler, AllDayPanelMode, ViewType, dxSchedulerAppointment, AppointmentFormProperties, CellAppointmentsLimit, AppointmentAddedEvent, AppointmentAddingEvent, AppointmentClickEvent, AppointmentContextMenuEvent, AppointmentDblClickEvent, AppointmentDeletedEvent, AppointmentDeletingEvent, AppointmentFormOpeningEvent, AppointmentRenderedEvent, AppointmentTooltipShowingEvent, AppointmentUpdatedEvent, AppointmentUpdatingEvent, CellClickEvent, CellContextMenuEvent, ContentReadyEvent, DisposingEvent, InitializedEvent, OptionChangedEvent, SelectionEndEvent, RecurrenceEditMode, dxSchedulerScrolling, SnapToCellsMode, dxSchedulerToolbar } from 'devextreme/ui/scheduler';\nimport type { event } from 'devextreme/events/events.types';\nimport type { default as DataSource, DataSourceOptions } from 'devextreme/data/data_source';\nimport type { Store } from 'devextreme/data/store';\nimport type { DayOfWeek, Orientation } from 'devextreme/common';\n\nimport DxScheduler from 'devextreme/ui/scheduler';\n\n\nimport {\n DxComponent,\n DxTemplateHost,\n DxIntegrationModule,\n DxTemplateModule,\n NestedOptionHost,\n IterableDifferHelper,\n WatcherHelper,\n CollectionNestedOption,\n} from 'devextreme-angular/core';\n\nimport { DxoAppointmentDraggingModule } from 'devextreme-angular/ui/nested';\nimport { DxoEditingModule } from 'devextreme-angular/ui/nested';\nimport { DxiResourceModule } from 'devextreme-angular/ui/nested';\nimport { DxoScrollingModule } from 'devextreme-angular/ui/nested';\nimport { DxiViewModule } from 'devextreme-angular/ui/nested';\n\nimport { DxoSchedulerAIOptionsModule } from 'devextreme-angular/ui/scheduler/nested';\nimport { DxoSchedulerAppointmentDraggingModule } from 'devextreme-angular/ui/scheduler/nested';\nimport { DxiSchedulerAsyncRuleModule } from 'devextreme-angular/ui/scheduler/nested';\nimport { DxiSchedulerButtonItemModule } from 'devextreme-angular/ui/scheduler/nested';\nimport { DxoSchedulerButtonOptionsModule } from 'devextreme-angular/ui/scheduler/nested';\nimport { DxoSchedulerColCountByScreenModule } from 'devextreme-angular/ui/scheduler/nested';\nimport { DxiSchedulerCompareRuleModule } from 'devextreme-angular/ui/scheduler/nested';\nimport { DxiSchedulerCustomRuleModule } from 'devextreme-angular/ui/scheduler/nested';\nimport { DxoSchedulerEditingModule } from 'devextreme-angular/ui/scheduler/nested';\nimport { DxiSchedulerEmailRuleModule } from 'devextreme-angular/ui/scheduler/nested';\nimport { DxiSchedulerEmptyItemModule } from 'devextreme-angular/ui/scheduler/nested';\nimport { DxoSchedulerFormModule } from 'devextreme-angular/ui/scheduler/nested';\nimport { DxiSchedulerGroupItemModule } from 'devextreme-angular/ui/scheduler/nested';\nimport { DxiSchedulerItemModule } from 'devextreme-angular/ui/scheduler/nested';\nimport { DxoSchedulerLabelModule } from 'devextreme-angular/ui/scheduler/nested';\nimport { DxiSchedulerNumericRuleModule } from 'devextreme-angular/ui/scheduler/nested';\nimport { DxoSchedulerOptionsModule } from 'devextreme-angular/ui/scheduler/nested';\nimport { DxiSchedulerOptionsItemModule } from 'devextreme-angular/ui/scheduler/nested';\nimport { DxiSchedulerPatternRuleModule } from 'devextreme-angular/ui/scheduler/nested';\nimport { DxiSchedulerRangeRuleModule } from 'devextreme-angular/ui/scheduler/nested';\nimport { DxiSchedulerRequiredRuleModule } from 'devextreme-angular/ui/scheduler/nested';\nimport { DxiSchedulerResourceModule } from 'devextreme-angular/ui/scheduler/nested';\nimport { DxoSchedulerScrollingModule } from 'devextreme-angular/ui/scheduler/nested';\nimport { DxiSchedulerSimpleItemModule } from 'devextreme-angular/ui/scheduler/nested';\nimport { DxiSchedulerStringLengthRuleModule } from 'devextreme-angular/ui/scheduler/nested';\nimport { DxiSchedulerTabModule } from 'devextreme-angular/ui/scheduler/nested';\nimport { DxiSchedulerTabbedItemModule } from 'devextreme-angular/ui/scheduler/nested';\nimport { DxoSchedulerTabPanelOptionsModule } from 'devextreme-angular/ui/scheduler/nested';\nimport { DxiSchedulerTabPanelOptionsItemModule } from 'devextreme-angular/ui/scheduler/nested';\nimport { DxoSchedulerToolbarModule } from 'devextreme-angular/ui/scheduler/nested';\nimport { DxiSchedulerToolbarItemModule } from 'devextreme-angular/ui/scheduler/nested';\nimport { DxiSchedulerValidationRuleModule } from 'devextreme-angular/ui/scheduler/nested';\nimport { DxiSchedulerViewModule } from 'devextreme-angular/ui/scheduler/nested';\nimport { \n PROPERTY_TOKEN_validationRules,\n PROPERTY_TOKEN_items,\n PROPERTY_TOKEN_resources,\n PROPERTY_TOKEN_tabs,\n PROPERTY_TOKEN_views,\n } from 'devextreme-angular/core/tokens';\n\n\n/**\n * The Scheduler is a UI component that represents scheduled data and allows a user to manage and edit it.\n\n */\n@Component({\n selector: 'dx-scheduler',\n template: '',\n host: { ngSkipHydration: 'true' },\n imports: [ DxIntegrationModule ],\n providers: [\n DxTemplateHost,\n WatcherHelper,\n NestedOptionHost,\n IterableDifferHelper\n ]\n})\nexport class DxSchedulerComponent extends DxComponent implements OnDestroy, OnChanges, DoCheck {\n\n @ContentChildren(PROPERTY_TOKEN_validationRules)\n set _validationRulesContentChildren(value: QueryList<CollectionNestedOption>) {\n this.setChildren('validationRules', value);\n }\n\n @ContentChildren(PROPERTY_TOKEN_items)\n set _itemsContentChildren(value: QueryList<CollectionNestedOption>) {\n this.setChildren('items', value);\n }\n\n @ContentChildren(PROPERTY_TOKEN_resources)\n set _resourcesContentChildren(value: QueryList<CollectionNestedOption>) {\n this.setChildren('resources', value);\n }\n\n @ContentChildren(PROPERTY_TOKEN_tabs)\n set _tabsContentChildren(value: QueryList<CollectionNestedOption>) {\n this.setChildren('tabs', value);\n }\n\n @ContentChildren(PROPERTY_TOKEN_views)\n set _viewsContentChildren(value: QueryList<CollectionNestedOption>) {\n this.setChildren('views', value);\n }\n\n instance: DxScheduler = null;\n\n /**\n * Specifies the shortcut key that sets focus on the UI component.\n \n */\n @Input()\n get accessKey(): string | undefined {\n return this._getOption('accessKey');\n }\n set accessKey(value: string | undefined) {\n this._setOption('accessKey', value);\n }\n\n\n /**\n * Specifies whether the UI component adapts to small screens.\n \n */\n @Input()\n get adaptivityEnabled(): boolean {\n return this._getOption('adaptivityEnabled');\n }\n set adaptivityEnabled(value: boolean) {\n this._setOption('adaptivityEnabled', value);\n }\n\n\n /**\n * Specifies the name of the data source item field whose value defines whether or not the corresponding appointment is an all-day appointment.\n \n */\n @Input()\n get allDayExpr(): string {\n return this._getOption('allDayExpr');\n }\n set allDayExpr(value: string) {\n this._setOption('allDayExpr', value);\n }\n\n\n /**\n * Specifies the display mode for the All day panel.\n \n */\n @Input()\n get allDayPanelMode(): AllDayPanelMode {\n return this._getOption('allDayPanelMode');\n }\n set allDayPanelMode(value: AllDayPanelMode) {\n this._setOption('allDayPanelMode', value);\n }\n\n\n /**\n * Specifies a custom template for cell overflow indicators.\n \n */\n @Input()\n get appointmentCollectorTemplate(): any {\n return this._getOption('appointmentCollectorTemplate');\n }\n set appointmentCollectorTemplate(value: any) {\n this._setOption('appointmentCollectorTemplate', value);\n }\n\n\n /**\n * Configures appointment reordering using drag and drop gestures.\n \n */\n @Input()\n get appointmentDragging(): { autoScroll?: boolean, data?: any | undefined, group?: string | undefined, onAdd?: ((e: { component: dxScheduler, event: event, fromComponent: dxSortable | dxDraggable, fromData: any, itemData: any, itemElement: any, toComponent: dxSortable | dxDraggable, toData: any }) => void), onDragEnd?: ((e: { cancel: boolean, component: dxScheduler, event: event, fromComponent: dxSortable | dxDraggable, fromData: any, itemData: any, itemElement: any, toComponent: dxSortable | dxDraggable, toData: any, toItemData: any }) => void), onDragMove?: ((e: { cancel: boolean, component: dxScheduler, event: event, fromComponent: dxSortable | dxDraggable, fromData: any, itemData: any, itemElement: any, toComponent: dxSortable | dxDraggable, toData: any }) => void), onDragStart?: ((e: { cancel: boolean, component: dxScheduler, event: event, fromData: any, itemData: any, itemElement: any }) => void), onRemove?: ((e: { component: dxScheduler, event: event, fromComponent: dxSortable | dxDraggable, fromData: any, itemData: any, itemElement: any, toComponent: dxSortable | dxDraggable }) => void), scrollSensitivity?: number, scrollSpeed?: number } {\n return this._getOption('appointmentDragging');\n }\n set appointmentDragging(value: { autoScroll?: boolean, data?: any | undefined, group?: string | undefined, onAdd?: ((e: { component: dxScheduler, event: event, fromComponent: dxSortable | dxDraggable, fromData: any, itemData: any, itemElement: any, toComponent: dxSortable | dxDraggable, toData: any }) => void), onDragEnd?: ((e: { cancel: boolean, component: dxScheduler, event: event, fromComponent: dxSortable | dxDraggable, fromData: any, itemData: any, itemElement: any, toComponent: dxSortable | dxDraggable, toData: any, toItemData: any }) => void), onDragMove?: ((e: { cancel: boolean, component: dxScheduler, event: event, fromComponent: dxSortable | dxDraggable, fromData: any, itemData: any, itemElement: any, toComponent: dxSortable | dxDraggable, toData: any }) => void), onDragStart?: ((e: { cancel: boolean, component: dxScheduler, event: event, fromData: any, itemData: any, itemElement: any }) => void), onRemove?: ((e: { component: dxScheduler, event: event, fromComponent: dxSortable | dxDraggable, fromData: any, itemData: any, itemElement: any, toComponent: dxSortable | dxDraggable }) => void), scrollSensitivity?: number, scrollSpeed?: number }) {\n this._setOption('appointmentDragging', value);\n }\n\n\n /**\n * Specifies a custom template for appointments.\n \n */\n @Input()\n get appointmentTemplate(): any {\n return this._getOption('appointmentTemplate');\n }\n set appointmentTemplate(value: any) {\n this._setOption('appointmentTemplate', value);\n }\n\n\n /**\n * Specifies a custom template for tooltips displayed when users click an appointment or cell overflow indicator.\n \n */\n @Input()\n get appointmentTooltipTemplate(): any {\n return this._getOption('appointmentTooltipTemplate');\n }\n set appointmentTooltipTemplate(value: any) {\n this._setOption('appointmentTooltipTemplate', value);\n }\n\n\n /**\n * Specifies cell duration in minutes. This property&apos;s value should divide the interval between startDayHour and endDayHour into even parts.\n \n */\n @Input()\n get cellDuration(): number {\n return this._getOption('cellDuration');\n }\n set cellDuration(value: number) {\n this._setOption('cellDuration', value);\n }\n\n\n /**\n * Specifies whether or not an end user can scroll the view in both directions at the same time.\n \n */\n @Input()\n get crossScrollingEnabled(): boolean {\n return this._getOption('crossScrollingEnabled');\n }\n set crossScrollingEnabled(value: boolean) {\n this._setOption('crossScrollingEnabled', value);\n }\n\n\n /**\n * Specifies the current date.\n \n */\n @Input()\n get currentDate(): Date | number | string {\n return this._getOption('currentDate');\n }\n set currentDate(value: Date | number | string) {\n this._setOption('currentDate', value);\n }\n\n\n /**\n * Specifies the displayed view. Accepts name or type of a view available in the views array.\n \n */\n @Input()\n get currentView(): string | ViewType {\n return this._getOption('currentView');\n }\n set currentView(value: string | ViewType) {\n this._setOption('currentView', value);\n }\n\n\n /**\n * Customizes the date navigator&apos;s text.\n \n */\n @Input()\n get customizeDateNavigatorText(): ((info: { endDate: Date, startDate: Date, text: string }) => string) | undefined {\n return this._getOption('customizeDateNavigatorText');\n }\n set customizeDateNavigatorText(value: ((info: { endDate: Date, startDate: Date, text: string }) => string) | undefined) {\n this._setOption('customizeDateNavigatorText', value);\n }\n\n\n /**\n * Specifies a custom template for table cells.\n \n */\n @Input()\n get dataCellTemplate(): any {\n return this._getOption('dataCellTemplate');\n }\n set dataCellTemplate(value: any) {\n this._setOption('dataCellTemplate', value);\n }\n\n\n /**\n * Binds the UI component to data.\n \n */\n @Input()\n get dataSource(): Array<dxSchedulerAppointment> | DataSource | DataSourceOptions | null | Store | string {\n return this._getOption('dataSource');\n }\n set dataSource(value: Array<dxSchedulerAppointment> | DataSource | DataSourceOptions | null | Store | string) {\n this._setOption('dataSource', value);\n }\n\n\n /**\n * Specifies custom markup for date scale cells in all views.\n \n */\n @Input()\n get dateCellTemplate(): any {\n return this._getOption('dateCellTemplate');\n }\n set dateCellTemplate(value: any) {\n this._setOption('dateCellTemplate', value);\n }\n\n\n /**\n * Specifies the format in which date-time values should be sent to the server.\n \n */\n @Input()\n get dateSerializationFormat(): string | undefined {\n return this._getOption('dateSerializationFormat');\n }\n set dateSerializationFormat(value: string | undefined) {\n this._setOption('dateSerializationFormat', value);\n }\n\n\n /**\n * Specifies the name of the data source item field whose value holds the description of the corresponding appointment.\n \n */\n @Input()\n get descriptionExpr(): string {\n return this._getOption('descriptionExpr');\n }\n set descriptionExpr(value: string) {\n this._setOption('descriptionExpr', value);\n }\n\n\n /**\n * Specifies whether the UI component responds to user interaction.\n \n */\n @Input()\n get disabled(): boolean {\n return this._getOption('disabled');\n }\n set disabled(value: boolean) {\n this._setOption('disabled', value);\n }\n\n\n /**\n * Configures appointment editing options, such as available operations.\n \n */\n @Input()\n get editing(): boolean | { allowAdding?: boolean, allowDeleting?: boolean, allowDragging?: boolean, allowResizing?: boolean, allowTimeZoneEditing?: boolean, allowUpdating?: boolean, form?: AppointmentFormProperties, popup?: Record<string, any> } {\n return this._getOption('editing');\n }\n set editing(value: boolean | { allowAdding?: boolean, allowDeleting?: boolean, allowDragging?: boolean, allowResizing?: boolean, allowTimeZoneEditing?: boolean, allowUpdating?: boolean, form?: AppointmentFormProperties, popup?: Record<string, any> }) {\n this._setOption('editing', value);\n }\n\n\n /**\n * Specifies the global attributes to be attached to the UI component&apos;s container element.\n \n */\n @Input()\n get elementAttr(): Record<string, any> {\n return this._getOption('elementAttr');\n }\n set elementAttr(value: Record<string, any>) {\n this._setOption('elementAttr', value);\n }\n\n\n /**\n * Specifies the name of the data source item field that defines the ending of an appointment.\n \n */\n @Input()\n get endDateExpr(): string {\n return this._getOption('endDateExpr');\n }\n set endDateExpr(value: string) {\n this._setOption('endDateExpr', value);\n }\n\n\n /**\n * Specifies the name of the data source item field that defines the timezone of the appointment end date.\n \n */\n @Input()\n get endDateTimeZoneExpr(): string {\n return this._getOption('endDateTimeZoneExpr');\n }\n set endDateTimeZoneExpr(value: string) {\n this._setOption('endDateTimeZoneExpr', value);\n }\n\n\n /**\n * Specifies the last hour on the time scale. Accepts integer values from 0 to 24.\n \n */\n @Input()\n get endDayHour(): number {\n return this._getOption('endDayHour');\n }\n set endDayHour(value: number) {\n this._setOption('endDayHour', value);\n }\n\n\n /**\n * Specifies the first day of a week. Does not apply to the agenda view.\n \n */\n @Input()\n get firstDayOfWeek(): DayOfWeek | undefined {\n return this._getOption('firstDayOfWeek');\n }\n set firstDayOfWeek(value: DayOfWeek | undefined) {\n this._setOption('firstDayOfWeek', value);\n }\n\n\n /**\n * Specifies whether the UI component can be focused using keyboard navigation.\n \n */\n @Input()\n get focusStateEnabled(): boolean {\n return this._getOption('focusStateEnabled');\n }\n set focusStateEnabled(value: boolean) {\n this._setOption('focusStateEnabled', value);\n }\n\n\n /**\n * If true, appointments are grouped by date first and then by resource; opposite if false. Applies only if appointments are grouped and groupOrientation is &apos;horizontal&apos;.\n \n */\n @Input()\n get groupByDate(): boolean {\n return this._getOption('groupByDate');\n }\n set groupByDate(value: boolean) {\n this._setOption('groupByDate', value);\n }\n\n\n /**\n * Specifies the resource kinds by which the scheduler&apos;s appointments are grouped in a timetable.\n \n */\n @Input()\n get groups(): Array<string> {\n return this._getOption('groups');\n }\n set groups(value: Array<string>) {\n this._setOption('groups', value);\n }\n\n\n /**\n * Specifies the UI component&apos;s height.\n \n */\n @Input()\n get height(): number | string | undefined {\n return this._getOption('height');\n }\n set height(value: number | string | undefined) {\n this._setOption('height', value);\n }\n\n\n \n @Input()\n get hiddenWeekDays(): Array<DayOfWeek> | undefined {\n return this._getOption('hiddenWeekDays');\n }\n set hiddenWeekDays(value: Array<DayOfWeek> | undefined) {\n this._setOption('hiddenWeekDays', value);\n }\n\n\n /**\n * Specifies text for a hint that appears when a user pauses on the UI component.\n \n */\n @Input()\n get hint(): string | undefined {\n return this._getOption('hint');\n }\n set hint(value: string | undefined) {\n this._setOption('hint', value);\n }\n\n\n /**\n * Specifies the time interval between when the date-time indicator changes its position, in milliseconds.\n \n */\n @Input()\n get indicatorUpdateInterval(): number {\n return this._getOption('indicatorUpdateInterval');\n }\n set indicatorUpdateInterval(value: number) {\n this._setOption('indicatorUpdateInterval', value);\n }\n\n\n /**\n * The latest date the UI component allows you to select.\n \n */\n @Input()\n get max(): Date | number | string | undefined {\n return this._getOption('max');\n }\n set max(value: Date | number | string | undefined) {\n this._setOption('max', value);\n }\n\n\n /**\n * Specifies the limit of full-sized appointments displayed per cell. Applies to all views except &apos;agenda&apos;.\n \n */\n @Input()\n get maxAppointmentsPerCell(): CellAppointmentsLimit | number {\n return this._getOption('maxAppointmentsPerCell');\n }\n set maxAppointmentsPerCell(value: CellAppointmentsLimit | number) {\n this._setOption('maxAppointmentsPerCell', value);\n }\n\n\n /**\n * The earliest date the UI component allows you to select.\n \n */\n @Input()\n get min(): Date | number | string | undefined {\n return this._getOption('min');\n }\n set min(value: Date | number | string | undefined) {\n this._setOption('min', value);\n }\n\n\n /**\n * Specifies the text or HTML markup displayed by the UI component if the item collection is empty. Available for the Agenda view only.\n \n */\n @Input()\n get noDataText(): string {\n return this._getOption('noDataText');\n }\n set noDataText(value: string) {\n this._setOption('noDataText', value);\n }\n\n\n /**\n * Specifies the minute offset applied to configured day durations in all views.\n \n */\n @Input()\n get offset(): number {\n return this._getOption('offset');\n }\n set offset(value: number) {\n this._setOption('offset', value);\n }\n\n\n /**\n * Specifies the edit mode for recurring appointments.\n \n */\n @Input()\n get recurrenceEditMode(): RecurrenceEditMode {\n return this._getOption('recurrenceEditMode');\n }\n set recurrenceEditMode(value: RecurrenceEditMode) {\n this._setOption('recurrenceEditMode', value);\n }\n\n\n /**\n * Specifies the name of the data source item field that defines exceptions for the current recurring appointment.\n \n */\n @Input()\n get recurrenceExceptionExpr(): string {\n return this._getOption('recurrenceExceptionExpr');\n }\n set recurrenceExceptionExpr(value: string) {\n this._setOption('recurrenceExceptionExpr', value);\n }\n\n\n /**\n * Specifies the name of the data source item field that defines a recurrence rule for generating recurring appointments.\n \n */\n @Input()\n get recurrenceRuleExpr(): string {\n return this._getOption('recurrenceRuleExpr');\n }\n set recurrenceRuleExpr(value: string) {\n this._setOption('recurrenceRuleExpr', value);\n }\n\n\n /**\n * Specifies whether filtering is performed on the server or client side.\n \n */\n @Input()\n get remoteFiltering(): boolean {\n return this._getOption('remoteFiltering');\n }\n set remoteFiltering(value: boolean) {\n this._setOption('remoteFiltering', value);\n }\n\n\n /**\n * Specifies a custom template for resource headers.\n \n */\n @Input()\n get resourceCellTemplate(): any {\n return this._getOption('resourceCellTemplate');\n }\n set resourceCellTemplate(value: any) {\n this._setOption('resourceCellTemplate', value);\n }\n\n\n /**\n * Specifies an array of resources available in the scheduler.\n \n */\n @Input()\n get resources(): { allowMultiple?: boolean, colorExpr?: string, dataSource?: Array<any> | DataSource | DataSourceOptions | null | Store | string, displayExpr?: ((resource: any) => string) | string, fieldExpr?: string, icon?: string, label?: string, useColorAsDefault?: boolean, valueExpr?: Function | string }[] {\n return this._getOption('resources');\n }\n set resources(value: { allowMultiple?: boolean, colorExpr?: string, dataSource?: Array<any> | DataSource | DataSourceOptions | null | Store | string, displayExpr?: ((resource: any) => string) | string, fieldExpr?: string, icon?: string, label?: string, useColorAsDefault?: boolean, valueExpr?: Function | string }[]) {\n this._setOption('resources', value);\n }\n\n\n /**\n * Switches the UI component to a right-to-left representation.\n \n */\n @Input()\n get rtlEnabled(): boolean {\n return this._getOption('rtlEnabled');\n }\n set rtlEnabled(value: boolean) {\n this._setOption('rtlEnabled', value);\n }\n\n\n /**\n * Configures scrolling.\n \n */\n @Input()\n get scrolling(): dxSchedulerScrolling {\n return this._getOption('scrolling');\n }\n set scrolling(value: dxSchedulerScrolling) {\n this._setOption('scrolling', value);\n }\n\n\n /**\n * The data of the currently selected cells.\n \n */\n @Input()\n get selectedCellData(): Array<any> {\n return this._getOption('selectedCellData');\n }\n set selectedCellData(value: Array<any>) {\n this._setOption('selectedCellData', value);\n }\n\n\n /**\n * Specifies whether to apply shading to cover the timetable up to the current time.\n \n */\n @Input()\n get shadeUntilCurrentTime(): boolean {\n return this._getOption('shadeUntilCurrentTime');\n }\n set shadeUntilCurrentTime(value: boolean) {\n this._setOption('shadeUntilCurrentTime', value);\n }\n\n\n /**\n * Specifies the &apos;All-day&apos; panel&apos;s visibility. Setting this property to false hides the panel along with the all-day appointments.\n \n */\n @Input()\n get showAllDayPanel(): boolean {\n return this._getOption('showAllDayPanel');\n }\n set showAllDayPanel(value: boolean) {\n this._setOption('showAllDayPanel', value);\n }\n\n\n /**\n * Specifies the current date-time indicator&apos;s visibility.\n \n */\n @Input()\n get showCurrentTimeIndicator(): boolean {\n return this._getOption('showCurrentTimeIndicator');\n }\n set showCurrentTimeIndicator(value: boolean) {\n this._setOption('showCurrentTimeIndicator', value);\n }\n\n\n \n @Input()\n get snapToCellsMode(): SnapToCellsMode {\n return this._getOption('snapToCellsMode');\n }\n set snapToCellsMode(value: SnapToCellsMode) {\n this._setOption('snapToCellsMode', value);\n }\n\n\n /**\n * Specifies the name of the data source item field that defines the start of an appointment.\n \n */\n @Input()\n get startDateExpr(): string {\n return this._getOption('startDateExpr');\n }\n set startDateExpr(value: string) {\n this._setOption('startDateExpr', value);\n }\n\n\n /**\n * Specifies the name of the data source item field that defines the timezone of the appointment start date.\n \n */\n @Input()\n get startDateTimeZoneExpr(): string {\n return this._getOption('startDateTimeZoneExpr');\n }\n set startDateTimeZoneExpr(value: string) {\n this._setOption('startDateTimeZoneExpr', value);\n }\n\n\n /**\n * Specifies the first hour on the time scale. Accepts integer values from 0 to 24.\n \n */\n @Input()\n get startDayHour(): number {\n return this._getOption('startDayHour');\n }\n set startDayHour(value: number) {\n this._setOption('startDayHour', value);\n }\n\n\n /**\n * Specifies the number of the element when the Tab key is used for navigating.\n \n */\n @Input()\n get tabIndex(): number {\n return this._getOption('tabIndex');\n }\n set tabIndex(value: number) {\n this._setOption('tabIndex', value);\n }\n\n\n /**\n * Specifies the name of the data source item field that holds the subject of an appointment.\n \n */\n @Input()\n get textExpr(): string {\n return this._getOption('textExpr');\n }\n set textExpr(value: string) {\n this._setOption('textExpr', value);\n }\n\n\n /**\n * Specifies custom markup for time scale cells in all views.\n \n */\n @Input()\n get timeCellTemplate(): any {\n return this._getOption('timeCellTemplate');\n }\n set timeCellTemplate(value: any) {\n this._setOption('timeCellTemplate', value);\n }\n\n\n /**\n * Specifies the time zone for the Scheduler&apos;s grid. Accepts values from the IANA time zone database.\n \n */\n @Input()\n get timeZone(): string {\n return this._getOption('timeZone');\n }\n set timeZone(value: string) {\n this._setOption('timeZone', value);\n }\n\n\n /**\n * Configures the toolbar.\n \n */\n @Input()\n get toolbar(): dxSchedulerToolbar | undefined {\n return this._getOption('toolbar');\n }\n set toolbar(value: dxSchedulerToolbar | undefined) {\n this._setOption('toolbar', value);\n }\n\n\n /**\n * Specifies whether a user can switch views using tabs or a drop-down menu.\n \n */\n @Input()\n get useDropDownViewSwitcher(): boolean {\n return this._getOption('useDropDownViewSwitcher');\n }\n set useDropDownViewSwitcher(value: boolean) {\n this._setOption('useDropDownViewSwitcher', value);\n }\n\n\n /**\n * Specifies and configures the views to be available in the view switcher.\n \n */\n @Input()\n get views(): Array<Record<string, any> | string> | { agendaDuration?: number, allDayPanelMode?: AllDayPanelMode, appointmentCollectorTemplate?: any, appointmentTemplate?: any, appointmentTooltipTemplate?: any, cellDuration?: number, dataCellTemplate?: any, dateCellTemplate?: any, endDayHour?: number, firstDayOfWeek?: DayOfWeek | undefined, groupByDate?: boolean, groupOrientation?: Orientation, groups?: Array<string>, hiddenWeekDays?: Array<DayOfWeek> | undefined, intervalCount?: number, maxAppointmentsPerCell?: CellAppointmentsLimit | number, name?: string | undefined, offset?: number, resourceCellTemplate?: any, scrolling?: dxSchedulerScrolling, snapToCellsMode?: SnapToCellsMode, startDate?: Date | number | string | undefined, startDayHour?: number, timeCellTemplate?: any, type?: undefined | ViewType }[] {\n return this._getOption('views');\n }\n set views(value: Array<Record<string, any> | string> | { agendaDuration?: number, allDayPanelMode?: AllDayPanelMode, appointmentCollectorTemplate?: any, appointmentTemplate?: any, appointmentTooltipTemplate?: any, cellDuration?: number, dataCellTemplate?: any, dateCellTemplate?: any, endDayHour?: number, firstDayOfWeek?: DayOfWeek | undefined, groupByDate?: boolean, groupOrientation?: Orientation, groups?: Array<string>, hiddenWeekDays?: Array<DayOfWeek> | undefined, intervalCount?: number, maxAppointmentsPerCell?: CellAppointmentsLimit | number, name?: string | undefined, offset?: number, resourceCellTemplate?: any, scrolling?: dxSchedulerScrolling, snapToCellsMode?: SnapToCellsMode, startDate?: Date | number | string | undefined, startDayHour?: number, timeCellTemplate?: any, type?: undefined | ViewType }[]) {\n this._setOption('views', value);\n }\n\n\n /**\n * Specifies whether the UI component is visible.\n \n */\n @Input()\n get visible(): boolean {\n return this._getOption('visible');\n }\n set visible(value: boolean) {\n this._setOption('visible', value);\n }\n\n\n /**\n * Specifies the UI component&apos;s width.\n \n */\n @Input()\n get width(): number | string | undefined {\n return this._getOption('width');\n }\n set width(value: number | string | undefined) {\n this._setOption('width', value);\n }\n\n /**\n \n * A function that is executed after an appointment is added to the data source.\n \n \n */\n @Output() onAppointmentAdded: EventEmitter<AppointmentAddedEvent>;\n\n /**\n \n * A function that is executed before an appointment is added to the data source.\n \n \n */\n @Output() onAppointmentAdding: EventEmitter<AppointmentAddingEvent>;\n\n /**\n \n * A function that is executed when an appointment is clicked or tapped.\n \n \n */\n @Output() onAppointmentClick: EventEmitter<AppointmentClickEvent>;\n\n /**\n \n * A function that is executed when a user attempts to open the browser&apos;s context menu for an appointment. Allows you to replace this context menu with a custom context menu.\n \n \n */\n @Output() onAppointmentContextMenu: EventEmitter<AppointmentContextMenuEvent>;\n\n /**\n \n * A function that is executed when an appointment is double-clicked or double-tapped.\n \n \n */\n @Output() onAppointmentDblClick: EventEmitter<AppointmentDblClickEvent>;\n\n /**\n \n * A function that is executed after an appointment is deleted from the data source.\n \n \n */\n @Output() onAppointmentDeleted: EventEmitter<AppointmentDeletedEvent>;\n\n /**\n \n * A function that is executed before an appointment is deleted from the data source.\n \n \n */\n @Output() onAppointmentDeleting: EventEmitter<AppointmentDeletingEvent>;\n\n /**\n \n * A function that is executed before Scheduler displays the appointment edit form.\n \n \n */\n @Output() onAppointmentFormOpening: EventEmitter<AppointmentFormOpeningEvent>;\n\n /**\n \n * A function that is executed when an appointment is rendered.\n \n \n */\n @Output() onAppointmentRendered: EventEmitter<AppointmentRenderedEvent>;\n\n /**\n \n * Occurs before showing an appointment&apos;s tooltip.\n \n \n */\n @Output() onAppointmentTooltipShowing: EventEmitter<AppointmentTooltipShowingEvent>;\n\n /**\n \n * A function that is executed after an appointment is updated in the data source.\n \n \n */\n @Output() onAppointmentUpdated: EventEmitter<AppointmentUpdatedEvent>;\n\n /**\n \n * A function that is executed before an appointment is updated in the data source.\n \n \n */\n @Output() onAppointmentUpdating: EventEmitter<AppointmentUpdatingEvent>;\n\n /**\n \n * A function that is executed when a view cell is clicked.\n \n \n */\n @Output() onCellClick: EventEmitter<CellClickEvent>;\n\n /**\n \n * A function that is executed when a user attempts to open the browser&apos;s context menu for a cell. Allows you to replace this context menu with a custom context menu.\n \n \n */\n @Output() onCellContextMenu: EventEmitter<CellContextMenuEvent>;\n\n /**\n \n * A function that is executed when the UI component is rendered and each time the component is repainted.\n \n \n */\n @Output() onContentReady: EventEmitter<ContentReadyEvent>;\n\n /**\n \n * A function that is executed before the UI component is disposed of.\n \n \n */\n @Output() onDisposing: EventEmitter<DisposingEvent>;\n\n /**\n \n * A function used in JavaScript frameworks to save the UI component instance.\n \n \n */\n @Output() onInitialized: EventEmitter<InitializedEvent>;\n\n /**\n \n * A function that is executed after a UI component property is changed.\n \n \n */\n @Output() onOptionChanged: EventEmitter<OptionChangedEvent>;\n\n /**\n \n * A function that is executed when a user finishes selecting a date-time range.\n \n \n */\n @Output() onSelectionEnd: EventEmitter<SelectionEndEvent>;\n\n /**\n \n * This member supports the internal infrastructure and is not intended to be used directly from your code.\n \n */\n @Output() accessKeyChange: EventEmitter<string | undefined>;\n\n /**\n \n * This member supports the internal infrastructure and is not intended to be used directly from your code.\n \n */\n @Output() adaptivityEnabledChange: EventEmitter<boolean>;\n\n /**\n \n * This member supports the internal infrastructure and is not intended to be used directly from your code.\n \n */\n @Output() allDayExprChange: EventEmitter<string>;\n\n /**\n \n * This member supports the internal infrastructure and is not intended to be used directly from your code.\n \n */\n @Output() allDayPanelModeChange: EventEmitter<AllDayPanelMode>;\n\n /**\n \n * This member supports the internal infrastructure and is not intended to be used directly from your code.\n \n */\n @Output() appointmentCollectorTemplateChange: EventEmitter<any>;\n\n /**\n \n * This member supports the internal infrastructure and is not intended to be used directly from your code.\n \n */\n @Output() appointmentDraggingChange: EventEmitter<{ autoScroll?: boolean, data?: any | undefined, group?: string | undefined, onAdd?: ((e: { component: dxScheduler, event: event, fromComponent: dxSortable | dxDraggable, fromData: any, itemData: any, itemElement: any, toComponent: dxSortable | dxDraggable, toData: any }) => void), onDragEnd?: ((e: { cancel: boolean, component: dxScheduler, event: event, fromComponent: dxSortable | dxDraggable, fromData: any, itemData: any, itemElement: any, toComponent: dxSortable | dxDraggable, toData: any, toItemData: any }) => void), onDragMove?: ((e: { cancel: boolean, component: dxScheduler, event: event, fromComponent: dxSortable | dxDraggable, fromData: any, itemData: any, itemElement: any, toComponent: dxSortable | dxDraggable, toData: any }) => void), onDragStart?: ((e: { cancel: boolean, component: dxScheduler, event: event, fromData: any, itemData: any, itemElement: any }) => void), onRemove?: ((e: { component: dxScheduler, event: event, fromComponent: dxSortable | dxDraggable, fromData: any, itemData: any, itemElement: any, toComponent: dxSortable | dxDraggable }) => void), scrollSensitivity?: number, scrollSpeed?: number }>;\n\n /**\n \n * This member supports the internal infrastructure and is not intended to be used directly from your code.\n \n */\n @Output() appointmentTemplateChange: EventEmitter<any>;\n\n /**\n \n * This member supports the internal infrastructure and is not intended to be used directly from your code.\n \n */\n @Output() appointmentTooltipTemplateChange: EventEmitter<any>;\n\n /**\n \n * This member supports the internal infrastructure and is not intended to be used directly from your code.\n \n */\n @Output() cellDurationChange: EventEmitter<number>;\n\n /**\n \n * This member supports the internal infrastructure and is not intended to be used directly from your code.\n \n */\n @Output() crossScrollingEnabledChange: EventEmitter<boolean>;\n\n /**\n \n * This member supports the internal infrastructure and is not intended to be used directly from your code.\n \n */\n @Output() currentDateChange: EventEmitter<Date | number | string>;\n\n /**\n \n * This member supports the internal infrastructure and is not intended to be used directly from your code.\n \n */\n @Output() currentViewChange: EventEmitter<string | ViewType>;\n\n /**\n \n * This member supports the internal infrastructure and is not intended to be used directly from your code.\n \n */\n @Output() customizeDateNavigatorTextChange: EventEmitter<((info: { endDate: Date, startDate: Date, text: string }) => string) | undefined>;\n\n /**\n \n * This member supports the internal infrastructure and is not intended to be used directly from your code.\n \n */\n @Output() dataCellTemplateChange: EventEmitter<any>;\n\n /**\n \n * This member supports the internal infrastructure and is not intended to be used directly from your code.\n \n */\n @Output() dataSourceChange: EventEmitter<Array<dxSchedulerAppointment> | DataSource | DataSourceOptions | null | Store | string>;\n\n /**\n \n * This member supports the internal infrastructure and is not intended to be used directly from your code.\n \n */\n @Output() dateCellTemplateChange: EventEmitter<any>;\n\n /**\n \n * This member supports the internal infrastructure and is not intended to be used directly from your code.\n \n */\n @Output() dateSerializationFormatChange: EventEmitter<string | undefined>;\n\n /**\n \n * This member supports the internal infrastructure and is not intended to be used directly from your code.\n \n */\n @Output() descriptionExprChange: EventEmitter<string>;\n\n /**\n \n * This member supports the internal infrastructure and is not intended to be used directly from your code.\n \n */\n @Output() disabledChange: EventEmitter<boolean>;\n\n /**\n \n * This member supports the internal infrastructure and is not intended to be used directly from your code.\n \n */\n @Output() editingChange: EventEmitter<boolean | { allowAdding?: boolean, allowDeleting?: boolean, allowDragging?: boolean, allowResizing?: boolean, allowTimeZoneEditing?: boolean, allowUpdating?: boolean, form?: AppointmentFormProperties, popup?: Record<string, any> }>;\n\n /**\n \n * This member supports the internal infrastructure and is not intended to be used directly from your code.\n \n */\n @Output() elementAttrChange: EventEmitter<Record<string, any>>;\n\n /**\n \n * This member supports the internal infrastructure and is not intended to be used directly from your code.\n \n */\n @Output() endDateExprChange: EventEmitter<string>;\n\n /**\n \n * This member supports the internal infrastructure and is not intended to be used directly from your code.\n \n */\n @Output() endDateTimeZoneExprChange: EventEmitter<string>;\n\n /**\n \n * This member supports the internal infrastructure and is not intended to be used directly from your code.\n \n */\n @Output() endDayHourChange: EventEmitter<number>;\n\n /**\n \n * This member supports the internal infrastructure and is not intended to be used directly from your code.\n \n */\n @Output() firstDayOfWeekChange: EventEmitter<DayOfWeek | undefined>;\n\n /**\n \n * This member supports the internal infrastructure and is not intended to be used directly from your code.\n \n */\n @Output() focusStateEnabledChange: EventEmitter<boolean>;\n\n /**\n \n * This member supports the internal infrastructure and is not intended to be used directly from your code.\n \n */\n @Output() groupByDateChange: EventEmitter<boolean>;\n\n /**\n \n * This member supports the internal infrastructure and is not intended to be used directly from your code.\n \n */\n @Output() groupsChange: EventEmitter<Array<string>>;\n\n /**\n \n * This member supports the internal infrastructure and is not intended to be used directly from your code.\n \n */\n @Output() heightChange: EventEmitter<number | string | undefined>;\n\n /**\n \n * This member supports the internal infrastructure and is not intended to be used directly from your code.\n \n */\n @Output() hiddenWeekDaysChange: EventEmitter<Array<DayOfWeek> | undefined>;\n\n /**\n \n * This member supports the internal infrastructure and is not intended to be used directly from your code.\n \n */\n @Output() hintChange: EventEmitter<string | undefined>;\n\n /**\n \n * This member supports the internal infrastructure and is not intended to be used directly from your code.\n \n */\n @Output() indicatorUpdateIntervalChange: EventEmitter<number>;\n\n /**\n \n * This member supports the internal infrastructure and is not intended to be used directly from your code.\n \n */\n @Output() maxChange: EventEmitter<Date | number | string | undefined>;\n\n /**\n \n * This member supports the internal infrastructure and is not intended to be used directly from your code.\n \n */\n @Output() maxAppointmentsPerCellChange: EventEmitter<CellAppointmentsLimit | number>;\n\n /**\n \n * This member supports the internal infrastructure and is not intended to be used directly from your code.\n \n */\n @Output() minChange: EventEmitter<Date | number | string | undefined>;\n\n /**\n \n * This member supports the internal infrastructure and is not intended to be used directly from your code.\n \n */\n @Output() noDataTextChange: EventEmitter<string>;\n\n /**\n \n * This member supports the internal infrastructure and is not intended to be used directly from your code.\n \n */\n @Output() offsetChange: EventEmitter<number>;\n\n /**\n \n * This member supports the internal infrastructure and is not intended to be used directly from your code.\n \n */\n @Output() recurrenceEditModeChange: EventEmitter<RecurrenceEditMode>;\n\n /**\n \n * This member supports the internal infrastructure and is not intended to be used directly from your code.\n \n */\n @Output() recurrenceExceptionExprChange: EventEmitter<string>;\n\n /**\n \n * This member supports the internal infrastructure and is not intended to be used directly from your code.\n \n */\n @Output() recurrenceRuleExprChange: EventEmitter<string>;\n\n /**\n \n * This member supports the internal infrastructure and is not intended to be used directly from your code.\n \n */\n @Output() remoteFilteringChange: EventEmitter<boolean>;\n\n /**\n \n * This member supports the internal infrastructure and is not intended to be used directly from your code.\n \n */\n @Output() resourceCellTemplateChange: EventEmitter<any>;\n\n /**\n \n * This member supports the internal infrastructure and is not intended to be used directly from your code.\n \n */\n @Output() resourcesChange: EventEmitter<{ allowMultiple?: boolean, colorExpr?: string, dataSource?: Array<any> | DataSource | DataSourceOptions | null | Store | string, displayExpr?: ((resource: any) => string) | string, fieldExpr?: string, icon?: string, label?: string, useColorAsDefault?: boolean, valueExpr?: Function | string }[]>;\n\n /**\n \n * This member supports the internal infrastructure and is not intended to be used directly from your code.\n \n */\n @Output() rtlEnabledChange: EventEmitter<boolean>;\n\n /**\n \n * This member supports the internal infrastructure and is not intended to be used directly from your code.\n \n */\n @Output() scrollingChange: EventEmitter<dxSchedulerScrolling>;\n\n /**\n \n * This member supports the internal infrastructure and is not intended to be used directly from your code.\n \n */\n @Output() selectedCellDataChange: EventEmitter<Array<any>>;\n\n /**\n \n * This member supports the internal infrastructure and is not intended to be used directly from your code.\n \n */\n @Output() shadeUntilCurrentTimeChange: EventEmitter<boolean>;\n\n /**\n \n * This member supports the internal infrastructure and is not intended to be used directly from your code.\n \n */\n @Output() showAllDayPanelChange: EventEmitter<boolean>;\n\n /**\n \n * This member supports the internal infrastructure and is not intended to be used directly from your code.\n \n */\n @Output() showCurrentTimeIndicatorChange: EventEmitter<boolean>;\n\n /**\n \n * This member supports the internal infrastructure and is not intended to be used directly from your code.\n \n */\n @Output() snapToCellsModeChange: EventEmitter<SnapToCellsMode>;\n\n /**\n \n * This member supports the internal infrastructure and is not intended to be used directly from your code.\n \n */\n @Output() startDateExprChange: EventEmitter<string>;\n\n /**\n \n * This member supports the internal infrastructure and is not intended to be used directly from your code.\n \n */\n @Output() startDateTimeZoneExprChange: EventEmitter<string>;\n\n /**\n \n * This member supports the internal infrastructure and is not intended to be used directly from your code.\n \n */\n @Output() startDayHourChange: EventEmitter<number>;\n\n /**\n \n * This member supports the internal infrastructure and is not intended to be used directly from your code.\n \n */\n @Output() tabIndexChange: EventEmitter<number>;\n\n /**\n \n * This member supports the internal infrastructure and is not intended to be used directly from your code.\n \n */\n @Output() textExprChange: EventEmitter<string>;\n\n /**\n \n * This member supports the internal infrastructure and is not intended to be used directly from your code.\n \n */\n @Output() timeCellTemplateChange: EventEmitter<any>;\n\n /*