UNPKG

smart-webcomponents-angular

Version:

[![Price](https://img.shields.io/badge/price-COMMERCIAL-0098f7.svg)](https://jqwidgets.com/license/)

1 lines 231 kB
{"version":3,"file":"smart-webcomponents-angular-scheduler.mjs","sources":["../../scheduler/src/smart.element.ts","../../scheduler/src/smart.scheduler.ts","../../scheduler/src/smart.scheduler.module.ts","../../scheduler/src/smart-webcomponents-angular-scheduler.ts"],"sourcesContent":["\ndeclare global {\n interface Window {\n Smart: any;\n}\n}\n\n\nimport { Directive, ElementRef, Input, Output, EventEmitter } from '@angular/core';\nimport { ElementRenderMode } from './../index';\n\n@Directive()\nexport class BaseElement {\n constructor(ref: ElementRef) {\n const that = this;\n this.nativeElement = ref.nativeElement as any;\n\n that.nativeElement.onAttached = () => {\n that.onAttach.emit(that.nativeElement);\n }\n\n that.nativeElement.onDetached = () => {\n that.onDetach.emit(that.nativeElement);\n }\n }\n\n @Output() onCreate: EventEmitter<any> = new EventEmitter();\n @Output() onReady: EventEmitter<any> = new EventEmitter();\n @Output() onAttach: EventEmitter<any> = new EventEmitter();\n @Output() onDetach: EventEmitter<any> = new EventEmitter();\n\n public nativeElement: any;\n\n public addEventListener(type: string, listener: EventListenerOrEventListenerObject, options: boolean | AddEventListenerOptions = false): void {\n this.nativeElement.addEventListener(type, listener, options);\n\t}\n\n\tpublic removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options: boolean | AddEventListenerOptions = false): void {\n\t\tthis.nativeElement.removeEventListener(type, listener, options);\n\t}\n\n\tpublic dispatchEvent(event: Event): boolean {\n\t\treturn this.nativeElement.dispatchEvent(event);\n\t}\n\n\tpublic blur(): void {\n\t\tthis.nativeElement.blur();\n\t}\n\n\tpublic click(): void {\n\t\tthis.nativeElement.click();\n\t}\n\n\tpublic focus(options?: FocusOptions): void {\n\t\tthis.nativeElement.focus(options);\n\t}\n\n/** @description Sets or gets the license. */\n\t@Input()\n\tget license(): string {\n\t\treturn this.nativeElement ? this.nativeElement.license : undefined;\n\t}\n\tset license(value: string) {\n\t\tthis.nativeElement ? this.nativeElement.license = value : undefined;\n\t}\n\t\n/** @description Sets or gets the language. Used in conjunction with the property messages. */\n\t@Input()\n\tget locale(): string {\n\t\treturn this.nativeElement ? this.nativeElement.locale : undefined;\n\t}\n\tset locale(value: string) {\n\t\tthis.nativeElement ? this.nativeElement.locale = value : undefined;\n\t}\n\n\t/** @description Callback used to customize the format of the messages that are returned from the Localization Module. */\n\t@Input()\n\tget localizeFormatFunction(): any {\n\t\treturn this.nativeElement ? this.nativeElement.localizeFormatFunction : undefined;\n\t}\n\tset localizeFormatFunction(value: any) {\n\t\tthis.nativeElement ? this.nativeElement.localizeFormatFunction = value : undefined;\n\t}\n\n\t/** @description Sets or gets an object specifying strings used in the widget that can be localized. Used in conjunction with the property locale. */\n\t@Input()\n\tget messages(): any {\n\t\treturn this.nativeElement ? this.nativeElement.messages : undefined;\n\t}\n\tset messages(value: any) {\n\t\tthis.nativeElement ? this.nativeElement.messages = value : undefined;\n\t}\n\n\t/** @description Sets or gets the value indicating whether the element is aligned to support locales using right-to-left fonts. */\n\t@Input()\n\tget rightToLeft(): boolean {\n\t\treturn this.nativeElement ? this.nativeElement.rightToLeft : undefined;\n\t}\n\tset rightToLeft(value: boolean) {\n\t\tthis.nativeElement ? this.nativeElement.rightToLeft = value : undefined;\n\t}\n\n\t/** @description Determines the theme. Theme defines the look of the element */\n\t@Input()\n\tget theme(): string {\n\t\treturn this.nativeElement ? this.nativeElement.theme : undefined;\n\t}\n\tset theme(value: string) {\n\t\tthis.nativeElement ? this.nativeElement.theme = value : undefined;\n\t}\n}\n\nlet Smart: any;\nif (typeof window !== \"undefined\") {\n\tSmart = window.Smart;\n}\nexport { Smart };\n\n","import { Scheduler } from './../index';\nimport { SchedulerEventRenderMode, SchedulerRepeatFreq, SchedulerNotificationType, SchedulerDayFormat, FilterMode, SchedulerGroupOrientation, SchedulerHourFormat, SchedulerHeaderDatePosition, SchedulerHeaderNavigationStyle, SchedulerHeaderViewPosition, SchedulerLegendLocation, SchedulerLegendPosition, SchedulerLegendLayout, HorizontalScrollBarVisibility, MinuteFormat, MonthFormat, ResizeHandlesVisibility, SchedulerResourceSortOrder, SchedulerScrollButtonsPosition, SchedulerSortOrder, SchedulerTimelineDayScale, SchedulerTimeZone, VerticalScrollBarVisibility, SchedulerViewType, SchedulerViews, SchedulerViewSelectorType, SchedulerViewStartDay, WeekDayFormat, YearFormat, SchedulerDataExport, SchedulerEvent, SchedulerEventRepeat, SchedulerNotification, SchedulerResource, SchedulerStatuse, ElementRenderMode} from './../index';\nimport { DataAdapter } from './../index';\nimport { Component, Directive, AfterViewInit, ElementRef, Input, OnInit, OnChanges, OnDestroy, SimpleChanges, Output, EventEmitter } from '@angular/core';\nimport { BaseElement, Smart } from './smart.element';\nexport { SchedulerEventRenderMode, SchedulerRepeatFreq, SchedulerNotificationType, SchedulerDayFormat, FilterMode, SchedulerGroupOrientation, SchedulerHourFormat, SchedulerHeaderDatePosition, SchedulerHeaderNavigationStyle, SchedulerHeaderViewPosition, SchedulerLegendLocation, SchedulerLegendPosition, SchedulerLegendLayout, HorizontalScrollBarVisibility, MinuteFormat, MonthFormat, ResizeHandlesVisibility, SchedulerResourceSortOrder, SchedulerScrollButtonsPosition, SchedulerSortOrder, SchedulerTimelineDayScale, SchedulerTimeZone, VerticalScrollBarVisibility, SchedulerViewType, SchedulerViews, SchedulerViewSelectorType, SchedulerViewStartDay, WeekDayFormat, YearFormat, SchedulerDataExport, SchedulerEvent, SchedulerEventRepeat, SchedulerNotification, SchedulerResource, SchedulerStatuse, ElementRenderMode} from './../index';\nexport { Smart } from './smart.element';\nexport { Scheduler } from './../index';\nexport { DataAdapter } from './../index';\n\n\n@Directive({\n\texportAs: 'smart-scheduler',\tselector: 'smart-scheduler, [smart-scheduler]'\n})\n\nexport class SchedulerComponent extends BaseElement implements OnInit, AfterViewInit, OnDestroy, OnChanges {\n\tconstructor(ref: ElementRef<Scheduler>) {\n\t\tsuper(ref);\n\t\tthis.nativeElement = ref.nativeElement as Scheduler;\n\t}\n\n\tprivate eventHandlers: any[] = [];\n\n\tpublic declare nativeElement: Scheduler;\n\t/** @description Creates the component on demand.\n\t * @param properties An optional object of properties, which will be added to the template binded ones.\n\t */\n\tpublic createComponent(properties = {}): any {\n \tthis.nativeElement = <Scheduler>document.createElement('smart-scheduler');\n\t\tfor (let propertyName in properties) { \n \t\t\tthis.nativeElement[propertyName] = properties[propertyName];\n\t\t}\n\t\treturn this.nativeElement;\n\t}\n\t/** @description Specifies how quickly the calendar view scrolls vertically or horizontally when a user drags an event near the edge of the view. Adjusting this value controls the speed at which the calendar auto-scrolls during drag-and-drop event operations, enhancing user navigation for long or densely populated calendars. */\n\t@Input()\n\tget autoScrollStep(): number {\n\t\treturn this.nativeElement ? this.nativeElement.autoScrollStep : undefined;\n\t}\n\tset autoScrollStep(value: number) {\n\t\tthis.nativeElement ? this.nativeElement.autoScrollStep = value : undefined;\n\t}\n\n\t/** @description Controls whether the height of all-day cells in the Day and Week calendar views automatically adjusts based on the number of events scheduled in each cell. When enabled, all-day cells will dynamically expand or contract in height to fit all contained events; when disabled, the cell height remains fixed regardless of the number of events. */\n\t@Input()\n\tget autoHeightAllDayCells(): boolean {\n\t\treturn this.nativeElement ? this.nativeElement.autoHeightAllDayCells : undefined;\n\t}\n\tset autoHeightAllDayCells(value: boolean) {\n\t\tthis.nativeElement ? this.nativeElement.autoHeightAllDayCells = value : undefined;\n\t}\n\n\t/** @description Specifies an array of objects, each representing a time interval with start and end properties. Both the start and end fields are ISO 8601 formatted date-time strings (e.g., \"2022-10-25T12:00:00.000Z\") that indicate the beginning and end of the interval, respectively. Example:'''json[ { \"start\": \"2022-10-25T12:00:00.000Z\", \"end\": \"2022-10-25T13:00:00.000Z\" }]'''This format is typically used to represent a list of time ranges, where each object defines one range with a precise start and end timestamp in UTC. */\n\t@Input()\n\tget available(): any {\n\t\treturn this.nativeElement ? this.nativeElement.available : undefined;\n\t}\n\tset available(value: any) {\n\t\tthis.nativeElement ? this.nativeElement.available = value : undefined;\n\t}\n\n\t/** @description Specifies the color scheme used for the event background selector within the event window editor, defining the appearance and color options available for users when customizing the background of event windows. */\n\t@Input()\n\tget colorScheme(): string[] {\n\t\treturn this.nativeElement ? this.nativeElement.colorScheme : undefined;\n\t}\n\tset colorScheme(value: string[]) {\n\t\tthis.nativeElement ? this.nativeElement.colorScheme = value : undefined;\n\t}\n\n\t/** @description Specifies the reference time that the Scheduler uses to display the current time indicator. By default, this is set to the current date and time (today). You can customize this value to display the indicator at a specific time, which is useful for testing or demonstrating features independent of the actual system clock. */\n\t@Input()\n\tget currentTime(): string | Date {\n\t\treturn this.nativeElement ? this.nativeElement.currentTime : undefined;\n\t}\n\tset currentTime(value: string | Date) {\n\t\tthis.nativeElement ? this.nativeElement.currentTime = value : undefined;\n\t}\n\n\t/** @description Enables or disables the display of the current time indicator within the view. When enabled, a visual marker or line is shown on the relevant view cells to highlight the present time, helping users easily identify the current point in the schedule or calendar interface. */\n\t@Input()\n\tget currentTimeIndicator(): boolean {\n\t\treturn this.nativeElement ? this.nativeElement.currentTimeIndicator : undefined;\n\t}\n\tset currentTimeIndicator(value: boolean) {\n\t\tthis.nativeElement ? this.nativeElement.currentTimeIndicator = value : undefined;\n\t}\n\n\t/** @description Specifies the frequency, in seconds, at which the currentTimeIndicator is updated or refreshed. This setting controls how often the indicator reflects the current time, allowing you to adjust the real-time accuracy of the display. */\n\t@Input()\n\tget currentTimeIndicatorInterval(): number {\n\t\treturn this.nativeElement ? this.nativeElement.currentTimeIndicatorInterval : undefined;\n\t}\n\tset currentTimeIndicatorInterval(value: number) {\n\t\tthis.nativeElement ? this.nativeElement.currentTimeIndicatorInterval = value : undefined;\n\t}\n\n\t/** @description Specifies which items will be displayed in the context menu when it is activated by the user, allowing you to control the visibility of specific context menu options based on the current application state or user actions. */\n\t@Input()\n\tget contextMenuDataSource(): any[] {\n\t\treturn this.nativeElement ? this.nativeElement.contextMenuDataSource : undefined;\n\t}\n\tset contextMenuDataSource(value: any[]) {\n\t\tthis.nativeElement ? this.nativeElement.contextMenuDataSource = value : undefined;\n\t}\n\n\t/** @description Specifies whether clipboard shortcuts (copy, paste, and cut actions) are displayed in the Scheduler's context menu. When enabled, users can access and perform clipboard operations directly from the context menu for scheduled events. Disabling this option hides clipboard shortcut commands from the menu. */\n\t@Input()\n\tget contextMenuClipboardActions(): boolean {\n\t\treturn this.nativeElement ? this.nativeElement.contextMenuClipboardActions : undefined;\n\t}\n\tset contextMenuClipboardActions(value: boolean) {\n\t\tthis.nativeElement ? this.nativeElement.contextMenuClipboardActions = value : undefined;\n\t}\n\n\t/** @description Enables customization of the content displayed within event elements. This option accepts one of the following:- An 'HTMLTemplateElement' to define the layout and content for all event elements. Property bindings within the template can be used, and they will automatically map to the relevant properties of each event object.- The 'id' (as a string) of an 'HTMLTemplateElement', which will be used for rendering all events.- A custom function to generate event content dynamically. This function is called for each event and receives the following parameters: - 'eventContent' – The content container element for the specific event. - 'eventObj' – The JavaScript object representing the event’s data.Using an 'HTMLTemplateElement' allows you to leverage property bindings (e.g., '{{propertyName}}') within the template, enabling dynamic insertion of event-specific values when rendering each event element. */\n\t@Input()\n\tget eventTemplate(): any {\n\t\treturn this.nativeElement ? this.nativeElement.eventTemplate : undefined;\n\t}\n\tset eventTemplate(value: any) {\n\t\tthis.nativeElement ? this.nativeElement.eventTemplate = value : undefined;\n\t}\n\n\t/** @description Allows you to customize the content displayed by event collector elements. The customization can be provided in one of the following forms:- 'HTMLTemplateElement': Directly supply an 'HTMLTemplateElement'. This template will be cloned and applied to all event collector entries. You can define property bindings within the template, and these will be mapped to the corresponding properties of the event object for each entry.- 'String (Template ID)': Provide the string ID of an 'HTMLTemplateElement' present in the DOM. The element with this ID will be used as the template as described above.- 'Function': Provide a function that will be invoked for each event. This function receives the following parameters: - 'eventContent': The container element for the event's content, which you can modify or populate. - 'eventObj': The event data object itself, allowing you to access event-specific information.When using a template, dynamic property bindings are supported—you can reference fields from the 'eventObj' directly within your template markup.This flexibility allows you to fully control the structure, layout, and dynamic content of each event as it is rendered by the event collector. */\n\t@Input()\n\tget eventCollectorTemplate(): any {\n\t\treturn this.nativeElement ? this.nativeElement.eventCollectorTemplate : undefined;\n\t}\n\tset eventCollectorTemplate(value: any) {\n\t\tthis.nativeElement ? this.nativeElement.eventCollectorTemplate = value : undefined;\n\t}\n\n\t/** @description Determines the rendering style for events displayed within the Scheduler component. classic &ndash; Events are visually arranged side-by-side within each cell, with their sizes adjusted to ensure they fit entirely within the cell boundaries. If multiple events overlap in the same time slot, they are compressed horizontally to avoid overflow and remain fully visible within the cell. modern &ndash; Events adhere to their specified CSS size properties, such as height and width, rather than automatically resizing to fit the cell. If there are more events than can visibly fit within a cell, an \"event collector\" (typically a counter or indicator) is displayed that, when clicked, reveals the hidden events in a popup or modal. On mobile devices, due to limited screen space, only event collectors are shown within each cell, requiring the user to tap to view the full list of events. */\n\t@Input()\n\tget eventRenderMode(): SchedulerEventRenderMode | string {\n\t\treturn this.nativeElement ? this.nativeElement.eventRenderMode : undefined;\n\t}\n\tset eventRenderMode(value: SchedulerEventRenderMode | string) {\n\t\tthis.nativeElement ? this.nativeElement.eventRenderMode = value : undefined;\n\t}\n\n\t/** @description Enables the customization of the content displayed within the event menu tooltip. When a user clicks on an event element, a menu opens showing detailed information about that event. You can define this content in one of three ways:- 'HTMLTemplateElement': Provide a template element that will be applied to all events. Inside the template, you can use property bindings referencing the event object’s properties for dynamic content generation.- 'String (Template ID)': Pass the ID of an 'HTMLTemplateElement' as a string to use that template for all event tooltips.- 'Function': Supply a callback function that is invoked for each event. This function receives the following parameters: - 'eventContent': The container element or node where the event’s menu content should be rendered or modified. - 'eventObj': The event data object with all event properties. Using an HTMLTemplateElement allows you to seamlessly bind event properties within the template’s markup, making it easy to display custom information for each event.This option gives you full flexibility to design and control the appearance and content of the event details menu, ensuring it matches your application's needs and styling. */\n\t@Input()\n\tget eventTooltipTemplate(): any {\n\t\treturn this.nativeElement ? this.nativeElement.eventTooltipTemplate : undefined;\n\t}\n\tset eventTooltipTemplate(value: any) {\n\t\tthis.nativeElement ? this.nativeElement.eventTooltipTemplate = value : undefined;\n\t}\n\n\t/** @description Enables customization of the timeline cell content. This option accepts one of the following:- 'HTMLTemplateElement': A template element whose content will be used for all timeline cells. When using a template, you can define property bindings within the template, which will be replaced with the corresponding values for each cell at render time.- 'String (template ID)': The ID of an HTMLTemplateElement defined elsewhere in the DOM. The referenced template's content will be applied to all cells.- 'Function': A callback function that will be invoked for each cell. The function receives the following parameters: - 'cellContent': The container element for the cell’s content. - 'cellDate': A date object representing the specific date of the cell.This flexibility allows you to either use a standard HTML template for all cells or provide a custom rendering function to dynamically generate cell content based on cell data. When using an HTMLTemplateElement, you can include dynamic bindings within the template, which will be populated with the appropriate cell values during rendering. */\n\t@Input()\n\tget cellTemplate(): any {\n\t\treturn this.nativeElement ? this.nativeElement.cellTemplate : undefined;\n\t}\n\tset cellTemplate(value: any) {\n\t\tthis.nativeElement ? this.nativeElement.cellTemplate = value : undefined;\n\t}\n\n\t/** @description Specifies the date that is currently displayed in the Scheduler view, allowing you to control which day, week, or month is shown to users. This property can be set programmatically to change the visible date or used to track which date the user is viewing in the Scheduler interface. */\n\t@Input()\n\tget dateCurrent(): string | Date {\n\t\treturn this.nativeElement ? this.nativeElement.dateCurrent : undefined;\n\t}\n\tset dateCurrent(value: string | Date) {\n\t\tthis.nativeElement ? this.nativeElement.dateCurrent = value : undefined;\n\t}\n\n\t/** @description Configures the data export settings for the Scheduler, including file format, export range, and additional export-related options. */\n\t@Input()\n\tget dataExport(): SchedulerDataExport {\n\t\treturn this.nativeElement ? this.nativeElement.dataExport : undefined;\n\t}\n\tset dataExport(value: SchedulerDataExport) {\n\t\tthis.nativeElement ? this.nativeElement.dataExport = value : undefined;\n\t}\n\n\t/** @description Specifies the list of events that will be displayed within the Timeline component. Each event must be represented as an object with the following required properties: */\n\t@Input()\n\tget dataSource(): SchedulerEvent[] {\n\t\treturn this.nativeElement ? this.nativeElement.dataSource : undefined;\n\t}\n\tset dataSource(value: SchedulerEvent[]) {\n\t\tthis.nativeElement ? this.nativeElement.dataSource = value : undefined;\n\t}\n\n\t/** @description A callback function that allows you to customize the text displayed within the date selector in the header section. This function receives a single parameter—the currently selected date—enabling you to return a custom string based on the date value. Use this callback to modify how the date appears in the header, such as formatting the date, adding prefixes or suffixes, or localizing the displayed value. */\n\t@Input()\n\tget dateSelectorFormatFunction(): any {\n\t\treturn this.nativeElement ? this.nativeElement.dateSelectorFormatFunction : undefined;\n\t}\n\tset dateSelectorFormatFunction(value: any) {\n\t\tthis.nativeElement ? this.nativeElement.dateSelectorFormatFunction = value : undefined;\n\t}\n\n\t/** @description Specifies the display format for the day component of dates shown in the timeline. This setting controls how days are rendered, such as numeric (e.g., \"12\"), abbreviated (e.g., \"Mon\"), or full weekday names (e.g., \"Monday\"), to match the desired presentation style in the timeline. */\n\t@Input()\n\tget dayFormat(): SchedulerDayFormat | string {\n\t\treturn this.nativeElement ? this.nativeElement.dayFormat : undefined;\n\t}\n\tset dayFormat(value: SchedulerDayFormat | string) {\n\t\tthis.nativeElement ? this.nativeElement.dayFormat = value : undefined;\n\t}\n\n\t/** @description Determines whether the element is interactive or non-interactive. When enabled, the element can receive user input and respond to events. When disabled, the element becomes inactive, preventing user interaction and applying any default disabled styling. */\n\t@Input()\n\tget disabled(): boolean {\n\t\treturn this.nativeElement ? this.nativeElement.disabled : undefined;\n\t}\n\tset disabled(value: boolean) {\n\t\tthis.nativeElement ? this.nativeElement.disabled = value : undefined;\n\t}\n\n\t/** @description Prevents the timeline from automatically scrolling when you drag or resize an event, ensuring that the visible timeline remains stationary during these interactions. */\n\t@Input()\n\tget disableAutoScroll(): boolean {\n\t\treturn this.nativeElement ? this.nativeElement.disableAutoScroll : undefined;\n\t}\n\tset disableAutoScroll(value: boolean) {\n\t\tthis.nativeElement ? this.nativeElement.disableAutoScroll = value : undefined;\n\t}\n\n\t/** @description Prevents users from dragging and repositioning events within the calendar interface. Events will remain fixed in their original positions, and any attempt to move them via drag-and-drop functionality will be disabled. */\n\t@Input()\n\tget disableDrag(): boolean {\n\t\treturn this.nativeElement ? this.nativeElement.disableDrag : undefined;\n\t}\n\tset disableDrag(value: boolean) {\n\t\tthis.nativeElement ? this.nativeElement.disableDrag = value : undefined;\n\t}\n\n\t/** @description Prevents events from being removed or discarded when system resources are limited or when buffer overflows occur. All incoming events will be retained and processed, ensuring no loss of event data. */\n\t@Input()\n\tget disableDrop(): boolean {\n\t\treturn this.nativeElement ? this.nativeElement.disableDrop : undefined;\n\t}\n\tset disableDrop(value: boolean) {\n\t\tthis.nativeElement ? this.nativeElement.disableDrop = value : undefined;\n\t}\n\n\t/** @description Prevents users from resizing events within the calendar interface, ensuring event durations remain fixed and cannot be adjusted through drag-and-drop or other resizing actions. */\n\t@Input()\n\tget disableResize(): boolean {\n\t\treturn this.nativeElement ? this.nativeElement.disableResize : undefined;\n\t}\n\tset disableResize(value: boolean) {\n\t\tthis.nativeElement ? this.nativeElement.disableResize = value : undefined;\n\t}\n\n\t/** @description Prevents users from selecting or highlighting the contents of the cell, disabling any cell selection functionality. */\n\t@Input()\n\tget disableSelection(): boolean {\n\t\treturn this.nativeElement ? this.nativeElement.disableSelection : undefined;\n\t}\n\tset disableSelection(value: boolean) {\n\t\tthis.nativeElement ? this.nativeElement.disableSelection = value : undefined;\n\t}\n\n\t/** @description Prevents the event window editor from opening, effectively disabling the ability for users to view or modify event details through the window interface. */\n\t@Input()\n\tget disableWindowEditor(): boolean {\n\t\treturn this.nativeElement ? this.nativeElement.disableWindowEditor : undefined;\n\t}\n\tset disableWindowEditor(value: boolean) {\n\t\tthis.nativeElement ? this.nativeElement.disableWindowEditor = value : undefined;\n\t}\n\n\t/** @description Prevents the default context menu from appearing when users right-click on events or cells. This disables the standard browser context menu and any custom right-click actions for these elements. */\n\t@Input()\n\tget disableContextMenu(): boolean {\n\t\treturn this.nativeElement ? this.nativeElement.disableContextMenu : undefined;\n\t}\n\tset disableContextMenu(value: boolean) {\n\t\tthis.nativeElement ? this.nativeElement.disableContextMenu = value : undefined;\n\t}\n\n\t/** @description Prevents the event menu from appearing when a user clicks on an event or collector. This setting effectively disables the popup menu that typically provides event-related options or actions upon selection, ensuring that no event menu is shown during user interaction. */\n\t@Input()\n\tget disableEventMenu(): boolean {\n\t\treturn this.nativeElement ? this.nativeElement.disableEventMenu : undefined;\n\t}\n\tset disableEventMenu(value: boolean) {\n\t\tthis.nativeElement ? this.nativeElement.disableEventMenu = value : undefined;\n\t}\n\n\t/** @description Prevents users from accessing the view selection menu in the Scheduler, thereby disabling the ability to switch between different Scheduler views (such as day, week, or month). */\n\t@Input()\n\tget disableViewMenu(): boolean {\n\t\treturn this.nativeElement ? this.nativeElement.disableViewMenu : undefined;\n\t}\n\tset disableViewMenu(value: boolean) {\n\t\tthis.nativeElement ? this.nativeElement.disableViewMenu = value : undefined;\n\t}\n\n\t/** @description Prevents the date selection menu from appearing, disabling the user's ability to change the current Scheduler date through the interface. */\n\t@Input()\n\tget disableDateMenu(): boolean {\n\t\treturn this.nativeElement ? this.nativeElement.disableDateMenu : undefined;\n\t}\n\tset disableDateMenu(value: boolean) {\n\t\tthis.nativeElement ? this.nativeElement.disableDateMenu = value : undefined;\n\t}\n\n\t/** @description A callback function that allows you to define and customize the visual feedback displayed to users while an event is being dragged. This enables you to modify the appearance or content of the drag preview element according to your application's requirements. */\n\t@Input()\n\tget dragFeedbackFormatFunction(): any {\n\t\treturn this.nativeElement ? this.nativeElement.dragFeedbackFormatFunction : undefined;\n\t}\n\tset dragFeedbackFormatFunction(value: any) {\n\t\tthis.nativeElement ? this.nativeElement.dragFeedbackFormatFunction = value : undefined;\n\t}\n\n\t/** @description Specifies the distance and direction that the drag feedback widget is shifted relative to the user’s pointer during a drag operation. This offset customizes where the feedback appears in relation to the pointer, allowing for better visual alignment or to avoid obscuring elements beneath the pointer. */\n\t@Input()\n\tget dragOffset(): any {\n\t\treturn this.nativeElement ? this.nativeElement.dragOffset : undefined;\n\t}\n\tset dragOffset(value: any) {\n\t\tthis.nativeElement ? this.nativeElement.dragOffset = value : undefined;\n\t}\n\n\t/** @description Specifies the filtering criteria for events in the Scheduler. The filter property supports two formats: an 'array of filter objects' or a 'custom filtering function'.'Array of Filter Objects' Each object in the array represents a distinct filtering rule, and must include the following attributes:- 'name': The name of the Scheduler event property to filter by (for example, '\"price\"' or '\"roomId\"').- 'value': The condition against which the event property will be evaluated. This can be: - A static value—used as the comparison target based on the current 'filterMode'. For example: '''json [{ \"name\": \"price\", \"value\": 25 }] ''' This filters events to only those where the 'price' property matches '25'. - A function—enables advanced, custom filtering logic for that property. The function receives the value of the specified event property and should return 'true' (to keep the event) or 'false' (to exclude the event). Example: '''js [ { name: 'roomId', value: (id) => ['2', '3'].includes(String(id)) } ] ''' This example filters in only the events whose 'roomId' property is ''2'' or ''3''. All other events are filtered out.'Function as Filter' Alternatively, you may assign a function directly to the 'filter' property for full control over filtering logic. This callback function receives each Scheduler event as its single argument and should return 'true' to include or 'false' to exclude the event. Example:'''jsfilter: (event) => event.status === 'confirmed' && event.attendees.length > 2'''This custom function ensures only confirmed events with more than two attendees are shown in the Scheduler.'Summary:' - Use an 'array of filter objects' for property-based filtering, supporting simple values or custom functions for each attribute.- Use a 'function' for comprehensive, event-level filtering based on any combination of criteria.This flexibility allows you to implement straightforward or highly customized filtering logic to match your application's requirements. */\n\t@Input()\n\tget filter(): any {\n\t\treturn this.nativeElement ? this.nativeElement.filter : undefined;\n\t}\n\tset filter(value: any) {\n\t\tthis.nativeElement ? this.nativeElement.filter = value : undefined;\n\t}\n\n\t/** @description Specifies whether filtering functionality is enabled for the Scheduler component. When set to true, users can filter scheduled items based on defined criteria; when false, filtering options are disabled and all items are displayed without filtering. */\n\t@Input()\n\tget filterable(): any {\n\t\treturn this.nativeElement ? this.nativeElement.filterable : undefined;\n\t}\n\tset filterable(value: any) {\n\t\tthis.nativeElement ? this.nativeElement.filterable = value : undefined;\n\t}\n\n\t/** @description Specifies the method used to filter or process data, such as applying different algorithms or rules to control how information is displayed, sorted, or selected. The chosen filter mode affects how results are generated and presented. */\n\t@Input()\n\tget filterMode(): FilterMode | string {\n\t\treturn this.nativeElement ? this.nativeElement.filterMode : undefined;\n\t}\n\tset filterMode(value: FilterMode | string) {\n\t\tthis.nativeElement ? this.nativeElement.filterMode = value : undefined;\n\t}\n\n\t/** @description A getter method that retrieves and returns an array containing all event objects currently managed by the Scheduler. Each event object in the array represents a scheduled event with its associated properties and details. */\n\t@Input()\n\tget events(): SchedulerEvent[] {\n\t\treturn this.nativeElement ? this.nativeElement.events : undefined;\n\t}\n\tset events(value: SchedulerEvent[]) {\n\t\tthis.nativeElement ? this.nativeElement.events = value : undefined;\n\t}\n\n\t/** @description Specifies which day will be considered the first day of the week in the Scheduler component. By default, this is set to Sunday. You can configure this setting to start the week on any preferred day (e.g., Monday, Tuesday) to better match regional and user preferences. This affects how weeks are displayed and navigated within the Scheduler. */\n\t@Input()\n\tget firstDayOfWeek(): number {\n\t\treturn this.nativeElement ? this.nativeElement.firstDayOfWeek : undefined;\n\t}\n\tset firstDayOfWeek(value: number) {\n\t\tthis.nativeElement ? this.nativeElement.firstDayOfWeek = value : undefined;\n\t}\n\n\t/** @description Enables customization of the Scheduler's footer area. The footer content can be provided in one of the following ways:- As an HTMLTemplateElement.- By specifying the id of an existing HTML template as a string.- By passing a function with the following parameter: - footerContainer – The container element for the footer, which you can use to programmatically modify or populate the footer’s content.This flexibility allows you to define the Scheduler's footer using markup, template references, or custom logic as needed. */\n\t@Input()\n\tget footerTemplate(): any {\n\t\treturn this.nativeElement ? this.nativeElement.footerTemplate : undefined;\n\t}\n\tset footerTemplate(value: any) {\n\t\tthis.nativeElement ? this.nativeElement.footerTemplate = value : undefined;\n\t}\n\n\t/** @description Indicates whether events should be organized and displayed based on their associated dates, grouping all events that occur on the same date together. */\n\t@Input()\n\tget groupByDate(): boolean {\n\t\treturn this.nativeElement ? this.nativeElement.groupByDate : undefined;\n\t}\n\tset groupByDate(value: boolean) {\n\t\tthis.nativeElement ? this.nativeElement.groupByDate = value : undefined;\n\t}\n\n\t/** @description Specifies the direction or axis along which items are grouped, such as horizontal or vertical, affecting how elements are arranged and displayed within the interface. */\n\t@Input()\n\tget groupOrientation(): SchedulerGroupOrientation | string {\n\t\treturn this.nativeElement ? this.nativeElement.groupOrientation : undefined;\n\t}\n\tset groupOrientation(value: SchedulerGroupOrientation | string) {\n\t\tthis.nativeElement ? this.nativeElement.groupOrientation = value : undefined;\n\t}\n\n\t/** @description Enhances customization for group cell headers by allowing you to define how each group cell is rendered within the header section. You can specify one of the following as the template:- 'HTMLTemplateElement': Supply an HTML '&lt;template&gt;' element that will be applied to all group header cells. Within your template, you can use property bindings that correspond to properties of the group cell object. These bindings will be automatically populated with the respective values for each cell.- 'Template ID (String)': Provide the 'id' attribute of an existing HTML '&lt;template&gt;' element. The identified template will be used for rendering all group header cells.- 'Custom Function': Specify a function that will be called for each group cell. The function will receive two parameters: - 'cellContent': A DOM element that acts as a container for the group cell’s content. - 'cellObj': The data object associated with the current group cell.This approach gives you full flexibility to display custom content, styles, and data for group header cells according to your requirements. If you use an HTMLTemplateElement, you can leverage dynamic property bindings that map directly to the properties of each group cell’s data object. */\n\t@Input()\n\tget groupTemplate(): any {\n\t\treturn this.nativeElement ? this.nativeElement.groupTemplate : undefined;\n\t}\n\tset groupTemplate(value: any) {\n\t\tthis.nativeElement ? this.nativeElement.groupTemplate = value : undefined;\n\t}\n\n\t/** @description Specifies the resource type or category by which events are organized or grouped, enabling the display and management of events according to associated resources (such as users, rooms, equipment, or custom entities). This setting determines how events are visually separated and filtered within the application based on their linked resources. */\n\t@Input()\n\tget groups(): any {\n\t\treturn this.nativeElement ? this.nativeElement.groups : undefined;\n\t}\n\tset groups(value: any) {\n\t\tthis.nativeElement ? this.nativeElement.groups = value : undefined;\n\t}\n\n\t/** @description Specifies the latest hour that will be visible on the calendar in both 'day' and 'week' views. Events scheduled after this hour will not be displayed in these views. */\n\t@Input()\n\tget hourEnd(): number {\n\t\treturn this.nativeElement ? this.nativeElement.hourEnd : undefined;\n\t}\n\tset hourEnd(value: number) {\n\t\tthis.nativeElement ? this.nativeElement.hourEnd = value : undefined;\n\t}\n\n\t/** @description Specifies the starting hour of the visible time range in the 'day' and 'week' calendar views. Events or time slots before this hour will not be shown in these views. */\n\t@Input()\n\tget hourStart(): number {\n\t\treturn this.nativeElement ? this.nativeElement.hourStart : undefined;\n\t}\n\tset hourStart(value: number) {\n\t\tthis.nativeElement ? this.nativeElement.hourStart = value : undefined;\n\t}\n\n\t/** @description Specifies how hours are displayed within the element, including aspects such as 12-hour or 24-hour format, inclusion of leading zeros, and any relevant separators or annotations (e.g., AM/PM). */\n\t@Input()\n\tget hourFormat(): SchedulerHourFormat | string {\n\t\treturn this.nativeElement ? this.nativeElement.hourFormat : undefined;\n\t}\n\tset hourFormat(value: SchedulerHourFormat | string) {\n\t\tthis.nativeElement ? this.nativeElement.hourFormat = value : undefined;\n\t}\n\n\t/** @description Enables customization of the Scheduler's header. The header can be specified in one of the following ways:- As an HTMLTemplateElement, allowing you to define a reusable template for the header's content.- As a string representing the id of an existing HTML template element in the DOM.- As a function that provides advanced customization. The function receives the following parameter: - headerContent: The container element for the header, which you can modify or populate as needed.This flexibility lets you tailor the Scheduler's header to fit your specific design or functional requirements. */\n\t@Input()\n\tget headerTemplate(): any {\n\t\treturn this.nativeElement ? this.nativeElement.headerTemplate : undefined;\n\t}\n\tset headerTemplate(value: any) {\n\t\tthis.nativeElement ? this.nativeElement.headerTemplate = value : undefined;\n\t}\n\n\t/** @description Specifies the placement of the Date selector within the Header section of the component, allowing you to control where the Date selector appears relative to other header elements. */\n\t@Input()\n\tget headerDatePosition(): SchedulerHeaderDatePosition | string {\n\t\treturn this.nativeElement ? this.nativeElement.headerDatePosition : undefined;\n\t}\n\tset headerDatePosition(value: SchedulerHeaderDatePosition | string) {\n\t\tthis.nativeElement ? this.nativeElement.headerDatePosition = value : undefined;\n\t}\n\n\t/** @description Defines and customizes the appearance and layout of the header navigation controls, including their colors, fonts, spacing, and interactive states. This setting allows you to adjust how navigation elements are presented in the header section of the application or website. */\n\t@Input()\n\tget headerNavigationStyle(): SchedulerHeaderNavigationStyle | string {\n\t\treturn this.nativeElement ? this.nativeElement.headerNavigationStyle : undefined;\n\t}\n\tset headerNavigationStyle(value: SchedulerHeaderNavigationStyle | string) {\n\t\tthis.nativeElement ? this.nativeElement.headerNavigationStyle = value : undefined;\n\t}\n\n\t/** @description Specifies the exact location of the view selector control within the header section of the element, allowing you to control where the selector appears in relation to other header components. */\n\t@Input()\n\tget headerViewPosition(): SchedulerHeaderViewPosition | string {\n\t\treturn this.nativeElement ? this.nativeElement.headerViewPosition : undefined;\n\t}\n\tset headerViewPosition(value: SchedulerHeaderViewPosition | string) {\n\t\tthis.nativeElement ? this.nativeElement.headerViewPosition = value : undefined;\n\t}\n\n\t/** @description Specifies whether the 'All Day' container—which displays events scheduled to last the entire day—is visible or hidden. When set to true, the container and its all-day events will not be displayed; when false, they will be shown. */\n\t@Input()\n\tget hideAllDay(): boolean {\n\t\treturn this.nativeElement ? this.nativeElement.hideAllDay : undefined;\n\t}\n\tset hideAllDay(value: boolean) {\n\t\tthis.nativeElement ? this.nativeElement.hideAllDay = value : undefined;\n\t}\n\n\t/** @description Specifies whether the days defined in the 'nonworkingDays' property should be visually hidden from view (e.g., not displayed in the calendar or schedule UI), rather than simply marked as non-working. When set to true, all days listed in 'nonworkingDays' will be completely omitted from the display. When set to false, these days remain visible but may be styled differently to indicate their non-working status. */\n\t@Input()\n\tget hideNonworkingWeekdays(): boolean {\n\t\treturn this.nativeElement ? this.nativeElement.hideNonworkingWeekdays : undefined;\n\t}\n\tset hideNonworkingWeekdays(value: boolean) {\n\t\tthis.nativeElement ? this.nativeElement.hideNonworkingWeekdays = value : undefined;\n\t}\n\n\t/** @description Enhances the calendar's month view by controlling the visibility and interactivity of \"other month\" days—those that do not belong to the currently displayed month. When this option is enabled:- Days from previous or next months are displayed as inactive background cells.- Events 'cannot' be created, dragged, or dropped onto these \"other month\" days.- Events that 'start' on \"other month\" days are hidden; only events that 'end' on these days may be partially shown.- Resizing of events cannot begin or end on \"other month\" days.- Overall, \"other month\" days serve purely as visual placeholders, preventing user interaction or event association. */\n\t@Input()\n\tget hideOtherMonthDays(): boolean {\n\t\treturn this.nativeElement ? this.nativeElement.hideOtherMonthDays : undefined;\n\t}\n\tset hideOtherMonthDays(value: boolean) {\n\t\tthis.nativeElement ? this.nativeElement.hideOtherMonthDays = value : undefined;\n\t}\n\n\t/** @description Specifies whether the 'Today' button is visible in the user interface. When set to true, the 'Today' button will be hidden; when set to false, the button will be displayed. */\n\t@Input()\n\tget hideTodayButton(): boolean {\n\t\treturn this.nativeElement ? this.nativeElement.hideTodayButton : undefined;\n\t}\n\tset hideTodayButton(value: boolean) {\n\t\tthis.nativeElement ? this.nativeElement.hideTodayButton = value : undefined;\n\t}\n\n\t/** @description Controls the visibility of checkable items within the view selection menu. When enabled, checkable items are hidden from the menu; when disabled, checkable items are displayed, allowing users to select or deselect individual views. */\n\t@Input()\n\tget hideViewMenuCheckableItems(): boolean {\n\t\treturn this.nativeElement ? this.nativeElement.hideViewMenuCheckableItems : undefined;\n\t}\n\tset hideViewMenuCheckableItems(value: boolean) {\n\t\tthis.nativeElement ? this.nativeElement.hideViewMenuCheckableItems = value : undefined;\n\t}\n\n\t/** @description Specifies whether weekend days (typically Saturday and Sunday) should be displayed or hidden in the calendar view. If set to true, weekend days will be hidden; if set to false, weekend days will be visible. */\n\t@Input()\n\tget hideWeekend(): boolean {\n\t\treturn this.nativeElement ? this.nativeElement.hideWeekend : undefined;\n\t}\n\tset hideWeekend(value: boolean) {\n\t\tthis.nativeElement ? this.nativeElement.hideWeekend = value : undefined;\n\t}\n\n\t/** @description Specifies where the legend is displayed within the Scheduler component. By default, the legend appears in the footer section, but it can be configured to display in the header instead. This setting allows you to customize the placement of the legend to better fit your application's layout and user experience requirements. */\n\t@Input()\n\tget legendLocation(): SchedulerLegendLocation | string {\n\t\treturn this.nativeElement ? this.nativeElement.legendLocation : undefined;\n\t}\n\tset legendLocation(value: SchedulerLegendLocation | string) {\n\t\tthis.nativeElement ? this.nativeElement.legendLocation = value : undefined;\n\t}\n\n\t/** @description Specifies the placement of the legend within the chart area. By default, the legend appears on the 'near' side (typically aligned to the left or top, depending on chart orientation). Setting this property to 'far' positions the legend on the opposite side (right or bottom), allowing customization of the legend's location to better suit your layout needs. */\n\t@Input()\n\tget legendPosition(): SchedulerLegendPosition | string {\n\t\treturn this.nativeElement ? this.nativeElement.legendPosition : undefined;\n\t}\n\tset legendPosition(value: SchedulerLegendPosition | string) {\n\t\tthis.nativeElement ? this.nativeElement.legendPosition = value : undefined;\n\t}\n\n\t/** @description Specifies how the legend items are arranged within the chart, such as organizing them in a horizontal row, vertical column, or a customized layout. This property controls the visual structure and ordering of items displayed in the legend. */\n\t@Input()\n\tget legendLayout(): SchedulerLegendLayout | string {\n\t\treturn this.nativeElement ? this.nativeElement.legendLayout : undefined;\n\t}\n\tset legendLayout(value: SchedulerLegendLayout | string) {\n\t\tthis.nativeElement ? this.nativeElement.legendLayout = value : undefined;\n\t}\n\n\t/** @description Specifies the maximum number of items that can be displayed in the legend as a horizontal list. If the number of legend items exceeds this value, the legend will automatically switch to a dropdown menu format for better readability and usability. */\n\t@Input()\n\tget legendLayoutMenuBreakpoint(): number {\n\t\treturn this.nativeElement ? this.nativeElement.legendLayoutMenuBreakpoint : undefined;\n\t}\n\tset legendLayoutMenuBreakpoint(value: number) {\n\t\tthis.nativeElement ? this.nativeElement.legendLayoutMenuBreakpoint = value : undefined;\n\t}\n\n\t/** @description Controls the scroll increment when using the mouse wheel or trackpad. Setting this property to a positive number specifies the distance (in pixels, lines, or a defined unit) that the content will scroll with each wheel or trackpad movement. A higher value increases the scroll distance per step, while a lower value results in finer, more precise scrolling. */\n\t@Input()\n\tget mouseWheelStep(): number {\n\t\treturn this.nativeElement ? this.nativeElement.mouseWheelStep : undefined;\n\t}\n\tset mouseWheelStep(value: number) {\n\t\tthis.nativeElement ? this.nativeElement.mouseWheelStep = value : undefined;\n\t}\n\n\t/** @description Specifies whether the horizontal scrollbar is visible. If set to true, a horizontal scrollbar will appear when the content overflows the container’s width; if false, the scrollbar will be hidden regardless of overflow. */\n\t@Input()\n\tget horizontalScrollBarVisibility(): HorizontalScrollBarVisibility | string {\n\t\treturn this.nativeElement ? this.nativeElement.horizontalScrollBarVisibility : undefined;\n\t}\n\tset horizontalScrollBarVisibility(value: HorizontalScrollBarVisibility | string) {\n\t\tthis.nativeElement ? this.nativeElement.horizontalScrollBarVisibility = value : undefined;\n\t}\n\n\t/** @description Sets or retrieves the 'unlockKey', a unique value required to unlock and access the product’s full features or functionality. */\n\t@Input()\n\tget unlockKey(): string {\n\t\treturn this.nativeElement ? this.nativeElement.unlockKey : undefined;\n\t}\n\tset unlockKey(value: string) {\n\t\tthis.nativeElement ? this.nativeElement.unlockKey = value : undefined;\n\t}\n\n\t/** @description Specifies the language and regional settings used to display all interface elements, dates, and messages within the Scheduler component. This setting ensures that the Scheduler is localized according to the selected language. */\n\t@Input()\n\tget locale(): string {\n\t\treturn this.nativeElement ? this.nativeElement.locale : undefined;\n\t}\n\tset locale(value: string) {\n\t\tthis.nativeElement ? this.nativeElement.locale = value : undefined;\n\t}\n\n\t/** @description Determines the latest date that can be displayed or selected in the Scheduler, effectively setting an upper limit for the Scheduler's visible or selectable date range. */\n\t@Input()\n\tget max(): string | Date {\n\t\treturn this.nativeElement ? this.nativeElement.max : undefined;\n\t}\n\tset max(value: string | Date) {\n\t\tthis.nativeElement ? this.nativeElement.max = value : undefined;\n\t}\n\n\t/** @description Specifies the maximum number of events that can be displayed in each Scheduler cell. If this property is set to null (the default value), the Scheduler automatically calculates how many events can fit in a cell based on the available space and the size of each event. Setting a specific value overrides this behavior and limits the number of visible events per cell to the specified maximum. Events exceeding this limit may be hidden or grouped into an overflow indicator, depending on the Scheduler’s configuration. */\n\t@Input()\n\tget maxEventsPerCell(): number | null {\n\t\treturn this.nativeElement