Scheduler JAVASCRIPT UI Component API

Scheduler Javascript API

Class

Scheduler

Scheduler

Scheduler displays a set ot Events in Day, Week, Month, Agenda, Timeline Day, Timeline Week, Timeline Month views.

Selector

smart-scheduler

Properties

AautoScrollStepSpecifies 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.
AautoHeightAllDayCellsControls 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.
AavailableSpecifies 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.
CcolorSchemeSpecifies 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. Click for more details. Property object's options:
    CcurrentTimeSpecifies 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.
    CcurrentTimeIndicatorEnables 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.
    CcurrentTimeIndicatorIntervalSpecifies 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.
    CcontextMenuDataSourceSpecifies 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.
    CcontextMenuClipboardActionsSpecifies 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.
    EeventTemplateEnables 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.
    EeventCollectorTemplateAllows 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.
    EeventRenderModeDetermines 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.
    EeventTooltipTemplateEnables 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.
    CcellTemplateEnables 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.
    DdateCurrentSpecifies 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.
    DdataExportConfigures the data export settings for the Scheduler, including file format, export range, and additional export-related options. Click for more details. Property object's options:
    • header:boolean - Determines whether the column headers will be included when exporting data. If enabled, the exported file will contain a row with the names of each column at the top.
    • columns:string[] - Specifies the names of the event properties that will be included as separate columns in the exported data, allowing each property's value to appear in its own column within the resulting file.
    • style:object - Specifies a custom style object to apply to the dataExport, allowing you to define the appearance—such as fonts, colors, and formatting—of the exported data.
    • fileName:string - Specifies the name that will be assigned to the exported file when it is downloaded or saved.
    • pageOrientation:string - Specifies the orientation (portrait or landscape) of the page layout when exporting the document to PDF format. This setting determines how the content is arranged on each PDF page.
    DdataSourceSpecifies 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: Click for more details. Property object's options:
    • repeat:{ repeatFreq: string, repeatInterval: number, repeatOn?: number | object | Date | string | undefined, repeatEnd?: number | date | undefined, exceptions?: { date: string | date, dateStart: date | string, dateEnd: date | string, backgroundColor?: 'string', color?: string, hidden?: boolean }} | undefined - Event Repeat Object.
      • Property object's options:
      • repeatFreq:string - Determines the repeating frequency. The event can repeat hourly, daily, weekly, monthly or yearly.
      • repeatInterval:number - Determines the repeating interval.
      • repeatOn:number | object | Date | string | undefined - Determines on wah day/date the event will repeat on. This is applicable only when repeatFreq is of type 'weekly' ( allows to pick the days of week from 0 to 6, where 0 is Sunday and 6 is Saturday), 'monthly' ( allows to pick a date of the month from 0 to 31) or 'yearly' (allows to pick a particular Date to repeat on. The date can be set as a Date or an object of type{ month: string, date: number }).
      • repeatEnd:number | date | undefined - Determines when the repeating event will end. By default it does not have an end condition. If the value is set to a number than it is considered as the number of time the event will repeat before it ends. If it's a Date then it is considered as the end date for the repeating series. If not set it will never end.
      • exceptions:{ date: string | date, dateStart: date | string, dateEnd: date | string, backgroundColor?: string, color?: string, hidden?: boolean }[] | undefined - Event exceptions represent a repeating series event that has been re-scheduler for another date/time or it has been hidden from the Scheduler. Exceptions cannot repeat.
    • class:string - Event CSS class.
    • dateStart:string | Date - Event start date.
    • dateEnd:string | Date - Event end date.
    • disableDrag:boolean - Determines whether dragging is disabled for the event.
    • disableResize:boolean - Determines whether resizing is disabled for the event.
    • id:string? - Event unique id.
    • label:string? - Event Label.
    • description:string? - Event Description.
    • allDay:boolean? - Determines whether an event is an all day event ot nor. All day events ignore time.
    • backgroundColor:string? - Sets a background color for the event. The background color should be in HEX format.
    • color:string? - Sets a color for the event. The color should be in HEX format.
    • status:string? - Sets the appointment status.
    • resourceId:string? - Event resource unique id.
    • notifications:{interval: number, type?: string, time: number[], message?: string | undefined, iconType?: string}[] - Event notifications.
      • Property object's options:
      • interval:number - The number of days/weeks when the notification should appear before the event starts.
      • type:string - The type of the interval for the notification.
      • time:number[] - An array that represents the time when the notification should appear before the event starts. The array should have the following format: [hours: number, minutes:number]
      • message:string? - The message that will appear inside the notificaiton. If no message is set, then the label of the event is displayed.
      • iconType:string? - Determines the type of icon that will be displayed inside the notification. By default the iconType is 'info'.
    DdateSelectorFormatFunctionA 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.
    DdayFormatSpecifies 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.
    DdisabledDetermines 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.
    DdisableAutoScrollPrevents the timeline from automatically scrolling when you drag or resize an event, ensuring that the visible timeline remains stationary during these interactions.
    DdisableDragPrevents 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.
    DdisableDropPrevents 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.
    DdisableResizePrevents 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.
    DdisableSelectionPrevents users from selecting or highlighting the contents of the cell, disabling any cell selection functionality.
    DdisableWindowEditorPrevents the event window editor from opening, effectively disabling the ability for users to view or modify event details through the window interface.
    DdisableContextMenuPrevents 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.
    DdisableEventMenuPrevents 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.
    DdisableViewMenuPrevents 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).
    DdisableDateMenuPrevents the date selection menu from appearing, disabling the user's ability to change the current Scheduler date through the interface.
    DdragFeedbackFormatFunctionA 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.
    DdragOffsetSpecifies 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.
    FfilterSpecifies 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.
    FfilterableSpecifies 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.
    FfilterModeSpecifies 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.
    EeventsA 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. Click for more details. Property object's options:
    • repeat:{ repeatFreq: string, repeatInterval: number, repeatOn?: number | object | Date | string | undefined, repeatEnd?: number | date | undefined, exceptions?: { date: string | date, dateStart: date | string, dateEnd: date | string, backgroundColor?: 'string', color?: string, hidden?: boolean }} | undefined - Event Repeat Object.
      • Property object's options:
      • repeatFreq:string - Determines the repeating frequency. The event can repeat hourly, daily, weekly, monthly or yearly.
      • repeatInterval:number - Determines the repeating interval.
      • repeatOn:number | object | Date | string | undefined - Determines on wah day/date the event will repeat on. This is applicable only when repeatFreq is of type 'weekly' ( allows to pick the days of week from 0 to 6, where 0 is Sunday and 6 is Saturday), 'monthly' ( allows to pick a date of the month from 0 to 31) or 'yearly' (allows to pick a particular Date to repeat on. The date can be set as a Date or an object of type{ month: string, date: number }).
      • repeatEnd:number | Date | undefined - Determines when the repeating event will end. By default it does not have an end condition. If the value is set to a number than it is considered as the number of time the event will repeat before it ends. If it's a Date then it is considered as the end date for the repeating series. If not set it will never end.
      • exceptions:{ date: string | date, dateStart: date | string, dateEnd: date | string, backgroundColor?: 'string', color?: string, hidden?: boolean }[] | undefined - Event exceptions represent a repeating series event that has been re-scheduler for another date/time or it has been hidden from the Scheduler. Exceptions cannot repeat.
    • class:string - Event CSS class.
    • dateStart:string | Date - Event start date.
    • dateEnd:string | Date - Event end date.
    • disableDrag:boolean - Determines whether dragging is disabled for the event.
    • disableResize:boolean - Determines whether resizing is disabled for the event.
    • id:string | undefined - Event unique id.
    • label:string | undefined - Event Label.
    • description:string | undefined - Event Description.
    • allDay:boolean | undefined - Determines whether an event is an all day event ot nor. All day events ignore time.
    • backgroundColor:string | undefined - Sets a background color for the event. The background color should be in HEX format.
    • color:string | undefined - Sets a color for the event. The color should be in HEX format.
    • notifications:{interval: number, type?: string, time: number[], message?: string | undefined, iconType?: string}[] - Event notifications.
      • Property object's options:
      • interval:number - The number of days/weeks when the notification should appear before the event starts.
      • type:string - The type of the interval for the notification.
      • time:array - An array that represents the time when the notification should appear before the event starts. The array should have the following format: [hours: number, minutes:number]
      • message:string | undefined - The message that will appear inside the notificaiton. If no message is set, then the label of the event is displayed.
      • iconType:string | undefined - Determines the type of icon that will be displayed inside the notification. By default the iconType is 'info'.
    FfirstDayOfWeekSpecifies 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.
    FfooterTemplateEnables 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.
    GgroupByDateIndicates whether events should be organized and displayed based on their associated dates, grouping all events that occur on the same date together.
    GgroupOrientationSpecifies the direction or axis along which items are grouped, such as horizontal or vertical, affecting how elements are arranged and displayed within the interface.
    GgroupTemplateEnhances 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 '<template>' 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 '<template>' 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.
    GgroupsSpecifies 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.
    HhourEndSpecifies 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.
    HhourStartSpecifies 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.
    HhourFormatSpecifies 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).
    HheaderTemplateEnables 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.
    HheaderDatePositionSpecifies 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.
    HheaderNavigationStyleDefines 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.
    HheaderViewPositionSpecifies 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.
    HhideAllDaySpecifies 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.
    HhideNonworkingWeekdaysSpecifies 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.
    HhideOtherMonthDaysEnhances 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.
    HhideTodayButtonSpecifies 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.
    HhideViewMenuCheckableItemsControls 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.
    HhideWeekendSpecifies 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.
    LlegendLocationSpecifies 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.
    LlegendPositionSpecifies 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.
    LlegendLayoutSpecifies 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.
    LlegendLayoutMenuBreakpointSpecifies 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.
    MmouseWheelStepControls 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.
    HhorizontalScrollBarVisibilitySpecifies 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.
    UunlockKeySets or retrieves the 'unlockKey', a unique value required to unlock and access the product’s full features or functionality.
    LlocaleSpecifies 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.
    MmaxDetermines 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.
    MmaxEventsPerCellSpecifies 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.
    MminSpecifies the earliest date that can be displayed or selected in the Scheduler. This property restricts navigation and date selection to dates on or after the defined minimum view date.
    MmessagesDefines or retrieves an object containing all the text strings displayed by the element, allowing for easy localization of the user interface. This property should be used together with the locale property to dynamically present content in the user's preferred language or region. Each key in the object represents a specific string that can be customized or translated as needed."
    MminuteFormatSpecifies how minutes are displayed and formatted within the Scheduler component. This setting controls the appearance of minute values in time slots, event times, and related areas, ensuring consistency in how minutes are presented to users (e.g., "5", "05", or "5 min").
    MmonthFormatSpecifies the format in which month names are displayed within the Scheduler component. This setting controls whether full month names (e.g., "January"), abbreviated names (e.g., "Jan"), or custom formats appear in the Scheduler's interface wherever month names are shown.
    NnonworkingDaysSpecifies which days of the week are considered nonworking, using an array of numbers from 0 to 6, where 0 represents the first day of the week (e.g., Sunday or Monday, depending on your locale), and 6 represents the last day. These designated nonworking days will be visually distinguished within the Timeline component by applying a different background color. The specific color used for nonworking days is controlled by a configurable CSS variable, allowing for easy theming and customization.
    NnonworkingHoursSpecifies the nonworking hours within a day. The nonworking hours are defined using an array, where each element represents either a single hour (as a number) or a range of hours (as an array containing the start and end hours, separated by a comma). For example, '[0, [13, 15], 23]' marks hour 0, hours 13 through 15 (inclusive), and hour 23 as nonworking. On the timeline, cells corresponding to these nonworking hours are visually distinguished by a different color from the working hours.
    NnotificationIntervalSpecifies the time interval, in seconds, at which the element will automatically check for new notifications. This value controls how frequently the element polls for updates, with shorter intervals resulting in more frequent checks.
    RresizeHandlesVisibilityControls whether the resize handles are visible to the user, allowing them to resize the element. When enabled, resize handles will appear on the edges or corners of the element; when disabled, resize handles will be hidden and resizing will not be possible via the user interface.
    RresizeInterval'' Specifies how frequently the element's content should update (refresh) when the element is resized. By default, the content refreshes immediately on every resize event. Adjusting this property enables throttling, which limits the rate of refreshes and can improve performance by reducing unnecessary updates during rapid or continuous resizing. You can set it to a time interval (in milliseconds) to control the minimum delay between refresh operations.
    RresourcesAn array containing resource objects that can be allocated or linked to specific events. Each resource represents an entity—such as a person, room, or asset—that can be associated with one or more events for scheduling or organizational purposes. Click for more details. Property object's options:
    • label:string - Resource label.
    • value:string - Resource unique value.
    • dataSource:object[] - An array that defined the data of the resources. The data represents objects that should contain the following proeprties:
      • lable - the label for the resource item.
      • id - the unique id for the resource item.
      • backgroundColor - the background color for the events that have the resource item assigned.
      • color - the color for the events that have the resource item assigned.
    • sortBy:string - Determines the property name to sort the dataSource by.
    • sortFunction:function - Determines the custom sorting function that will be used to sort the resource dataSource. The sortFunction is used when sortOrder is set to custom.
    • sortOrder:string - Determines the sorting order. When set to custom, a custom sorting function has to be defined for the sortFunction property. The asc stands for 'ascending' while desc means 'descending' sorting order.
    RrestrictedDatesSpecifies an array of restricted dates on which events are not permitted. Any events that overlap with these restricted dates, or that start or end on these dates, will be excluded from display and unavailable for scheduling.
    RrestrictedHoursSpecifies an array of restricted hours during which events are not permitted to be scheduled. Any event that overlaps with, starts, or ends within these restricted hours will be excluded from display. This ensures that no events are shown during the designated unavailable time periods.
    RrestrictedDefines an array of time restrictions specifying when events are not permitted. Each element in the array is an object that must include two fields: date and hours.- The 'date' field indicates the specific day on which the restriction applies (e.g., 'new Date(2023, 10, 1)').- The 'hours' field specifies one or more restricted hours within that day. This is an array where each item represents a restricted period, defined either as: - a single hour (e.g., '12', which restricts only the hour 12:00–13:00), or - an array of two numbers specifying a start and end hour in 24-hour format (e.g., '[0, 6]' restricts from 00:00 up to, but not including, 06:00; '[20, 23]' restricts from 20:00 up to, but not including, 23:00).Events that have any portion overlapping these restricted hours—either beginning, ending, or entirely contained within them—will be excluded and not displayed.'Example:' '''js{ date: new Date(2023, 10, 1), hours: [[0, 6], 12, [20, 23]]}'''This restricts events from being scheduled on November 1, 2023, between midnight and 6 AM, exactly at 12 PM–1 PM, and from 8 PM to 11 PM.Use this array to block out specific times when events should not be allowed, similar to the 'restrictedHours' property, but with restrictions tied to specific calendar dates.
    RrightToLeftSets or retrieves a value that determines whether the element’s alignment is configured for right-to-left (RTL) text direction, which is commonly used in locales with RTL languages such as Arabic or Hebrew. This property ensures proper text and layout orientation to support languages that are read from right to left.
    SscrollButtonsPositionSpecifies the placement of the date navigation buttons within the element’s header, determining where buttons such as “Previous”, “Next”, or “Today” appear in relation to other header content.
    SshadeUntilCurrentTimeControls the activation of the current time shader. When enabled, all cells representing times that have already passed will be visually shaded to distinguish them from upcoming times. Disabling this option will remove the shading, displaying all time cells with the default appearance.
    SshowLegendControls the visibility of the resource legend in the Scheduler component. When enabled, the resource legend appears in the footer section and displays a list of resources along with their respective items. If the filterable option is set to true, users can click on any resource item within the legend to filter the Scheduler view by that specific resource, making it easier to focus on relevant events or data.
    SsortBySpecifies the property name within each resource data item (defined by resource.dataSource) that will be used to sort the resources. This determines the field by which the resource data is ordered when displayed or processed.
    SsortFunctionEnables you to specify a custom sorting function that determines the order in which resource data is sorted. The provided sortFunction will be invoked whenever the sortOrder property is set to custom. This allows for full control over the sorting logic, accommodating complex or specialized sorting requirements beyond the default sort options.
    SsortOrderSpecifies how the resource data items should be sorted. Acceptable values are asc for ascending order and desc for descending order. If set to custom, you must also provide a custom sorting function using the sortFunction property. The chosen sorting order determines how the data items are organized and displayed.
    SspinButtonsDelaySpecifies the interval, in milliseconds, between repeated activation events when a repeat button within the element's header is held down. This applies to buttons such as the date navigation controls and the view scrolling buttons, allowing users to quickly navigate by holding the button instead of clicking multiple times.
    SspinButtonsInitialDelaySpecifies the initial delay (in milliseconds) before the repeat buttons located in the header of the element begin to trigger repeated actions when held down. These repeat buttons include the date navigation buttons (e.g., previous/next date) and the view scroll buttons. Setting this value controls how long a user must hold down the button before the action starts repeating automatically.
    SstatusesSpecifies the list of status options that users can select from when managing events through the window editor interface. These statuses help categorize or track the current state of each event.
    TthemeGets or sets the visual theme of the element, allowing you to customize its appearance (such as color scheme, style, or look) according to the specified theme value.
    TtimelineHeaderFormatFunctionA formatting function specifically for the Timeline Header. This function enables customization of the text displayed as date labels within the header cells, allowing you to modify the appearance or format of dates (e.g., changing date formats, adding prefixes/suffixes, or translating labels) according to your requirements.
    TtimelineDayScaleSpecifies the time interval (such as days, weeks, or months) used to label and organize each cell within the timeline, controlling how dates are displayed and grouped.
    TtimeRulerTicksControls the visibility of tick marks displayed next to the time labels in the vertical header of the element. These tick marks appear in the time header section, which is shown only in 'day' and 'week' views. Enabling this option will show tick marks for each time cell; disabling it will hide them.
    TtimeZoneSpecifies the time zone to be applied to the element. If this property is not set, the element defaults to using the user's local time zone.
    TtimeZonesEnables the display of multiple time zones simultaneously, in addition to the default time zone specified by the timeZone property. This property accepts an array of string values, where each value corresponds to a valid time zone identifier. The complete list of supported time zone identifiers can be found in the timeZone property documentation. By default, only the user's local time zone is shown if no additional time zones are provided.
    TtooltipDelaySpecifies the delay, in milliseconds, before the tooltip or menu is displayed after a triggering event (such as hover or click). This allows you to control how quickly the tooltip or menu appears, enhancing user experience and preventing accidental activations.
    TtooltipOffsetSpecifies the distance (in pixels or other units) by which the tooltip or menu is shifted from its default position relative to its target element. Adjusting this value changes how far the tooltip or menu appears from the target, allowing for precise placement and improved visual alignment.
    VverticalScrollBarVisibilitySpecifies whether the vertical scrollbar is visible, allowing users to scroll content vertically when necessary. Set to true to display the vertical scrollbar, or false to hide it.
    VviewSpecifies the currently active view. This property accepts one of the view values defined in the views property. When using custom views, ensure each custom view includes a unique value property; this value will be assigned to the current view and used to control which view is displayed.
    VviewTypeSpecifies the current view type of the Scheduler component (e.g., 'day', 'week', 'month'). When defining custom views, ensure that each view includes a valid type property matching one of the supported view types. Note: This property is managed internally by the Scheduler and should not be set manually in your configuration.
    VviewsSpecifies the range of dates displayed in the timeline view. This property accepts an array containing either predefined view strings or custom view objects.'Usage:'- If you set an element to a string, use one of the following built-in view identifiers: ''day'', ''week'', ''month'', ''agenda'', ''timelineDay'', ''timelineWeek'', ''timelineMonth''.- To define a custom view, provide an object with the properties detailed below.'Custom View Object Properties:'- 'label' _(string, required)_: The display name shown for the view in the UI.- 'value' _(string, required)_: A unique identifier for the view.- 'type' _(string, required)_: The underlying view type. Must match one of the default view types listed above.- 'hideWeekend' _(boolean, optional)_: If set to 'true', weekends will be hidden for this specific view.- 'hideNonworkingWeekdays' _(boolean, optional)_: If set to 'true', non-working weekdays (e.g., Monday–Friday) will be hidden for this view.- 'shortcutKey' _(string, optional)_: Assigns a custom keyboard shortcut for switching to this view.- 'hideHours' _(boolean, optional; timelineWeek only)_: If set to 'true', the timelineWeek view will display only day cells, hiding hour cells.By configuring this property, you have full control over which timeline views are available to users and how each view behaves. Use strings for standard views and objects when you need to define custom labels, behaviors, or shortcuts. Click for more details. Property object's options:
      VviewSelectorTypeSpecifies the type of view selector that appears in the element's header, which controls how content is displayed (e.g., as a list, grid, or table view). This setting determines the layout options available to the user within the header section of the component.
      VviewStartDayConfigures the rule used to determine the start date in Week and TimelineWeek views. By default, these views start from the current date, factoring in the value specified by the 'firstDayOfWeek' property. If the 'startDateRule' property is set to 'dateCurrent', the Week and TimelineWeek views will instead start from the date provided in the 'dateCurrent' property, overriding the default behavior.
      WweekdayFormatSpecifies how the names of the weekdays are displayed within the element (e.g., full names, short names, or initials).
      YyearFormatSpecifies the date format used to display years within the timeline header. This setting controls how year values are rendered (e.g., "YYYY", "YY", or "yyyy") when the header represents years, ensuring consistent and readable date presentation.
      UunfocusableDetermines whether the element can receive keyboard focus. When set, the element becomes focusable and can be targeted using keyboard navigation (e.g., with the Tab key). When retrieved, it returns the current focusable state of the element.
      UundoRedoStepsSpecifies the maximum number of redo and undo actions that the Scheduler will retain in its history. Once this limit is reached, the oldest actions are automatically discarded to make room for new ones, ensuring that only the most recent actions up to the defined maximum are available for undo or redo operations.
      WwindowCustomizationFunctionThis function allows you to fully customize the popup window that appears when editing events. It gives you complete control over the appearance, content, and behavior of the popup based on the event context. The function is called with the following arguments: target – The popup window element that is about to be displayed. You can modify or replace this element to change how the popup looks and functions. type – A string indicating the purpose of the popup window. The default value is an empty string (''), which signifies the standard event editing window. If the value is 'confirm', the popup serves as a confirmation dialog, typically shown when interacting with repeating events (e.g., asking whether to edit a single occurrence or the series). eventObj – The event data object associated with the event being edited or confirmed. This object contains all relevant details about the event, allowing you to display or edit its properties within the popup. Use this function to precisely tailor the event editing or confirmation experience in your application’s UI.

      Events

      BbeginUpdateThis 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.
      EendUpdateThis 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.
      CchangeThis 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.
      IitemChangeThis 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.
      IitemChanging"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."
      IitemClickThis 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.
      IitemInsertThis 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.
      IitemRemoveThis 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.
      IitemUpdateThis 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.
      VviewChangeThis 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.
      VviewChangingThis 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.
      EeventShortcutKeyThis 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.
      DdateChangeThis 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.
      DdragStartThis 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.
      DdragEndThis 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.
      DdropoverCellThis 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.
      RresizeStartThis 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.
      RresizeEndThis 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.
      EeditDialogOpeningThis 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.
      EeditDialogOpenThis 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.
      EeditDialogCloseThis 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.
      EeditDialogClosingThis 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.
      CcontextMenuOpeningThis 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.
      CcontextMenuOpenThis 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.
      CcontextMenuCloseThis 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.
      CcontextMenuClosingThis 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.
      EeventMenuOpeningThis 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.
      EeventMenuOpenThis 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.
      EeventMenuCloseThis 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.
      EeventMenuClosingThis 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.
      DdateMenuOpenThis 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.
      DdateMenuCloseThis 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.
      VviewMenuOpenThis 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.
      VviewMenuCloseThis 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.
      NnotificationOpenThis 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.
      NnotificationCloseThis 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.

      Methods

      AaddEventAdds a new event to the Scheduler component. This method accepts a single event object, structured according to the Scheduler’s dataSource format. The event object supports a comprehensive set of properties, allowing for detailed configuration of event details, appearance, recurrence, and behavior:
      {  label?: string,                       // The event title/label (optional)  dateStart: date,                      // Start date and time (required)  dateEnd: date,                        // End date and time (required)  description?: string,                 // Additional event details (optional)  id?: string | number,                 // Unique event identifier (optional)  class?: string,                       // CSS class for custom styling (optional)  backgroundColor?: string,             // Background color (any CSS color value)  color?: string,                       // Text color (any CSS color value)  notifications?: [                     // Array of notification objects for reminders (optional)    {      interval: number,                 // Reminder interval in minutes/hours/days      type?: string,                    // Type of notification (email, popup, etc.)      time: number[]                    // Specific times (in minutes, relative to event start)    }  ],  allDay?: boolean,                     // Marks the event as an all-day event (optional)  disableDrag?: boolean,                // Prevents dragging/moving this event (optional)  disableResize?: boolean,              // Prevents resizing this event (optional)  repeat?: {                            // Recurrence rules (optional)    repeatFreq: string,                 // Frequency type: 'daily', 'weekly', 'monthly', etc.    repeatInterval: number,             // Interval for the repeat frequency (e.g., every 2 days)    repeatOn?: number | number[] | date,// Specific days or dates for recurrence pattern    repeatEnd?: number | date,          // Number of recurrences or end date    exceptions?: [                      // Dates or instances to exclude or modify (optional)      {        date: date,                     // Exception date (required)        dateStart?: date,               // Optional exception start time        dateEnd?: date,                 // Optional exception end time        hidden?: boolean,               // Whether this instance is hidden        backgroundColor?: string,       // Custom color for the exception        status?: string,                // Custom status        label?: string,                 // Custom label        description?: string,           // Custom description        notifications?: [               // Custom notifications for this exception          {            interval: number,            type?: string,            time: number[]          }        ],        disableDrag?: boolean,          // Disable dragging for this occurrence        disableResize?: boolean         // Disable resizing for this occurrence      }    ]  },  status?: string                       // Custom status for the event (optional)}
      **Summary:** This flexible structure allows you to configure simple or complex events with custom colors, notifications, recurrences (including exceptions), interaction restrictions, and more. All properties are optional unless otherwise marked as required. The event object you provide will be added to the Scheduler and rendered according to the specified options.
      AaddViewEnhances the scheduler by allowing you to define and register a custom view. For example: `scheduler.addView('week', 'My View', 'myView', false, false, 10);` Here, the parameters specify the base view type ('week'), display name ('My View'), unique view ID ('myView'), two boolean options (such as visibility or default state), and a numeric parameter (such as duration or step). You can then activate the new view with `scheduler.setView('myView');`. This enables developers to quickly add personalized calendar views that suit specific application needs.
      BbeginUpdateInitiates an update operation, allowing you to group multiple method calls or set multiple properties simultaneously. This ensures that all changes are applied together, which can improve performance and prevent intermediate states from being visible during the update process. Use this when you need to batch updates for efficiency or consistency.
      CcreateEventCreates a new event with specified details (such as title, date, time, and description) and adds it to the Scheduler’s event list, making it available for viewing, editing, and management within the scheduling interface.
      EendUpdateFinalizes the update operation, allowing the component to resume its normal rendering process. This method triggers a re-render of the element, ensuring that all recent changes are reflected in the UI.
      GgetViewDatesReturns an array containing the start and end dates that define the current visible date range in the view. The first element is the start date, and the second element is the end date.
      RrefreshRefreshes the Scheduler by recalculating and updating the scrollbars to ensure proper alignment and visibility based on the current content and layout changes.
      EexportDataExports all scheduled events from the Scheduler component, allowing you to download or transfer event data in a supported format (e.g., JSON, CSV, or iCal) for external use, backup, or integration with other applications.
      GgetDataSourceReturns a detailed JSON object containing all the events currently managed by the Scheduler, including properties such as event IDs, titles, start and end times, locations, descriptions, and any custom metadata associated with each event. This allows for programmatic access to the full list of scheduled events for use in external applications or integrations.
      GgetResourcesReturns a JSON-encoded object containing the detailed data for all resources managed by the Scheduler, including their unique identifiers, properties, and current state. This allows client applications to programmatically access and manipulate the full list of Scheduler resources in a structured format.
      GgetDateFromCoordinatesRetrieves a date value based on the provided coordinate data, typically by mapping spatial or grid coordinates to a corresponding date in a dataset or timeline.
      GgetIsAllDayCellFromCoordinatesDetermines if the cell at the specified coordinates represents an "all-day" cell, typically used for events that span the entire day in a calendar view.
      GgetStateReturns an object representing the current state of the Scheduler. This includes the following properties: - dateCurrent: The Scheduler’s currently selected or displayed date. - dataSource: The data source currently used to populate the Scheduler events or appointments. - timeZone: The time zone setting currently applied to the Scheduler. Use this method to retrieve a snapshot of the Scheduler’s core settings at any given moment.
      CclearStateRemoves a previously stored state of the element from LocalStorage using its assigned id as the key. An id attribute must be set on the element for this function to work correctly.
      LloadStateRetrieves a previously saved state of the element. If a specific state is provided as an argument, it loads that state. If no argument is passed, the method checks LocalStorage for any existing saved states and loads the most recent one if available.
      SsaveStateStores the current event data associated with the element in LocalStorage. Note: The element must have a unique id attribute set for this functionality to work correctly.
      SsetViewSpecifies and activates a custom view for the Scheduler component. For example, the code scheduler.addView('week', 'My View', 'myView', false, false, 10); creates a new view named "My View" of type "week" with the identifier "myView". The parameters control the view's properties, such as its type, display name, unique id, and other options. The following method, scheduler.setView('myView');, then switches the Scheduler to display the newly defined custom view.
      CcontainsEventDetermines if a specific event is present within the Scheduler's collection of scheduled events. Returns true if the event exists; otherwise, returns false.
      IinsertEventInserts an event object following the dataSource format. The event object supports a comprehensive set of properties for defining event details, appearance, recurrence, and behavior. The structure is as follows:
      {  label?: string,                   // (Optional) Title or name of the event  dateStart: date,                  // Start date and time of the event (Date object or ISO string)  dateEnd: date,                    // End date and time of the event (Date object or ISO string)  description?: string,             // (Optional) Detailed description of the event  id?: string | number,             // (Optional) Unique identifier for the event  class?: string,                   // (Optional) CSS class for custom styling  backgroundColor?: string,         // (Optional) Event background color (CSS color value)  color?: string,                   // (Optional) Text color for the event (CSS color value)  notifications?: [                 // (Optional) Array of notification settings for reminders    {      interval: number,             // Time interval before the event to trigger the notification (in minutes)      type?: string,                // (Optional) Type of notification (e.g., 'email', 'alert')      time: number[]                // Array of specific times (in minutes) for notifications    }  ],  allDay?: boolean,                 // (Optional) If true, the event lasts all day  disableDrag?: boolean,            // (Optional) If true, dragging/rescheduling is disabled for this event  disableResize?: boolean,          // (Optional) If true, resizing is disabled for this event  repeat?: {                        // (Optional) Recurrence configuration for repeating events    repeatFreq: string,             // Frequency of repetition ('daily', 'weekly', 'monthly', etc.)    repeatInterval: number,         // Number of intervals between repeats (e.g., every 2 days)    repeatOn?: number | number[] | date,   // (Optional) Specific days/dates the event repeats on    repeatEnd?: number | date,      // (Optional) End condition: number of occurrences or end date    exceptions?: [                  // (Optional) List of exceptions to recurrence rules      {        date: date,                 // Date of exception        dateStart?: date,           // (Optional) Start time for the exception        dateEnd?: date,             // (Optional) End time for the exception        hidden?: boolean,           // (Optional) If true, this occurrence is not displayed        backgroundColor?: string,   // (Optional) Custom background color for this occurrence        status?: string,            // (Optional) Status for this occurrence (e.g., 'cancelled')        label?: string,             // (Optional) Custom label for this occurrence        description?: string,       // (Optional) Custom description for this occurrence        notifications?: [{ interval: number, type?: string, time: number[] }], // (Optional) Notifications for this occurrence        disableDrag?: boolean,      // (Optional) Disable drag for this single occurrence        disableResize?: boolean     // (Optional) Disable resize for this single occurrence      }    ]  },  status?: string                   // (Optional) Current status of the event (e.g., 'pending', 'confirmed')}
      **Notes:**- Properties marked as optional (`?`) can be omitted.- The structure is fully compatible with dataSource arrays commonly used in calendar or scheduling components.- The object supports advanced event recurrence and exception handling for maximum flexibility in scheduling applications.
      UupdateEventUpdates an event object that follows the structure below. The event object format matches the dataSource format used by the application. Each property is described for clarity:
      {  label?: string,                  // (optional) The title or name of the event.  dateStart: date,                 // The start date and time of the event (Date object or valid date string).  dateEnd: date,                   // The end date and time of the event (Date object or valid date string).  description?: string,            // (optional) Detailed information or notes about the event.  id?: string | number,            // (optional) A unique identifier for the event (string or number).  class?: string,                  // (optional) CSS class(es) to style the event in the UI.  backgroundColor?: string,        // (optional) Background color for the event, specified as a CSS color value.  color?: string,                  // (optional) Text color for the event, specified as a CSS color value.  notifications?: [                // (optional) Array of notification settings for the event.    {      interval: number,            // Time interval before an event for sending a notification (in minutes/hours).      type?: string,               // (optional) Notification type (e.g., "email", "popup").      time: number[]               // Array of times (in minutes/hours) to trigger the notification.    }  ],  allDay?: boolean,                // (optional) Indicates if the event spans the entire day.  disableDrag?: boolean,           // (optional) Prevents the event from being moved via drag-and-drop in the UI.  disableResize?: boolean,         // (optional) Prevents the event from being resized in the UI.  repeat?: {                       // (optional) Recurrence settings for repeating events.    repeatFreq: string,            // Frequency of repetition (e.g., "daily", "weekly", "monthly").    repeatInterval: number,        // The interval between repetitions (e.g., every 2 days).    repeatOn?: number | number[] | date,  // (optional) Specific days or dates when the event repeats (e.g., day of week).    repeatEnd?: number | date,     // (optional) End of the recurrence - number of occurrences or a specific date.    exceptions?: [                 // (optional) List of exceptions/dates when the event does not occur or details of modified occurrences.      {        date: date,                // The exception date (date when event does not occur or is modified).        dateStart?: date,          // (optional) Modified start date/time for the exception occurrence.        dateEnd?: date,            // (optional) Modified end date/time for the exception occurrence.        hidden?: boolean,          // (optional) If true, hides this occurrence.        backgroundColor?: string,  // (optional) Background color override for this occurrence.        status?: string,           // (optional) Custom status for this occurrence.        label?: string,            // (optional) Custom label/title for this occurrence.        description?: string,      // (optional) Custom description for this occurrence.        notifications?: [          // (optional) Notification settings specifically for this occurrence.          {            interval: number,            type?: string,            time: number[]          }        ],        disableDrag?: boolean,     // (optional) Prevents this occurrence from being dragged in the UI.        disableResize?: boolean    // (optional) Prevents this occurrence from being resized in the UI.      }    ]  },  status?: string                  // (optional) The current status of the event (e.g., "confirmed", "tentative", "cancelled").}
      When updating the event object, all or some of these properties can be included based on which attributes need to be modified. This flexible structure allows for basic one-time events, as well as complex recurring events with customized properties and exceptions.
      RremoveEventDeletes a specified event from the system, permanently removing its associated data and making it no longer accessible or visible to users.
      GgetEventExceptionsReturns an array containing all exception instances associated with the specified recurring event. Each exception represents a single occurrence within the event series that differs from the original recurrence pattern, such as modified dates, details, or cancellations.
      AaddEventExceptionAdds an exception to a recurring event, allowing you to modify or override specific occurrences in a repeating event series. Event exceptions are useful for handling changes such as rescheduling a single meeting in a weekly series, skipping a date, or altering event details for one instance without affecting the entire series.You can retrieve the individual occurrences of a recurring event using the following methods: occurrences: Returns an array of all occurrences for a recurring event. occurrencesBetween(startDate, endDate): Returns all occurrences that fall within the specified date range. occurrenceAfter(date): Returns the first occurrence after the given date. occurrenceBefore(date): Returns the last occurrence before the given date.To add an exception, call addEventException with the event object and a configuration object specifying the desired changes for a particular occurrence (such as a new date or label):

      Example usage:

      scheduler.addEventException(eventObj, {  date: occurrenceDate,              // Date of the occurrence to override  dateStart: newDateStart,           // New start date/time for this exception  dateEnd: newDateEnd,               // New end date/time for this exception  label: 'Exception'                 // (Optional) Label or description for this exception});
      This will create a customized exception for the specified recurrence, ensuring only the selected occurrence is modified while all other instances remain unaffected.
      UupdateEventExceptionUpdates a single exception occurrence within a recurring event series.To retrieve the specific exception occurrences of a repeating event, you can use these methods: occurrences: Returns all instances of the recurring event, including exceptions. occurrencesBetween: Retrieves event occurrences that fall within a specified date range. occurrenceAfter: Finds the next occurrence after a given date. occurrenceBefore: Finds the previous occurrence before a given date.

      Use the updateEventException method to modify the details of a particular occurrence (exception) in a recurring event series. Supply:

      eventObj - The original recurring event object. dateOfOccurrence - The date/time identifying the specific occurrence to update. changes - An object specifying the updates for this exception (such as new start/end times, label, etc.).

      Example usage:

      scheduler.updateEventException(  eventObj,   dateOfOccurrence,   { dateStart: newDateStart, dateEnd: newDateEnd, label: 'Updated Exception' });

      This call will update only the specified exception occurrence, leaving the rest of the recurring series unchanged.

      RremoveEventExceptionRemoves a specified exception instance from a recurring event series, thereby restoring the affected occurrence to match the original recurring pattern.
      OopenWindowOpens a popup window that allows users to view and edit the details of a selected event. This enables modification of event information such as title, date, time, location, and other relevant attributes.
      CcloseWindowCloses the currently open popup window, removing it from view and returning focus to the main application interface.
      PprintPrepares the Scheduler component for printing by formatting its layout and content for optimal print output, then triggers the browser’s Print Preview dialog for the user to review and print the schedule.
      SscrollToDateScrolls the Scheduler component to display the specified date. This method ensures that the view is brought to the appropriate date slot, making it visible to the user. If the date is not currently in view, the Scheduler will automatically scroll horizontally or vertically as needed to reveal the target date.
      NnavigateToDateTransitions the Scheduler interface to display and focus on a specific date selected by the user.
      SscrollToEventSmoothly scrolls the Scheduler component to bring the specified event into view, ensuring it is visible to the user in the current viewport.
      OopenNotificationDisplays a custom notification to the user, allowing you to specify the message content, style, and behavior. This function enables dynamic alerts or updates within the application’s user interface.
      CcloseNotificationsDismisses and removes all currently active notifications from view, ensuring that no notification messages remain visible to the user.
      OoccurrencesReturns a list of all instances where the specified event occurs within the data set. Each occurrence is represented as an individual object or record, providing detailed information about that specific event instance. This enables comprehensive tracking and analysis of every time the event takes place.
      OoccurrencesBetweenReturns a list of all occurrences of a specified event that take place within the given start and end date range, inclusive. Each occurrence includes detailed event information and falls between the provided dates.
      OoccurrenceAfterReturns the first occurrence of an event that takes place after the specified date. This function searches through the list of events and retrieves the earliest event whose date is strictly later than the provided reference date. If no such event exists, it returns null or an appropriate default value.
      OoccurrenceBeforeReturns the most recent occurrence of the specified event that occurred before the given date.
      GgetCellDateRangeReturns the start and end dates (dateStart/dateEnd) for a specific timeline cell, representing the time interval covered by that cell on the timeline.
      OopenEventTooltipDisplays the tooltip (event menu) associated with a specific event, providing additional information and context about the selected event when triggered.
      CcloseEventTooltipCloses and hides the event tooltip (also known as the event menu), removing it from view and preventing further interactions until it is reopened.
      IisDateRestrictedDetermines if the specified date is restricted. Returns true if the date falls within the set of restricted dates; otherwise, returns false.
      IisHourRestrictedDetermines whether the specified hour is restricted. Returns true if the hour falls within a restricted period; otherwise, returns false.
      IisEventRestrictedDetermines if the event is restricted by returning a boolean value: true if the event has access restrictions, or false if it is open to all users.
      DdeleteUndoRedoHistoryRemoves all existing entries from the undo and redo history, clearing any previous actions and preventing the user from undoing or redoing changes made prior to this operation.
      CcanRedoSpecifies whether the action can be redone, indicating if there is a subsequent step available in the redo history that allows the user to reverse a previous undo operation.
      CcanUndoSpecifies whether the most recent action can be undone by the user. If set to true, the user has the option to revert or reverse the previous action; if false, the action cannot be undone.
      RredoRevert the changes made to the upcoming event modification, restoring the event to its previous state.
      UundoRevert the most recent changes made to the event, restoring it to its previous state.

      Properties

      autoScrollStepnumber

      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.

      Default value

      30

      Example

      Set the autoScrollStep property. 

       <smart-scheduler auto-scroll-step='5'></smart-scheduler>

      Set the autoScrollStep property by using the HTML Element's instance. 

       const scheduler = document.querySelector('smart-scheduler');
       scheduler.autoScrollStep = 10;

      Get the autoScrollStep property. 

       const scheduler = document.querySelector('smart-scheduler');
       let autoScrollStep = scheduler.autoScrollStep;

      autoHeightAllDayCellsboolean

      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.

      Default value

      false

      Example

      Set the autoHeightAllDayCells property. 

       <smart-scheduler auto-height-all-day-cells></smart-scheduler>

      Set the autoHeightAllDayCells property by using the HTML Element's instance. 

       const scheduler = document.querySelector('smart-scheduler');
       scheduler.autoHeightAllDayCells = true;

      Get the autoHeightAllDayCells property. 

       const scheduler = document.querySelector('smart-scheduler');
       let autoHeightAllDayCells = scheduler.autoHeightAllDayCells;

      availablearray

      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.

      Try a demo showcasing the available property.

      colorSchemestring[]

      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.

      Example

      Set the colorScheme property. 

       <smart-scheduler color-scheme='['#D50000', '#E67C73', '#F4511E', '#F6BF26', '']'></smart-scheduler>

      Set the colorScheme property by using the HTML Element's instance. 

       const scheduler = document.querySelector('smart-scheduler');
       scheduler.colorScheme = ['', '#33B679', '#0B8043', '#039BE5', '#3F51B5'];

      Get the colorScheme property. 

       const scheduler = document.querySelector('smart-scheduler');
       let colorScheme = scheduler.colorScheme;

      currentTimestring | Date

      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.

      Default value

      new Date()

      Example

      Set the currentTime property. 

       <smart-scheduler current-time='new Date(2023, 2, 1)'></smart-scheduler>

      Set the currentTime property by using the HTML Element's instance. 

       const scheduler = document.querySelector('smart-scheduler');
       scheduler.currentTime = 2022-05-25;

      Get the currentTime property. 

       const scheduler = document.querySelector('smart-scheduler');
       let currentTime = scheduler.currentTime;

      currentTimeIndicatorboolean

      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.

      Default value

      false

      Example

      Set the currentTimeIndicator property. 

       <smart-scheduler current-time-indicator></smart-scheduler>

      Set the currentTimeIndicator property by using the HTML Element's instance. 

       const scheduler = document.querySelector('smart-scheduler');
       scheduler.currentTimeIndicator = false;

      Get the currentTimeIndicator property. 

       const scheduler = document.querySelector('smart-scheduler');
       let currentTimeIndicator = scheduler.currentTimeIndicator;

      currentTimeIndicatorIntervalnumber

      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.

      Default value

      1

      Example

      Set the currentTimeIndicatorInterval property. 

       <smart-scheduler current-time-indicator-interval='60'></smart-scheduler>

      Set the currentTimeIndicatorInterval property by using the HTML Element's instance. 

       const scheduler = document.querySelector('smart-scheduler');
       scheduler.currentTimeIndicatorInterval = 120;

      Get the currentTimeIndicatorInterval property. 

       const scheduler = document.querySelector('smart-scheduler');
       let currentTimeIndicatorInterval = scheduler.currentTimeIndicatorInterval;

      contextMenuDataSource[]

      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.

      Example

      Set the contextMenuDataSource property. 

       <smart-scheduler context-menu-data-source='[{ label: 'Create Event', value: 'createEvent' }]'></smart-scheduler>

      Set the contextMenuDataSource property by using the HTML Element's instance. 

       const scheduler = document.querySelector('smart-scheduler');
       scheduler.contextMenuDataSource = [{ label: 'Custom Item', value: 'customItemAction' }];

      Get the contextMenuDataSource property. 

       const scheduler = document.querySelector('smart-scheduler');
       let contextMenuDataSource = scheduler.contextMenuDataSource;

      contextMenuClipboardActionsboolean

      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.

      Default value

      false

      Example

      Set the contextMenuClipboardActions property. 

       <smart-scheduler context-menu-clipboard-actions></smart-scheduler>

      Set the contextMenuClipboardActions property by using the HTML Element's instance. 

       const scheduler = document.querySelector('smart-scheduler');
       scheduler.contextMenuClipboardActions = false;

      Get the contextMenuClipboardActions property. 

       const scheduler = document.querySelector('smart-scheduler');
       let contextMenuClipboardActions = scheduler.contextMenuClipboardActions;

      eventTemplateany

      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.

      Try a demo showcasing the eventTemplate property.

      Example

      Set the eventTemplate property. 

       <smart-scheduler event-template='function (eventContent, eventObj) { eventContent.innerHTML = eventObj.label }'></smart-scheduler>

      Set the eventTemplate property by using the HTML Element's instance. 

       const scheduler = document.querySelector('smart-scheduler');
       scheduler.eventTemplate = eventTemplateId;

      Get the eventTemplate property. 

       const scheduler = document.querySelector('smart-scheduler');
       let eventTemplate = scheduler.eventTemplate;

      eventCollectorTemplateany

      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.

      Example

      Set the eventCollectorTemplate property. 

       <smart-scheduler event-collector-template='function (eventContent, eventObjs) { eventContent.innerHTML = eventObjs.map(e => e.label).toString() }'></smart-scheduler>

      Set the eventCollectorTemplate property by using the HTML Element's instance. 

       const scheduler = document.querySelector('smart-scheduler');
       scheduler.eventCollectorTemplate = eventTemplateId;

      Get the eventCollectorTemplate property. 

       const scheduler = document.querySelector('smart-scheduler');
       let eventCollectorTemplate = scheduler.eventCollectorTemplate;

      eventRenderMode"classic" | "modern"

      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.



      Allowed Values
      • "classic" - The events are resized in order to fit in the cells that are assigned to.
      • "modern" - Event collectors are used to store the events that do not fit in the cells where multiple events are assigned.

      Default value

      "modern"
      Try a demo showcasing the eventRenderMode property.

      Example

      Set the eventRenderMode property. 

       <smart-scheduler event-render-mode='classic'></smart-scheduler>

      Set the eventRenderMode property by using the HTML Element's instance. 

       const scheduler = document.querySelector('smart-scheduler');
       scheduler.eventRenderMode = 'modern';

      Get the eventRenderMode property. 

       const scheduler = document.querySelector('smart-scheduler');
       let eventRenderMode = scheduler.eventRenderMode;

      eventTooltipTemplateany



      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.

      Example

      Set the eventTooltipTemplate property. 

       <smart-scheduler event-tooltip-template='function (eventContent, eventObjs) { eventContent.innerHTML = eventObjs.map(e => e.label).toString() }'></smart-scheduler>

      Set the eventTooltipTemplate property by using the HTML Element's instance. 

       const scheduler = document.querySelector('smart-scheduler');
       scheduler.eventTooltipTemplate = eventTemplateId;

      Get the eventTooltipTemplate property. 

       const scheduler = document.querySelector('smart-scheduler');
       let eventTooltipTemplate = scheduler.eventTooltipTemplate;

      cellTemplateany

      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.

      Example

      Set the cellTemplate property. 

       <smart-scheduler cell-template='function (cellContent, cellDate) { cellContent.innerHTML = new Intl.DateTimeFormat('en', { day: 'numeric' }).format(value) }'></smart-scheduler>

      Set the cellTemplate property by using the HTML Element's instance. 

       const scheduler = document.querySelector('smart-scheduler');
       scheduler.cellTemplate = cellTemplateId;

      Get the cellTemplate property. 

       const scheduler = document.querySelector('smart-scheduler');
       let cellTemplate = scheduler.cellTemplate;

      dateCurrentstring | Date

      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.

      Default value

      new Date()

      Example

      Set the dateCurrent property. 

       <smart-scheduler date-current='new Date(2023, 2, 1)'></smart-scheduler>

      Set the dateCurrent property by using the HTML Element's instance. 

       const scheduler = document.querySelector('smart-scheduler');
       scheduler.dateCurrent = 2022-05-25;

      Get the dateCurrent property. 

       const scheduler = document.querySelector('smart-scheduler');
       let dateCurrent = scheduler.dateCurrent;

      dataExportobject

      Configures the data export settings for the Scheduler, including file format, export range, and additional export-related options.

      Properties

      header
      columns
      style
      fileName
      pageOrientation

      headerboolean

      Determines whether the column headers will be included when exporting data. If enabled, the exported file will contain a row with the names of each column at the top.

      Default value

      true

      Get the header property. 

       const scheduler = document.querySelector('smart-scheduler');
       let header = scheduler.dataExport.header;

      columnsstring[]

      Specifies the names of the event properties that will be included as separate columns in the exported data, allowing each property's value to appear in its own column within the resulting file.

      Default value

      ""

      Get the columns property. 

       const scheduler = document.querySelector('smart-scheduler');
       let columns = scheduler.dataExport.columns;

      styleobject

      Specifies a custom style object to apply to the dataExport, allowing you to define the appearance—such as fonts, colors, and formatting—of the exported data.

      Get the style property. 

       const scheduler = document.querySelector('smart-scheduler');
       let style = scheduler.dataExport.style;

      fileNamestring

      Specifies the name that will be assigned to the exported file when it is downloaded or saved.

      Default value

      "smartScheduler"

      Get the fileName property. 

       const scheduler = document.querySelector('smart-scheduler');
       let fileName = scheduler.dataExport.fileName;

      pageOrientationstring

      Specifies the orientation (portrait or landscape) of the page layout when exporting the document to PDF format. This setting determines how the content is arranged on each PDF page.

      Default value

      "portrait"

      Get the pageOrientation property. 

       const scheduler = document.querySelector('smart-scheduler');
       let pageOrientation = scheduler.dataExport.pageOrientation;
      Try a demo showcasing the dataExport property.

      dataSource{label: string, dateStart: string | Date, dateEnd: string | Date, allDay?: boolean, description?: string, disableDrag?: boolean, disableResize?:boolean, repeat?: { repeatFreq: string, repeatInterval: number, repeatOn?: object | string | date, repeatEnd?: number | date | undefined, exceptions?: { date: string | date, dateStart: date | string, dateEnd: date | string, backgroundColor?: 'string', color?: string, hidden?: boolean }}, class?: string, id?: string, notifications?: {interval: number, type: string, time: number[], message?: string | undefined, iconType?: string}[]}[]

      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:

      Properties

      repeat
      repeatFreq
      repeatInterval
      repeatOn
      repeatEnd
      exceptions

      repeat{ repeatFreq: string, repeatInterval: number, repeatOn?: number | object | Date | string | undefined, repeatEnd?: number | date | undefined, exceptions?: { date: string | date, dateStart: date | string, dateEnd: date | string, backgroundColor?: 'string', color?: string, hidden?: boolean }} | undefined

      Event Repeat Object.

      Default value

      null

      Properties

      repeatFreq"hourly" | "daily" | "weekly" | "monthly" | "yearly"

      Determines the repeating frequency. The event can repeat hourly, daily, weekly, monthly or yearly.

      Default value

      "hourly"

      Get the repeatFreq property. 

       const scheduler = document.querySelector('smart-scheduler');
       let repeatFreq = scheduler.dataSource.repeatFreq;

      repeatIntervalnumber

      Determines the repeating interval.

      Default value

      1

      Get the repeatInterval property. 

       const scheduler = document.querySelector('smart-scheduler');
       let repeatInterval = scheduler.dataSource.repeatInterval;

      repeatOnnumber | object | Date | string | undefined

      Determines on wah day/date the event will repeat on. This is applicable only when repeatFreq is of type 'weekly' ( allows to pick the days of week from 0 to 6, where 0 is Sunday and 6 is Saturday), 'monthly' ( allows to pick a date of the month from 0 to 31) or 'yearly' (allows to pick a particular Date to repeat on. The date can be set as a Date or an object of type{ month: string, date: number }).

      Default value

      ""

      Get the repeatOn property. 

       const scheduler = document.querySelector('smart-scheduler');
       let repeatOn = scheduler.dataSource.repeatOn;

      repeatEndnumber | date | undefined

      Determines when the repeating event will end. By default it does not have an end condition. If the value is set to a number than it is considered as the number of time the event will repeat before it ends. If it's a Date then it is considered as the end date for the repeating series. If not set it will never end.

      Default value

      0

      Get the repeatEnd property. 

       const scheduler = document.querySelector('smart-scheduler');
       let repeatEnd = scheduler.dataSource.repeatEnd;

      exceptions{ date: string | date, dateStart: date | string, dateEnd: date | string, backgroundColor?: string, color?: string, hidden?: boolean }[] | undefined

      Event exceptions represent a repeating series event that has been re-scheduler for another date/time or it has been hidden from the Scheduler. Exceptions cannot repeat.

      Default value

      null

      Get the exceptions property. 

       const scheduler = document.querySelector('smart-scheduler');
       let exceptions = scheduler.dataSource.exceptions;

      Get the repeat property. 

       const scheduler = document.querySelector('smart-scheduler');
       let repeat = scheduler.dataSource.repeat.repeat;

      classstring

      Event CSS class.

      Default value

      ""

      Get the class property. 

       const scheduler = document.querySelector('smart-scheduler');
       let class = scheduler.dataSource.repeat.class;

      dateStartstring | Date

      Event start date.

      Default value

      ""

      Get the dateStart property. 

       const scheduler = document.querySelector('smart-scheduler');
       let dateStart = scheduler.dataSource.repeat.dateStart;

      dateEndstring | Date

      Event end date.

      Default value

      ""

      Get the dateEnd property. 

       const scheduler = document.querySelector('smart-scheduler');
       let dateEnd = scheduler.dataSource.repeat.dateEnd;

      disableDragboolean

      Determines whether dragging is disabled for the event.

      Default value

      false

      Get the disableDrag property. 

       const scheduler = document.querySelector('smart-scheduler');
       let disableDrag = scheduler.dataSource.repeat.disableDrag;

      disableResizeboolean

      Determines whether resizing is disabled for the event.

      Default value

      false

      Get the disableResize property. 

       const scheduler = document.querySelector('smart-scheduler');
       let disableResize = scheduler.dataSource.repeat.disableResize;

      idstring?

      Event unique id.

      Default value

      ""

      Get the id property. 

       const scheduler = document.querySelector('smart-scheduler');
       let id = scheduler.dataSource.repeat.id;

      labelstring?

      Event Label.

      Default value

      ""

      Get the label property. 

       const scheduler = document.querySelector('smart-scheduler');
       let label = scheduler.dataSource.repeat.label;

      descriptionstring?

      Event Description.

      Default value

      ""

      Get the description property. 

       const scheduler = document.querySelector('smart-scheduler');
       let description = scheduler.dataSource.repeat.description;

      allDayboolean?

      Determines whether an event is an all day event ot nor. All day events ignore time.

      Default value

      false

      Get the allDay property. 

       const scheduler = document.querySelector('smart-scheduler');
       let allDay = scheduler.dataSource.repeat.allDay;

      backgroundColorstring?

      Sets a background color for the event. The background color should be in HEX format.

      Default value

      false

      Get the backgroundColor property. 

       const scheduler = document.querySelector('smart-scheduler');
       let backgroundColor = scheduler.dataSource.repeat.backgroundColor;

      colorstring?

      Sets a color for the event. The color should be in HEX format.

      Default value

      false

      Get the color property. 

       const scheduler = document.querySelector('smart-scheduler');
       let color = scheduler.dataSource.repeat.color;

      statusstring?

      Sets the appointment status.

      Default value

      false

      Get the status property. 

       const scheduler = document.querySelector('smart-scheduler');
       let status = scheduler.dataSource.repeat.status;

      resourceIdstring?

      Event resource unique id.

      Default value

      ""

      Get the resourceId property. 

       const scheduler = document.querySelector('smart-scheduler');
       let resourceId = scheduler.dataSource.repeat.resourceId;

      notifications{interval: number, type?: string, time: number[], message?: string | undefined, iconType?: string}[]

      Event notifications.

      Properties

      interval
      type
      time
      message
      iconType

      intervalnumber

      The number of days/weeks when the notification should appear before the event starts.

      Default value

      0

      Get the interval property. 

       const scheduler = document.querySelector('smart-scheduler');
       let interval = scheduler.dataSource.repeat.notifications[0].interval;

      type"days" | "weeks"

      The type of the interval for the notification.

      Default value

      "days"

      Get the type property. 

       const scheduler = document.querySelector('smart-scheduler');
       let type = scheduler.dataSource.repeat.notifications[0].type;

      timenumber[]

      An array that represents the time when the notification should appear before the event starts. The array should have the following format: [hours: number, minutes:number]

      Get the time property. 

       const scheduler = document.querySelector('smart-scheduler');
       let time = scheduler.dataSource.repeat.notifications[0].time;

      messagestring?

      The message that will appear inside the notificaiton. If no message is set, then the label of the event is displayed.

      Default value

      ""

      Get the message property. 

       const scheduler = document.querySelector('smart-scheduler');
       let message = scheduler.dataSource.repeat.notifications[0].message;

      iconTypestring?

      Determines the type of icon that will be displayed inside the notification. By default the iconType is 'info'.

      Default value

      ""

      Get the iconType property. 

       const scheduler = document.querySelector('smart-scheduler');
       let iconType = scheduler.dataSource.repeat.notifications[0].iconType;

      Get the notifications property. 

       const scheduler = document.querySelector('smart-scheduler');
       let notifications = scheduler.dataSource.repeat.notifications;
      Try a demo showcasing the dataSource property.

      Example

      Set the dataSource property. 

       <smart-scheduler data-source='{ label: 'Visit Vitosha Mountain', dateStart: '2022-07-07' dateEnd: '2022-07-08' }'></smart-scheduler>

      Set the dataSource property by using the HTML Element's instance. 

       const scheduler = document.querySelector('smart-scheduler');
       scheduler.dataSource =  { label: 'City Tour', dateStart: '2022-07-09' dateEnd: '2022-07-10' }, { label: 'Kayaking', dateStart: '2022-07-05' dateEnd: '2022-07-06' };

      Get the dataSource property. 

       const scheduler = document.querySelector('smart-scheduler');
       let dataSource = scheduler.dataSource;

      dateSelectorFormatFunctionany

      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.

      dayFormat"2-digit" | "numeric" | "long" | "short" | "narrow"

      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.

      Default value

      "short"

      Example

      Set the dayFormat property. 

       <smart-scheduler day-format='numeric'></smart-scheduler>

      Set the dayFormat property by using the HTML Element's instance. 

       const scheduler = document.querySelector('smart-scheduler');
       scheduler.dayFormat = 'short';

      Get the dayFormat property. 

       const scheduler = document.querySelector('smart-scheduler');
       let dayFormat = scheduler.dayFormat;

      disabledboolean

      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.

      Default value

      false

      Example

      Set the disabled property. 

       <smart-scheduler disabled></smart-scheduler>

      Set the disabled property by using the HTML Element's instance. 

       const scheduler = document.querySelector('smart-scheduler');
       scheduler.disabled = false;

      Get the disabled property. 

       const scheduler = document.querySelector('smart-scheduler');
       let disabled = scheduler.disabled;

      disableAutoScrollboolean

      Prevents the timeline from automatically scrolling when you drag or resize an event, ensuring that the visible timeline remains stationary during these interactions.

      Default value

      false

      Example

      Set the disableAutoScroll property. 

       <smart-scheduler disable-auto-scroll></smart-scheduler>

      Set the disableAutoScroll property by using the HTML Element's instance. 

       const scheduler = document.querySelector('smart-scheduler');
       scheduler.disableAutoScroll = false;

      Get the disableAutoScroll property. 

       const scheduler = document.querySelector('smart-scheduler');
       let disableAutoScroll = scheduler.disableAutoScroll;

      disableDragboolean

      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.

      Default value

      false
      Try a demo showcasing the disableDrag property.

      Example

      Set the disableDrag property. 

       <smart-scheduler disable-drag></smart-scheduler>

      Set the disableDrag property by using the HTML Element's instance. 

       const scheduler = document.querySelector('smart-scheduler');
       scheduler.disableDrag = false;

      Get the disableDrag property. 

       const scheduler = document.querySelector('smart-scheduler');
       let disableDrag = scheduler.disableDrag;

      disableDropboolean

      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.

      Default value

      false
      Try a demo showcasing the disableDrop property.

      Example

      Set the disableDrop property. 

       <smart-scheduler disable-drop></smart-scheduler>

      Set the disableDrop property by using the HTML Element's instance. 

       const scheduler = document.querySelector('smart-scheduler');
       scheduler.disableDrop = false;

      Get the disableDrop property. 

       const scheduler = document.querySelector('smart-scheduler');
       let disableDrop = scheduler.disableDrop;

      disableResizeboolean

      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.

      Default value

      false

      Example

      Set the disableResize property. 

       <smart-scheduler disable-resize></smart-scheduler>

      Set the disableResize property by using the HTML Element's instance. 

       const scheduler = document.querySelector('smart-scheduler');
       scheduler.disableResize = false;

      Get the disableResize property. 

       const scheduler = document.querySelector('smart-scheduler');
       let disableResize = scheduler.disableResize;

      disableSelectionboolean

      Prevents users from selecting or highlighting the contents of the cell, disabling any cell selection functionality.

      Default value

      false

      Example

      Set the disableSelection property. 

       <smart-scheduler disable-selection></smart-scheduler>

      Set the disableSelection property by using the HTML Element's instance. 

       const scheduler = document.querySelector('smart-scheduler');
       scheduler.disableSelection = false;

      Get the disableSelection property. 

       const scheduler = document.querySelector('smart-scheduler');
       let disableSelection = scheduler.disableSelection;

      disableWindowEditorboolean

      Prevents the event window editor from opening, effectively disabling the ability for users to view or modify event details through the window interface.

      Default value

      false
      Try a demo showcasing the disableWindowEditor property.

      Example

      Set the disableWindowEditor property. 

       <smart-scheduler disable-window-editor></smart-scheduler>

      Set the disableWindowEditor property by using the HTML Element's instance. 

       const scheduler = document.querySelector('smart-scheduler');
       scheduler.disableWindowEditor = false;

      Get the disableWindowEditor property. 

       const scheduler = document.querySelector('smart-scheduler');
       let disableWindowEditor = scheduler.disableWindowEditor;

      disableContextMenuboolean

      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.

      Default value

      false
      Try a demo showcasing the disableContextMenu property.

      Example

      Set the disableContextMenu property. 

       <smart-scheduler disable-context-menu></smart-scheduler>

      Set the disableContextMenu property by using the HTML Element's instance. 

       const scheduler = document.querySelector('smart-scheduler');
       scheduler.disableContextMenu = false;

      Get the disableContextMenu property. 

       const scheduler = document.querySelector('smart-scheduler');
       let disableContextMenu = scheduler.disableContextMenu;

      disableEventMenuboolean

      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.

      Default value

      false
      Try a demo showcasing the disableEventMenu property.

      Example

      Set the disableEventMenu property. 

       <smart-scheduler disable-event-menu></smart-scheduler>

      Set the disableEventMenu property by using the HTML Element's instance. 

       const scheduler = document.querySelector('smart-scheduler');
       scheduler.disableEventMenu = false;

      Get the disableEventMenu property. 

       const scheduler = document.querySelector('smart-scheduler');
       let disableEventMenu = scheduler.disableEventMenu;

      disableViewMenuboolean

      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).

      Default value

      false
      Try a demo showcasing the disableViewMenu property.

      Example

      Set the disableViewMenu property. 

       <smart-scheduler disable-view-menu></smart-scheduler>

      Set the disableViewMenu property by using the HTML Element's instance. 

       const scheduler = document.querySelector('smart-scheduler');
       scheduler.disableViewMenu = false;

      Get the disableViewMenu property. 

       const scheduler = document.querySelector('smart-scheduler');
       let disableViewMenu = scheduler.disableViewMenu;

      disableDateMenuboolean

      Prevents the date selection menu from appearing, disabling the user's ability to change the current Scheduler date through the interface.

      Default value

      false
      Try a demo showcasing the disableDateMenu property.

      Example

      Set the disableDateMenu property. 

       <smart-scheduler disable-date-menu></smart-scheduler>

      Set the disableDateMenu property by using the HTML Element's instance. 

       const scheduler = document.querySelector('smart-scheduler');
       scheduler.disableDateMenu = false;

      Get the disableDateMenu property. 

       const scheduler = document.querySelector('smart-scheduler');
       let disableDateMenu = scheduler.disableDateMenu;

      dragFeedbackFormatFunctionany

      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.

      dragOffsetarray

      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.

      filter{ name: string, value: string | function }[] | function

      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:
      '''js
      filter: (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.

      filterablearray

      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.

      filterMode"contains" | "containsIgnoreCase" | "doesNotContain" | "doesNotContainIgnoreCase" | "equals" | "equalsIgnoreCase" | "startsWith" | "startsWithIgnoreCase" | "endsWith" | "endsWithIgnoreCase"

      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.

      Allowed Values

      • "contains" - Displays only events with labels that contain the filter string (case sensitive)
      • "containsIgnoreCase" - Displays only events with labels that contain the filter string (case insensitive)
      • "doesNotContain" - Displays only events with labels that do not contain the filter string (case sensitive)
      • "doesNotContainIgnoreCase" - Displays only events with labels that do not contain the filter string (case insensitive)
      • "equals" - Displays only events with labels that equal the filter string (case sensitive)
      • "equalsIgnoreCase" - Displays only events with labels that equal the filter string (case insensitive)
      • "startsWith" - Displays only events with labels that start with the filter string (case sensitive)
      • "startsWithIgnoreCase" - Displays only events with labels that start with the filter string (case insensitive)
      • "endsWith" - Displays only events with labels that end with the filter string (case sensitive)
      • "endsWithIgnoreCase" - Displays only events with labels that end with the filter string (case insensitive)

      Default value

      "equals"

      events{label: string, dateStart: string | Date, dateEnd: string | Date, allDay?: boolean, description?: string, disableDrag?: boolean, disableResize?:boolean, repeat?: { repeatFreq: string, repeatInterval: number, repeatOn?: object | string | date, repeatEnd?: number | date | undefined, exceptions?: { date: string | date, dateStart: date | string, dateEnd: date | string, backgroundColor?: 'string', color?: string, hidden?: boolean }}, class?: string, id?: string, notifications?: {interval: number, type: string, time: number[], message?: string | undefined, iconType?: string}[]}[]

      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.

      Default value

      null

      Properties

      repeat
      repeatFreq
      repeatInterval
      repeatOn
      repeatEnd
      exceptions

      repeat{ repeatFreq: string, repeatInterval: number, repeatOn?: number | object | Date | string | undefined, repeatEnd?: number | date | undefined, exceptions?: { date: string | date, dateStart: date | string, dateEnd: date | string, backgroundColor?: 'string', color?: string, hidden?: boolean }} | undefined

      Event Repeat Object.

      Default value

      null

      Properties

      repeatFreq"hourly" | "daily" | "weekly" | "monthly" | "yearly"

      Determines the repeating frequency. The event can repeat hourly, daily, weekly, monthly or yearly.

      Default value

      "hourly"

      Get the repeatFreq property. 

       const scheduler = document.querySelector('smart-scheduler');
       let repeatFreq = scheduler.events[0].repeatFreq;

      repeatIntervalnumber

      Determines the repeating interval.

      Default value

      1

      Get the repeatInterval property. 

       const scheduler = document.querySelector('smart-scheduler');
       let repeatInterval = scheduler.events[0].repeatInterval;

      repeatOnnumber | object | Date | string | undefined

      Determines on wah day/date the event will repeat on. This is applicable only when repeatFreq is of type 'weekly' ( allows to pick the days of week from 0 to 6, where 0 is Sunday and 6 is Saturday), 'monthly' ( allows to pick a date of the month from 0 to 31) or 'yearly' (allows to pick a particular Date to repeat on. The date can be set as a Date or an object of type{ month: string, date: number }).

      Default value

      ""

      Get the repeatOn property. 

       const scheduler = document.querySelector('smart-scheduler');
       let repeatOn = scheduler.events[0].repeatOn;

      repeatEndnumber | Date | undefined

      Determines when the repeating event will end. By default it does not have an end condition. If the value is set to a number than it is considered as the number of time the event will repeat before it ends. If it's a Date then it is considered as the end date for the repeating series. If not set it will never end.

      Default value

      0

      Get the repeatEnd property. 

       const scheduler = document.querySelector('smart-scheduler');
       let repeatEnd = scheduler.events[0].repeatEnd;

      exceptions{ date: string | date, dateStart: date | string, dateEnd: date | string, backgroundColor?: 'string', color?: string, hidden?: boolean }[] | undefined

      Event exceptions represent a repeating series event that has been re-scheduler for another date/time or it has been hidden from the Scheduler. Exceptions cannot repeat.

      Default value

      null

      Get the exceptions property. 

       const scheduler = document.querySelector('smart-scheduler');
       let exceptions = scheduler.events[0].exceptions;

      Get the repeat property. 

       const scheduler = document.querySelector('smart-scheduler');
       let repeat = scheduler.events[0].repeat.repeat;

      classstring

      Event CSS class.

      Default value

      ""

      Get the class property. 

       const scheduler = document.querySelector('smart-scheduler');
       let class = scheduler.events[0].repeat.class;

      dateStartstring | Date

      Event start date.

      Default value

      ""

      Get the dateStart property. 

       const scheduler = document.querySelector('smart-scheduler');
       let dateStart = scheduler.events[0].repeat.dateStart;

      dateEndstring | Date

      Event end date.

      Default value

      ""

      Get the dateEnd property. 

       const scheduler = document.querySelector('smart-scheduler');
       let dateEnd = scheduler.events[0].repeat.dateEnd;

      disableDragboolean

      Determines whether dragging is disabled for the event.

      Default value

      false

      Get the disableDrag property. 

       const scheduler = document.querySelector('smart-scheduler');
       let disableDrag = scheduler.events[0].repeat.disableDrag;

      disableResizeboolean

      Determines whether resizing is disabled for the event.

      Default value

      false

      Get the disableResize property. 

       const scheduler = document.querySelector('smart-scheduler');
       let disableResize = scheduler.events[0].repeat.disableResize;

      idstring | undefined

      Event unique id.

      Default value

      ""

      Get the id property. 

       const scheduler = document.querySelector('smart-scheduler');
       let id = scheduler.events[0].repeat.id;

      labelstring | undefined

      Event Label.

      Default value

      ""

      Get the label property. 

       const scheduler = document.querySelector('smart-scheduler');
       let label = scheduler.events[0].repeat.label;

      descriptionstring | undefined

      Event Description.

      Default value

      ""

      Get the description property. 

       const scheduler = document.querySelector('smart-scheduler');
       let description = scheduler.events[0].repeat.description;

      allDayboolean | undefined

      Determines whether an event is an all day event ot nor. All day events ignore time.

      Default value

      false

      Get the allDay property. 

       const scheduler = document.querySelector('smart-scheduler');
       let allDay = scheduler.events[0].repeat.allDay;

      backgroundColorstring | undefined

      Sets a background color for the event. The background color should be in HEX format.

      Default value

      false

      Get the backgroundColor property. 

       const scheduler = document.querySelector('smart-scheduler');
       let backgroundColor = scheduler.events[0].repeat.backgroundColor;

      colorstring | undefined

      Sets a color for the event. The color should be in HEX format.

      Default value

      false

      Get the color property. 

       const scheduler = document.querySelector('smart-scheduler');
       let color = scheduler.events[0].repeat.color;

      notifications{interval: number, type?: string, time: number[], message?: string | undefined, iconType?: string}[]

      Event notifications.

      Properties

      interval
      type
      time
      message
      iconType

      intervalnumber

      The number of days/weeks when the notification should appear before the event starts.

      Default value

      0

      Get the interval property. 

       const scheduler = document.querySelector('smart-scheduler');
       let interval = scheduler.events[0].repeat.notifications[0].interval;

      type"days" | "weeks"

      The type of the interval for the notification.

      Default value

      "days"

      Get the type property. 

       const scheduler = document.querySelector('smart-scheduler');
       let type = scheduler.events[0].repeat.notifications[0].type;

      timearray

      An array that represents the time when the notification should appear before the event starts. The array should have the following format: [hours: number, minutes:number]

      Get the time property. 

       const scheduler = document.querySelector('smart-scheduler');
       let time = scheduler.events[0].repeat.notifications[0].time;

      messagestring | undefined

      The message that will appear inside the notificaiton. If no message is set, then the label of the event is displayed.

      Default value

      ""

      Get the message property. 

       const scheduler = document.querySelector('smart-scheduler');
       let message = scheduler.events[0].repeat.notifications[0].message;

      iconTypestring | undefined

      Determines the type of icon that will be displayed inside the notification. By default the iconType is 'info'.

      Default value

      ""

      Get the iconType property. 

       const scheduler = document.querySelector('smart-scheduler');
       let iconType = scheduler.events[0].repeat.notifications[0].iconType;

      Get the notifications property. 

       const scheduler = document.querySelector('smart-scheduler');
       let notifications = scheduler.events[0].repeat.notifications;

      firstDayOfWeeknumber

      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.

      Default value

      0

      Example

      Set the firstDayOfWeek property. 

       <smart-scheduler first-day-of-week='1'></smart-scheduler>

      Set the firstDayOfWeek property by using the HTML Element's instance. 

       const scheduler = document.querySelector('smart-scheduler');
       scheduler.firstDayOfWeek = 2;

      Get the firstDayOfWeek property. 

       const scheduler = document.querySelector('smart-scheduler');
       let firstDayOfWeek = scheduler.firstDayOfWeek;

      footerTemplateany

      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.

      Example

      Set the footerTemplate property. 

       <smart-scheduler footer-template='function (footerContainer) { footerContainer.innerHTML = 'Custom Footer Content' }'></smart-scheduler>

      Set the footerTemplate property by using the HTML Element's instance. 

       const scheduler = document.querySelector('smart-scheduler');
       scheduler.footerTemplate = footerTemplateId;

      Get the footerTemplate property. 

       const scheduler = document.querySelector('smart-scheduler');
       let footerTemplate = scheduler.footerTemplate;

      groupByDateboolean

      Indicates whether events should be organized and displayed based on their associated dates, grouping all events that occur on the same date together.

      Default value

      false

      Example

      Set the groupByDate property. 

       <smart-scheduler group-by-date></smart-scheduler>

      Set the groupByDate property by using the HTML Element's instance. 

       const scheduler = document.querySelector('smart-scheduler');
       scheduler.groupByDate = false;

      Get the groupByDate property. 

       const scheduler = document.querySelector('smart-scheduler');
       let groupByDate = scheduler.groupByDate;

      groupOrientation"horizontal" | "vertical"

      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.

      Default value

      "horizontal"
      Try a demo showcasing the groupOrientation property.

      Example

      Set the groupOrientation property. 

       <smart-scheduler group-orientation='vertical'></smart-scheduler>

      Set the groupOrientation property by using the HTML Element's instance. 

       const scheduler = document.querySelector('smart-scheduler');
       scheduler.groupOrientation = 'horizontal';

      Get the groupOrientation property. 

       const scheduler = document.querySelector('smart-scheduler');
       let groupOrientation = scheduler.groupOrientation;

      groupTemplateany

      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 '<template>' 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 '<template>' 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.

      Example

      Set the groupTemplate property. 

       <smart-scheduler group-template='function (cellContent, cellObj) { cellContent.innerHTML = cellObj.label }'></smart-scheduler>

      Set the groupTemplate property by using the HTML Element's instance. 

       const scheduler = document.querySelector('smart-scheduler');
       scheduler.groupTemplate = groupCellTemplateId;

      Get the groupTemplate property. 

       const scheduler = document.querySelector('smart-scheduler');
       let groupTemplate = scheduler.groupTemplate;

      groupsarray

      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.

      Try a demo showcasing the groups property.

      Example

      Set the groups property. 

       <smart-scheduler groups='priorityId'></smart-scheduler>

      Set the groups property by using the HTML Element's instance. 

       const scheduler = document.querySelector('smart-scheduler');
       scheduler.groups = priorityId, heroId, movieId;

      Get the groups property. 

       const scheduler = document.querySelector('smart-scheduler');
       let groups = scheduler.groups;

      hourEndnumber

      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.

      Default value

      23

      Example

      Set the hourEnd property. 

       <smart-scheduler hour-end='18'></smart-scheduler>

      Set the hourEnd property by using the HTML Element's instance. 

       const scheduler = document.querySelector('smart-scheduler');
       scheduler.hourEnd = 20;

      Get the hourEnd property. 

       const scheduler = document.querySelector('smart-scheduler');
       let hourEnd = scheduler.hourEnd;

      hourStartnumber

      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.

      Default value

      0

      Example

      Set the hourStart property. 

       <smart-scheduler hour-start='6'></smart-scheduler>

      Set the hourStart property by using the HTML Element's instance. 

       const scheduler = document.querySelector('smart-scheduler');
       scheduler.hourStart = 12;

      Get the hourStart property. 

       const scheduler = document.querySelector('smart-scheduler');
       let hourStart = scheduler.hourStart;

      hourFormat"2-digit" | "numeric"

      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).

      Default value

      "numeric"

      Example

      Set the hourFormat property. 

       <smart-scheduler hour-format='2-digit'></smart-scheduler>

      Set the hourFormat property by using the HTML Element's instance. 

       const scheduler = document.querySelector('smart-scheduler');
       scheduler.hourFormat = 'numeric';

      Get the hourFormat property. 

       const scheduler = document.querySelector('smart-scheduler');
       let hourFormat = scheduler.hourFormat;

      headerTemplateany

      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.

      Example

      Set the headerTemplate property. 

       <smart-scheduler header-template='function (headerContainer) { headerContainer.innerHTML = 'Custom Header Content' }'></smart-scheduler>

      Set the headerTemplate property by using the HTML Element's instance. 

       const scheduler = document.querySelector('smart-scheduler');
       scheduler.headerTemplate = headerTemplateId;

      Get the headerTemplate property. 

       const scheduler = document.querySelector('smart-scheduler');
       let headerTemplate = scheduler.headerTemplate;

      headerDatePosition"far" | "near"

      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.

      Default value

      "near"
      Try a demo showcasing the headerDatePosition property.

      Example

      Set the headerDatePosition property. 

       <smart-scheduler header-date-position='far'></smart-scheduler>

      Set the headerDatePosition property by using the HTML Element's instance. 

       const scheduler = document.querySelector('smart-scheduler');
       scheduler.headerDatePosition = 'near';

      Get the headerDatePosition property. 

       const scheduler = document.querySelector('smart-scheduler');
       let headerDatePosition = scheduler.headerDatePosition;

      headerNavigationStyle"flat" | "raised"

      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.

      Allowed Values

      • "flat" - The navigation controls appear as one with the header
      • "raised" - The navigation controls appear as raised above the header.

      Default value

      "flat"
      Try a demo showcasing the headerNavigationStyle property.

      Example

      Set the headerNavigationStyle property. 

       <smart-scheduler header-navigation-style='raised'></smart-scheduler>

      Set the headerNavigationStyle property by using the HTML Element's instance. 

       const scheduler = document.querySelector('smart-scheduler');
       scheduler.headerNavigationStyle = 'flat';

      Get the headerNavigationStyle property. 

       const scheduler = document.querySelector('smart-scheduler');
       let headerNavigationStyle = scheduler.headerNavigationStyle;

      headerViewPosition"far" | "near"

      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.

      Default value

      "far"
      Try a demo showcasing the headerViewPosition property.

      Example

      Set the headerViewPosition property. 

       <smart-scheduler header-view-position='near'></smart-scheduler>

      Set the headerViewPosition property by using the HTML Element's instance. 

       const scheduler = document.querySelector('smart-scheduler');
       scheduler.headerViewPosition = 'far';

      Get the headerViewPosition property. 

       const scheduler = document.querySelector('smart-scheduler');
       let headerViewPosition = scheduler.headerViewPosition;

      hideAllDayboolean

      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.

      Default value

      false
      Try a demo showcasing the hideAllDay property.

      Example

      Set the hideAllDay property. 

       <smart-scheduler hide-all-day></smart-scheduler>

      Set the hideAllDay property by using the HTML Element's instance. 

       const scheduler = document.querySelector('smart-scheduler');
       scheduler.hideAllDay = false;

      Get the hideAllDay property. 

       const scheduler = document.querySelector('smart-scheduler');
       let hideAllDay = scheduler.hideAllDay;

      hideNonworkingWeekdaysboolean

      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.

      Default value

      false
      Try a demo showcasing the hideNonworkingWeekdays property.

      Example

      Set the hideNonworkingWeekdays property. 

       <smart-scheduler hide-nonworking-weekdays></smart-scheduler>

      Set the hideNonworkingWeekdays property by using the HTML Element's instance. 

       const scheduler = document.querySelector('smart-scheduler');
       scheduler.hideNonworkingWeekdays = false;

      Get the hideNonworkingWeekdays property. 

       const scheduler = document.querySelector('smart-scheduler');
       let hideNonworkingWeekdays = scheduler.hideNonworkingWeekdays;

      hideOtherMonthDaysboolean

      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.

      Default value

      false

      Example

      Set the hideOtherMonthDays property. 

       <smart-scheduler hide-other-month-days></smart-scheduler>

      Set the hideOtherMonthDays property by using the HTML Element's instance. 

       const scheduler = document.querySelector('smart-scheduler');
       scheduler.hideOtherMonthDays = false;

      Get the hideOtherMonthDays property. 

       const scheduler = document.querySelector('smart-scheduler');
       let hideOtherMonthDays = scheduler.hideOtherMonthDays;

      hideTodayButtonboolean

      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.

      Default value

      false
      Try a demo showcasing the hideTodayButton property.

      Example

      Set the hideTodayButton property. 

       <smart-scheduler hide-today-button></smart-scheduler>

      Set the hideTodayButton property by using the HTML Element's instance. 

       const scheduler = document.querySelector('smart-scheduler');
       scheduler.hideTodayButton = false;

      Get the hideTodayButton property. 

       const scheduler = document.querySelector('smart-scheduler');
       let hideTodayButton = scheduler.hideTodayButton;

      hideViewMenuCheckableItemsboolean

      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.

      Default value

      false
      Try a demo showcasing the hideViewMenuCheckableItems property.

      Example

      Set the hideViewMenuCheckableItems property. 

       <smart-scheduler hide-view-menu-checkable-items></smart-scheduler>

      Set the hideViewMenuCheckableItems property by using the HTML Element's instance. 

       const scheduler = document.querySelector('smart-scheduler');
       scheduler.hideViewMenuCheckableItems = false;

      Get the hideViewMenuCheckableItems property. 

       const scheduler = document.querySelector('smart-scheduler');
       let hideViewMenuCheckableItems = scheduler.hideViewMenuCheckableItems;

      hideWeekendboolean

      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.

      Default value

      false
      Try a demo showcasing the hideWeekend property.

      Example

      Set the hideWeekend property. 

       <smart-scheduler hide-weekend></smart-scheduler>

      Set the hideWeekend property by using the HTML Element's instance. 

       const scheduler = document.querySelector('smart-scheduler');
       scheduler.hideWeekend = false;

      Get the hideWeekend property. 

       const scheduler = document.querySelector('smart-scheduler');
       let hideWeekend = scheduler.hideWeekend;

      legendLocation"footer" | "header"

      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.

      Allowed Values

      • "footer" - The legend in re-located to the footer section of the Scheduler.
      • "header" - The legend is re-located to the header section of the Scheduler.

      Default value

      "footer"
      Try a demo showcasing the legendLocation property.

      Example

      Set the legendLocation property. 

       <smart-scheduler legend-location='header'></smart-scheduler>

      Set the legendLocation property by using the HTML Element's instance. 

       const scheduler = document.querySelector('smart-scheduler');
       scheduler.legendLocation = 'footer';

      Get the legendLocation property. 

       const scheduler = document.querySelector('smart-scheduler');
       let legendLocation = scheduler.legendLocation;

      legendPosition"near" | "far"

      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.

      Allowed Values

      • "near" - The legend's position is changed to near.
      • "far" - The legend's position is changed to far.

      Default value

      "near"
      Try a demo showcasing the legendPosition property.

      Example

      Set the legendPosition property. 

       <smart-scheduler legend-position='far'></smart-scheduler>

      Set the legendPosition property by using the HTML Element's instance. 

       const scheduler = document.querySelector('smart-scheduler');
       scheduler.legendPosition = 'near';

      Get the legendPosition property. 

       const scheduler = document.querySelector('smart-scheduler');
       let legendPosition = scheduler.legendPosition;

      legendLayout"" | "auto" | "menu"

      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.

      Allowed Values

      • "auto" - The legend's layout is changed dynamically as the scheduler's width grows or shrink. Depending on the width, the legend items will be displayed as a horizontal stack or a menu.
      • "menu" - The legend's layout is changed to menu. It will display all legend items in a dropdown popup list.

      Default value

      "auto"

      Example

      Set the legendLayout property. 

       <smart-scheduler legend-layout='auto'></smart-scheduler>

      Set the legendLayout property by using the HTML Element's instance. 

       const scheduler = document.querySelector('smart-scheduler');
       scheduler.legendLayout = 'menu';

      Get the legendLayout property. 

       const scheduler = document.querySelector('smart-scheduler');
       let legendLayout = scheduler.legendLayout;

      legendLayoutMenuBreakpointnumber

      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.

      Default value

      10

      Example

      Set the legendLayoutMenuBreakpoint property. 

       <smart-scheduler legend-layout-menu-breakpoint='10'></smart-scheduler>

      Set the legendLayoutMenuBreakpoint property by using the HTML Element's instance. 

       const scheduler = document.querySelector('smart-scheduler');
       scheduler.legendLayoutMenuBreakpoint = 15;

      Get the legendLayoutMenuBreakpoint property. 

       const scheduler = document.querySelector('smart-scheduler');
       let legendLayoutMenuBreakpoint = scheduler.legendLayoutMenuBreakpoint;

      mouseWheelStepnumber

      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.

      Default value

      50

      Example

      Set the mouseWheelStep property. 

       <smart-scheduler mouse-wheel-step='60'></smart-scheduler>

      Set the mouseWheelStep property by using the HTML Element's instance. 

       const scheduler = document.querySelector('smart-scheduler');
       scheduler.mouseWheelStep = 120;

      Get the mouseWheelStep property. 

       const scheduler = document.querySelector('smart-scheduler');
       let mouseWheelStep = scheduler.mouseWheelStep;

      horizontalScrollBarVisibility"auto" | "disabled" | "hidden" | "visible"

      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.

      Default value

      "auto"

      Example

      Set the horizontalScrollBarVisibility property. 

       <smart-scheduler horizontal-scroll-bar-visibility='disabled'></smart-scheduler>

      Set the horizontalScrollBarVisibility property by using the HTML Element's instance. 

       const scheduler = document.querySelector('smart-scheduler');
       scheduler.horizontalScrollBarVisibility = 'hidden';

      Get the horizontalScrollBarVisibility property. 

       const scheduler = document.querySelector('smart-scheduler');
       let horizontalScrollBarVisibility = scheduler.horizontalScrollBarVisibility;

      unlockKeystring

      Sets or retrieves the 'unlockKey', a unique value required to unlock and access the product’s full features or functionality.

      Default value

      ""

      Example

      Set the unlockKey property. 

       <smart-scheduler unlock-key=''></smart-scheduler>

      Set the unlockKey property by using the HTML Element's instance. 

       const scheduler = document.querySelector('smart-scheduler');
       scheduler.unlockKey = '1111-2222-3333-4444-5555';

      Get the unlockKey property. 

       const scheduler = document.querySelector('smart-scheduler');
       let unlockKey = scheduler.unlockKey;

      localestring

      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.

      Default value

      "en"
      Try a demo showcasing the locale property.

      Example

      Set the locale property. 

       <smart-scheduler locale='de'></smart-scheduler>

      Set the locale property by using the HTML Element's instance. 

       const scheduler = document.querySelector('smart-scheduler');
       scheduler.locale = 'en';

      Get the locale property. 

       const scheduler = document.querySelector('smart-scheduler');
       let locale = scheduler.locale;

      maxstring | date

      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.

      Default value

      2100-1-1

      Example

      Set the max property. 

       <smart-scheduler max='new Date(2030, 1, 1)'></smart-scheduler>

      Set the max property by using the HTML Element's instance. 

       const scheduler = document.querySelector('smart-scheduler');
       scheduler.max = 2025-12-31;

      Get the max property. 

       const scheduler = document.querySelector('smart-scheduler');
       let max = scheduler.max;

      maxEventsPerCellnumber | null

      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.

      Example

      Set the maxEventsPerCell property. 

       <smart-scheduler max-events-per-cell='2'></smart-scheduler>

      Set the maxEventsPerCell property by using the HTML Element's instance. 

       const scheduler = document.querySelector('smart-scheduler');
       scheduler.maxEventsPerCell = null;

      Get the maxEventsPerCell property. 

       const scheduler = document.querySelector('smart-scheduler');
       let maxEventsPerCell = scheduler.maxEventsPerCell;

      minstring | date

      Specifies the earliest date that can be displayed or selected in the Scheduler. This property restricts navigation and date selection to dates on or after the defined minimum view date.

      Default value

      1900-1-1

      Example

      Set the min property. 

       <smart-scheduler min='2000-1-1'></smart-scheduler>

      Set the min property by using the HTML Element's instance. 

       const scheduler = document.querySelector('smart-scheduler');
       scheduler.min = 2005-12-31;

      Get the min property. 

       const scheduler = document.querySelector('smart-scheduler');
       let min = scheduler.min;

      messagesobject

      Defines or retrieves an object containing all the text strings displayed by the element, allowing for easy localization of the user interface. This property should be used together with the locale property to dynamically present content in the user's preferred language or region. Each key in the object represents a specific string that can be customized or translated as needed."

      Default value




      Try a demo showcasing the messages property.

      Example

      Set the messages property. 

       <smart-scheduler messages='{"de":{"invalidValue":"{{elementType}}: Ungültiger {{property}} Wert. {{property}} sollte vom Typ {{typeOne}} oder {{typeTwo}} sein.","invalidTimeZone":"{{elementType}}: Ungültiger Zeitzonenwert. TimeZone sollte die ID eines zulässigen TimeZone-Werts sein.","incorrectArgument":"{{elementType}}: Falsches Argument {{argumentName}} in Methode {{methodName}}.","noId":"smartScheduler benötigt eine ID, um einen Status zu speichern / laden / löschen.","agenda":"Agenda","agendaPlaceholder":"Keine Ereignisse zum Anzeigen","day":"Tag","week":"Woche","month":"Monat","allDay":"Den ganzen Tag","timelineDay":"Zeitleiste Тag","timelineWeek":"Zeitleiste Woche","timelineMonth":"Zeitleiste Monat","newEvent":"Neues Veranstaltung","ok":"Ok","cancel":"Stornieren","delete":"Löschen","label":"Etikette","dateStart":"Anfangsdatum","dateEnd":"Endtermin","repeat":"Wiederholen","description":"Beschreibung","repeatFreq":"Wiederholen","repeatInterval":"Wiederhole jeden","repeatOn":"Wiederholen Sie Ein","repeatEnd":"Ende Wiederholung","repeatEndOption":"noch nie","repeatEndOnOption":"Auf","repeatEndAfterOption":"Nach","repeatEndAfter":"Auftreten","hidden":"Versteckt","hourly":"Stündlich","daily":"Täglich","weekly":"Wöchentlich","monthly":"Monatlich","yearly":"Jährlich","repeatConfirm":"Möchten Sie nur das aktuelle Ereignis oder die gesamte Serie bearbeiten? ?","repeatConfirmLabel":"Wiederholtes Ereignis bearbeiten","createEvent":"Erstellen Sie ein neues Ereignis","editEvent":"Ereignis bearbeiten","editSeries":"Serie bearbeiten","eventException":"Ereignisausnahme","collector":"Mehr","repeatEveryHour":"Std","repeatEveryDay":"Tage","repeatEveryWeek":"Wochen","repeatEveryMonth":"Monate","repeatEveryYear":"Jahre","backgroundColor":"Hintergrundfarbe","status":"Status","resources":"Ressourcen","selectPlaceholder":"Wählen...","none":"Keiner","free":"Frei","busy":"Beschäftigt","tentative":"Vorsichtig","outOfOffice":"Ausserhaus","exceptions":"Ausnahmen","resetExceptions":"Ausnahmen zurücksetzen","notifications":"Benachrichtigung","notificationMessage":"beginnt am","today":"Heute","agendaShortcut":"A","dayShortcut":"D","weekShortcut":"W","monthShortcut":"M","timelineDayShortcut":"T+D","timelineWeekShortcut":"T+W","timelineMonthShortcut":"T+M","showWeekends":"Showwochenenden","beforeAt":"vorher um","days":"Tage","weeks":"Wochen","placeholder":"Benachrichtigung hinzufügen","now":"Jetzt","dateTabLabel":"DATUM","timeTabLabel":"ZEIT","hours":"Std","minutes":"Protokoll","am":"nm","pm":"vm"}}'></smart-scheduler>

      Set the messages property by using the HTML Element's instance. 

       const scheduler = document.querySelector('smart-scheduler');
       scheduler.messages = {"en":{"propertyUnknownName":"Invalid property name: '{{name}}'!","propertyUnknownType":"'{{name}}' property is with undefined 'type' member!","propertyInvalidValue":"Invalid '{{name}}' property value! Actual value: '{{actualValue}}', Expected value: '{{value}}'!","propertyInvalidValueType":"Invalid '{{name}}' property value type! Actual type: '{{actualType}}', Expected type: '{{type}}'!","methodInvalidValueType":"Invalid '{{name}}' method argument value type! Actual type: '{{actualType}}', Expected type: '{{type}}' for argument with index: '{{argumentIndex}}'!","methodInvalidArgumentsCount":"Invalid '{{name}}' method arguments count! Actual arguments count: '{{actualArgumentsCount}}', Expected at least: '{{argumentsCount}}' argument(s)!","methodInvalidReturnType":"Invalid '{{name}}' method return type! Actual type: '{{actualType}}', Expected type: '{{type}}'!","elementNotInDOM":"Element does not exist in DOM! Please, add the element to the DOM, before invoking a method.","moduleUndefined":"Module is undefined.","missingReference":"{{elementType}}: Missing reference to '{{files}}'.","htmlTemplateNotSuported":"{{elementType}}: Web Browser doesn't support HTMLTemplate elements.","invalidTemplate":"{{elementType}}: '{{property}}' property accepts a string that must match the id of an HTMLTemplate element from the DOM.","invalidValue":"{{elementType}}: Invalid {{property}} value. {{property}} should be of type {{typeOne}} or {{typeTwo}}.","invalidTimeZone":"{{elementType}}: Invalid timeZone value. TimeZone should be the id of an allowed timeZone value.","incorrectArgument":"{{elementType}}: Incorrect argument {{argumentName}} in method {{methodName}}.","noId":"smartScheduler requires an id in order to save/load/clear a state.","agenda":"Agenda","agendaPlaceholder":"No events to display","day":"Day","week":"Week","month":"Month","allDay":"All Day","timelineDay":"Timeline Day","timelineWeek":"Timeline Week","timelineMonth":"Timeline Month","newEvent":"New Event","ok":"Ok","cancel":"Cancel","delete":"Delete","label":"Label","dateStart":"Start Date","dateEnd":"End Date","repeat":"Repeat","description":"Description","repeatFreq":"Repeat","repeatInterval":"Repeat Every","repeatOn":"Repeat On","repeatEnd":"End Repeat","repeatEndOption":"Never","repeatEndOnOption":"On","repeatEndAfterOption":"After","repeatEndAfter":"occurrence(s)","hidden":"Hidden","hourly":"Hourly","daily":"Daily","weekly":"Weekly","monthly":"Monthly","yearly":"Yearly","repeatConfirm":"Do you want to edit only the current event or the whole series ?","repeatConfirmLabel":"Edit Repeating Event","createEvent":"Create a new Event","editEvent":"Edit event","editSeries":"Edit series","eventException":"Event Exception","collector":"more","repeatEveryHour":"hours","repeatEveryDay":"days","repeatEveryWeek":"weeks","repeatEveryMonth":"months","repeatEveryYear":"years","backgroundColor":"Background Color","status":"Status","resources":"Resources","selectPlaceholder":"Select...","none":"None","free":"Free","busy":"Busy","tentative":"Tentative","outOfOffice":"Out of Office","exceptions":"Exceptions","resetExceptions":"Reset Exceptions","notifications":"Notification(s)","notificationMessage":"is starting on","today":"Today","agendaShortcut":"A","dayShortcut":"D","weekShortcut":"W","monthShortcut":"M","timelineDayShortcut":"T+D","timelineWeekShortcut":"T+W","timelineMonthShortcut":"T+M","showWeekends":"Show weekends","beforeAt":"before at","days":"days","weeks":"weeks","placeholder":"Add notification","now":"Now","dateTabLabel":"DATE","timeTabLabel":"TIME","hours":"Hours","minutes":"Minutes","am":"am","pm":"pm","loadingIndicatorPlaceholder":"Loading..."}};

      Get the messages property. 

       const scheduler = document.querySelector('smart-scheduler');
       let messages = scheduler.messages;

      minuteFormat"2-digit" | "numeric"

      Specifies how minutes are displayed and formatted within the Scheduler component. This setting controls the appearance of minute values in time slots, event times, and related areas, ensuring consistency in how minutes are presented to users (e.g., "5", "05", or "5 min").

      Default value

      "2-digit"

      Example

      Set the minuteFormat property. 

       <smart-scheduler minute-format='numeric'></smart-scheduler>

      Set the minuteFormat property by using the HTML Element's instance. 

       const scheduler = document.querySelector('smart-scheduler');
       scheduler.minuteFormat = '2-digit';

      Get the minuteFormat property. 

       const scheduler = document.querySelector('smart-scheduler');
       let minuteFormat = scheduler.minuteFormat;

      monthFormat"2-digit" | "numeric" | "long" | "short" | "narrow"

      Specifies the format in which month names are displayed within the Scheduler component. This setting controls whether full month names (e.g., "January"), abbreviated names (e.g., "Jan"), or custom formats appear in the Scheduler's interface wherever month names are shown.

      Default value

      "long"

      Example

      Set the monthFormat property. 

       <smart-scheduler month-format='numeric'></smart-scheduler>

      Set the monthFormat property by using the HTML Element's instance. 

       const scheduler = document.querySelector('smart-scheduler');
       scheduler.monthFormat = 'short';

      Get the monthFormat property. 

       const scheduler = document.querySelector('smart-scheduler');
       let monthFormat = scheduler.monthFormat;

      nonworkingDaysnumber[] | array[]

      Specifies which days of the week are considered nonworking, using an array of numbers from 0 to 6, where 0 represents the first day of the week (e.g., Sunday or Monday, depending on your locale), and 6 represents the last day. These designated nonworking days will be visually distinguished within the Timeline component by applying a different background color. The specific color used for nonworking days is controlled by a configurable CSS variable, allowing for easy theming and customization.

      Try a demo showcasing the nonworkingDays property.

      Example

      Set the nonworkingDays property. 

       <smart-scheduler nonworking-days='[0,1]'></smart-scheduler>

      Set the nonworkingDays property by using the HTML Element's instance. 

       const scheduler = document.querySelector('smart-scheduler');
       scheduler.nonworkingDays = [0,5,6];

      Get the nonworkingDays property. 

       const scheduler = document.querySelector('smart-scheduler');
       let nonworkingDays = scheduler.nonworkingDays;

      nonworkingHoursnumber[] | array[]

      Specifies the nonworking hours within a day. The nonworking hours are defined using an array, where each element represents either a single hour (as a number) or a range of hours (as an array containing the start and end hours, separated by a comma). For example, '[0, [13, 15], 23]' marks hour 0, hours 13 through 15 (inclusive), and hour 23 as nonworking. On the timeline, cells corresponding to these nonworking hours are visually distinguished by a different color from the working hours.

      Example

      Set the nonworkingHours property. 

       <smart-scheduler nonworking-hours='[[0, 6]]'></smart-scheduler>

      Set the nonworkingHours property by using the HTML Element's instance. 

       const scheduler = document.querySelector('smart-scheduler');
       scheduler.nonworkingHours = [22, 23, [0, 6]];

      Get the nonworkingHours property. 

       const scheduler = document.querySelector('smart-scheduler');
       let nonworkingHours = scheduler.nonworkingHours;

      notificationIntervalnumber

      Specifies the time interval, in seconds, at which the element will automatically check for new notifications. This value controls how frequently the element polls for updates, with shorter intervals resulting in more frequent checks.

      Default value

      60

      Example

      Set the notificationInterval property. 

       <smart-scheduler notification-interval='120'></smart-scheduler>

      Set the notificationInterval property by using the HTML Element's instance. 

       const scheduler = document.querySelector('smart-scheduler');
       scheduler.notificationInterval = 10;

      Get the notificationInterval property. 

       const scheduler = document.querySelector('smart-scheduler');
       let notificationInterval = scheduler.notificationInterval;

      resizeHandlesVisibility"auto" | "hidden" | "visible"

      Controls whether the resize handles are visible to the user, allowing them to resize the element. When enabled, resize handles will appear on the edges or corners of the element; when disabled, resize handles will be hidden and resizing will not be possible via the user interface.

      Allowed Values

      • "auto" - The resize handles are visible only on hover.
      • "hidden" - The resize handles are hidden.
      • "visible" - The resize handles are always visible.

      Default value

      "auto"

      Example

      Set the resizeHandlesVisibility property. 

       <smart-scheduler resize-handles-visibility='hidden'></smart-scheduler>

      Set the resizeHandlesVisibility property by using the HTML Element's instance. 

       const scheduler = document.querySelector('smart-scheduler');
       scheduler.resizeHandlesVisibility = 'auto';

      Get the resizeHandlesVisibility property. 

       const scheduler = document.querySelector('smart-scheduler');
       let resizeHandlesVisibility = scheduler.resizeHandlesVisibility;

      resizeIntervalnumber

      ''
      Specifies how frequently the element's content should update (refresh) when the element is resized. By default, the content refreshes immediately on every resize event. Adjusting this property enables throttling, which limits the rate of refreshes and can improve performance by reducing unnecessary updates during rapid or continuous resizing. You can set it to a time interval (in milliseconds) to control the minimum delay between refresh operations.

      Default value

      0

      Example

      Set the resizeInterval property. 

       <smart-scheduler resize-interval='20'></smart-scheduler>

      Set the resizeInterval property by using the HTML Element's instance. 

       const scheduler = document.querySelector('smart-scheduler');
       scheduler.resizeInterval = 200;

      Get the resizeInterval property. 

       const scheduler = document.querySelector('smart-scheduler');
       let resizeInterval = scheduler.resizeInterval;

      resources{label: string, value: string, dataSource: object[], sortBy?: string, sortFunction?: Function, sortOrder?: string }[]

      An array containing resource objects that can be allocated or linked to specific events. Each resource represents an entity—such as a person, room, or asset—that can be associated with one or more events for scheduling or organizational purposes.

      Properties

      label
      value
      dataSource
      sortBy
      sortFunction
      sortOrder

      labelstring

      Resource label.

      Default value

      ""

      Get the label property. 

       const scheduler = document.querySelector('smart-scheduler');
       let label = scheduler.resources[0].label;

      valuestring

      Resource unique value.

      Default value

      ""

      Get the value property. 

       const scheduler = document.querySelector('smart-scheduler');
       let value = scheduler.resources[0].value;

      dataSourceobject[]

      An array that defined the data of the resources. The data represents objects that should contain the following proeprties:

      • lable - the label for the resource item.
      • id - the unique id for the resource item.
      • backgroundColor - the background color for the events that have the resource item assigned.
      • color - the color for the events that have the resource item assigned.

      Default value

      Get the dataSource property. 

       const scheduler = document.querySelector('smart-scheduler');
       let dataSource = scheduler.resources[0].dataSource;

      sortBystring

      Determines the property name to sort the dataSource by.

      Default value

      "null"

      Get the sortBy property. 

       const scheduler = document.querySelector('smart-scheduler');
       let sortBy = scheduler.resources[0].sortBy;

      sortFunctionfunction

      Determines the custom sorting function that will be used to sort the resource dataSource. The sortFunction is used when sortOrder is set to custom.

      Get the sortFunction property. 

       const scheduler = document.querySelector('smart-scheduler');
       let sortFunction = scheduler.resources[0].sortFunction;

      sortOrder"asc" | "desc" | "custom"

      Determines the sorting order. When set to custom, a custom sorting function has to be defined for the sortFunction property. The asc stands for 'ascending' while desc means 'descending' sorting order.

      Allowed Values

      • "asc" - Sorts the resource dataSource in ascending order.
      • "desc" - Sorts the resource dataSource in descending order.
      • "custom" - Sorts the resource dataSource in custom order determines by a custom sorting function defined via the sortFunction property.

      Default value

      "asc"

      Get the sortOrder property. 

       const scheduler = document.querySelector('smart-scheduler');
       let sortOrder = scheduler.resources[0].sortOrder;
      Try a demo showcasing the resources property.

      Example

      Set the resources property. 

       <smart-scheduler resources='[{"label":"Priority","value":"priorityId","dataSource":"priorityData"},{"label":"Employee","value":"employeeId","dataSource":"employees"}]'></smart-scheduler>

      Set the resources property by using the HTML Element's instance. 

       const scheduler = document.querySelector('smart-scheduler');
       scheduler.resources =  { label: 'City Tour', dateStart: '2022-07-09' dateEnd: '2022-07-10' }, { label: 'Kayaking', dateStart: '2022-07-05' dateEnd: '2022-07-06' };

      Get the resources property. 

       const scheduler = document.querySelector('smart-scheduler');
       let resources = scheduler.resources;

      restrictedDatesarray

      Specifies an array of restricted dates on which events are not permitted. Any events that overlap with these restricted dates, or that start or end on these dates, will be excluded from display and unavailable for scheduling.

      Try a demo showcasing the restrictedDates property.

      Example

      Set the restrictedDates property. 

       <smart-scheduler restricted-dates='[new Date(2022, 12, 25), new Date(2023, 1, 1)]'></smart-scheduler>

      Set the restrictedDates property by using the HTML Element's instance. 

       const scheduler = document.querySelector('smart-scheduler');
       scheduler.restrictedDates = [new Date(2023, 5, 26)];

      Get the restrictedDates property. 

       const scheduler = document.querySelector('smart-scheduler');
       let restrictedDates = scheduler.restrictedDates;

      restrictedHoursarray

      Specifies an array of restricted hours during which events are not permitted to be scheduled. Any event that overlaps with, starts, or ends within these restricted hours will be excluded from display. This ensures that no events are shown during the designated unavailable time periods.

      Try a demo showcasing the restrictedHours property.

      Example

      Set the restrictedHours property. 

       <smart-scheduler restricted-hours='[[0, 6]]'></smart-scheduler>

      Set the restrictedHours property by using the HTML Element's instance. 

       const scheduler = document.querySelector('smart-scheduler');
       scheduler.restrictedHours = [21,22,23];

      Get the restrictedHours property. 

       const scheduler = document.querySelector('smart-scheduler');
       let restrictedHours = scheduler.restrictedHours;

      restrictedarray

      Defines an array of time restrictions specifying when events are not permitted. Each element in the array is an object that must include two fields: date and hours.

      - The 'date' field indicates the specific day on which the restriction applies (e.g., 'new Date(2023, 10, 1)').
      - The 'hours' field specifies one or more restricted hours within that day. This is an array where each item represents a restricted period, defined either as:
      - a single hour (e.g., '12', which restricts only the hour 12:00–13:00), or
      - an array of two numbers specifying a start and end hour in 24-hour format (e.g., '[0, 6]' restricts from 00:00 up to, but not including, 06:00; '[20, 23]' restricts from 20:00 up to, but not including, 23:00).

      Events that have any portion overlapping these restricted hours—either beginning, ending, or entirely contained within them—will be excluded and not displayed.

      'Example:'
      '''js
      {
      date: new Date(2023, 10, 1),
      hours: [[0, 6], 12, [20, 23]]
      }
      '''
      This restricts events from being scheduled on November 1, 2023, between midnight and 6 AM, exactly at 12 PM–1 PM, and from 8 PM to 11 PM.

      Use this array to block out specific times when events should not be allowed, similar to the 'restrictedHours' property, but with restrictions tied to specific calendar dates.

      Try a demo showcasing the restricted property.

      rightToLeftboolean

      Sets or retrieves a value that determines whether the element’s alignment is configured for right-to-left (RTL) text direction, which is commonly used in locales with RTL languages such as Arabic or Hebrew. This property ensures proper text and layout orientation to support languages that are read from right to left.

      Default value

      false
      Try a demo showcasing the rightToLeft property.

      Example

      Set the rightToLeft property. 

       <smart-scheduler right-to-left></smart-scheduler>

      Set the rightToLeft property by using the HTML Element's instance. 

       const scheduler = document.querySelector('smart-scheduler');
       scheduler.rightToLeft = false;

      Get the rightToLeft property. 

       const scheduler = document.querySelector('smart-scheduler');
       let rightToLeft = scheduler.rightToLeft;

      scrollButtonsPosition"both" | "far" | "near"

      Specifies the placement of the date navigation buttons within the element’s header, determining where buttons such as “Previous”, “Next”, or “Today” appear in relation to other header content.

      Allowed Values

      • "both" - The scroll buttons are positioned on both sides.
      • "far" - The scroll buttons are positioned on the far side.
      • "near" - The scroll buttons are positioned on the near side.

      Default value

      "near"
      Try a demo showcasing the scrollButtonsPosition property.

      Example

      Set the scrollButtonsPosition property. 

       <smart-scheduler scroll-buttons-position='far'></smart-scheduler>

      Set the scrollButtonsPosition property by using the HTML Element's instance. 

       const scheduler = document.querySelector('smart-scheduler');
       scheduler.scrollButtonsPosition = 'near';

      Get the scrollButtonsPosition property. 

       const scheduler = document.querySelector('smart-scheduler');
       let scrollButtonsPosition = scheduler.scrollButtonsPosition;

      shadeUntilCurrentTimeboolean

      Controls the activation of the current time shader. When enabled, all cells representing times that have already passed will be visually shaded to distinguish them from upcoming times. Disabling this option will remove the shading, displaying all time cells with the default appearance.

      Default value

      false
      Try a demo showcasing the shadeUntilCurrentTime property.

      Example

      Set the shadeUntilCurrentTime property. 

       <smart-scheduler shade-until-current-time></smart-scheduler>

      Set the shadeUntilCurrentTime property by using the HTML Element's instance. 

       const scheduler = document.querySelector('smart-scheduler');
       scheduler.shadeUntilCurrentTime = false;

      Get the shadeUntilCurrentTime property. 

       const scheduler = document.querySelector('smart-scheduler');
       let shadeUntilCurrentTime = scheduler.shadeUntilCurrentTime;

      showLegendboolean

      Controls the visibility of the resource legend in the Scheduler component. When enabled, the resource legend appears in the footer section and displays a list of resources along with their respective items. If the filterable option is set to true, users can click on any resource item within the legend to filter the Scheduler view by that specific resource, making it easier to focus on relevant events or data.

      Default value

      false
      Try a demo showcasing the showLegend property.

      Example

      Set the showLegend property. 

       <smart-scheduler show-legend></smart-scheduler>

      Set the showLegend property by using the HTML Element's instance. 

       const scheduler = document.querySelector('smart-scheduler');
       scheduler.showLegend = false;

      Get the showLegend property. 

       const scheduler = document.querySelector('smart-scheduler');
       let showLegend = scheduler.showLegend;

      sortBystring

      Specifies the property name within each resource data item (defined by resource.dataSource) that will be used to sort the resources. This determines the field by which the resource data is ordered when displayed or processed.

      Default value

      "null"

      Example

      Set the sortBy property. 

       <smart-scheduler sort-by='label'></smart-scheduler>

      Set the sortBy property by using the HTML Element's instance. 

       const scheduler = document.querySelector('smart-scheduler');
       scheduler.sortBy = 'id';

      Get the sortBy property. 

       const scheduler = document.querySelector('smart-scheduler');
       let sortBy = scheduler.sortBy;

      sortFunctionfunction

      Enables you to specify a custom sorting function that determines the order in which resource data is sorted. The provided sortFunction will be invoked whenever the sortOrder property is set to custom. This allows for full control over the sorting logic, accommodating complex or specialized sorting requirements beyond the default sort options.

      Example

      Set the sortFunction property. 

       <smart-scheduler sort-function='(a, b) => a.id - b.id'></smart-scheduler>

      Set the sortFunction property by using the HTML Element's instance. 

       const scheduler = document.querySelector('smart-scheduler');
       scheduler.sortFunction = (a, b) => a.label.length - b.label.length;

      Get the sortFunction property. 

       const scheduler = document.querySelector('smart-scheduler');
       let sortFunction = scheduler.sortFunction;

      sortOrder"asc" | "desc" | "custom"

      Specifies how the resource data items should be sorted. Acceptable values are asc for ascending order and desc for descending order. If set to custom, you must also provide a custom sorting function using the sortFunction property. The chosen sorting order determines how the data items are organized and displayed.

      Allowed Values

      • "asc" - Sorts the resource dataSource in ascending order.
      • "desc" - Sorts the resource dataSource in descending order.
      • "custom" - Sorts the resource dataSource in custom order determines by a custom sorting function defined via the sortFunction property.

      Default value

      "asc"

      Example

      Set the sortOrder property. 

       <smart-scheduler sort-order='asc'></smart-scheduler>

      Set the sortOrder property by using the HTML Element's instance. 

       const scheduler = document.querySelector('smart-scheduler');
       scheduler.sortOrder = 'desc';

      Get the sortOrder property. 

       const scheduler = document.querySelector('smart-scheduler');
       let sortOrder = scheduler.sortOrder;

      spinButtonsDelaynumber

      Specifies the interval, in milliseconds, between repeated activation events when a repeat button within the element's header is held down. This applies to buttons such as the date navigation controls and the view scrolling buttons, allowing users to quickly navigate by holding the button instead of clicking multiple times.

      Default value

      80

      Example

      Set the spinButtonsDelay property. 

       <smart-scheduler spin-buttons-delay='50'></smart-scheduler>

      Set the spinButtonsDelay property by using the HTML Element's instance. 

       const scheduler = document.querySelector('smart-scheduler');
       scheduler.spinButtonsDelay = 100;

      Get the spinButtonsDelay property. 

       const scheduler = document.querySelector('smart-scheduler');
       let spinButtonsDelay = scheduler.spinButtonsDelay;

      spinButtonsInitialDelaynumber

      Specifies the initial delay (in milliseconds) before the repeat buttons located in the header of the element begin to trigger repeated actions when held down. These repeat buttons include the date navigation buttons (e.g., previous/next date) and the view scroll buttons. Setting this value controls how long a user must hold down the button before the action starts repeating automatically.

      Default value

      0

      Example

      Set the spinButtonsInitialDelay property. 

       <smart-scheduler spin-buttons-initial-delay='50'></smart-scheduler>

      Set the spinButtonsInitialDelay property by using the HTML Element's instance. 

       const scheduler = document.querySelector('smart-scheduler');
       scheduler.spinButtonsInitialDelay = 0;

      Get the spinButtonsInitialDelay property. 

       const scheduler = document.querySelector('smart-scheduler');
       let spinButtonsInitialDelay = scheduler.spinButtonsInitialDelay;

      statuses{label: string, value: string}[]

      Specifies the list of status options that users can select from when managing events through the window editor interface. These statuses help categorize or track the current state of each event.

      Default value

      null

      Properties

      label
      value

      labelstring

      Status label.

      Default value

      ""

      Get the label property. 

       const scheduler = document.querySelector('smart-scheduler');
       let label = scheduler.statuses[0].label;

      valuestring

      Status unique value.

      Default value

      ""

      Get the value property. 

       const scheduler = document.querySelector('smart-scheduler');
       let value = scheduler.statuses[0].value;

      Example

      Set the statuses property. 

       <smart-scheduler statuses='[{"label":"None"},{"label":"Free","value":"free"},{"label":"Tentative","value":"tentative"}]'></smart-scheduler>

      Set the statuses property by using the HTML Element's instance. 

       const scheduler = document.querySelector('smart-scheduler');
       scheduler.statuses = [{"label":"Busy","value":"busy"},{"label":"Out of Office","value":"outOfOffice"}];

      Get the statuses property. 

       const scheduler = document.querySelector('smart-scheduler');
       let statuses = scheduler.statuses;

      themestring

      Gets or sets the visual theme of the element, allowing you to customize its appearance (such as color scheme, style, or look) according to the specified theme value.

      Default value

      ""

      Example

      Set the theme property. 

       <smart-scheduler theme='material'></smart-scheduler>

      Set the theme property by using the HTML Element's instance. 

       const scheduler = document.querySelector('smart-scheduler');
       scheduler.theme = 'material-purple';

      Get the theme property. 

       const scheduler = document.querySelector('smart-scheduler');
       let theme = scheduler.theme;

      timelineHeaderFormatFunctionfunction | null

      A formatting function specifically for the Timeline Header. This function enables customization of the text displayed as date labels within the header cells, allowing you to modify the appearance or format of dates (e.g., changing date formats, adding prefixes/suffixes, or translating labels) according to your requirements.

      Try a demo showcasing the timelineHeaderFormatFunction property.

      Example

      Set the timelineHeaderFormatFunction property. 

       <smart-scheduler timeline-header-format-function='null'></smart-scheduler>

      Set the timelineHeaderFormatFunction property by using the HTML Element's instance. 

       const scheduler = document.querySelector('smart-scheduler');
       scheduler.timelineHeaderFormatFunction = function(date, orientation, isHeaderDetails, dateValue) { if (isHeaderDetails) { return 'Custom Header Function' } else { return date.toDateString() }  };

      Get the timelineHeaderFormatFunction property. 

       const scheduler = document.querySelector('smart-scheduler');
       let timelineHeaderFormatFunction = scheduler.timelineHeaderFormatFunction;

      timelineDayScale"hour" | "halfHour" | "quarterHour" | "tenMinutes" | "fiveMinutes"

      Specifies the time interval (such as days, weeks, or months) used to label and organize each cell within the timeline, controlling how dates are displayed and grouped.

      Allowed Values

      • "hour" - The timeline cells have a duration of one hour.
      • "halfHour" - The timeline cells have a duration of one half an hour.
      • "quarterHour" - The timeline cells have a duration of one quarter hour.
      • "tenMinutes" - The timeline cells have a duration of ten minutes.
      • "fiveMinutes" - The timeline cells have a duration of five minutes.

      Default value

      "hour"
      Try a demo showcasing the timelineDayScale property.

      Example

      Set the timelineDayScale property. 

       <smart-scheduler timeline-day-scale='quarterHour'></smart-scheduler>

      Set the timelineDayScale property by using the HTML Element's instance. 

       const scheduler = document.querySelector('smart-scheduler');
       scheduler.timelineDayScale = 'halfHour';

      Get the timelineDayScale property. 

       const scheduler = document.querySelector('smart-scheduler');
       let timelineDayScale = scheduler.timelineDayScale;

      timeRulerTicksboolean

      Controls the visibility of tick marks displayed next to the time labels in the vertical header of the element. These tick marks appear in the time header section, which is shown only in 'day' and 'week' views. Enabling this option will show tick marks for each time cell; disabling it will hide them.

      Default value

      false
      Try a demo showcasing the timeRulerTicks property.

      Example

      Set the timeRulerTicks property. 

       <smart-scheduler time-ruler-ticks></smart-scheduler>

      Set the timeRulerTicks property by using the HTML Element's instance. 

       const scheduler = document.querySelector('smart-scheduler');
       scheduler.timeRulerTicks = false;

      Get the timeRulerTicks property. 

       const scheduler = document.querySelector('smart-scheduler');
       let timeRulerTicks = scheduler.timeRulerTicks;

      timeZone"Local" | "Dateline Standard Time" | "UTC-11" | "Hawaiteratoran Standard Time" | "Alaskan Standard Time" | "Pacific Standard Time (Mexico)" | "Pacific Standard Time" | "US Mountain Standard Time" | "Mountain Standard Time (Mexico)" | "Mountain Standard Time" | "Central Standard Time" | "Central America Standard Time" | "Canada Central Standard Time" | "Central Standard Time (Mexico)" | "SA Pacific Standard Time" | "Eastern Standard Time" | "US Eastern Standard Time" | "Venezuela Standard Time" | "Atlantic Standard Time" | "Paraguay Standard Time" | "Central Brazilian Standard Time" | "Pacific SA Standard Time" | "SA Western Standard Time" | "Newfoundland Standard Time" | "SA Eastern Standard Time" | "Argentina Standard Time" | "E. South America Standard Time" | "Bahia Standard Time" | "Montevideo Standard Time" | "Greenland Standard Time" | "UTC-02" | "Mid-Atlantic Standard Time" | "Azores Standard Time" | "Cape Verde Standard Time" | "Morocco Standard Time" | "UTC" | "GMT Standard Time" | "Greenwich Standard Time" | "Central European Standard Time" | "Namibia Standard Time" | "W. Central Africa Standard Time" | "W. Europe Standard Time" | "Central Europe Standard Time" | "Romance Standard Time" | "FLE Standard Time" | "South Africa Standard Time" | "Turkey Standard Time" | "GTB Standard Time" | "Libya Standard Time" | "E. Europe Standard Time" | "Jordan Standard Time" | "Middle East Standard Time" | "Egypt Standard Time" | "Syria Standard Time" | "Israel Standard Time" | "Arab Standard Time" | "E. Africa Standard Time" | "Arabic Standard Time" | "Kaliningrad Standard Time" | "Iran Standard Time" | "Mauritius Standard Time" | "Georgian Standard Time" | "Caucasus Standard Time" | "Arabian Standard Time" | "Azerbaijan Standard Time" | "Russian Standard Time" | "Afghanistan Standard Time" | "Pakistan Standard Time" | "West Asia Standard Time" | "India Standard Time" | "Sri Lanka Standard Time" | "Nepal Standard Time" | "Central Asia Standard Time" | "Bangladesh Standard Time" | "Ekaterinburg Standard Time" | "Myanmar Standard Time" | "SE Asia Standard Time" | "N. Central Asia Standard Time" | "Ulaanbaatar Standard Time" | "China Standard Time" | "Singapore Standard Time" | "North Asia Standard Time" | "Taipei Standard Time" | "W. Australia Standard Time" | "Korea Standard Time" | "North Asia East Standard Time" | "Tokyo Standard Time" | "AUS Central Standard Time" | "Cen. Australia Standard Time" | "West Pacific Standard Time" | "Tasmania Standard Time" | "E. Australia Standard Time" | "AUS Eastern Standard Time" | "Yakutsk Standard Time" | "Vladivostok Standard Time" | "Central Pacific Standard Time" | "Magadan Standard Time" | "Kamchatka Standard Time" | "Fiji Standard Time" | "New Zealand Standard Time" | "UTC+12" | "Tonga Standard Time" | "Samoa Standard Time"

      Specifies the time zone to be applied to the element. If this property is not set, the element defaults to using the user's local time zone.

      Default value

      "Local"

      Example

      Set the timeZone property. 

       <smart-scheduler time-zone='"Local"'></smart-scheduler>

      Set the timeZone property by using the HTML Element's instance. 

       const scheduler = document.querySelector('smart-scheduler');
       scheduler.timeZone = '"UTC"';

      Get the timeZone property. 

       const scheduler = document.querySelector('smart-scheduler');
       let timeZone = scheduler.timeZone;

      timeZonesarray

      Enables the display of multiple time zones simultaneously, in addition to the default time zone specified by the timeZone property. This property accepts an array of string values, where each value corresponds to a valid time zone identifier. The complete list of supported time zone identifiers can be found in the timeZone property documentation. By default, only the user's local time zone is shown if no additional time zones are provided.

      Try a demo showcasing the timeZones property.

      Example

      Set the timeZones property. 

       <smart-scheduler time-zones='[{"id":"Central America Standard Time","label":"(UTC-06:00) Central America"},"UTC"]'></smart-scheduler>

      Set the timeZones property by using the HTML Element's instance. 

       const scheduler = document.querySelector('smart-scheduler');
       scheduler.timeZones = ["UTC"];

      Get the timeZones property. 

       const scheduler = document.querySelector('smart-scheduler');
       let timeZones = scheduler.timeZones;

      tooltipDelaynumber

      Specifies the delay, in milliseconds, before the tooltip or menu is displayed after a triggering event (such as hover or click). This allows you to control how quickly the tooltip or menu appears, enhancing user experience and preventing accidental activations.

      Default value

      0

      Example

      Set the tooltipDelay property. 

       <smart-scheduler tooltip-delay='50'></smart-scheduler>

      Set the tooltipDelay property by using the HTML Element's instance. 

       const scheduler = document.querySelector('smart-scheduler');
       scheduler.tooltipDelay = 100;

      Get the tooltipDelay property. 

       const scheduler = document.querySelector('smart-scheduler');
       let tooltipDelay = scheduler.tooltipDelay;

      tooltipOffsetnumber[]

      Specifies the distance (in pixels or other units) by which the tooltip or menu is shifted from its default position relative to its target element. Adjusting this value changes how far the tooltip or menu appears from the target, allowing for precise placement and improved visual alignment.

      Example

      Set the tooltipOffset property. 

       <smart-scheduler tooltip-offset='[10,10]'></smart-scheduler>

      Set the tooltipOffset property by using the HTML Element's instance. 

       const scheduler = document.querySelector('smart-scheduler');
       scheduler.tooltipOffset = [0,0];

      Get the tooltipOffset property. 

       const scheduler = document.querySelector('smart-scheduler');
       let tooltipOffset = scheduler.tooltipOffset;

      verticalScrollBarVisibility"auto" | "disabled" | "hidden" | "visible"

      Specifies whether the vertical scrollbar is visible, allowing users to scroll content vertically when necessary. Set to true to display the vertical scrollbar, or false to hide it.

      Allowed Values

      • "auto" - Automatically determined.
      • "disabled" - Visible but disabled.
      • "hidden" - Always Hidden.
      • "visible" - Always visible.

      Default value

      "auto"

      Example

      Set the verticalScrollBarVisibility property. 

       <smart-scheduler vertical-scroll-bar-visibility='hidden'></smart-scheduler>

      Set the verticalScrollBarVisibility property by using the HTML Element's instance. 

       const scheduler = document.querySelector('smart-scheduler');
       scheduler.verticalScrollBarVisibility = 'visible';

      Get the verticalScrollBarVisibility property. 

       const scheduler = document.querySelector('smart-scheduler');
       let verticalScrollBarVisibility = scheduler.verticalScrollBarVisibility;

      viewstring

      Specifies the currently active view. This property accepts one of the view values defined in the views property. When using custom views, ensure each custom view includes a unique value property; this value will be assigned to the current view and used to control which view is displayed.

      Default value

      "day"

      Example

      Set the view property. 

       <smart-scheduler view='day'></smart-scheduler>

      Set the view property by using the HTML Element's instance. 

       const scheduler = document.querySelector('smart-scheduler');
       scheduler.view = 'customDay';

      Get the view property. 

       const scheduler = document.querySelector('smart-scheduler');
       let view = scheduler.view;

      viewType"day" | "week" | "month" | "agenda" | "timelineDay" | "timelineWeek" | "timelineMonth"

      Specifies the current view type of the Scheduler component (e.g., 'day', 'week', 'month'). When defining custom views, ensure that each view includes a valid type property matching one of the supported view types. Note: This property is managed internally by the Scheduler and should not be set manually in your configuration.

      Allowed Values

      • "day" - Display a single day by hours.
      • "week" - Displays a week by days and hours.
      • "month" - Displays a month by dates.
      • "agenda" - Displays the week agenda.
      • "timelineDay" - Displays a day as a horizontal timeline.
      • "timelineWeek" - Displays a week as a horizontal timeline.
      • "timelineMonth" - Displays a month as a horizontal timeline.

      Default value

      "day"

      views"day" | "week" | "month" | "agenda" | "timelineDay" | "timelineWeek" | "timelineMonth"

      Specifies the range of dates displayed in the timeline view. This property accepts an array containing either predefined view strings or custom view objects.

      'Usage:'
      - If you set an element to a string, use one of the following built-in view identifiers:
      ''day'', ''week'', ''month'', ''agenda'', ''timelineDay'', ''timelineWeek'', ''timelineMonth''.
      - To define a custom view, provide an object with the properties detailed below.

      'Custom View Object Properties:'
      - 'label' _(string, required)_: The display name shown for the view in the UI.
      - 'value' _(string, required)_: A unique identifier for the view.
      - 'type' _(string, required)_: The underlying view type. Must match one of the default view types listed above.
      - 'hideWeekend' _(boolean, optional)_: If set to 'true', weekends will be hidden for this specific view.
      - 'hideNonworkingWeekdays' _(boolean, optional)_: If set to 'true', non-working weekdays (e.g., Monday–Friday) will be hidden for this view.
      - 'shortcutKey' _(string, optional)_: Assigns a custom keyboard shortcut for switching to this view.
      - 'hideHours' _(boolean, optional; timelineWeek only)_: If set to 'true', the timelineWeek view will display only day cells, hiding hour cells.

      By configuring this property, you have full control over which timeline views are available to users and how each view behaves. Use strings for standard views and objects when you need to define custom labels, behaviors, or shortcuts.

      Allowed Values

      • "day" - Display a single day by hours.
      • "week" - Displays a week by days and hours.
      • "month" - Displays a month by dates.
      • "agenda" - Displays the week agenda.
      • "timelineDay" - Displays a day as a horizontal timeline.
      • "timelineWeek" - Displays a week as a horizontal timeline.
      • "timelineMonth" - Displays a month as a horizontal timeline.

      Try a demo showcasing the views property.

      Example

      Set the views property. 

       <smart-scheduler views='["day", "timelineWeek"]'></smart-scheduler>

      Set the views property by using the HTML Element's instance. 

       const scheduler = document.querySelector('smart-scheduler');
       scheduler.views = {"label":"Work Month","value":"workMonth","type":"month","hideNonworkingWeekdays":true};

      Get the views property. 

       const scheduler = document.querySelector('smart-scheduler');
       let views = scheduler.views;

      viewSelectorType"auto" | "tabs" | "menu"

      Specifies the type of view selector that appears in the element's header, which controls how content is displayed (e.g., as a list, grid, or table view). This setting determines the layout options available to the user within the header section of the component.

      Allowed Values

      • "auto" - Automatically determines when to use menu or tabs. If the view labels overflow a menu is used else tabs are used.
      • "tabs" - Tabs are always used. If the view labels overflow, scroll buttons wiill appear to provide navigation.
      • "menu" - A drop down menu is used to select the current view.

      Default value

      "menu"

      Example

      Set the viewSelectorType property. 

       <smart-scheduler view-selector-type='tabs'></smart-scheduler>

      Set the viewSelectorType property by using the HTML Element's instance. 

       const scheduler = document.querySelector('smart-scheduler');
       scheduler.viewSelectorType = 'auto';

      Get the viewSelectorType property. 

       const scheduler = document.querySelector('smart-scheduler');
       let viewSelectorType = scheduler.viewSelectorType;

      viewStartDay"firstDayOfWeek" | "dateCurrent"

      Configures the rule used to determine the start date in Week and TimelineWeek views. By default, these views start from the current date, factoring in the value specified by the 'firstDayOfWeek' property. If the 'startDateRule' property is set to 'dateCurrent', the Week and TimelineWeek views will instead start from the date provided in the 'dateCurrent' property, overriding the default behavior.

      Allowed Values

      • "firstDayOfWeek" - Determines the week and timlineWeek start days to depend on the first day of week property.
      • "dateCurrent" - Determines the week and timlineWeek start days to depend on the dateCurrent property.

      Default value

      "firstDayOfWeek"

      Example

      Set the viewStartDay property. 

       <smart-scheduler view-start-day='firstDayOfWeek'></smart-scheduler>

      Set the viewStartDay property by using the HTML Element's instance. 

       const scheduler = document.querySelector('smart-scheduler');
       scheduler.viewStartDay = 'dateCurrent';

      Get the viewStartDay property. 

       const scheduler = document.querySelector('smart-scheduler');
       let viewStartDay = scheduler.viewStartDay;

      weekdayFormat"short" | "long" | "narrow"

      Specifies how the names of the weekdays are displayed within the element (e.g., full names, short names, or initials).

      Default value

      "short"

      Example

      Set the weekdayFormat property. 

       <smart-scheduler weekday-format='long'></smart-scheduler>

      Set the weekdayFormat property by using the HTML Element's instance. 

       const scheduler = document.querySelector('smart-scheduler');
       scheduler.weekdayFormat = 'narrow';

      Get the weekdayFormat property. 

       const scheduler = document.querySelector('smart-scheduler');
       let weekdayFormat = scheduler.weekdayFormat;

      yearFormat"2-digit" | "numeric"

      Specifies the date format used to display years within the timeline header. This setting controls how year values are rendered (e.g., "YYYY", "YY", or "yyyy") when the header represents years, ensuring consistent and readable date presentation.

      Default value

      "numeric"

      Example

      Set the yearFormat property. 

       <smart-scheduler year-format='2-digit'></smart-scheduler>

      Set the yearFormat property by using the HTML Element's instance. 

       const scheduler = document.querySelector('smart-scheduler');
       scheduler.yearFormat = 'numeric';

      Get the yearFormat property. 

       const scheduler = document.querySelector('smart-scheduler');
       let yearFormat = scheduler.yearFormat;

      unfocusableboolean

      Determines whether the element can receive keyboard focus. When set, the element becomes focusable and can be targeted using keyboard navigation (e.g., with the Tab key). When retrieved, it returns the current focusable state of the element.

      Default value

      false

      Example

      Set the unfocusable property. 

       <smart-scheduler unfocusable></smart-scheduler>

      Set the unfocusable property by using the HTML Element's instance. 

       const scheduler = document.querySelector('smart-scheduler');
       scheduler.unfocusable = false;

      Get the unfocusable property. 

       const scheduler = document.querySelector('smart-scheduler');
       let unfocusable = scheduler.unfocusable;

      undoRedoStepsnumber

      Specifies the maximum number of redo and undo actions that the Scheduler will retain in its history. Once this limit is reached, the oldest actions are automatically discarded to make room for new ones, ensuring that only the most recent actions up to the defined maximum are available for undo or redo operations.

      Default value

      100

      Example

      Set the undoRedoSteps property. 

       <smart-scheduler undo-redo-steps='50'></smart-scheduler>

      Set the undoRedoSteps property by using the HTML Element's instance. 

       const scheduler = document.querySelector('smart-scheduler');
       scheduler.undoRedoSteps = 200;

      Get the undoRedoSteps property. 

       const scheduler = document.querySelector('smart-scheduler');
       let undoRedoSteps = scheduler.undoRedoSteps;

      windowCustomizationFunctionfunction | null

      This function allows you to fully customize the popup window that appears when editing events. It gives you complete control over the appearance, content, and behavior of the popup based on the event context. The function is called with the following arguments:



      • target – The popup window element that is about to be displayed. You can modify or replace this element to change how the popup looks and functions.


      • type – A string indicating the purpose of the popup window. The default value is an empty string (''), which signifies the standard event editing window. If the value is 'confirm', the popup serves as a confirmation dialog, typically shown when interacting with repeating events (e.g., asking whether to edit a single occurrence or the series).


      • eventObj – The event data object associated with the event being edited or confirmed. This object contains all relevant details about the event, allowing you to display or edit its properties within the popup.



      Use this function to precisely tailor the event editing or confirmation experience in your application’s UI.

      Try a demo showcasing the windowCustomizationFunction property.

      Example

      Set the windowCustomizationFunction property. 

       <smart-scheduler window-customization-function='function (target, type, event) { if (!type) { target.headerPosition = 'bottom'; } }'></smart-scheduler>

      Set the windowCustomizationFunction property by using the HTML Element's instance. 

       const scheduler = document.querySelector('smart-scheduler');
       scheduler.windowCustomizationFunction = null;

      Get the windowCustomizationFunction property. 

       const scheduler = document.querySelector('smart-scheduler');
       let windowCustomizationFunction = scheduler.windowCustomizationFunction;

      Events

      beginUpdateCustomEvent

      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.

      • Bubbles Yes
      • Cancelable No
      • Interface CustomEvent
      • Event handler property onBeginUpdate

      Arguments

      evCustomEvent

      Methods

      isDefaultPrevented

      Returns true if the event was prevented by any of its subscribers.

      Returns

      boolean true if the default action was prevented. Otherwise, returns false.

      preventDefault

      The preventDefault() method prevents the default action for a specified event. In this way, the source component suppresses the built-in behavior that follows the event.

      stopPropagation

      The stopPropagation() method of the Event interface prevents further propagation of the current event in the capturing and bubbling phases.

      Example

      Set up the event handler of beginUpdate event. 

      const scheduler = document.querySelector('smart-scheduler');
scheduler.addEventListener('beginUpdate', function (event) {
	// event handling code goes here.
})

      endUpdateCustomEvent

      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.

      • Bubbles Yes
      • Cancelable No
      • Interface CustomEvent
      • Event handler property onEndUpdate

      Arguments

      evCustomEvent

      Methods

      isDefaultPrevented

      Returns true if the event was prevented by any of its subscribers.

      Returns

      boolean true if the default action was prevented. Otherwise, returns false.

      preventDefault

      The preventDefault() method prevents the default action for a specified event. In this way, the source component suppresses the built-in behavior that follows the event.

      stopPropagation

      The stopPropagation() method of the Event interface prevents further propagation of the current event in the capturing and bubbling phases.

      Example

      Set up the event handler of endUpdate event. 

      const scheduler = document.querySelector('smart-scheduler');
scheduler.addEventListener('endUpdate', function (event) {
	// event handling code goes here.
})

      changeCustomEvent

      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.

      • Bubbles Yes
      • Cancelable No
      • Interface CustomEvent
      • Event handler property onChange

      Arguments

      evCustomEvent
      ev.detailObject
      ev.detail.value - The new selected Date.
      ev.detail.oldValue - The previously selected Date.

      Methods

      isDefaultPrevented

      Returns true if the event was prevented by any of its subscribers.

      Returns

      boolean true if the default action was prevented. Otherwise, returns false.

      preventDefault

      The preventDefault() method prevents the default action for a specified event. In this way, the source component suppresses the built-in behavior that follows the event.

      stopPropagation

      The stopPropagation() method of the Event interface prevents further propagation of the current event in the capturing and bubbling phases.

      Example

      Set up the event handler of change event. 

      const scheduler = document.querySelector('smart-scheduler');
scheduler.addEventListener('change', function (event) {
    const detail = event.detail,
        value = detail.value,
        oldValue = detail.oldValue;

	// event handling code goes here.
})

      itemChangeCustomEvent

      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.

      • Bubbles Yes
      • Cancelable No
      • Interface CustomEvent
      • Event handler property onItemChange

      Arguments

      evCustomEvent
      ev.detailObject
      ev.detail.item - An object that represents the actual item with it's attributes.
      ev.detail.type - The type of change that is being done to the item.

      Methods

      isDefaultPrevented

      Returns true if the event was prevented by any of its subscribers.

      Returns

      boolean true if the default action was prevented. Otherwise, returns false.

      preventDefault

      The preventDefault() method prevents the default action for a specified event. In this way, the source component suppresses the built-in behavior that follows the event.

      stopPropagation

      The stopPropagation() method of the Event interface prevents further propagation of the current event in the capturing and bubbling phases.

      Example

      Set up the event handler of itemChange event. 

      const scheduler = document.querySelector('smart-scheduler');
scheduler.addEventListener('itemChange', function (event) {
    const detail = event.detail,
        item = detail.item,
        type = detail.type;

	// event handling code goes here.
})

      itemChangingCustomEvent

      "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."

      • Bubbles Yes
      • Cancelable Yes
      • Interface CustomEvent
      • Event handler property onItemChanging

      Arguments

      evCustomEvent
      ev.detailObject
      ev.detail.item - An object that represents the actual item with it's attributes.
      ev.detail.type - The type of change that is going to be made to the item (e.g. 'inserting', 'removing', 'updating', 'exceptionInserting', 'exceptionUpdating', 'exceptionRemoving').

      Methods

      isDefaultPrevented

      Returns true if the event was prevented by any of its subscribers.

      Returns

      boolean true if the default action was prevented. Otherwise, returns false.

      preventDefault

      The preventDefault() method prevents the default action for a specified event. In this way, the source component suppresses the built-in behavior that follows the event.

      stopPropagation

      The stopPropagation() method of the Event interface prevents further propagation of the current event in the capturing and bubbling phases.

      Example

      Set up the event handler of itemChanging event. 

      const scheduler = document.querySelector('smart-scheduler');
scheduler.addEventListener('itemChanging', function (event) {
    const detail = event.detail,
        item = detail.item,
        type = detail.type;

	// event handling code goes here.
})

      itemClickCustomEvent

      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.

      • Bubbles Yes
      • Cancelable No
      • Interface CustomEvent
      • Event handler property onItemClick

      Arguments

      evCustomEvent
      ev.detailObject
      ev.detail.item - The HTMLElement for the event.
      ev.detail.type - The type of item that is clicked. The possible values are:
      • event - when an event item is clicked.
      • context - when a context menu item is clicked.
      .
      ev.detail.itemObj - The event object.

      Methods

      isDefaultPrevented

      Returns true if the event was prevented by any of its subscribers.

      Returns

      boolean true if the default action was prevented. Otherwise, returns false.

      preventDefault

      The preventDefault() method prevents the default action for a specified event. In this way, the source component suppresses the built-in behavior that follows the event.

      stopPropagation

      The stopPropagation() method of the Event interface prevents further propagation of the current event in the capturing and bubbling phases.

      Example

      Set up the event handler of itemClick event. 

      const scheduler = document.querySelector('smart-scheduler');
scheduler.addEventListener('itemClick', function (event) {
    const detail = event.detail,
        item = detail.item,
        type = detail.type,
        itemObj = detail.itemObj;

	// event handling code goes here.
})

      itemInsertCustomEvent

      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.

      • Bubbles Yes
      • Cancelable No
      • Interface CustomEvent
      • Event handler property onItemInsert

      Arguments

      evCustomEvent
      ev.detailObject
      ev.detail.item - An object that represents the actual item with it's attributes.

      Methods

      isDefaultPrevented

      Returns true if the event was prevented by any of its subscribers.

      Returns

      boolean true if the default action was prevented. Otherwise, returns false.

      preventDefault

      The preventDefault() method prevents the default action for a specified event. In this way, the source component suppresses the built-in behavior that follows the event.

      stopPropagation

      The stopPropagation() method of the Event interface prevents further propagation of the current event in the capturing and bubbling phases.

      Example

      Set up the event handler of itemInsert event. 

      const scheduler = document.querySelector('smart-scheduler');
scheduler.addEventListener('itemInsert', function (event) {
    const detail = event.detail,
        item = detail.item;

	// event handling code goes here.
})

      itemRemoveCustomEvent

      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.

      • Bubbles Yes
      • Cancelable No
      • Interface CustomEvent
      • Event handler property onItemRemove

      Arguments

      evCustomEvent
      ev.detailObject
      ev.detail.item - An object that represents the actual item with it's attributes.

      Methods

      isDefaultPrevented

      Returns true if the event was prevented by any of its subscribers.

      Returns

      boolean true if the default action was prevented. Otherwise, returns false.

      preventDefault

      The preventDefault() method prevents the default action for a specified event. In this way, the source component suppresses the built-in behavior that follows the event.

      stopPropagation

      The stopPropagation() method of the Event interface prevents further propagation of the current event in the capturing and bubbling phases.

      Example

      Set up the event handler of itemRemove event. 

      const scheduler = document.querySelector('smart-scheduler');
scheduler.addEventListener('itemRemove', function (event) {
    const detail = event.detail,
        item = detail.item;

	// event handling code goes here.
})

      itemUpdateCustomEvent

      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.

      • Bubbles Yes
      • Cancelable No
      • Interface CustomEvent
      • Event handler property onItemUpdate

      Arguments

      evCustomEvent
      ev.detailObject
      ev.detail.type - The type of item that has been modified.
      ev.detail.item - An object that represents the actual item with it's attributes.

      Methods

      isDefaultPrevented

      Returns true if the event was prevented by any of its subscribers.

      Returns

      boolean true if the default action was prevented. Otherwise, returns false.

      preventDefault

      The preventDefault() method prevents the default action for a specified event. In this way, the source component suppresses the built-in behavior that follows the event.

      stopPropagation

      The stopPropagation() method of the Event interface prevents further propagation of the current event in the capturing and bubbling phases.

      Example

      Set up the event handler of itemUpdate event. 

      const scheduler = document.querySelector('smart-scheduler');
scheduler.addEventListener('itemUpdate', function (event) {
    const detail = event.detail,
        type = detail.type,
        item = detail.item;

	// event handling code goes here.
})

      viewChangeCustomEvent

      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.

      • Bubbles Yes
      • Cancelable No
      • Interface CustomEvent
      • Event handler property onViewChange

      Arguments

      evCustomEvent
      ev.detailObject
      ev.detail.oldValue - The value of the previously selected view.
      ev.detail.value - The value of the new selected view.

      Methods

      isDefaultPrevented

      Returns true if the event was prevented by any of its subscribers.

      Returns

      boolean true if the default action was prevented. Otherwise, returns false.

      preventDefault

      The preventDefault() method prevents the default action for a specified event. In this way, the source component suppresses the built-in behavior that follows the event.

      stopPropagation

      The stopPropagation() method of the Event interface prevents further propagation of the current event in the capturing and bubbling phases.

      Example

      Set up the event handler of viewChange event. 

      const scheduler = document.querySelector('smart-scheduler');
scheduler.addEventListener('viewChange', function (event) {
    const detail = event.detail,
        oldValue = detail.oldValue,
        value = detail.value;

	// event handling code goes here.
})

      viewChangingCustomEvent

      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.

      • Bubbles Yes
      • Cancelable Yes
      • Interface CustomEvent
      • Event handler property onViewChanging

      Arguments

      evCustomEvent
      ev.detailObject
      ev.detail.oldValue - The value of the previously selected view.
      ev.detail.value - The value of the new selected view.

      Methods

      isDefaultPrevented

      Returns true if the event was prevented by any of its subscribers.

      Returns

      boolean true if the default action was prevented. Otherwise, returns false.

      preventDefault

      The preventDefault() method prevents the default action for a specified event. In this way, the source component suppresses the built-in behavior that follows the event.

      stopPropagation

      The stopPropagation() method of the Event interface prevents further propagation of the current event in the capturing and bubbling phases.

      Example

      Set up the event handler of viewChanging event. 

      const scheduler = document.querySelector('smart-scheduler');
scheduler.addEventListener('viewChanging', function (event) {
    const detail = event.detail,
        oldValue = detail.oldValue,
        value = detail.value;

	// event handling code goes here.
})

      eventShortcutKeyCustomEvent

      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.

      • Bubbles Yes
      • Cancelable No
      • Interface CustomEvent
      • Event handler property onEventShortcutKey

      Arguments

      evCustomEvent
      ev.detailObject
      ev.detail.key - The shortcut key that was pressed.
      ev.detail.target - The event target (HTMLElement).
      ev.detail.eventObj - The scheduler Event object that affected by the keypress.

      Methods

      isDefaultPrevented

      Returns true if the event was prevented by any of its subscribers.

      Returns

      boolean true if the default action was prevented. Otherwise, returns false.

      preventDefault

      The preventDefault() method prevents the default action for a specified event. In this way, the source component suppresses the built-in behavior that follows the event.

      stopPropagation

      The stopPropagation() method of the Event interface prevents further propagation of the current event in the capturing and bubbling phases.

      Example

      Set up the event handler of eventShortcutKey event. 

      const scheduler = document.querySelector('smart-scheduler');
scheduler.addEventListener('eventShortcutKey', function (event) {
    const detail = event.detail,
        key = detail.key,
        target = detail.target,
        eventObj = detail.eventObj;

	// event handling code goes here.
})

      dateChangeCustomEvent

      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.

      • Bubbles Yes
      • Cancelable No
      • Interface CustomEvent
      • Event handler property onDateChange

      Arguments

      evCustomEvent
      ev.detailObject
      ev.detail.oldValue - The previous current date that was in view.
      ev.detail.value - The current date in view.

      Methods

      isDefaultPrevented

      Returns true if the event was prevented by any of its subscribers.

      Returns

      boolean true if the default action was prevented. Otherwise, returns false.

      preventDefault

      The preventDefault() method prevents the default action for a specified event. In this way, the source component suppresses the built-in behavior that follows the event.

      stopPropagation

      The stopPropagation() method of the Event interface prevents further propagation of the current event in the capturing and bubbling phases.

      Example

      Set up the event handler of dateChange event. 

      const scheduler = document.querySelector('smart-scheduler');
scheduler.addEventListener('dateChange', function (event) {
    const detail = event.detail,
        oldValue = detail.oldValue,
        value = detail.value;

	// event handling code goes here.
})

      dragStartCustomEvent

      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.

      • Bubbles Yes
      • Cancelable Yes
      • Interface CustomEvent
      • Event handler property onDragStart

      Arguments

      evCustomEvent
      ev.detailObject
      ev.detail.target - The HTMLElement that corresponds to the event that is going to be dragged.
      ev.detail.item - The scheduler Event object that is going to be dragged.
      ev.detail.itemDateRange - The start/end dates for the Scheduler Event.
      ev.detail.originalEvent - The original event object.

      Methods

      isDefaultPrevented

      Returns true if the event was prevented by any of its subscribers.

      Returns

      boolean true if the default action was prevented. Otherwise, returns false.

      preventDefault

      The preventDefault() method prevents the default action for a specified event. In this way, the source component suppresses the built-in behavior that follows the event.

      stopPropagation

      The stopPropagation() method of the Event interface prevents further propagation of the current event in the capturing and bubbling phases.

      Example

      Set up the event handler of dragStart event. 

      const scheduler = document.querySelector('smart-scheduler');
scheduler.addEventListener('dragStart', function (event) {
    const detail = event.detail,
        target = detail.target,
        item = detail.item,
        itemDateRange = detail.itemDateRange,
        originalEvent = detail.originalEvent;

	// event handling code goes here.
})

      dragEndCustomEvent

      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.

      • Bubbles Yes
      • Cancelable Yes
      • Interface CustomEvent
      • Event handler property onDragEnd

      Arguments

      evCustomEvent
      ev.detailObject
      ev.detail.target - The HTMLElement that corresponds to the event that is dragged.
      ev.detail.item - The scheduler Event object that is dragged.
      ev.detail.itemDateRange - The new start/end dates for the dragged Scheduler Event.
      ev.detail.originalEvent - The original event object.

      Methods

      isDefaultPrevented

      Returns true if the event was prevented by any of its subscribers.

      Returns

      boolean true if the default action was prevented. Otherwise, returns false.

      preventDefault

      The preventDefault() method prevents the default action for a specified event. In this way, the source component suppresses the built-in behavior that follows the event.

      stopPropagation

      The stopPropagation() method of the Event interface prevents further propagation of the current event in the capturing and bubbling phases.

      Example

      Set up the event handler of dragEnd event. 

      const scheduler = document.querySelector('smart-scheduler');
scheduler.addEventListener('dragEnd', function (event) {
    const detail = event.detail,
        target = detail.target,
        item = detail.item,
        itemDateRange = detail.itemDateRange,
        originalEvent = detail.originalEvent;

	// event handling code goes here.
})

      dropoverCellCustomEvent

      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.

      • Bubbles Yes
      • Cancelable No
      • Interface CustomEvent
      • Event handler property onDropoverCell

      Arguments

      evCustomEvent
      ev.detailObject
      ev.detail.target - The HTMLElement that corresponds to the event that is dragged.
      ev.detail.date - The cell's date under the pointer.
      ev.detail.allDay - Boolean value, which is true when the cell under the pointer is all day cell.

      Methods

      isDefaultPrevented

      Returns true if the event was prevented by any of its subscribers.

      Returns

      boolean true if the default action was prevented. Otherwise, returns false.

      preventDefault

      The preventDefault() method prevents the default action for a specified event. In this way, the source component suppresses the built-in behavior that follows the event.

      stopPropagation

      The stopPropagation() method of the Event interface prevents further propagation of the current event in the capturing and bubbling phases.

      Example

      Set up the event handler of dropoverCell event. 

      const scheduler = document.querySelector('smart-scheduler');
scheduler.addEventListener('dropoverCell', function (event) {
    const detail = event.detail,
        target = detail.target,
        date = detail.date,
        allDay = detail.allDay;

	// event handling code goes here.
})

      resizeStartCustomEvent

      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.

      • Bubbles Yes
      • Cancelable No
      • Interface CustomEvent
      • Event handler property onResizeStart

      Arguments

      evCustomEvent
      ev.detailObject
      ev.detail.target - The HTMLElement that corresponds to the event that is going to be resized.
      ev.detail.item - The scheduler Event object that is going to be resized.
      ev.detail.itemDateRange - The start/end dates for Scheduler Event that is going to be resized.
      ev.detail.originalEvent - The original event object.

      Methods

      isDefaultPrevented

      Returns true if the event was prevented by any of its subscribers.

      Returns

      boolean true if the default action was prevented. Otherwise, returns false.

      preventDefault

      The preventDefault() method prevents the default action for a specified event. In this way, the source component suppresses the built-in behavior that follows the event.

      stopPropagation

      The stopPropagation() method of the Event interface prevents further propagation of the current event in the capturing and bubbling phases.

      Example

      Set up the event handler of resizeStart event. 

      const scheduler = document.querySelector('smart-scheduler');
scheduler.addEventListener('resizeStart', function (event) {
    const detail = event.detail,
        target = detail.target,
        item = detail.item,
        itemDateRange = detail.itemDateRange,
        originalEvent = detail.originalEvent;

	// event handling code goes here.
})

      resizeEndCustomEvent

      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.

      • Bubbles Yes
      • Cancelable No
      • Interface CustomEvent
      • Event handler property onResizeEnd

      Arguments

      evCustomEvent
      ev.detailObject
      ev.detail.target - The HTMLElement that corresponds to the event that is resized.
      ev.detail.item - The scheduler Event object that is resized.
      ev.detail.itemDateRange - The new start/end dates for the resized Scheduler Event.
      ev.detail.originalEvent - The original event object.

      Methods

      isDefaultPrevented

      Returns true if the event was prevented by any of its subscribers.

      Returns

      boolean true if the default action was prevented. Otherwise, returns false.

      preventDefault

      The preventDefault() method prevents the default action for a specified event. In this way, the source component suppresses the built-in behavior that follows the event.

      stopPropagation

      The stopPropagation() method of the Event interface prevents further propagation of the current event in the capturing and bubbling phases.

      Example

      Set up the event handler of resizeEnd event. 

      const scheduler = document.querySelector('smart-scheduler');
scheduler.addEventListener('resizeEnd', function (event) {
    const detail = event.detail,
        target = detail.target,
        item = detail.item,
        itemDateRange = detail.itemDateRange,
        originalEvent = detail.originalEvent;

	// event handling code goes here.
})

      editDialogOpeningCustomEvent

      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.

      • Bubbles Yes
      • Cancelable Yes
      • Interface CustomEvent
      • Event handler property onEditDialogOpening

      Arguments

      evCustomEvent
      ev.detailObject
      ev.detail.target - The dialog window that is opening.
      ev.detail.item - The event object that is going to be edited.
      ev.detail.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.
      ev.detail.eventObj - The event object that is the target of the menu.

      Methods

      isDefaultPrevented

      Returns true if the event was prevented by any of its subscribers.

      Returns

      boolean true if the default action was prevented. Otherwise, returns false.

      preventDefault

      The preventDefault() method prevents the default action for a specified event. In this way, the source component suppresses the built-in behavior that follows the event.

      stopPropagation

      The stopPropagation() method of the Event interface prevents further propagation of the current event in the capturing and bubbling phases.

      Example

      Set up the event handler of editDialogOpening event. 

      const scheduler = document.querySelector('smart-scheduler');
scheduler.addEventListener('editDialogOpening', function (event) {
    const detail = event.detail,
        target = detail.target,
        item = detail.item,
        type = detail.type,
        eventObj = detail.eventObj;

	// event handling code goes here.
})

      editDialogOpenCustomEvent

      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.

      • Bubbles Yes
      • Cancelable No
      • Interface CustomEvent
      • Event handler property onEditDialogOpen

      Arguments

      evCustomEvent
      ev.detailObject
      ev.detail.target - The dialog window that is opened.
      ev.detail.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.
      ev.detail.item - The event object that is being edited.
      ev.detail.eventObj - The event object that is the target of the menu.

      Methods

      isDefaultPrevented

      Returns true if the event was prevented by any of its subscribers.

      Returns

      boolean true if the default action was prevented. Otherwise, returns false.

      preventDefault

      The preventDefault() method prevents the default action for a specified event. In this way, the source component suppresses the built-in behavior that follows the event.

      stopPropagation

      The stopPropagation() method of the Event interface prevents further propagation of the current event in the capturing and bubbling phases.

      Example

      Set up the event handler of editDialogOpen event. 

      const scheduler = document.querySelector('smart-scheduler');
scheduler.addEventListener('editDialogOpen', function (event) {
    const detail = event.detail,
        target = detail.target,
        editors = detail.editors,
        item = detail.item,
        eventObj = detail.eventObj;

	// event handling code goes here.
})

      editDialogCloseCustomEvent

      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.

      • Bubbles Yes
      • Cancelable No
      • Interface CustomEvent
      • Event handler property onEditDialogClose

      Arguments

      evCustomEvent
      ev.detailObject
      ev.detail.target - The dialog window that is closed.
      ev.detail.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.
      ev.detail.item - The event object that is being edited.
      ev.detail.eventObj - The event object that is the target of the menu.

      Methods

      isDefaultPrevented

      Returns true if the event was prevented by any of its subscribers.

      Returns

      boolean true if the default action was prevented. Otherwise, returns false.

      preventDefault

      The preventDefault() method prevents the default action for a specified event. In this way, the source component suppresses the built-in behavior that follows the event.

      stopPropagation

      The stopPropagation() method of the Event interface prevents further propagation of the current event in the capturing and bubbling phases.

      Example

      Set up the event handler of editDialogClose event. 

      const scheduler = document.querySelector('smart-scheduler');
scheduler.addEventListener('editDialogClose', function (event) {
    const detail = event.detail,
        target = detail.target,
        editors = detail.editors,
        item = detail.item,
        eventObj = detail.eventObj;

	// event handling code goes here.
})

      editDialogClosingCustomEvent

      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.

      • Bubbles Yes
      • Cancelable Yes
      • Interface CustomEvent
      • Event handler property onEditDialogClosing

      Arguments

      evCustomEvent
      ev.detailObject
      ev.detail.target - The dialog window that is closing.
      ev.detail.item - The event object that is edited.
      ev.detail.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.
      ev.detail.eventObj - The event object that is the target of the menu.

      Methods

      isDefaultPrevented

      Returns true if the event was prevented by any of its subscribers.

      Returns

      boolean true if the default action was prevented. Otherwise, returns false.

      preventDefault

      The preventDefault() method prevents the default action for a specified event. In this way, the source component suppresses the built-in behavior that follows the event.

      stopPropagation

      The stopPropagation() method of the Event interface prevents further propagation of the current event in the capturing and bubbling phases.

      Example

      Set up the event handler of editDialogClosing event. 

      const scheduler = document.querySelector('smart-scheduler');
scheduler.addEventListener('editDialogClosing', function (event) {
    const detail = event.detail,
        target = detail.target,
        item = detail.item,
        type = detail.type,
        eventObj = detail.eventObj;

	// event handling code goes here.
})

      contextMenuOpeningCustomEvent

      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.

      • Bubbles Yes
      • Cancelable Yes
      • Interface CustomEvent
      • Event handler property onContextMenuOpening

      Arguments

      evCustomEvent
      ev.detailObject
      ev.detail.target - The context menu instance.
      ev.detail.owner - The HTMLElement that the menu belongs to.
      ev.detail.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.
      ev.detail.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.

      Methods

      isDefaultPrevented

      Returns true if the event was prevented by any of its subscribers.

      Returns

      boolean true if the default action was prevented. Otherwise, returns false.

      preventDefault

      The preventDefault() method prevents the default action for a specified event. In this way, the source component suppresses the built-in behavior that follows the event.

      stopPropagation

      The stopPropagation() method of the Event interface prevents further propagation of the current event in the capturing and bubbling phases.

      Example

      Set up the event handler of contextMenuOpening event. 

      const scheduler = document.querySelector('smart-scheduler');
scheduler.addEventListener('contextMenuOpening', function (event) {
    const detail = event.detail,
        target = detail.target,
        owner = detail.owner,
        cellObj = detail.cellObj,
        eventObj = detail.eventObj;

	// event handling code goes here.
})

      contextMenuOpenCustomEvent

      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.

      • Bubbles Yes
      • Cancelable No
      • Interface CustomEvent
      • Event handler property onContextMenuOpen

      Arguments

      evCustomEvent
      ev.detailObject
      ev.detail.target - The context menu instance.
      ev.detail.owner - The HTMLElement that the menu belongs to.
      ev.detail.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.
      ev.detail.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.

      Methods

      isDefaultPrevented

      Returns true if the event was prevented by any of its subscribers.

      Returns

      boolean true if the default action was prevented. Otherwise, returns false.

      preventDefault

      The preventDefault() method prevents the default action for a specified event. In this way, the source component suppresses the built-in behavior that follows the event.

      stopPropagation

      The stopPropagation() method of the Event interface prevents further propagation of the current event in the capturing and bubbling phases.

      Example

      Set up the event handler of contextMenuOpen event. 

      const scheduler = document.querySelector('smart-scheduler');
scheduler.addEventListener('contextMenuOpen', function (event) {
    const detail = event.detail,
        target = detail.target,
        owner = detail.owner,
        cellObj = detail.cellObj,
        eventObj = detail.eventObj;

	// event handling code goes here.
})

      contextMenuCloseCustomEvent

      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.

      • Bubbles Yes
      • Cancelable No
      • Interface CustomEvent
      • Event handler property onContextMenuClose

      Arguments

      evCustomEvent
      ev.detailObject
      ev.detail.target - The context menu instance.
      ev.detail.owner - The HTMLElement that the menu belongs to.
      ev.detail.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.
      ev.detail.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.

      Methods

      isDefaultPrevented

      Returns true if the event was prevented by any of its subscribers.

      Returns

      boolean true if the default action was prevented. Otherwise, returns false.

      preventDefault

      The preventDefault() method prevents the default action for a specified event. In this way, the source component suppresses the built-in behavior that follows the event.

      stopPropagation

      The stopPropagation() method of the Event interface prevents further propagation of the current event in the capturing and bubbling phases.

      Example

      Set up the event handler of contextMenuClose event. 

      const scheduler = document.querySelector('smart-scheduler');
scheduler.addEventListener('contextMenuClose', function (event) {
    const detail = event.detail,
        target = detail.target,
        owner = detail.owner,
        cellObj = detail.cellObj,
        eventObj = detail.eventObj;

	// event handling code goes here.
})

      contextMenuClosingCustomEvent

      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.

      • Bubbles Yes
      • Cancelable Yes
      • Interface CustomEvent
      • Event handler property onContextMenuClosing

      Arguments

      evCustomEvent
      ev.detailObject
      ev.detail.target - The context menu instance.
      ev.detail.owner - The HTMLElement that the menu belongs to.
      ev.detail.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.
      ev.detail.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.

      Methods

      isDefaultPrevented

      Returns true if the event was prevented by any of its subscribers.

      Returns

      boolean true if the default action was prevented. Otherwise, returns false.

      preventDefault

      The preventDefault() method prevents the default action for a specified event. In this way, the source component suppresses the built-in behavior that follows the event.

      stopPropagation

      The stopPropagation() method of the Event interface prevents further propagation of the current event in the capturing and bubbling phases.

      Example

      Set up the event handler of contextMenuClosing event. 

      const scheduler = document.querySelector('smart-scheduler');
scheduler.addEventListener('contextMenuClosing', function (event) {
    const detail = event.detail,
        target = detail.target,
        owner = detail.owner,
        cellObj = detail.cellObj,
        eventObj = detail.eventObj;

	// event handling code goes here.
})

      eventMenuOpeningCustomEvent

      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.

      • Bubbles Yes
      • Cancelable Yes
      • Interface CustomEvent
      • Event handler property onEventMenuOpening

      Arguments

      evCustomEvent
      ev.detailObject
      ev.detail.target - The menu instance.
      ev.detail.owner - The HTMLElement of the event that the menu belongs to.
      ev.detail.eventObj - The event object that is the target of the menu.

      Methods

      isDefaultPrevented

      Returns true if the event was prevented by any of its subscribers.

      Returns

      boolean true if the default action was prevented. Otherwise, returns false.

      preventDefault

      The preventDefault() method prevents the default action for a specified event. In this way, the source component suppresses the built-in behavior that follows the event.

      stopPropagation

      The stopPropagation() method of the Event interface prevents further propagation of the current event in the capturing and bubbling phases.

      Example

      Set up the event handler of eventMenuOpening event. 

      const scheduler = document.querySelector('smart-scheduler');
scheduler.addEventListener('eventMenuOpening', function (event) {
    const detail = event.detail,
        target = detail.target,
        owner = detail.owner,
        eventObj = detail.eventObj;

	// event handling code goes here.
})

      eventMenuOpenCustomEvent

      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.

      • Bubbles Yes
      • Cancelable No
      • Interface CustomEvent
      • Event handler property onEventMenuOpen

      Arguments

      evCustomEvent
      ev.detailObject
      ev.detail.target - The menu instance.
      ev.detail.owner - The HTMLElement of the event that the menu belongs to.
      ev.detail.eventObj - The event object that is the target of the menu.

      Methods

      isDefaultPrevented

      Returns true if the event was prevented by any of its subscribers.

      Returns

      boolean true if the default action was prevented. Otherwise, returns false.

      preventDefault

      The preventDefault() method prevents the default action for a specified event. In this way, the source component suppresses the built-in behavior that follows the event.

      stopPropagation

      The stopPropagation() method of the Event interface prevents further propagation of the current event in the capturing and bubbling phases.

      Example

      Set up the event handler of eventMenuOpen event. 

      const scheduler = document.querySelector('smart-scheduler');
scheduler.addEventListener('eventMenuOpen', function (event) {
    const detail = event.detail,
        target = detail.target,
        owner = detail.owner,
        eventObj = detail.eventObj;

	// event handling code goes here.
})

      eventMenuCloseCustomEvent

      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.

      • Bubbles Yes
      • Cancelable No
      • Interface CustomEvent
      • Event handler property onEventMenuClose

      Arguments

      evCustomEvent
      ev.detailObject
      ev.detail.target - The menu instance.
      ev.detail.owner - The HTMLElement of the event that the menu belongs to.
      ev.detail.eventObj - The event object that is the target of the menu.

      Methods

      isDefaultPrevented

      Returns true if the event was prevented by any of its subscribers.

      Returns

      boolean true if the default action was prevented. Otherwise, returns false.

      preventDefault

      The preventDefault() method prevents the default action for a specified event. In this way, the source component suppresses the built-in behavior that follows the event.

      stopPropagation

      The stopPropagation() method of the Event interface prevents further propagation of the current event in the capturing and bubbling phases.

      Example

      Set up the event handler of eventMenuClose event. 

      const scheduler = document.querySelector('smart-scheduler');
scheduler.addEventListener('eventMenuClose', function (event) {
    const detail = event.detail,
        target = detail.target,
        owner = detail.owner,
        eventObj = detail.eventObj;

	// event handling code goes here.
})

      eventMenuClosingCustomEvent

      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.

      • Bubbles Yes
      • Cancelable Yes
      • Interface CustomEvent
      • Event handler property onEventMenuClosing

      Arguments

      evCustomEvent
      ev.detailObject
      ev.detail.target - The menu instance.
      ev.detail.owner - The HTMLElement of the event that the menu belongs to.
      ev.detail.eventObj - The event object that is the target of the menu.

      Methods

      isDefaultPrevented

      Returns true if the event was prevented by any of its subscribers.

      Returns

      boolean true if the default action was prevented. Otherwise, returns false.

      preventDefault

      The preventDefault() method prevents the default action for a specified event. In this way, the source component suppresses the built-in behavior that follows the event.

      stopPropagation

      The stopPropagation() method of the Event interface prevents further propagation of the current event in the capturing and bubbling phases.

      Example

      Set up the event handler of eventMenuClosing event. 

      const scheduler = document.querySelector('smart-scheduler');
scheduler.addEventListener('eventMenuClosing', function (event) {
    const detail = event.detail,
        target = detail.target,
        owner = detail.owner,
        eventObj = detail.eventObj;

	// event handling code goes here.
})

      dateMenuOpenCustomEvent

      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.

      • Bubbles Yes
      • Cancelable No
      • Interface CustomEvent
      • Event handler property onDateMenuOpen

      Arguments

      evCustomEvent
      ev.detailObject
      ev.detail.target - The menu instance.

      Methods

      isDefaultPrevented

      Returns true if the event was prevented by any of its subscribers.

      Returns

      boolean true if the default action was prevented. Otherwise, returns false.

      preventDefault

      The preventDefault() method prevents the default action for a specified event. In this way, the source component suppresses the built-in behavior that follows the event.

      stopPropagation

      The stopPropagation() method of the Event interface prevents further propagation of the current event in the capturing and bubbling phases.

      Example

      Set up the event handler of dateMenuOpen event. 

      const scheduler = document.querySelector('smart-scheduler');
scheduler.addEventListener('dateMenuOpen', function (event) {
    const detail = event.detail,
        target = detail.target;

	// event handling code goes here.
})

      dateMenuCloseCustomEvent

      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.

      • Bubbles Yes
      • Cancelable No
      • Interface CustomEvent
      • Event handler property onDateMenuClose

      Arguments

      evCustomEvent
      ev.detailObject
      ev.detail.target - The menu instance.

      Methods

      isDefaultPrevented

      Returns true if the event was prevented by any of its subscribers.

      Returns

      boolean true if the default action was prevented. Otherwise, returns false.

      preventDefault

      The preventDefault() method prevents the default action for a specified event. In this way, the source component suppresses the built-in behavior that follows the event.

      stopPropagation

      The stopPropagation() method of the Event interface prevents further propagation of the current event in the capturing and bubbling phases.

      Example

      Set up the event handler of dateMenuClose event. 

      const scheduler = document.querySelector('smart-scheduler');
scheduler.addEventListener('dateMenuClose', function (event) {
    const detail = event.detail,
        target = detail.target;

	// event handling code goes here.
})

      viewMenuOpenCustomEvent

      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.

      • Bubbles Yes
      • Cancelable No
      • Interface CustomEvent
      • Event handler property onViewMenuOpen

      Arguments

      evCustomEvent
      ev.detailObject
      ev.detail.target - The menu instance.

      Methods

      isDefaultPrevented

      Returns true if the event was prevented by any of its subscribers.

      Returns

      boolean true if the default action was prevented. Otherwise, returns false.

      preventDefault

      The preventDefault() method prevents the default action for a specified event. In this way, the source component suppresses the built-in behavior that follows the event.

      stopPropagation

      The stopPropagation() method of the Event interface prevents further propagation of the current event in the capturing and bubbling phases.

      Example

      Set up the event handler of viewMenuOpen event. 

      const scheduler = document.querySelector('smart-scheduler');
scheduler.addEventListener('viewMenuOpen', function (event) {
    const detail = event.detail,
        target = detail.target;

	// event handling code goes here.
})

      viewMenuCloseCustomEvent

      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.

      • Bubbles Yes
      • Cancelable No
      • Interface CustomEvent
      • Event handler property onViewMenuClose

      Arguments

      evCustomEvent
      ev.detailObject
      ev.detail.target - The menu instance.

      Methods

      isDefaultPrevented

      Returns true if the event was prevented by any of its subscribers.

      Returns

      boolean true if the default action was prevented. Otherwise, returns false.

      preventDefault

      The preventDefault() method prevents the default action for a specified event. In this way, the source component suppresses the built-in behavior that follows the event.

      stopPropagation

      The stopPropagation() method of the Event interface prevents further propagation of the current event in the capturing and bubbling phases.

      Example

      Set up the event handler of viewMenuClose event. 

      const scheduler = document.querySelector('smart-scheduler');
scheduler.addEventListener('viewMenuClose', function (event) {
    const detail = event.detail,
        target = detail.target;

	// event handling code goes here.
})

      notificationOpenCustomEvent

      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.

      • Bubbles Yes
      • Cancelable No
      • Interface CustomEvent
      • Event handler property onNotificationOpen

      Arguments

      evCustomEvent
      ev.detailObject
      ev.detail.instance - The toast item instance that is opened.

      Methods

      isDefaultPrevented

      Returns true if the event was prevented by any of its subscribers.

      Returns

      boolean true if the default action was prevented. Otherwise, returns false.

      preventDefault

      The preventDefault() method prevents the default action for a specified event. In this way, the source component suppresses the built-in behavior that follows the event.

      stopPropagation

      The stopPropagation() method of the Event interface prevents further propagation of the current event in the capturing and bubbling phases.

      Example

      Set up the event handler of notificationOpen event. 

      const scheduler = document.querySelector('smart-scheduler');
scheduler.addEventListener('notificationOpen', function (event) {
    const detail = event.detail,
        instance = detail.instance;

	// event handling code goes here.
})

      notificationCloseCustomEvent

      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.

      • Bubbles Yes
      • Cancelable No
      • Interface CustomEvent
      • Event handler property onNotificationClose

      Arguments

      evCustomEvent
      ev.detailObject
      ev.detail.instance - The toast item instance that is closed.

      Methods

      isDefaultPrevented

      Returns true if the event was prevented by any of its subscribers.

      Returns

      boolean true if the default action was prevented. Otherwise, returns false.

      preventDefault

      The preventDefault() method prevents the default action for a specified event. In this way, the source component suppresses the built-in behavior that follows the event.

      stopPropagation

      The stopPropagation() method of the Event interface prevents further propagation of the current event in the capturing and bubbling phases.

      Example

      Set up the event handler of notificationClose event. 

      const scheduler = document.querySelector('smart-scheduler');
scheduler.addEventListener('notificationClose', function (event) {
    const detail = event.detail,
        instance = detail.instance;

	// event handling code goes here.
})

      Methods

      addEvent( eventObj: any): void

      Adds a new event to the Scheduler component. This method accepts a single event object, structured according to the Scheduler’s dataSource format. The event object supports a comprehensive set of properties, allowing for detailed configuration of event details, appearance, recurrence, and behavior:


      {
        label?: string,                       // The event title/label (optional)
        dateStart: date,                      // Start date and time (required)
        dateEnd: date,                        // End date and time (required)
        description?: string,                 // Additional event details (optional)
        id?: string | number,                 // Unique event identifier (optional)
        class?: string,                       // CSS class for custom styling (optional)
        backgroundColor?: string,             // Background color (any CSS color value)
        color?: string,                       // Text color (any CSS color value)
        notifications?: [                     // Array of notification objects for reminders (optional)
          {
            interval: number,                 // Reminder interval in minutes/hours/days
            type?: string,                    // Type of notification (email, popup, etc.)
            time: number[]                    // Specific times (in minutes, relative to event start)
          }
        ],
        allDay?: boolean,                     // Marks the event as an all-day event (optional)
        disableDrag?: boolean,                // Prevents dragging/moving this event (optional)
        disableResize?: boolean,              // Prevents resizing this event (optional)
        repeat?: {                            // Recurrence rules (optional)
          repeatFreq: string,                 // Frequency type: 'daily', 'weekly', 'monthly', etc.
          repeatInterval: number,             // Interval for the repeat frequency (e.g., every 2 days)
          repeatOn?: number | number[] | date,// Specific days or dates for recurrence pattern
          repeatEnd?: number | date,          // Number of recurrences or end date
          exceptions?: [                      // Dates or instances to exclude or modify (optional)
            {
              date: date,                     // Exception date (required)
              dateStart?: date,               // Optional exception start time
              dateEnd?: date,                 // Optional exception end time
              hidden?: boolean,               // Whether this instance is hidden
              backgroundColor?: string,       // Custom color for the exception
              status?: string,                // Custom status
              label?: string,                 // Custom label
              description?: string,           // Custom description
              notifications?: [               // Custom notifications for this exception
                {
                  interval: number,
                  type?: string,
                  time: number[]
                }
              ],
              disableDrag?: boolean,          // Disable dragging for this occurrence
              disableResize?: boolean         // Disable resizing for this occurrence
            }
          ]
        },
        status?: string                       // Custom status for the event (optional)
      }


      **Summary:**
      This flexible structure allows you to configure simple or complex events with custom colors, notifications, recurrences (including exceptions), interaction restrictions, and more. All properties are optional unless otherwise marked as required. The event object you provide will be added to the Scheduler and rendered according to the specified options.

      Arguments

      eventObjany

      An object describing a Scheduler event that is not already present in the element.


      Invoke the addEvent method.

      const scheduler = document.querySelector('smart-scheduler');
scheduler.addEvent("{ label: 'Inserted Event 1', dateStart: '2022-08-10', dateEnd: '2022-12-23' }");

      addView( type: string, label: string, value: string, hideWeekend: boolean, hideNonworkingWeekdays: boolean, additionalDays: number): void

      Enhances the scheduler by allowing you to define and register a custom view.
      For example: `scheduler.addView('week', 'My View', 'myView', false, false, 10);`
      Here, the parameters specify the base view type ('week'), display name ('My View'), unique view ID ('myView'), two boolean options (such as visibility or default state), and a numeric parameter (such as duration or step).
      You can then activate the new view with `scheduler.setView('myView');`.
      This enables developers to quickly add personalized calendar views that suit specific application needs.

      Arguments

      typestring

      The view type.

      labelstring

      The view's label displayed in the header.

      valuestring

      The view's value used to identify the view.

      hideWeekendboolean

      Determines whether to hide the weekend.

      hideNonworkingWeekdaysboolean

      Determines whether to hide the non working days.

      additionalDaysnumber

      Determines whether to add additional days to the view.


      Invoke the addView method.

      const scheduler = document.querySelector('smart-scheduler');
scheduler.addView("'week', 'My View', 'myView', false, false, 10");

      beginUpdate(): void

      Initiates an update operation, allowing you to group multiple method calls or set multiple properties simultaneously. This ensures that all changes are applied together, which can improve performance and prevent intermediate states from being visible during the update process. Use this when you need to batch updates for efficiency or consistency.


      Invoke the beginUpdate method.

      const scheduler = document.querySelector('smart-scheduler');
scheduler.beginUpdate();

      createEvent( label: string, value: string, dateStart: string, dateEnd: string, allDay: boolean): void

      Creates a new event with specified details (such as title, date, time, and description) and adds it to the Scheduler’s event list, making it available for viewing, editing, and management within the scheduling interface.

      Arguments

      labelstring

      Event label.

      valuestring

      Event value.

      dateStartstring

      Event date start.

      dateEndstring

      Event date end.

      allDayboolean

      Event all day. Set it to true to create all day event.


      Invoke the createEvent method.

      const scheduler = document.querySelector('smart-scheduler');
scheduler.createEvent("'Inserted Event 1', 'value', '2022-08-10', dateEnd: '2022-12-23'");

      endUpdate(): void

      Finalizes the update operation, allowing the component to resume its normal rendering process. This method triggers a re-render of the element, ensuring that all recent changes are reflected in the UI.


      Invoke the endUpdate method.

      const scheduler = document.querySelector('smart-scheduler');
scheduler.endUpdate();

      getViewDates(): Date[]

      Returns an array containing the start and end dates that define the current visible date range in the view. The first element is the start date, and the second element is the end date.

      ReturnsDate[]

      Invoke the getViewDates method.

      const scheduler = document.querySelector('smart-scheduler');
const result = scheduler.getViewDates();

      refresh( fullRefresh?: boolean): void

      Refreshes the Scheduler by recalculating and updating the scrollbars to ensure proper alignment and visibility based on the current content and layout changes.

      Arguments

      fullRefresh?boolean

      If set the Scheduler will be re-rendered completely.


      Invoke the refresh method.

      const scheduler = document.querySelector('smart-scheduler');
scheduler.refresh(true,false);

      exportData( dataFormat: string, callback?: any, dataCallback?: any): void

      Exports all scheduled events from the Scheduler component, allowing you to download or transfer event data in a supported format (e.g., JSON, CSV, or iCal) for external use, backup, or integration with other applications.

      Arguments

      dataFormatstring

      Determines the format of the exported file. The following values are available:

      • pdf
      • xlsx
      • html
      • iCal

      callback?any

      A callback that allows to format the exported data based on a condition. For additional details, refer to the Smart Export Documentation.

      dataCallback?any

      A callback that allows to change the exported data.


      Invoke the exportData method.

      const scheduler = document.querySelector('smart-scheduler');
scheduler.exportData("'pdf'");

      getDataSource(): object[]

      Returns a detailed JSON object containing all the events currently managed by the Scheduler, including properties such as event IDs, titles, start and end times, locations, descriptions, and any custom metadata associated with each event. This allows for programmatic access to the full list of scheduled events for use in external applications or integrations.

      Returnsobject[]

      Invoke the getDataSource method.

      const scheduler = document.querySelector('smart-scheduler');
const result = scheduler.getDataSource();

      getResources(): object[]

      Returns a JSON-encoded object containing the detailed data for all resources managed by the Scheduler, including their unique identifiers, properties, and current state. This allows client applications to programmatically access and manipulate the full list of Scheduler resources in a structured format.

      Returnsobject[]

      Invoke the getResources method.

      const scheduler = document.querySelector('smart-scheduler');
const result = scheduler.getResources();

      getDateFromCoordinates( x: number, y: number): string

      Retrieves a date value based on the provided coordinate data, typically by mapping spatial or grid coordinates to a corresponding date in a dataset or timeline.

      Arguments

      xnumber

      X coordinate.

      ynumber

      Y coordinate.

      Returnsstring

      Invoke the getDateFromCoordinates method.

      const scheduler = document.querySelector('smart-scheduler');
const result = scheduler.getDateFromCoordinates("50, 100");

      getIsAllDayCellFromCoordinates( x: number, y: number): boolean

      Determines if the cell at the specified coordinates represents an "all-day" cell, typically used for events that span the entire day in a calendar view.

      Arguments

      xnumber

      X coordinate.

      ynumber

      Y coordinate.

      Returnsboolean

      Invoke the getIsAllDayCellFromCoordinates method.

      const scheduler = document.querySelector('smart-scheduler');
const result = scheduler.getIsAllDayCellFromCoordinates("50, 100");

      getState(): object

      Returns an object representing the current state of the Scheduler. This includes the following properties:
      - dateCurrent: The Scheduler’s currently selected or displayed date.
      - dataSource: The data source currently used to populate the Scheduler events or appointments.
      - timeZone: The time zone setting currently applied to the Scheduler.
      Use this method to retrieve a snapshot of the Scheduler’s core settings at any given moment.

      Returnsobject

      Invoke the getState method.

      const scheduler = document.querySelector('smart-scheduler');
const result = scheduler.getState();

      clearState(): void

      Removes a previously stored state of the element from LocalStorage using its assigned id as the key. An id attribute must be set on the element for this function to work correctly.


      Invoke the clearState method.

      const scheduler = document.querySelector('smart-scheduler');
scheduler.clearState("state");

      loadState( state?: any[]): void

      Retrieves a previously saved state of the element. If a specific state is provided as an argument, it loads that state. If no argument is passed, the method checks LocalStorage for any existing saved states and loads the most recent one if available.

      Arguments

      state?any[]

      An Array containing a valid structure of Scheduler events. If no state is provided, the element will check localStorage for a saved state.


      Invoke the loadState method.

      const scheduler = document.querySelector('smart-scheduler');
scheduler.loadState("state");

      saveState( state?: any[]): void

      Stores the current event data associated with the element in LocalStorage. Note: The element must have a unique id attribute set for this functionality to work correctly.

      Arguments

      state?any[]

      An Array containing a valid structure of Scheduler events.


      Invoke the saveState method.

      const scheduler = document.querySelector('smart-scheduler');
scheduler.saveState("state");

      setView( view?: string): void

      Specifies and activates a custom view for the Scheduler component. For example, the code scheduler.addView('week', 'My View', 'myView', false, false, 10); creates a new view named "My View" of type "week" with the identifier "myView". The parameters control the view's properties, such as its type, display name, unique id, and other options. The following method, scheduler.setView('myView');, then switches the Scheduler to display the newly defined custom view.

      Arguments

      view?string

      The view's value. For example: 'day'.


      Invoke the setView method.

      const scheduler = document.querySelector('smart-scheduler');
scheduler.setView("day");

      containsEvent( eventObj: any): boolean

      Determines if a specific event is present within the Scheduler's collection of scheduled events. Returns true if the event exists; otherwise, returns false.

      Arguments

      eventObjany

      A Scheduler event object.

      Returnsboolean

      Invoke the containsEvent method.

      const scheduler = document.querySelector('smart-scheduler');
const result = scheduler.containsEvent("eventObjA","eventObjB");

      insertEvent( eventObj: any, index?: number): void

      Inserts an event object following the dataSource format. The event object supports a comprehensive set of properties for defining event details, appearance, recurrence, and behavior. The structure is as follows:


      {
        label?: string,                   // (Optional) Title or name of the event
        dateStart: date,                  // Start date and time of the event (Date object or ISO string)
        dateEnd: date,                    // End date and time of the event (Date object or ISO string)
        description?: string,             // (Optional) Detailed description of the event
        id?: string | number,             // (Optional) Unique identifier for the event
        class?: string,                   // (Optional) CSS class for custom styling
        backgroundColor?: string,         // (Optional) Event background color (CSS color value)
        color?: string,                   // (Optional) Text color for the event (CSS color value)
        notifications?: [                 // (Optional) Array of notification settings for reminders
          {
            interval: number,             // Time interval before the event to trigger the notification (in minutes)
            type?: string,                // (Optional) Type of notification (e.g., 'email', 'alert')
            time: number[]                // Array of specific times (in minutes) for notifications
          }
        ],
        allDay?: boolean,                 // (Optional) If true, the event lasts all day
        disableDrag?: boolean,            // (Optional) If true, dragging/rescheduling is disabled for this event
        disableResize?: boolean,          // (Optional) If true, resizing is disabled for this event
        repeat?: {                        // (Optional) Recurrence configuration for repeating events
          repeatFreq: string,             // Frequency of repetition ('daily', 'weekly', 'monthly', etc.)
          repeatInterval: number,         // Number of intervals between repeats (e.g., every 2 days)
          repeatOn?: number | number[] | date,   // (Optional) Specific days/dates the event repeats on
          repeatEnd?: number | date,      // (Optional) End condition: number of occurrences or end date
          exceptions?: [                  // (Optional) List of exceptions to recurrence rules
            {
              date: date,                 // Date of exception
              dateStart?: date,           // (Optional) Start time for the exception
              dateEnd?: date,             // (Optional) End time for the exception
              hidden?: boolean,           // (Optional) If true, this occurrence is not displayed
              backgroundColor?: string,   // (Optional) Custom background color for this occurrence
              status?: string,            // (Optional) Status for this occurrence (e.g., 'cancelled')
              label?: string,             // (Optional) Custom label for this occurrence
              description?: string,       // (Optional) Custom description for this occurrence
              notifications?: [{ interval: number, type?: string, time: number[] }], // (Optional) Notifications for this occurrence
              disableDrag?: boolean,      // (Optional) Disable drag for this single occurrence
              disableResize?: boolean     // (Optional) Disable resize for this single occurrence
            }
          ]
        },
        status?: string                   // (Optional) Current status of the event (e.g., 'pending', 'confirmed')
      }


      **Notes:**
      - Properties marked as optional (`?`) can be omitted.
      - The structure is fully compatible with dataSource arrays commonly used in calendar or scheduling components.
      - The object supports advanced event recurrence and exception handling for maximum flexibility in scheduling applications.

      Arguments

      eventObjany

      An object describing a Scheduler event that is not already present in the element.

      index?number

      A number that represents the index to insert the event at. If not provided the event is inserted at the end of the list.


      Invoke the insertEvent method.

      const scheduler = document.querySelector('smart-scheduler');
scheduler.insertEvent("{ label: 'Inserted Event 1', dateStart: '2022-08-10', dateEnd: '2022-12-23' }");

      updateEvent( index: any, eventObj: any): void

      Updates an event object that follows the structure below. The event object format matches the dataSource format used by the application. Each property is described for clarity:


      {
        label?: string,                  // (optional) The title or name of the event.
        dateStart: date,                 // The start date and time of the event (Date object or valid date string).
        dateEnd: date,                   // The end date and time of the event (Date object or valid date string).
        description?: string,            // (optional) Detailed information or notes about the event.
        id?: string | number,            // (optional) A unique identifier for the event (string or number).
        class?: string,                  // (optional) CSS class(es) to style the event in the UI.
        backgroundColor?: string,        // (optional) Background color for the event, specified as a CSS color value.
        color?: string,                  // (optional) Text color for the event, specified as a CSS color value.

        notifications?: [                // (optional) Array of notification settings for the event.
          {
            interval: number,            // Time interval before an event for sending a notification (in minutes/hours).
            type?: string,               // (optional) Notification type (e.g., "email", "popup").
            time: number[]               // Array of times (in minutes/hours) to trigger the notification.
          }
        ],

        allDay?: boolean,                // (optional) Indicates if the event spans the entire day.

        disableDrag?: boolean,           // (optional) Prevents the event from being moved via drag-and-drop in the UI.
        disableResize?: boolean,         // (optional) Prevents the event from being resized in the UI.

        repeat?: {                       // (optional) Recurrence settings for repeating events.
          repeatFreq: string,            // Frequency of repetition (e.g., "daily", "weekly", "monthly").
          repeatInterval: number,        // The interval between repetitions (e.g., every 2 days).
          repeatOn?: number | number[] | date,  // (optional) Specific days or dates when the event repeats (e.g., day of week).
          repeatEnd?: number | date,     // (optional) End of the recurrence - number of occurrences or a specific date.
          exceptions?: [                 // (optional) List of exceptions/dates when the event does not occur or details of modified occurrences.
            {
              date: date,                // The exception date (date when event does not occur or is modified).
              dateStart?: date,          // (optional) Modified start date/time for the exception occurrence.
              dateEnd?: date,            // (optional) Modified end date/time for the exception occurrence.
              hidden?: boolean,          // (optional) If true, hides this occurrence.
              backgroundColor?: string,  // (optional) Background color override for this occurrence.
              status?: string,           // (optional) Custom status for this occurrence.
              label?: string,            // (optional) Custom label/title for this occurrence.
              description?: string,      // (optional) Custom description for this occurrence.
              notifications?: [          // (optional) Notification settings specifically for this occurrence.
                {
                  interval: number,
                  type?: string,
                  time: number[]
                }
              ],
              disableDrag?: boolean,     // (optional) Prevents this occurrence from being dragged in the UI.
              disableResize?: boolean    // (optional) Prevents this occurrence from being resized in the UI.
            }
          ]
        },

        status?: string                  // (optional) The current status of the event (e.g., "confirmed", "tentative", "cancelled").
      }


      When updating the event object, all or some of these properties can be included based on which attributes need to be modified. This flexible structure allows for basic one-time events, as well as complex recurring events with customized properties and exceptions.

      Arguments

      indexany

      A number that represents the index of an event or a Scheduler event object.

      eventObjany

      An object describing a Scheduler event. The properties of this object will be applied to the desired event.


      Invoke the updateEvent method.

      const scheduler = document.querySelector('smart-scheduler');
scheduler.updateEvent("2, { label: 'Updated Task', dateEnd: '2022-12-23' }");

      removeEvent( index: any): void

      Deletes a specified event from the system, permanently removing its associated data and making it no longer accessible or visible to users.

      Arguments

      indexany

      A number that represents the index of an event or the actual event object to be removed.


      Invoke the removeEvent method.

      const scheduler = document.querySelector('smart-scheduler');
scheduler.removeEvent("0");

      getEventExceptions( eventObj: any): array

      Returns an array containing all exception instances associated with the specified recurring event. Each exception represents a single occurrence within the event series that differs from the original recurrence pattern, such as modified dates, details, or cancellations.

      Arguments

      eventObjany

      The index, id or an object reference of an existing repeating Scheduler event.

      Returnsarray

      Invoke the getEventExceptions method.

      const scheduler = document.querySelector('smart-scheduler');
const result = scheduler.getEventExceptions("eventObj");

      addEventException( eventObj: any, exceptionObj: any): void

      Adds an exception to a recurring event, allowing you to modify or override specific occurrences in a repeating event series. Event exceptions are useful for handling changes such as rescheduling a single meeting in a weekly series, skipping a date, or altering event details for one instance without affecting the entire series.

      You can retrieve the individual occurrences of a recurring event using the following methods:


      • occurrences: Returns an array of all occurrences for a recurring event.

      • occurrencesBetween(startDate, endDate): Returns all occurrences that fall within the specified date range.

      • occurrenceAfter(date): Returns the first occurrence after the given date.

      • occurrenceBefore(date): Returns the last occurrence before the given date.



      To add an exception, call addEventException with the event object and a configuration object specifying the desired changes for a particular occurrence (such as a new date or label):

      Example usage:




      scheduler.addEventException(eventObj, {
        date: occurrenceDate,              // Date of the occurrence to override
        dateStart: newDateStart,           // New start date/time for this exception
        dateEnd: newDateEnd,               // New end date/time for this exception
        label: 'Exception'                 // (Optional) Label or description for this exception
      });


      This will create a customized exception for the specified recurrence, ensuring only the selected occurrence is modified while all other instances remain unaffected.

      Arguments

      eventObjany

      The index, id or an object reference of an existing repeating Scheduler event.

      exceptionObjany

      An event object that describes an exception. Exception event objects must have a date attribute of type Date which indicates the date of occurence.


      Invoke the addEventException method.

      const scheduler = document.querySelector('smart-scheduler');
scheduler.addEventException("eventObj, exceptionObj");

      updateEventException( eventObj: any, exceptionRef: any, exceptionObj: any): void

      Updates a single exception occurrence within a recurring event series.

      To retrieve the specific exception occurrences of a repeating event, you can use these methods:


      • occurrences: Returns all instances of the recurring event, including exceptions.

      • occurrencesBetween: Retrieves event occurrences that fall within a specified date range.

      • occurrenceAfter: Finds the next occurrence after a given date.

      • occurrenceBefore: Finds the previous occurrence before a given date.



      Use the updateEventException method to modify the details of a particular occurrence (exception) in a recurring event series. Supply:



      • eventObj - The original recurring event object.

      • dateOfOccurrence - The date/time identifying the specific occurrence to update.

      • changes - An object specifying the updates for this exception (such as new start/end times, label, etc.).



      Example usage:




      scheduler.updateEventException(
        eventObj, 
        dateOfOccurrence, 
        { dateStart: newDateStart, dateEnd: newDateEnd, label: 'Updated Exception' }
      );


      This call will update only the specified exception occurrence, leaving the rest of the recurring series unchanged.



      Arguments

      eventObjany

      The index, id or an object reference of an existing repeating Scheduler event.

      exceptionRefany

      The index, id, an occurence date of the exception or an object reference of an existing Scheduler repeating event exception.

      exceptionObjany

      An event object that describes an exception. All attributes of an exception can be updated except the occurance date (the date attribute).


      Invoke the updateEventException method.

      const scheduler = document.querySelector('smart-scheduler');
scheduler.updateEventException("eventObj, exceptionObj");

      removeEventException( eventObj: any, index: any): void

      Removes a specified exception instance from a recurring event series, thereby restoring the affected occurrence to match the original recurring pattern.

      Arguments

      eventObjany

      The index, id or an object reference of an existing repeating Scheduler event.

      indexany

      The index, id, occurance date or an object reference of an event exception that belongs to the target repeating event.


      Invoke the removeEventException method.

      const scheduler = document.querySelector('smart-scheduler');
scheduler.removeEventException("eventObj, 1");

      openWindow( index: any): void

      Opens a popup window that allows users to view and edit the details of a selected event. This enables modification of event information such as title, date, time, location, and other relevant attributes.

      Arguments

      indexany

      A number that represents the index of a event or the actual event object to be edited.


      Invoke the openWindow method.

      const scheduler = document.querySelector('smart-scheduler');
scheduler.openWindow("2");

      closeWindow(): void

      Closes the currently open popup window, removing it from view and returning focus to the main application interface.


      Invoke the closeWindow method.

      const scheduler = document.querySelector('smart-scheduler');
scheduler.closeWindow();

      print(): void

      Prepares the Scheduler component for printing by formatting its layout and content for optimal print output, then triggers the browser’s Print Preview dialog for the user to review and print the schedule.


      Invoke the print method.

      const scheduler = document.querySelector('smart-scheduler');
scheduler.print();

      scrollToDate( date: Date, strictScroll?: boolean, autoScroll?: boolean): void

      Scrolls the Scheduler component to display the specified date. This method ensures that the view is brought to the appropriate date slot, making it visible to the user. If the date is not currently in view, the Scheduler will automatically scroll horizontally or vertically as needed to reveal the target date.

      Arguments

      dateDate

      The date to scroll to.

      strictScroll?boolean

      Determines whether to scroll strictly to the date or not. This mean sthat the Scheduler wll scroll to the begining of the cell that corresponds to the target date.

      autoScroll?boolean

      Calculates the scroll positions and element bounds, then adds an offset to scroll within the middle of the view.


      Invoke the scrollToDate method.

      const scheduler = document.querySelector('smart-scheduler');
scheduler.scrollToDate("2025-5-1");

      navigateToDate( date: Date): void

      Transitions the Scheduler interface to display and focus on a specific date selected by the user.

      Arguments

      dateDate

      The date to navigate to.


      Invoke the navigateToDate method.

      const scheduler = document.querySelector('smart-scheduler');
scheduler.navigateToDate("2025-5-1");

      scrollToEvent( index: any): void

      Smoothly scrolls the Scheduler component to bring the specified event into view, ensuring it is visible to the user in the current viewport.

      Arguments

      indexany

      The index of a Scheduler event or the actual event object to scroll to.


      Invoke the scrollToEvent method.

      const scheduler = document.querySelector('smart-scheduler');
scheduler.scrollToEvent("eventObj","2");

      openNotification( message: string, toastSettings: any): void

      Displays a custom notification to the user, allowing you to specify the message content, style, and behavior. This function enables dynamic alerts or updates within the application’s user interface.

      Arguments

      messagestring

      The notification message.

      toastSettingsany

      Smart.Toast settings to be applied to the Toast element when opening the notification.


      Invoke the openNotification method.

      const scheduler = document.querySelector('smart-scheduler');
scheduler.openNotification("This is a custom notification","Custom Notification 2");

      closeNotifications(): void

      Dismisses and removes all currently active notifications from view, ensuring that no notification messages remain visible to the user.


      Invoke the closeNotifications method.

      const scheduler = document.querySelector('smart-scheduler');
scheduler.closeNotifications();

      occurrences( eventObj: any, count: number): void

      Returns a list of all instances where the specified event occurs within the data set. Each occurrence is represented as an individual object or record, providing detailed information about that specific event instance. This enables comprehensive tracking and analysis of every time the event takes place.

      Arguments

      eventObjany

      A Scheduler evnet object.

      countnumber

      The number of occurances to return. By default 100 date occurances of the event are returned.


      Invoke the occurrences method.

      const scheduler = document.querySelector('smart-scheduler');
scheduler.occurrences("eventObjA","eventObjB");

      occurrencesBetween( eventObj: any, dateFrom: Date, dateTo: Date): void

      Returns a list of all occurrences of a specified event that take place within the given start and end date range, inclusive. Each occurrence includes detailed event information and falls between the provided dates.

      Arguments

      eventObjany

      A Scheduler event object.

      dateFromDate

      The start date.

      dateToDate

      The end date.


      Invoke the occurrencesBetween method.

      const scheduler = document.querySelector('smart-scheduler');
scheduler.occurrencesBetween("eventObjA, new Date(2022, 2, 1), new Date(2022, 3, 1)","eventObjB, new Date(2022, 3, 1), new Date(2022, 5, 1)");

      occurrenceAfter( eventObj: any, date: number): void

      Returns the first occurrence of an event that takes place after the specified date. This function searches through the list of events and retrieves the earliest event whose date is strictly later than the provided reference date. If no such event exists, it returns null or an appropriate default value.

      Arguments

      eventObjany

      A Scheduler event object.

      datenumber

      The date after which the first occurance of the event will be returned.


      Invoke the occurrenceAfter method.

      const scheduler = document.querySelector('smart-scheduler');
scheduler.occurrenceAfter("eventObjA, , new Date(2022, 2, 1)","eventObjB, , new Date(2022, 3, 1)");

      occurrenceBefore( eventObj: any, date: number): void

      Returns the most recent occurrence of the specified event that occurred before the given date.

      Arguments

      eventObjany

      A Scheduler event object.

      datenumber

      The date before which the first occurance of the event will be returned.


      Invoke the occurrenceBefore method.

      const scheduler = document.querySelector('smart-scheduler');
scheduler.occurrenceBefore("eventObjA, , new Date(2022, 2, 1)","eventObjB, , new Date(2022, 3, 1)");

      getCellDateRange( cell: HTMLElement): object

      Returns the start and end dates (dateStart/dateEnd) for a specific timeline cell, representing the time interval covered by that cell on the timeline.

      Arguments

      cellHTMLElement

      A Scheduler timeline cell element.

      Returnsobject

      Invoke the getCellDateRange method.

      const scheduler = document.querySelector('smart-scheduler');
const result = scheduler.getCellDateRange("cellA","cellB");

      openEventTooltip( eventObj: any): void

      Displays the tooltip (event menu) associated with a specific event, providing additional information and context about the selected event when triggered.

      Arguments

      eventObjany

      A Scheduler event object or it's index.


      Invoke the openEventTooltip method.

      const scheduler = document.querySelector('smart-scheduler');
scheduler.openEventTooltip("eventObjA","2");

      closeEventTooltip(): void

      Closes and hides the event tooltip (also known as the event menu), removing it from view and preventing further interactions until it is reopened.


      Invoke the closeEventTooltip method.

      const scheduler = document.querySelector('smart-scheduler');
scheduler.closeEventTooltip();

      isDateRestricted( date: Date): boolean

      Determines if the specified date is restricted. Returns true if the date falls within the set of restricted dates; otherwise, returns false.

      Arguments

      dateDate

      A Date object.

      Returnsboolean

      Invoke the isDateRestricted method.

      const scheduler = document.querySelector('smart-scheduler');
const result = scheduler.isDateRestricted("new Date(2022, 1, 1)","new Date(2023, 1, 1)");

      isHourRestricted( hour: number | Date): boolean

      Determines whether the specified hour is restricted. Returns true if the hour falls within a restricted period; otherwise, returns false.

      Arguments

      hournumber | Date

      A number that represents an hour ( 0 to 23 ) or a Date object.

      Returnsboolean

      Invoke the isHourRestricted method.

      const scheduler = document.querySelector('smart-scheduler');
const result = scheduler.isHourRestricted("12","new Date(2022, 1, 1, 22, 30)");

      isEventRestricted( eventObj: any): boolean

      Determines if the event is restricted by returning a boolean value: true if the event has access restrictions, or false if it is open to all users.

      Arguments

      eventObjany

      A Scheduler event object or a direct event HTMLElement instance.

      Returnsboolean

      Invoke the isEventRestricted method.

      const scheduler = document.querySelector('smart-scheduler');
const result = scheduler.isEventRestricted("eventObjA","eventInstance");

      deleteUndoRedoHistory(): boolean

      Removes all existing entries from the undo and redo history, clearing any previous actions and preventing the user from undoing or redoing changes made prior to this operation.

      Returnsboolean

      Invoke the deleteUndoRedoHistory method.

      const scheduler = document.querySelector('smart-scheduler');
const result = scheduler.deleteUndoRedoHistory();

      canRedo(): boolean

      Specifies whether the action can be redone, indicating if there is a subsequent step available in the redo history that allows the user to reverse a previous undo operation.

      Returnsboolean

      Invoke the canRedo method.

      const scheduler = document.querySelector('smart-scheduler');
const result = scheduler.canRedo();

      canUndo(): boolean

      Specifies whether the most recent action can be undone by the user. If set to true, the user has the option to revert or reverse the previous action; if false, the action cannot be undone.

      Returnsboolean

      Invoke the canUndo method.

      const scheduler = document.querySelector('smart-scheduler');
const result = scheduler.canUndo();

      redo( step?: number): boolean

      Revert the changes made to the upcoming event modification, restoring the event to its previous state.

      Arguments

      step?number

      A step to redo to.

      Returnsboolean

      Invoke the redo method.

      const scheduler = document.querySelector('smart-scheduler');
const result = scheduler.redo("","5");

      undo( step?: number): boolean

      Revert the most recent changes made to the event, restoring it to its previous state.

      Arguments

      step?number

      A step to undo to.

      Returnsboolean

      Invoke the undo method.

      const scheduler = document.querySelector('smart-scheduler');
const result = scheduler.undo("","2");

      CSS Variables

      --smart-scheduler-default-heightvar()

      Default value

      "auto"

      The default height of the Scheduler.

      --smart-scheduler-default-widthvar()

      Default value

      "auto"

      The default width of the Scheduler.

      --smart-scheduler-item-sizevar()

      Default value

      "auto"

      The width of the view items in the Scheduler header when 'viewSelectorType' is set to 'tabs'.

      --smart-scheduler-timeline-cell-widthvar()

      Default value

      "auto"

      The width of the timeline cells.

      --smart-scheduler-timeline-cell-heightvar()

      Default value

      "50px"

      The height of the timeline cells.

      --smart-scheduler-timeline-cell-min-widthvar()

      Default value

      "70px"

      The min width of the timeline cells.

      --smart-scheduler-timeline-cell-min-heightvar()

      Default value

      "35px"

      The min height of the timeline cells.

      --smart-scheduler-header-heightvar()

      Default value

      "50px"

      The height of the Scheduler header.

      --smart-scheduler-header-today-button-sizevar()

      Default value

      "70px"

      The size of the 'Today' button inside the Scheduler header.

      --smart-scheduler-header-date-button-max-sizevar()

      Default value

      "auto"

      The the maximum width for the date selector control.

      --smart-scheduler-header-navigation-button-sizevar()

      Default value

      "30px"

      The size of the navigaiton buttons inside the header of the Scheduler.

      --smart-scheduler-footer-heightvar()

      Default value

      "var(--smart-scheduler-header-height)"

      The size of the Scheduler footer. When empty it's hidden.

      --smart-scheduler-header-box-shadowvar()

      Default value

      "initial"

      The a box shadow to the header of the Scheduler.

      --smart-scheduler-header-paddingvar()

      Default value

      "10px"

      The padding of the Scheduler header.

      --smart-scheduler-timeline-header-cell-paddingvar()

      Default value

      "5px"

      The cell padding of the timeline header.

      --smart-scheduler-header-menu-button-sizevar()

      Default value

      "auto"

      The width of the view selection button inside the Scheduler header.

      --smart-scheduler-timeline-weekend-colorvar()

      Default value

      "var(--smart-background)"

      The background color for the weekend timeline cells.

      --smart-scheduler-timeline-nonworking-colorvar()

      Default value

      "var(--smart-gantt-chart-timeline-nonworking-color)"

      The background color for the nonworking timeline cells.

      --smart-scheduler-timeline-all-day-label-font-weightvar()

      Default value

      "600"

      The font-weight for the AllDay label located in the timeline horizontal header.

      --smart-scheduler-timeline-header-horizontal-cells-sizevar()

      Default value

      "40px"

      The height for the horizontal timeline header cells.

      --smart-scheduler-timeline-header-horizontal-label-paddingvar()

      Default value

      "initial"

      The padding of the horizontal timeline header cells.

      --smart-scheduler-timeline-header-horizontal-details-sizevar()

      Default value

      "var(--smart-scheduler-timeline-header-horizontal-cells-size)"

      The height for the horizontal timeline header details cells. The details cells are present only in 'timelineWeek' view.

      --smart-scheduler-timeline-header-horizontal-group-sizevar()

      Default value

      "var(--smart-scheduler-timeline-header-horizontal-cells-size)"

      The height for the horizontal timeline header group cells.

      --smart-scheduler-timeline-header-vertical-cells-sizevar()

      Default value

      "100px"

      The width of the vertical timeline header cells.

      --smart-scheduler-timeline-header-vertical-cells-sizevar()

      Default value

      "100px"

      The width of the vertical timeline header cells.

      --smart-scheduler-timeline-header-vertical-label-paddingvar()

      Default value

      "initial"

      The padding of the vertical timeline header cells.

      --smart-scheduler-timeline-header-vertical-details-sizevar()

      Default value

      "var(--smart-scheduler-timeline-header-vertical-cells-size)"

      The height for the vertical timeline header details cells. The details cells are present only in 'timelineWeek' view.

      --smart-scheduler-timeline-header-vertical-group-sizevar()

      Default value

      "var(--smart-scheduler-timeline-header-vertical-cells-size)"

      The height for the vertical timeline header group cells.

      --smart-scheduler-timeline-header-all-day-cells-sizevar()

      Default value

      "75px"

      The height of the AllDay cells located inside the horizontal timeline header.

      --smart-scheduler-timeline-group-separator-backgroundvar()

      Default value

      "var(--smart-outline)"

      The background color of the group separators.

      --smart-scheduler-timeline-group-separator-sizevar()

      Default value

      "var(--smart-border-width)"

      The size of the group separators.

      --smart-scheduler-timeline-group-white-spacevar()

      Default value

      "nowrap"

      The white space property for the timeline header group cells. By default group cell labels do not wrap.

      --smart-scheduler-timeline-group-header-offsetvar()

      Default value

      "calc(-50% - var(--smart-scheduler-timeline-header-cell-padding))"

      The offset for the timeline header group cells. This property is applied when groupByDate is set.

      --smart-scheduler-current-time-indicator-backgroundvar()

      Default value

      "var(--smart-primary)"

      The background color of the current time indicator.

      --smart-scheduler-current-time-indicator-sizevar()

      Default value

      "1px"

      The size of the current time indicator.

      --smart-scheduler-current-time-indicator-header-sizevar()

      Default value

      "2px"

      The size of the current time indicator in the timeline header cells.

      --smart-scheduler-current-time-indicator-arrow-sizevar()

      Default value

      "7px"

      The size of the current time indicator arrow.

      --smart-scheduler-shader-backgroundvar()

      Default value

      "rgba(var(--smart-border-rgb), .5)"

      The backgorund color for the current time shader.

      --smart-scheduler-view-line-sizevar()

      Default value

      "var(--smart-border-width)"

      The size of the horizontal/vertical cell lines.

      --smart-scheduler-view-horizontal-line-colorvar()

      Default value

      "var(--smart-border)"

      The color of the horizontal timeline cell lines.

      --smart-scheduler-view-vertical-line-colorvar()

      Default value

      "var(--smart-border)"

      The color of the vertical timeline cell lines.

      --smart-scheduler-day-week-view-vertical-line-sizevar()

      Default value

      "var(--smart-scheduler-view-line-size)"

      The size of the vertical timeline cell lines only for 'day' and 'week' views.

      --smart-scheduler-day-week-view-vertical-line-colorvar()

      Default value

      "var(--smart-border)"

      The color of the vertical timeline cell lines only for 'day' and 'week' views.

      --smart-scheduler-day-week-view-hour-sizevar()

      Default value

      "var(--smart-scheduler-view-line-size)"

      The size of the horizontal timeline cell lines that represent the hours only for 'day' and 'week' views.

      --smart-scheduler-day-week-view-hour-colorvar()

      Default value

      "var(--smart-border)"

      The color of the horizontal timeline cell lines that represent the hours only for 'day' and 'week' views.

      --smart-scheduler-time-ruler-tick-sizevar()

      Default value

      "10px"

      The size of the tick marks for the hours(horizontal timeline lines) in 'day' and 'week' views.

      --smart-scheduler-event-background-rgbvar()

      Default value

      "52, 121, 186"

      The rgb value for the background color of the event elements.

      --smart-scheduler-event-backgroundvar()

      Default value

      "rgba(var(--smart-scheduler-event-background-rgb), 1)"

      The background color for the event elements.

      --smart-scheduler-event-colorvar()

      Default value

      "var(--smart-primary-color)"

      The color for the event elements.

      --smart-scheduler-event-focusvar()

      Default value

      "rgba(var(--smart-scheduler-event-background-rgb), .9)"

      The background color for the event elements when focused.

      --smart-scheduler-event-color-focusvar()

      Default value

      "var(--smart-scheduler-event-color)"

      The color for the event elements when focused.

      --smart-scheduler-event-hovervar()

      Default value

      "rgba(var(--smart-scheduler-event-background-rgb), .8)"

      The background color for the event elements when hovered.

      --smart-scheduler-event-color-hovervar()

      Default value

      "var(--smart-scheduler-event-color)"

      The color for the event elements when hovered.

      --smart-scheduler-event-padding-agendavar()

      Default value

      "5px"

      The padding for the event elements when is 'agenda'.

      --smart-scheduler-event-padding-basicvar()

      Default value

      "2px"

      The padding for the event elements when viewType is 'day', 'week' or 'month' (basic views).

      --smart-scheduler-event-padding-timelinevar()

      Default value

      "2px"

      The padding for the event elements when viewType is 'timelineDay', 'timelineWeek', 'timelineMonth' (timeline views).

      --smart-scheduler-event-padding-all-dayvar()

      Default value

      "2px"

      The padding for the allDay event elements located in the All day container.

      --smart-scheduler-event-content-paddingvar()

      Default value

      "5px"

      The padding for the content of the event elements.

      --smart-scheduler-event-label-font-sizevar()

      Default value

      "var(--smart-font-size)"

      The font size for the label of the event element.

      --smart-scheduler-event-time-font-sizevar()

      Default value

      "calc(var(--smart-font-size) - 3px)"

      The font size for the time label of the event element.

      --smart-scheduler-event-time-font-size-agendavar()

      Default value

      "var(--smart-font-size)"

      The font size for the time label of the event element when viewType is set to 'agenda'.

      --smart-scheduler-event-time-font-weight-agendavar()

      Default value

      "600"

      The font weight for the time label of the event element when viewType is set to 'agenda'.

      --smart-scheduler-event-time-opacity-agendavar()

      Default value

      "1"

      The opacity for the time label of the event element when viewType is set to 'agenda'.

      --smart-scheduler-event-time-opacityvar()

      Default value

      "0.7"

      The opacity for the time label of the event element.

      --smart-scheduler-event-icon-sizevar()

      Default value

      "30px"

      The size of the repeating/exception icon that is displayed inside the event element.

      --smart-scheduler-event-sizevar()

      Default value

      "30px"

      The size of the event element. In 'day' and 'week' views the events will always fit the cells, so this variable determines their expected size which controls number of events that can fit in. The size of the events cannot be controlled in 'agenda' view.

      --smart-scheduler-event-size-basicvar()

      Default value

      "var(--smart-scheduler-event-size)"

      The size of the event element specifically for basic views - 'day', 'week', 'month'.

      --smart-scheduler-event-size-timelinevar()

      Default value

      "60px"

      The size of the event element specifically for timeline views - 'timelineDay', 'timelineWeek', 'timelineMonth'.

      --smart-scheduler-event-collector-sizevar()

      Default value

      "24px"

      The size of the event collectors that appear when there's not enough space for all events in a cell to fit in.

      --smart-scheduler-event-collector-mobile-sizevar()

      Default value

      "28px"

      The size of the event collectors that appear when there's not enough space for all events in a cell to fit in on Mobile devices.

      --smart-scheduler-event-collector-backgroundvar()

      Default value

      "rgba(var(--smart-primary-rgb), 1)"

      The background color of the event collectors that appear when there's not enough space for all events in a cell to fit in.

      --smart-scheduler-event-collector-colorvar()

      Default value

      "var(--smart-primary-color)"

      The color of the event collectors that appear when there's not enough space for all events in a cell to fit in.

      --smart-scheduler-event-collector-focusvar()

      Default value

      "rgba(var(--smart-primary-rgb), .9)"

      The background color of the focused event collectors that appear when there's not enough space for all events in a cell to fit in.

      --smart-scheduler-event-collector-color-focusvar()

      Default value

      "var(--smart-scheduler-event-collector-color)"

      The color of the focused event collectors that appear when there's not enough space for all events in a cell to fit in.

      --smart-scheduler-event-collector-hovervar()

      Default value

      "rgba(var(--smart-primary-rgb), .8)"

      The background color of the hovered event collectors that appear when there's not enough space for all events in a cell to fit in.

      --smart-scheduler-event-collector-color-hovervar()

      Default value

      "var(--smart-scheduler-event-collector-color)"

      The color of the hovered event collectors that appear when there's not enough space for all events in a cell to fit in.

      --smart-scheduler-month-view-number-sizevar()

      Default value

      "24px"

      The size of the day number inside the timeline cells that appears when viewType is set to 'month'.

      --smart-scheduler-status-sizevar()

      Default value

      "7px"

      The size of the status strip that appears when an even element has a status assigned.

      --smart-scheduler-status-paddingvar()

      Default value

      "5px"

      The padding between the status strip and event element content.

      --smart-scheduler-status-backgroundvar()

      Default value

      "transparent"

      The background color for the event element status strip.

      --smart-scheduler-status-free-backgroundvar()

      Default value

      "white"

      The background color for the event element with 'free' status strip.

      --smart-scheduler-status-tentative-backgroundvar()

      Default value

      "0 -244rem / 5rem 5rem linear-gradient(45deg, #fd7e14 25%, rgba(0,0,0,.2) 25%, rgba(0,0,0,.2) 50%, #fd7e14 50%, #fd7e14 75%, rgba(0,0,0,.2) 75%, rgba(0,0,0,.2))"

      The background color for the event element with 'tentative' status strip.

      --smart-scheduler-status-busy-backgroundvar()

      Default value

      "#dc3545"

      The background color for the event element with 'busy' status strip.

      --smart-scheduler-status-out-of-office-backgroundvar()

      Default value

      "#00a9e6"

      The background color for the event element with 'busy' status strip.

      --smart-scheduler-cell-feedback-backgroundvar()

      Default value

      "transparent"

      The background color for the cell feedback when dragging an event. The feedback indicates the drop cell target.

      --smart-scheduler-event-resize-indicator-sizevar()

      Default value

      "var(--smart-gantt-chart-timeline-task-resize-indicator-width)"

      The size of the event element resize indicators.

      --smart-scheduler-event-resize-indicator-colorvar()

      Default value

      "var(--smart-gantt-chart-timeline-task-resize-indicator-color)"

      The background color of the event element resize indicators.

      --smart-scheduler-event-resize-indicator-border-colorvar()

      Default value

      "var(--smart-gantt-chart-timeline-task-resize-indicator-border-color)"

      The border color of the event element resize indicators.

      --smart-scheduler-restricted-backgroundvar()

      Default value

      "0 -245rem / 12px 12px linear-gradient(135deg, rgba(255, 0, 0, .15) 25%, transparent 25%, transparent 50%, rgba(255, 0, 0, .15) 50%, rgba(255, 0, 0, .15) 75%, transparent 75%, transparent)"

      The background color for restricted cells.

      --smart-scheduler-event-item-sizevar()

      Default value

      "50px"

      The size(height) of the event list items inside the event list that appears when clicking on an event/collector element.

      --smart-scheduler-event-button-sizevar()

      Default value

      "30px"

      The size(width) of the event list delete button inside the event list that appears when clicking on an event/collector element.

      --smart-scheduler-event-border-radiusvar()

      Default value

      "initial"

      The border radius of the event elements.

      --smart-scheduler-event-collector-border-radiusvar()

      Default value

      "20px"

      The border radius of the event collector elements.

      --smart-scheduler-context-menu-max-heightvar()

      Default value

      "calc(3 * var(--smart-scheduler-event-item-size))"

      The max height of the context menu.

      --smart-scheduler-context-menu-max-widthvar()

      Default value

      "300px"

      The max width of the context menu.

      --smart-scheduler-window-header-heightvar()

      Default value

      "var(--smart-gantt-chart-popup-window-header-height)"

      The header height of the window event editor.

      --smart-scheduler-window-footer-heightvar()

      Default value

      "var(--smart-gantt-chart-popup-window-footer-height)"

      The footer height of the window event editor.

      --smart-scheduler-event-label-font-weightvar()

      Default value

      "300"

      The font weight of the event element label.

      --smart-scheduler-event-time-font-weightvar()

      Default value

      "300"

      The font weight of the event element label.

      --smart-scheduler-event-item-label-font-weightvar()

      Default value

      "600"

      The font weight of the event item labels that are inside the event list that appears when clicked on an event/collector element.

      --smart-scheduler-toast-default-widthvar()

      Default value

      "400px"

      The default width for the Toast element that is used to display notificaitons.

      --smart-scheduler-toast-default-heightvar()

      Default value

      "50px"

      The default height for the Toast element that is used to display notificaitons.

      --smart-scheduler-shortcut-sizevar()

      Default value

      "28px"

      The width of the view item shortcuts that are displayed inside the view menu.

      --smart-scheduler-legend-item-backgroundvar()

      Default value

      "var(--smart-scheduler-event-background)"

      The default background color for the legend items.