smart-webcomponents-angular
Version:
[](https://jqwidgets.com/license/)
487 lines • 487 kB
JavaScript
import { Directive, Input, Output, EventEmitter } from '@angular/core';
import { BaseElement, Smart } from './smart.element';
import * as i0 from "@angular/core";
export { Smart } from './smart.element';
export class SchedulerComponent extends BaseElement {
constructor(ref) {
super(ref);
this.eventHandlers = [];
/** @description This event is triggered when a batch update operation begins, initiated by calling the beginUpdate method. It indicates that any changes made to the underlying data or UI components between the beginUpdate and endUpdate methods will be grouped and processed as a single batch, rather than triggering individual updates for each change. This event allows developers to perform any necessary setup or respond appropriately at the start of a batch update sequence.
* @param event. The custom event. */
this.onBeginUpdate = new EventEmitter();
/** @description This event is triggered after the endUpdate method is executed, signaling that a batch update operation has been completed. It indicates that all changes grouped within the update session have finished processing, and any relevant updates or UI refreshes can now occur.
* @param event. The custom event. */
this.onEndUpdate = new EventEmitter();
/** @description This event is triggered whenever a user selects or deselects a cell, providing a notification each time the cell selection state changes. It can be used to detect when a cell gains or loses selection focus within the interface.
* @param event. The custom event. Custom event was created with: event.detail( value, oldValue)
* value - The new selected Date.
* oldValue - The previously selected Date.
*/
this.onChange = new EventEmitter();
/** @description This event is triggered whenever an event in the calendar is modified in any of the following ways: created (inserted), updated (edited), deleted (removed), dragged to a new position, or resized to change its duration. Additionally, the event is fired when an exception for a recurring event is added, updated, or removed. This ensures your application can respond to all major modifications or exceptions affecting calendar events.
* @param event. The custom event. Custom event was created with: event.detail( item, type)
* item - An object that represents the actual item with it's attributes.
* type - The type of change that is being done to the item.
*/
this.onItemChange = new EventEmitter();
/** @description "This event is fired immediately before an event record is updated, inserted, or removed in the system. Developers can intercept this event in their handler function to perform custom logic. To prevent the default update, insert, or removal operation from proceeding, call event.preventDefault() within the event handler. This mechanism enables conditional validation, confirmation dialogs, or other asynchronous checks before changes are finalized."
* @param event. The custom event. Custom event was created with: event.detail( item, type)
* item - An object that represents the actual item with it's attributes.
* type - The type of change that is going to be made to the item (e.g. 'inserting', 'removing', 'updating', 'exceptionInserting', 'exceptionUpdating', 'exceptionRemoving').
*/
this.onItemChanging = new EventEmitter();
/** @description This event is triggered whenever a user clicks on an event, an individual event item, or an item within the context menu. It captures user interaction with any of these elements, allowing you to handle click responses accordingly.
* @param event. The custom event. Custom event was created with: event.detail( item, type, itemObj)
* item - The HTMLElement for the event.
* type - The type of item that is clicked. The possible values are: <ul><li>event - when an event item is clicked.</li><li>context - when a context menu item is clicked.</li></ul>.
* itemObj - The event object.
*/
this.onItemClick = new EventEmitter();
/** @description This event is triggered whenever a new Event record is successfully created and inserted into the system. It allows you to respond to the addition of new Events, enabling actions such as updating user interfaces, syncing data, or sending notifications whenever an Event object is added.
* @param event. The custom event. Custom event was created with: event.detail( item)
* item - An object that represents the actual item with it's attributes.
*/
this.onItemInsert = new EventEmitter();
/** @description This event is triggered whenever an existing Event object is successfully deleted from the system. It allows you to execute custom logic or update the user interface in response to the removal of an Event.
* @param event. The custom event. Custom event was created with: event.detail( item)
* item - An object that represents the actual item with it's attributes.
*/
this.onItemRemove = new EventEmitter();
/** @description This event is triggered whenever an existing Event object is modified. It occurs after any change to the Event’s properties, such as updates to its title, time, location, or other attributes. Use this event to respond to or track changes made to Events in your application.
* @param event. The custom event. Custom event was created with: event.detail( type, item)
* type - The type of item that has been modified.
* item - An object that represents the actual item with it's attributes.
*/
this.onItemUpdate = new EventEmitter();
/** @description This event is triggered whenever the user changes the view through any form of interaction, such as clicking, tapping, swiping, or using navigation controls. It signifies that the visible content or display state has been modified as a direct result of the user's actions.
* @param event. The custom event. Custom event was created with: event.detail( oldValue, value)
* oldValue - The value of the previously selected view.
* value - The value of the new selected view.
*/
this.onViewChange = new EventEmitter();
/** @description This event is triggered immediately before the view changes in response to a user interaction (such as clicking a navigation button or selecting a different tab). At this stage, event listeners have the opportunity to intercept the view change. If event.preventDefault() is called within the event handler, the view change will be canceled, preventing the UI from updating to the new view. This allows for custom validation, confirmation dialogs, or other logic to be executed before a view transition occurs.
* @param event. The custom event. Custom event was created with: event.detail( oldValue, value)
* oldValue - The value of the previously selected view.
* value - The value of the new selected view.
*/
this.onViewChanging = new EventEmitter();
/** @description This event is triggered whenever a designated shortcut key associated with an event action is pressed by the user. By default, the event responds only to the 'Delete' key, but additional shortcut keys can be configured if needed.
* @param event. The custom event. Custom event was created with: event.detail( key, target, eventObj)
* key - The shortcut key that was pressed.
* target - The event target (HTMLElement).
* eventObj - The scheduler Event object that affected by the keypress.
*/
this.onEventShortcutKey = new EventEmitter();
/** @description This event is triggered whenever the `dateCurrent` property is updated. Typically, this occurs when a user navigates to a different date within the interface (for example, by selecting a new day, week, or month). The event allows you to respond dynamically to changes in the currently selected or displayed date.
* @param event. The custom event. Custom event was created with: event.detail( oldValue, value)
* oldValue - The previous current date that was in view.
* value - The current date in view.
*/
this.onDateChange = new EventEmitter();
/** @description This event is fired when a user initiates the dragging of an event. In the associated event handler function, you can call event.preventDefault() to cancel the drag operation before it starts, preventing the event from being moved. This allows you to implement custom validation or conditional logic to restrict when dragging is permitted.
* @param event. The custom event. Custom event was created with: event.detail( target, item, itemDateRange, originalEvent)
* target - The HTMLElement that corresponds to the event that is going to be dragged.
* item - The scheduler Event object that is going to be dragged.
* itemDateRange - The start/end dates for the Scheduler Event.
* originalEvent - The original event object.
*/
this.onDragStart = new EventEmitter();
/** @description This event is triggered when a user completes dragging an event item and releases it to its new position. Use this event to perform actions after the drag operation has ended, such as updating the event’s data or saving its new placement.
* @param event. The custom event. Custom event was created with: event.detail( target, item, itemDateRange, originalEvent)
* target - The HTMLElement that corresponds to the event that is dragged.
* item - The scheduler Event object that is dragged.
* itemDateRange - The new start/end dates for the dragged Scheduler Event.
* originalEvent - The original event object.
*/
this.onDragEnd = new EventEmitter();
/** @description This event is triggered when a user completes a drag-and-drop action by releasing (dropping) an item onto a specific cell. It occurs after the dragged item is moved over a cell and the mouse button is released, allowing you to handle actions such as updating cell content, moving items, or processing the dropped data.
* @param event. The custom event. Custom event was created with: event.detail( target, date, allDay)
* target - The HTMLElement that corresponds to the event that is dragged.
* date - The cell's date under the pointer.
* allDay - Boolean value, which is true when the cell under the pointer is all day cell.
*/
this.onDropoverCell = new EventEmitter();
/** @description This event is fired when a user begins to resize a task element. By handling this event, you have the option to prevent the resize operation from starting by calling event.preventDefault() within your event handler. This enables you to implement custom validation or logic before allowing the resize action to proceed.
* @param event. The custom event. Custom event was created with: event.detail( target, item, itemDateRange, originalEvent)
* target - The HTMLElement that corresponds to the event that is going to be resized.
* item - The scheduler Event object that is going to be resized.
* itemDateRange - The start/end dates for Scheduler Event that is going to be resized.
* originalEvent - The original event object.
*/
this.onResizeStart = new EventEmitter();
/** @description This event is triggered when a user completes resizing an event, signaling that the event's size has been adjusted and the resize action is finished. It typically occurs after the user releases the mouse or touch input, and can be used to perform actions such as updating the event's duration or saving changes.
* @param event. The custom event. Custom event was created with: event.detail( target, item, itemDateRange, originalEvent)
* target - The HTMLElement that corresponds to the event that is resized.
* item - The scheduler Event object that is resized.
* itemDateRange - The new start/end dates for the resized Scheduler Event.
* originalEvent - The original event object.
*/
this.onResizeEnd = new EventEmitter();
/** @description This event is triggered when the user initiates the process of opening the event dialog window, before the dialog is actually displayed. Within the event handler function, you can call event.preventDefault() to cancel the opening of the dialog, thereby preventing it from appearing to the user. This allows you to intercept and block the operation based on custom logic, such as validation checks or user permissions.
* @param event. The custom event. Custom event was created with: event.detail( target, item, type, eventObj)
* target - The dialog window that is opening.
* item - The event object that is going to be edited.
* type - The type of window that is going to open. Two window types are available, the dafault which is an empty string ( does not have a type) and 'confirm' which is displayed when clicked on a repeating event.
* eventObj - The event object that is the target of the menu.
*/
this.onEditDialogOpening = new EventEmitter();
/** @description This event is triggered when the event dialog window becomes visible to the user, such as when the user initiates the creation or editing of an event. It indicates that the dialog has been rendered and is ready for user interaction.
* @param event. The custom event. Custom event was created with: event.detail( target, editors, item, eventObj)
* target - The dialog window that is opened.
* editors - An object containing all event editors that are present inside the window. This property is undefined when the window is of type 'confirm', because confirm windows do not contain editors.
* item - The event object that is being edited.
* eventObj - The event object that is the target of the menu.
*/
this.onEditDialogOpen = new EventEmitter();
/** @description This event is triggered when the user closes the event dialog window, either by clicking the 'close' button, pressing the escape key, or performing any action that results in the dialog being dismissed. It allows developers to execute custom logic immediately after the dialog has been closed.
* @param event. The custom event. Custom event was created with: event.detail( target, editors, item, eventObj)
* target - The dialog window that is closed.
* editors - An object containing all event editors that are present inside the window. This property is undefined when the window is of type 'confirm', because confirm windows do not contain editors.
* item - The event object that is being edited.
* eventObj - The event object that is the target of the menu.
*/
this.onEditDialogClose = new EventEmitter();
/** @description This event is triggered just before the event dialog window is closed, giving you an opportunity to run custom logic before the closure occurs. Within the event handler, you can call event.preventDefault() to cancel the closing operation and keep the dialog open, for example, to prompt the user to save changes or confirm their action.
* @param event. The custom event. Custom event was created with: event.detail( target, item, type, eventObj)
* target - The dialog window that is closing.
* item - The event object that is edited.
* type - The type of window that is going to be closed. Two window types are available, the dafault which is an empty string ( does not have a type) and 'confirm' which is displayed when clicked on a repeating event.
* eventObj - The event object that is the target of the menu.
*/
this.onEditDialogClosing = new EventEmitter();
/** @description This event is triggered when the user initiates opening the context menu—usually by right-clicking—on a timeline cell or event element. Within the event handler, you can prevent the default context menu from appearing by calling event.preventDefault(). This enables custom context menu implementations or the blocking of the menu based on specific conditions.
* @param event. The custom event. Custom event was created with: event.detail( target, owner, cellObj, eventObj)
* target - The context menu instance.
* owner - The HTMLElement that the menu belongs to.
* cellObj - The cell object that is the target of the menu. If the target is an event instead of a cell this parameter will be undefined.
* eventObj - The event object that is the target of the menu. If the target is a cell instead of an event this paramter will be undefined.
*/
this.onContextMenuOpening = new EventEmitter();
/** @description This event is triggered whenever the context menu (typically a right-click menu) is activated and becomes visible to the user. It allows developers to execute custom logic or modify menu content when the context menu is about to be displayed.
* @param event. The custom event. Custom event was created with: event.detail( target, owner, cellObj, eventObj)
* target - The context menu instance.
* owner - The HTMLElement that the menu belongs to.
* cellObj - The cell object that is the target of the menu. If the target is an event instead of a cell this parameter will be undefined.
* eventObj - The event object that is the target of the menu. If the target is a cell instead of an event this paramter will be undefined.
*/
this.onContextMenuOpen = new EventEmitter();
/** @description This event is triggered whenever the context menu is closed, either by user action (such as clicking outside the menu, selecting a menu option, or pressing the Escape key) or programmatically. It signals that the context menu is no longer visible to the user and any related cleanup or UI updates can be performed.
* @param event. The custom event. Custom event was created with: event.detail( target, owner, cellObj, eventObj)
* target - The context menu instance.
* owner - The HTMLElement that the menu belongs to.
* cellObj - The cell object that is the target of the menu. If the target is an event instead of a cell this parameter will be undefined.
* eventObj - The event object that is the target of the menu. If the target is a cell instead of an event this paramter will be undefined.
*/
this.onContextMenuClose = new EventEmitter();
/** @description This event is fired just before the context menu is about to close. Developers can intercept this event in an event handler and prevent the menu from closing by calling event.preventDefault(). This allows you to implement custom logic or conditions that control whether the context menu should be closed.
* @param event. The custom event. Custom event was created with: event.detail( target, owner, cellObj, eventObj)
* target - The context menu instance.
* owner - The HTMLElement that the menu belongs to.
* cellObj - The cell object that is the target of the menu. If the target is an event instead of a cell this parameter will be undefined.
* eventObj - The event object that is the target of the menu. If the target is a cell instead of an event this paramter will be undefined.
*/
this.onContextMenuClosing = new EventEmitter();
/** @description This event is triggered just before the event menu is displayed to the user. It gives you an opportunity to intercept the opening process. By calling event.preventDefault() within your event handler, you can prevent the menu from appearing. This allows you to implement custom logic or conditions under which the menu should not open.
* @param event. The custom event. Custom event was created with: event.detail( target, owner, eventObj)
* target - The menu instance.
* owner - The HTMLElement of the event that the menu belongs to.
* eventObj - The event object that is the target of the menu.
*/
this.onEventMenuOpening = new EventEmitter();
/** @description This event is triggered whenever the event menu becomes visible to the user, such as when it is opened or expanded through a user interaction or programmatic action. It indicates that the event menu is now accessible and ready for user input or selection.
* @param event. The custom event. Custom event was created with: event.detail( target, owner, eventObj)
* target - The menu instance.
* owner - The HTMLElement of the event that the menu belongs to.
* eventObj - The event object that is the target of the menu.
*/
this.onEventMenuOpen = new EventEmitter();
/** @description This event is triggered whenever the event menu is fully closed, either by user interaction or programmatically. It indicates that all closing animations or transitions have completed and the menu is no longer visible or interactive. Use this event to perform actions that should only occur after the menu has been dismissed.
* @param event. The custom event. Custom event was created with: event.detail( target, owner, eventObj)
* target - The menu instance.
* owner - The HTMLElement of the event that the menu belongs to.
* eventObj - The event object that is the target of the menu.
*/
this.onEventMenuClose = new EventEmitter();
/** @description This event is triggered just before the event menu is closed. It provides an opportunity to intercept and potentially prevent the menu from closing by calling event.preventDefault() within the event handler function. If preventDefault() is called, the close operation will be canceled. This allows developers to implement custom logic—such as validating user input or confirming actions—before the menu actually closes.
* @param event. The custom event. Custom event was created with: event.detail( target, owner, eventObj)
* target - The menu instance.
* owner - The HTMLElement of the event that the menu belongs to.
* eventObj - The event object that is the target of the menu.
*/
this.onEventMenuClosing = new EventEmitter();
/** @description This event is triggered when the user opens the date selection menu, typically by clicking on or focusing the date input field. It can be used to perform actions such as loading available dates, displaying custom instructions, or updating the calendar before the user makes a selection.
* @param event. The custom event. Custom event was created with: event.detail( target)
* target - The menu instance.
*/
this.onDateMenuOpen = new EventEmitter();
/** @description This event is triggered when the date selection menu is closed by the user, either by selecting a date or by dismissing the menu, indicating that the date picker component is no longer visible.
* @param event. The custom event. Custom event was created with: event.detail( target)
* target - The menu instance.
*/
this.onDateMenuClose = new EventEmitter();
/** @description This event is triggered whenever a user opens the view selection menu, indicating the menu has become visible and is ready for interaction. Use this event to execute actions that should occur when the view selection interface is displayed, such as loading menu options or tracking user engagement.
* @param event. The custom event. Custom event was created with: event.detail( target)
* target - The menu instance.
*/
this.onViewMenuOpen = new EventEmitter();
/** @description This event is triggered whenever the view selection menu is closed by the user, either by selecting an option or dismissing the menu. It signifies that the view selection interface is no longer visible, allowing you to perform any necessary actions in response to the menu's closure.
* @param event. The custom event. Custom event was created with: event.detail( target)
* target - The menu instance.
*/
this.onViewMenuClose = new EventEmitter();
/** @description This event is triggered when a user interacts with and opens a notification. It occurs immediately after the notification is clicked or tapped, allowing you to perform actions such as navigating to a specific page, logging the interaction, or updating application state.
* @param event. The custom event. Custom event was created with: event.detail( instance)
* instance - The toast item instance that is opened.
*/
this.onNotificationOpen = new EventEmitter();
/** @description This event is triggered whenever a notification is dismissed, either by user action (such as clicking the close button) or programmatically via code. It provides an opportunity to respond when a notification is no longer visible to the user.
* @param event. The custom event. Custom event was created with: event.detail( instance)
* instance - The toast item instance that is closed.
*/
this.onNotificationClose = new EventEmitter();
this.nativeElement = ref.nativeElement;
}
/** @description Creates the component on demand.
* @param properties An optional object of properties, which will be added to the template binded ones.
*/
createComponent(properties = {}) {
this.nativeElement = document.createElement('smart-scheduler');
for (let propertyName in properties) {
this.nativeElement[propertyName] = properties[propertyName];
}
return this.nativeElement;
}
/** @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. */
get autoScrollStep() {
return this.nativeElement ? this.nativeElement.autoScrollStep : undefined;
}
set autoScrollStep(value) {
this.nativeElement ? this.nativeElement.autoScrollStep = value : undefined;
}
/** @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. */
get autoHeightAllDayCells() {
return this.nativeElement ? this.nativeElement.autoHeightAllDayCells : undefined;
}
set autoHeightAllDayCells(value) {
this.nativeElement ? this.nativeElement.autoHeightAllDayCells = value : undefined;
}
/** @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. */
get available() {
return this.nativeElement ? this.nativeElement.available : undefined;
}
set available(value) {
this.nativeElement ? this.nativeElement.available = value : undefined;
}
/** @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. */
get colorScheme() {
return this.nativeElement ? this.nativeElement.colorScheme : undefined;
}
set colorScheme(value) {
this.nativeElement ? this.nativeElement.colorScheme = value : undefined;
}
/** @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. */
get currentTime() {
return this.nativeElement ? this.nativeElement.currentTime : undefined;
}
set currentTime(value) {
this.nativeElement ? this.nativeElement.currentTime = value : undefined;
}
/** @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. */
get currentTimeIndicator() {
return this.nativeElement ? this.nativeElement.currentTimeIndicator : undefined;
}
set currentTimeIndicator(value) {
this.nativeElement ? this.nativeElement.currentTimeIndicator = value : undefined;
}
/** @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. */
get currentTimeIndicatorInterval() {
return this.nativeElement ? this.nativeElement.currentTimeIndicatorInterval : undefined;
}
set currentTimeIndicatorInterval(value) {
this.nativeElement ? this.nativeElement.currentTimeIndicatorInterval = value : undefined;
}
/** @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. */
get contextMenuDataSource() {
return this.nativeElement ? this.nativeElement.contextMenuDataSource : undefined;
}
set contextMenuDataSource(value) {
this.nativeElement ? this.nativeElement.contextMenuDataSource = value : undefined;
}
/** @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. */
get contextMenuClipboardActions() {
return this.nativeElement ? this.nativeElement.contextMenuClipboardActions : undefined;
}
set contextMenuClipboardActions(value) {
this.nativeElement ? this.nativeElement.contextMenuClipboardActions = value : undefined;
}
/** @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. */
get eventTemplate() {
return this.nativeElement ? this.nativeElement.eventTemplate : undefined;
}
set eventTemplate(value) {
this.nativeElement ? this.nativeElement.eventTemplate = value : undefined;
}
/** @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. */
get eventCollectorTemplate() {
return this.nativeElement ? this.nativeElement.eventCollectorTemplate : undefined;
}
set eventCollectorTemplate(value) {
this.nativeElement ? this.nativeElement.eventCollectorTemplate = value : undefined;
}
/** @description Determines the rendering style for events displayed within the Scheduler component. classic – 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 – 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. */
get eventRenderMode() {
return this.nativeElement ? this.nativeElement.eventRenderMode : undefined;
}
set eventRenderMode(value) {
this.nativeElement ? this.nativeElement.eventRenderMode = value : undefined;
}
/** @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. */
get eventTooltipTemplate() {
return this.nativeElement ? this.nativeElement.eventTooltipTemplate : undefined;
}
set eventTooltipTemplate(value) {
this.nativeElement ? this.nativeElement.eventTooltipTemplate = value : undefined;
}
/** @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. */
get cellTemplate() {
return this.nativeElement ? this.nativeElement.cellTemplate : undefined;
}
set cellTemplate(value) {
this.nativeElement ? this.nativeElement.cellTemplate = value : undefined;
}
/** @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. */
get dateCurrent() {
return this.nativeElement ? this.nativeElement.dateCurrent : undefined;
}
set dateCurrent(value) {
this.nativeElement ? this.nativeElement.dateCurrent = value : undefined;
}
/** @description Configures the data export settings for the Scheduler, including file format, export range, and additional export-related options. */
get dataExport() {
return this.nativeElement ? this.nativeElement.dataExport : undefined;
}
set dataExport(value) {
this.nativeElement ? this.nativeElement.dataExport = value : undefined;
}
/** @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: */
get dataSource() {
return this.nativeElement ? this.nativeElement.dataSource : undefined;
}
set dataSource(value) {
this.nativeElement ? this.nativeElement.dataSource = value : undefined;
}
/** @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. */
get dateSelectorFormatFunction() {
return this.nativeElement ? this.nativeElement.dateSelectorFormatFunction : undefined;
}
set dateSelectorFormatFunction(value) {
this.nativeElement ? this.nativeElement.dateSelectorFormatFunction = value : undefined;
}
/** @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. */
get dayFormat() {
return this.nativeElement ? this.nativeElement.dayFormat : undefined;
}
set dayFormat(value) {
this.nativeElement ? this.nativeElement.dayFormat = value : undefined;
}
/** @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. */
get disabled() {
return this.nativeElement ? this.nativeElement.disabled : undefined;
}
set disabled(value) {
this.nativeElement ? this.nativeElement.disabled = value : undefined;
}
/** @description Prevents the timeline from automatically scrolling when you drag or resize an event, ensuring that the visible timeline remains stationary during these interactions. */
get disableAutoScroll() {
return this.nativeElement ? this.nativeElement.disableAutoScroll : undefined;
}
set disableAutoScroll(value) {
this.nativeElement ? this.nativeElement.disableAutoScroll = value : undefined;
}
/** @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. */
get disableDrag() {
return this.nativeElement ? this.nativeElement.disableDrag : undefined;
}
set disableDrag(value) {
this.nativeElement ? this.nativeElement.disableDrag = value : undefined;
}
/** @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. */
get disableDrop() {
return this.nativeElement ? this.nativeElement.disableDrop : undefined;
}
set disableDrop(value) {
this.nativeElement ? this.nativeElement.disableDrop = value : undefined;
}
/** @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. */
get disableResize() {
return this.nativeElement ? this.nativeElement.disableResize : undefined;
}
set disableResize(value) {
this.nativeElement ? this.nativeElement.disableResize = value : undefined;
}
/** @description Prevents users from selecting or highlighting the contents of the cell, disabling any cell selection functionality. */
get disableSelection() {
return this.nativeElement ? this.nativeElement.disableSelection : undefined;
}
set disableSelection(value) {
this.nativeElement ? this.nativeElement.disableSelection = value : undefined;
}
/** @description Prevents the event window editor from opening, effectively disabling the ability for users to view or modify event details through the window interface. */
get disableWindowEditor() {
return this.nativeElement ? this.nativeElement.disableWindowEditor : undefined;
}
set disableWindowEditor(value) {
this.nativeElement ? this.nativeElement.disableWindowEditor = value : undefined;
}
/** @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. */
get disableContextMenu() {
return this.nativeElement ? this.nativeElement.disableContextMenu : undefined;
}
set disableContextMenu(value) {
this.nativeElement ? this.nativeElement.disableContextMenu = value : undefined;
}
/** @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. */
get disableEventMenu() {
return this.nativeElement ? this.nativeElement.disableEventMenu : undefined;
}
set disableEventMenu(value) {
this.nativeElement ? this.nativeElement.disableEventMenu = value : undefined;
}
/** @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). */
get disableViewMenu() {
return this.nativeElement ? this.nativeElement.disableViewMenu : undefined;
}
set disableViewMenu(value) {
this.nativeElement ? this.nativeElement.disableViewMenu = value : undefined;
}
/** @description Prevents the date selection menu from appearing, disabling the user's ability to change the current Scheduler date through the interface. */
get disableDateMenu() {
return this.nativeElement ? this.nativeElement.disableDateMenu : undefined;
}
set disableDateMenu(value) {
this.nativeElement ? this.nativeElement.disableDateMenu = value : undefined;
}
/** @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. */
get dragFeedbackFormatFunction() {
return this.nativeElement ? this.nativeElement.dragFeedbackFormatFunction : undefined;
}
set dragFeedbackFormatFunction(value) {
this.nativeElement ? this.nativeElement.dragFeedbackFormatFunction = value : undefined;
}
/** @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. */
get dragOffset() {
return this.nativeElement ? this.nativeElement.dragOffset : undefined;
}
set dragOffset(value) {
this.nativeElement ? this.nativeElement.dragOffset = value : undefined;
}
/** @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. */
get filter() {
return this.nativeElement ? this.nativeElement.filter : undefined;
}
set filter(value) {
this.nativeElement ? this.nativeElement.filter = value : undefined;
}
/** @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. */
get filterable() {
return this.nativeElement ? this.nativeElement.filterable