Scheduler — Smart UI JavaScript API

Scheduler — Smart UI JavaScript API

On this page + Quick start

Quick start · JavaScript

Complete starter source per framework. Run the scaffold/install command first, then replace the listed files with the full code below.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>Scheduler - JavaScript Quick Start</title>
  <link rel="stylesheet" href="./node_modules/smart-webcomponents/source/styles/smart.default.css" />
</head>
<body>
  <smart-scheduler id="demo-scheduler"></smart-scheduler>

  <script type="module">
    import './node_modules/smart-webcomponents/source/modules/smart.scheduler.js';

    const el = document.getElementById('demo-scheduler');
    if (el) {

      el.view = 'week';
      el.views = ['day', 'week', 'month', 'agenda'];
      el.hourStart = 8;
      el.dataSource = [{ label: 'Planning', dateStart: new Date(2026, 0, 12, 9, 0), dateEnd: new Date(2026, 0, 12, 10, 30) }, { label: 'Review', dateStart: new Date(2026, 0, 13, 14, 0), dateEnd: new Date(2026, 0, 13, 15, 0) }];

      el.addEventListener('change', (event) => console.log('change:', event.detail || event));
    }
  </script>
</body>
</html>
For AI tooling

Developer Quick Reference

Component: Scheduler   Framework: JavaScript   Selector: smart-scheduler

API counts: 107 properties, 49 methods, 36 events

Common properties: autoScrollStep, autoHeightAllDayCells, available, colorScheme, currentTime, currentTimeIndicator

Common methods: addEvent(), addView(), beginUpdate(), createEvent(), endUpdate(), getViewDates()

Common events: beginUpdate, endUpdate, change, itemChange, itemChanging, itemClick

Module hint: smart-webcomponents/source/modules/smart.scheduler.js

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

Class

Scheduler

Scheduler

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

Selector

smart-scheduler

Quick picks

changecloseWindowdataSourcedateCurrentdisableddragEnditemClickopenWindowrefreshview

Properties

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.
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.
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.
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.
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:
    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.
    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.
    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.
    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'.
    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.
    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.
    DdisableAutoScrollPrevents the timeline from automatically scrolling when you drag or resize an event, ensuring that the visible timeline remains stationary during these interactions.
    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.
    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.
    DdisableDateMenuPrevents the date selection menu from appearing, disabling the user's ability to change the current Scheduler date through the interface.
    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.
    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.
    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.
    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).
    DdisableWindowEditorPrevents the event window editor from opening, effectively disabling the ability for users to view or modify event details through the window 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.
    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.
    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'.
    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.
    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.
    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.
    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.
    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.
    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.
    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.
    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.
    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.
    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.
    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.
    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).
    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.
    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.
    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.
    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.
    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."
    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.
    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.
    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.
    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.
    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.
    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.
    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.
    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.
    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.
    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.
    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.
    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.
    UunlockKeySets or retrieves the 'unlockKey', a unique value required to unlock and access the product’s full features or functionality.
    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.
    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.
      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.
      WweekdayFormatSpecifies how the names of the weekdays are displayed within the element (e.g., full names, short names, or initials).
      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.
      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.
      dataExport.columns
      dataExport.fileName
      dataExport.header
      dataExport.pageOrientation
      dataExport.style
      dataSource.allDay
      dataSource.backgroundColor
      dataSource.class
      dataSource.color
      dataSource.dateEnd
      dataSource.dateStart
      dataSource.description
      dataSource.disableDrag
      dataSource.disableResize
      dataSource.id
      dataSource.label
      dataSource.notifications
      dataSource.repeat
      dataSource.exceptions
      dataSource.repeatEnd
      dataSource.repeatFreq
      dataSource.repeatInterval
      dataSource.repeatOn
      dataSource.notifications.iconType
      dataSource.notifications.interval
      dataSource.notifications.message
      dataSource.notifications.time
      dataSource.notifications.type
      dataSource.repeat.resourceId
      dataSource.repeat.status
      events.allDay
      events.backgroundColor
      events.class
      events.color
      events.dateEnd
      events.dateStart
      events.description
      events.disableDrag
      events.disableResize
      events.id
      events.label
      events.notifications
      events.repeat
      events.exceptions
      events.repeatEnd
      events.repeatFreq
      events.repeatInterval
      events.repeatOn
      events.notifications.iconType
      events.notifications.interval
      events.notifications.message
      events.notifications.time
      events.notifications.type
      resources.dataSource
      resources.label
      resources.sortBy
      resources.sortFunction
      resources.sortOrder
      resources.value
      statuses.label
      statuses.value

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

      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.
      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.
      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.
      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.
      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.
      CcloseEventTooltipCloses and hides the event tooltip (also known as the event menu), removing it from view and preventing further interactions until it is reopened.
      CcloseNotificationsDismisses and removes all currently active notifications from view, ensuring that no notification messages remain visible to the user.
      CcloseWindowCloses the currently open popup window, removing it from view and returning focus to the main application interface.
      CcontainsEventDetermines if a specific event is present within the Scheduler's collection of scheduled events. Returns true if the event exists; otherwise, returns false.
      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.
      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.
      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.
      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.
      GgetCellDateRangeReturns the start and end dates (dateStart/dateEnd) for a specific timeline cell, representing the time interval covered by that cell on the timeline.
      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.
      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.
      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.
      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.
      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.
      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.
      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.
      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.
      IisDateRestrictedDetermines if the specified date is restricted. Returns true if the date falls within the set of restricted dates; 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.
      IisHourRestrictedDetermines whether the specified hour is restricted. Returns true if the hour falls within a restricted period; otherwise, returns false.
      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.
      NnavigateToDateTransitions the Scheduler interface to display and focus on a specific date selected by the user.
      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.
      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.
      OopenEventTooltipDisplays the tooltip (event menu) associated with a specific event, providing additional information and context about the selected event when triggered.
      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.
      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.
      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.
      RredoRevert the changes made to the upcoming event modification, restoring the event to its previous state.
      RrefreshRefreshes the Scheduler by recalculating and updating the scrollbars to ensure proper alignment and visibility based on the current content and layout changes.
      RremoveEventDeletes a specified event from the system, permanently removing its associated data and making it no longer accessible or visible to users.
      RremoveEventExceptionRemoves a specified exception instance from a recurring event series, thereby restoring the affected occurrence to match the original recurring pattern.
      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.
      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.
      SscrollToEventSmoothly scrolls the Scheduler component to bring the specified event into view, ensuring it is visible to the user in the current viewport.
      SsetLocaleSets the locale of a component.
      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.
      UundoRevert the most recent changes made to the event, restoring it to its previous state.
      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.
      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.

      Properties

      autoHeightAllDayCellsControls 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.boolean

      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

      Examples

      Markup and runtime examples for autoHeightAllDayCells:

      HTML attribute:

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

      Vanilla JS — prefer #id if multiple widgets exist on the page:

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

      Read the current value:

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

      autoScrollStepSpecifies 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.number

      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

      Examples

      Markup and runtime examples for autoScrollStep:

      HTML:

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

      Vanilla JS — prefer #id if multiple widgets exist on the page:

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

      Read the current value:

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

      availableSpecifies 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. array

      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.

      cellTemplateEnables 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.any

      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.

      Try a demo showcasing the cellTemplate property.

      Examples

      Markup and runtime examples for cellTemplate:

      HTML:

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

      Vanilla JS — prefer #id if multiple widgets exist on the page:

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

      Read the current value:

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

      colorSchemeSpecifies 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:
        string[]

        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.

        Examples

        Markup and runtime examples for colorScheme:

        HTML:

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

        Vanilla JS — prefer #id if multiple widgets exist on the page:

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

        Read the current value:

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

        contextMenuClipboardActionsSpecifies 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.boolean

        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

        Examples

        Markup and runtime examples for contextMenuClipboardActions:

        HTML attribute:

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

        Vanilla JS — prefer #id if multiple widgets exist on the page:

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

        Read the current value:

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

        contextMenuDataSourceSpecifies 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.[]

        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.

        Examples

        Markup and runtime examples for contextMenuDataSource:

        HTML:

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

        Vanilla JS — prefer #id if multiple widgets exist on the page:

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

        Read the current value:

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

        currentTimeSpecifies 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.string | 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()

        Examples

        Markup and runtime examples for currentTime:

        HTML:

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

        Vanilla JS — prefer #id if multiple widgets exist on the page:

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

        Read the current value:

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

        currentTimeIndicatorEnables 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.boolean

        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
        Try a demo showcasing the currentTimeIndicator property.

        Examples

        Markup and runtime examples for currentTimeIndicator:

        HTML attribute:

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

        Vanilla JS — prefer #id if multiple widgets exist on the page:

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

        Read the current value:

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

        currentTimeIndicatorIntervalSpecifies 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.number

        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

        Examples

        Markup and runtime examples for currentTimeIndicatorInterval:

        HTML:

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

        Vanilla JS — prefer #id if multiple widgets exist on the page:

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

        Read the current value:

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

        dataExportConfigures 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:
           object

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

          Properties

          columnsSpecifies 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.
          fileNameSpecifies the name that will be assigned to the exported file when it is downloaded or saved.
          headerDetermines 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.
          pageOrientationSpecifies 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.
          styleSpecifies 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.
          Try a demo showcasing the dataExport property.

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

          Default value

          ""

          Back to root property: dataExport

          Try a demo showcasing the columns property.

          Read the nested value:

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

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

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

          Default value

          "smartScheduler"

          Back to root property: dataExport

          Read the nested value:

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

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

          Default value

          true

          Back to root property: dataExport

          Try a demo showcasing the header property.

          Read the nested value:

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

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

          Default value

          "portrait"

          Back to root property: dataExport

          Read the nested value:

          const el = document.querySelector('smart-scheduler');
const pageOrientation = el.dataExport.pageOrientation;

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

          Back to root property: dataExport

          Try a demo showcasing the style property.

          Read the nested value:

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

          dataSourceSpecifies 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:
            {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

            allDayDetermines whether an event is an all day event ot nor. All day events ignore time.
            backgroundColorSets a background color for the event. The background color should be in HEX format.
            classEvent CSS class.
            colorSets a color for the event. The color should be in HEX format.
            dateEndEvent end date.
            dateStartEvent start date.
            descriptionEvent Description.
            disableDragDetermines whether dragging is disabled for the event.
            disableResizeDetermines whether resizing is disabled for the event.
            idEvent unique id.
            labelEvent Label.
            notificationsEvent notifications. Click for more details. 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'.
            repeatEvent Repeat Object. Click for more details. 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.
            exceptionsEvent 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. Click for more details. Property object's options:
              repeatEndDetermines 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.
              repeatFreqDetermines the repeating frequency. The event can repeat hourly, daily, weekly, monthly or yearly.
              repeatIntervalDetermines the repeating interval.
              repeatOnDetermines 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 }).
              Try a demo showcasing the dataSource property.

              Full working example

              Minimal setup for dataSource with the data and bindings you usually use together on this component.

              JavaScript — Scheduler with dataSource:

              // Load Smart UI Scheduler modules and styles.
const dataSource = [
	{ label: 'Stand-up', id: 'e1', dateStart: '2026-04-07T09:00:00', dateEnd: '2026-04-07T09:30:00' },
	{ label: 'Planning', id: 'e2', dateStart: '2026-04-07T13:00:00', dateEnd: '2026-04-07T14:30:00' }
];

const scheduler = new Smart.Scheduler('#myScheduler', {
	dateCurrent: new Date('2026-04-07T00:00:00'),
	dataSource
});

              allDayDetermines whether an event is an all day event ot nor. All day events ignore time.boolean?

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

              Default value

              false

              Back to root property: dataSource

              Try a demo showcasing the allDay property.

              Read the nested value:

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

              backgroundColorSets a background color for the event. The background color should be in HEX format.string?

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

              Default value

              false

              Back to root property: dataSource

              Try a demo showcasing the backgroundColor property.

              Read the nested value:

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

              classEvent CSS class.string

              Event CSS class.

              Default value

              ""

              Back to root property: dataSource

              Try a demo showcasing the class property.

              Read the nested value:

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

              colorSets a color for the event. The color should be in HEX format.string?

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

              Default value

              false

              Back to root property: dataSource

              Try a demo showcasing the color property.

              Read the nested value:

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

              dateEndEvent end date.string | Date

              Event end date.

              Default value

              ""

              Back to root property: dataSource

              Try a demo showcasing the dateEnd property.

              Read the nested value:

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

              dateStartEvent start date.string | Date

              Event start date.

              Default value

              ""

              Back to root property: dataSource

              Try a demo showcasing the dateStart property.

              Read the nested value:

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

              descriptionEvent Description.string?

              Event Description.

              Default value

              ""

              Back to root property: dataSource

              Try a demo showcasing the description property.

              Read the nested value:

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

              disableDragDetermines whether dragging is disabled for the event.boolean

              Determines whether dragging is disabled for the event.

              Default value

              false

              Back to root property: dataSource

              Try a demo showcasing the disableDrag property.

              Read the nested value:

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

              disableResizeDetermines whether resizing is disabled for the event.boolean

              Determines whether resizing is disabled for the event.

              Default value

              false

              Back to root property: dataSource

              Try a demo showcasing the disableResize property.

              Read the nested value:

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

              idEvent unique id.string?

              Event unique id.

              Default value

              ""

              Back to root property: dataSource

              Try a demo showcasing the id property.

              Read the nested value:

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

              labelEvent Label.string?

              Event Label.

              Default value

              ""

              Back to root property: dataSource

              Try a demo showcasing the label property.

              Read the nested value:

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

              notificationsEvent notifications. Click for more details. Property object's options:
                {interval: number, type?: string, time: number[], message?: string | undefined, iconType?: string}[]

                Event notifications.

                Properties

                iconTypeDetermines the type of icon that will be displayed inside the notification. By default the iconType is 'info'.
                intervalThe number of days/weeks when the notification should appear before the event starts.
                messageThe message that will appear inside the notificaiton. If no message is set, then the label of the event is displayed.
                timeAn 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]
                typeThe type of the interval for the notification.

                Back to root property: dataSource

                Try a demo showcasing the notifications property.

                Read the nested value:

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

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

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

                Default value

                ""

                Back to root property: dataSource

                Try a demo showcasing the iconType property.

                Read the nested value:

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

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

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

                Default value

                0

                Back to root property: dataSource

                Try a demo showcasing the interval property.

                Read the nested value:

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

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

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

                Default value

                ""

                Back to root property: dataSource

                Try a demo showcasing the message property.

                Read the nested value:

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

                timeAn 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] 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]

                Back to root property: dataSource

                Try a demo showcasing the time property.

                Read the nested value:

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

                typeThe type of the interval for the notification."days" | "weeks"

                The type of the interval for the notification.

                Default value

                "days"

                Back to root property: dataSource

                Try a demo showcasing the type property.

                Read the nested value:

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

                repeatEvent Repeat Object. Click for more details. Property object's options:
                   { 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

                  repeatFreqDetermines the repeating frequency. The event can repeat hourly, daily, weekly, monthly or yearly.
                  repeatIntervalDetermines the repeating interval.
                  repeatOnDetermines 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 }).
                  repeatEndDetermines 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.
                  exceptionsEvent 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. Click for more details. Property object's options:

                    Back to root property: dataSource

                    Try a demo showcasing the repeat property.

                    Read the nested value:

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

                    exceptionsEvent 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. Click for more details. Property object's options:
                      { 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

                      Back to root property: dataSource

                      Try a demo showcasing the exceptions property.

                      Read the nested value:

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

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

                      Default value

                      0

                      Back to root property: dataSource

                      Try a demo showcasing the repeatEnd property.

                      Read the nested value:

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

                      repeatFreqDetermines the repeating frequency. The event can repeat hourly, daily, weekly, monthly or yearly."hourly" | "daily" | "weekly" | "monthly" | "yearly"

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

                      Default value

                      "hourly"

                      Back to root property: dataSource

                      Try a demo showcasing the repeatFreq property.

                      Read the nested value:

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

                      repeatIntervalDetermines the repeating interval.number

                      Determines the repeating interval.

                      Default value

                      1

                      Back to root property: dataSource

                      Try a demo showcasing the repeatInterval property.

                      Read the nested value:

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

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

                      Default value

                      ""

                      Back to root property: dataSource

                      Try a demo showcasing the repeatOn property.

                      Read the nested value:

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

                      resourceIdEvent resource unique id.string?

                      Event resource unique id.

                      Default value

                      ""

                      Back to root property: dataSource

                      Read the nested value:

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

                      statusSets the appointment status.string?

                      Sets the appointment status.

                      Default value

                      false

                      Back to root property: dataSource

                      Try a demo showcasing the status property.

                      Read the nested value:

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

                      dateCurrentSpecifies 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.string | 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()
                      Try a demo showcasing the dateCurrent property.

                      Full working example

                      Minimal setup for dateCurrent with the data and bindings you usually use together on this component.

                      JavaScript — Scheduler with dateCurrent:

                      // Load Smart UI Scheduler modules and styles.
const dataSource = [
	{ label: 'Stand-up', id: 'e1', dateStart: '2026-04-07T09:00:00', dateEnd: '2026-04-07T09:30:00' },
	{ label: 'Planning', id: 'e2', dateStart: '2026-04-07T13:00:00', dateEnd: '2026-04-07T14:30:00' }
];

const scheduler = new Smart.Scheduler('#myScheduler', {
	dateCurrent: new Date('2026-04-07T00:00:00'),
	dataSource
});

                      dateSelectorFormatFunctionA 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.any

                      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.

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

                      Examples

                      Markup and runtime examples for dayFormat:

                      HTML:

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

                      Vanilla JS — prefer #id if multiple widgets exist on the page:

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

                      Read the current value:

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

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

                      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

                      Examples

                      Markup and runtime examples for disableAutoScroll:

                      HTML attribute:

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

                      Vanilla JS — prefer #id if multiple widgets exist on the page:

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

                      Read the current value:

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

                      disableContextMenuPrevents 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.boolean

                      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.

                      Examples

                      Markup and runtime examples for disableContextMenu:

                      HTML attribute:

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

                      Vanilla JS — prefer #id if multiple widgets exist on the page:

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

                      Read the current value:

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

                      disabledDetermines 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.boolean

                      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
                      Try a demo showcasing the disabled property.

                      Examples

                      Markup and runtime examples for disabled:

                      HTML attribute:

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

                      Vanilla JS — prefer #id if multiple widgets exist on the page:

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

                      Read the current value:

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

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

                      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.

                      Examples

                      Markup and runtime examples for disableDateMenu:

                      HTML attribute:

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

                      Vanilla JS — prefer #id if multiple widgets exist on the page:

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

                      Read the current value:

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

                      disableDragPrevents 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.boolean

                      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.

                      Examples

                      Markup and runtime examples for disableDrag:

                      HTML attribute:

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

                      Vanilla JS — prefer #id if multiple widgets exist on the page:

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

                      Read the current value:

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

                      disableDropPrevents 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.boolean

                      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.

                      Examples

                      Markup and runtime examples for disableDrop:

                      HTML attribute:

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

                      Vanilla JS — prefer #id if multiple widgets exist on the page:

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

                      Read the current value:

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

                      disableEventMenuPrevents 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.boolean

                      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.

                      Examples

                      Markup and runtime examples for disableEventMenu:

                      HTML attribute:

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

                      Vanilla JS — prefer #id if multiple widgets exist on the page:

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

                      Read the current value:

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

                      disableResizePrevents 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.boolean

                      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
                      Try a demo showcasing the disableResize property.

                      Examples

                      Markup and runtime examples for disableResize:

                      HTML attribute:

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

                      Vanilla JS — prefer #id if multiple widgets exist on the page:

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

                      Read the current value:

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

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

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

                      Default value

                      false

                      Examples

                      Markup and runtime examples for disableSelection:

                      HTML attribute:

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

                      Vanilla JS — prefer #id if multiple widgets exist on the page:

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

                      Read the current value:

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

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

                      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.

                      Examples

                      Markup and runtime examples for disableViewMenu:

                      HTML attribute:

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

                      Vanilla JS — prefer #id if multiple widgets exist on the page:

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

                      Read the current value:

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

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

                      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.

                      Examples

                      Markup and runtime examples for disableWindowEditor:

                      HTML attribute:

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

                      Vanilla JS — prefer #id if multiple widgets exist on the page:

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

                      Read the current value:

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

                      dragFeedbackFormatFunctionA 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.any

                      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.

                      dragOffsetSpecifies 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. array

                      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.

                      eventCollectorTemplateAllows 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.any

                      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.

                      Examples

                      Markup and runtime examples for eventCollectorTemplate:

                      HTML:

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

                      Vanilla JS — prefer #id if multiple widgets exist on the page:

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

                      Read the current value:

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

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

                      Examples

                      Markup and runtime examples for eventRenderMode:

                      HTML:

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

                      Vanilla JS — prefer #id if multiple widgets exist on the page:

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

                      Read the current value:

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

                      eventsA 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:
                        {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

                        allDayDetermines whether an event is an all day event ot nor. All day events ignore time.
                        backgroundColorSets a background color for the event. The background color should be in HEX format.
                        classEvent CSS class.
                        colorSets a color for the event. The color should be in HEX format.
                        dateEndEvent end date.
                        dateStartEvent start date.
                        descriptionEvent Description.
                        disableDragDetermines whether dragging is disabled for the event.
                        disableResizeDetermines whether resizing is disabled for the event.
                        idEvent unique id.
                        labelEvent Label.
                        notificationsEvent notifications. Click for more details. 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'.
                        repeatEvent Repeat Object. Click for more details. 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.
                        exceptionsEvent 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. Click for more details. Property object's options:
                          repeatEndDetermines 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.
                          repeatFreqDetermines the repeating frequency. The event can repeat hourly, daily, weekly, monthly or yearly.
                          repeatIntervalDetermines the repeating interval.
                          repeatOnDetermines 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 }).
                          Try a demo showcasing the events property.

                          allDayDetermines whether an event is an all day event ot nor. All day events ignore time.boolean | undefined

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

                          Default value

                          false

                          Back to root property: events

                          Try a demo showcasing the allDay property.

                          Read the nested value:

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

                          backgroundColorSets a background color for the event. The background color should be in HEX format.string | undefined

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

                          Default value

                          false

                          Back to root property: events

                          Try a demo showcasing the backgroundColor property.

                          Read the nested value:

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

                          classEvent CSS class.string

                          Event CSS class.

                          Default value

                          ""

                          Back to root property: events

                          Try a demo showcasing the class property.

                          Read the nested value:

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

                          colorSets a color for the event. The color should be in HEX format.string | undefined

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

                          Default value

                          false

                          Back to root property: events

                          Try a demo showcasing the color property.

                          Read the nested value:

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

                          dateEndEvent end date.string | Date

                          Event end date.

                          Default value

                          ""

                          Back to root property: events

                          Try a demo showcasing the dateEnd property.

                          Read the nested value:

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

                          dateStartEvent start date.string | Date

                          Event start date.

                          Default value

                          ""

                          Back to root property: events

                          Try a demo showcasing the dateStart property.

                          Read the nested value:

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

                          descriptionEvent Description.string | undefined

                          Event Description.

                          Default value

                          ""

                          Back to root property: events

                          Try a demo showcasing the description property.

                          Read the nested value:

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

                          disableDragDetermines whether dragging is disabled for the event.boolean

                          Determines whether dragging is disabled for the event.

                          Default value

                          false

                          Back to root property: events

                          Try a demo showcasing the disableDrag property.

                          Read the nested value:

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

                          disableResizeDetermines whether resizing is disabled for the event.boolean

                          Determines whether resizing is disabled for the event.

                          Default value

                          false

                          Back to root property: events

                          Try a demo showcasing the disableResize property.

                          Read the nested value:

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

                          idEvent unique id.string | undefined

                          Event unique id.

                          Default value

                          ""

                          Back to root property: events

                          Try a demo showcasing the id property.

                          Read the nested value:

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

                          labelEvent Label.string | undefined

                          Event Label.

                          Default value

                          ""

                          Back to root property: events

                          Try a demo showcasing the label property.

                          Read the nested value:

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

                          notificationsEvent notifications. Click for more details. Property object's options:
                            {interval: number, type?: string, time: number[], message?: string | undefined, iconType?: string}[]

                            Event notifications.

                            Properties

                            iconTypeDetermines the type of icon that will be displayed inside the notification. By default the iconType is 'info'.
                            intervalThe number of days/weeks when the notification should appear before the event starts.
                            messageThe message that will appear inside the notificaiton. If no message is set, then the label of the event is displayed.
                            timeAn 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]
                            typeThe type of the interval for the notification.

                            Back to root property: events

                            Try a demo showcasing the notifications property.

                            Read the nested value:

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

                            iconTypeDetermines the type of icon that will be displayed inside the notification. By default the iconType is 'info'.string | undefined

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

                            Default value

                            ""

                            Back to root property: events

                            Try a demo showcasing the iconType property.

                            Read the nested value:

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

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

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

                            Default value

                            0

                            Back to root property: events

                            Try a demo showcasing the interval property.

                            Read the nested value:

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

                            messageThe message that will appear inside the notificaiton. If no message is set, then the label of the event is displayed.string | undefined

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

                            Default value

                            ""

                            Back to root property: events

                            Try a demo showcasing the message property.

                            Read the nested value:

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

                            timeAn 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] 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]

                            Back to root property: events

                            Try a demo showcasing the time property.

                            Read the nested value:

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

                            typeThe type of the interval for the notification."days" | "weeks"

                            The type of the interval for the notification.

                            Default value

                            "days"

                            Back to root property: events

                            Try a demo showcasing the type property.

                            Read the nested value:

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

                            repeatEvent Repeat Object. Click for more details. Property object's options:
                               { 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

                              repeatFreqDetermines the repeating frequency. The event can repeat hourly, daily, weekly, monthly or yearly.
                              repeatIntervalDetermines the repeating interval.
                              repeatOnDetermines 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 }).
                              repeatEndDetermines 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.
                              exceptionsEvent 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. Click for more details. Property object's options:

                                Back to root property: events

                                Try a demo showcasing the repeat property.

                                Read the nested value:

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

                                exceptionsEvent 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. Click for more details. Property object's options:
                                  { 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

                                  Back to root property: events

                                  Try a demo showcasing the exceptions property.

                                  Read the nested value:

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

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

                                  Default value

                                  0

                                  Back to root property: events

                                  Try a demo showcasing the repeatEnd property.

                                  Read the nested value:

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

                                  repeatFreqDetermines the repeating frequency. The event can repeat hourly, daily, weekly, monthly or yearly."hourly" | "daily" | "weekly" | "monthly" | "yearly"

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

                                  Default value

                                  "hourly"

                                  Back to root property: events

                                  Try a demo showcasing the repeatFreq property.

                                  Read the nested value:

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

                                  repeatIntervalDetermines the repeating interval.number

                                  Determines the repeating interval.

                                  Default value

                                  1

                                  Back to root property: events

                                  Try a demo showcasing the repeatInterval property.

                                  Read the nested value:

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

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

                                  Default value

                                  ""

                                  Back to root property: events

                                  Try a demo showcasing the repeatOn property.

                                  Read the nested value:

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

                                  eventTemplateEnables 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.any

                                  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.

                                  Examples

                                  Markup and runtime examples for eventTemplate:

                                  HTML:

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

                                  Vanilla JS — prefer #id if multiple widgets exist on the page:

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

                                  Read the current value:

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

                                  eventTooltipTemplateEnables 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.any



                                  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.

                                  Examples

                                  Markup and runtime examples for eventTooltipTemplate:

                                  HTML:

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

                                  Vanilla JS — prefer #id if multiple widgets exist on the page:

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

                                  Read the current value:

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

                                  filterSpecifies 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. { 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.

                                  Try a demo showcasing the filter property.

                                  filterableSpecifies 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. array

                                  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.

                                  Try a demo showcasing the filterable property.

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

                                  firstDayOfWeekSpecifies 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.number

                                  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
                                  Try a demo showcasing the firstDayOfWeek property.

                                  Examples

                                  Markup and runtime examples for firstDayOfWeek:

                                  HTML:

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

                                  Vanilla JS — prefer #id if multiple widgets exist on the page:

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

                                  Read the current value:

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

                                  footerTemplateEnables 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.any

                                  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.

                                  Try a demo showcasing the footerTemplate property.

                                  Examples

                                  Markup and runtime examples for footerTemplate:

                                  HTML:

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

                                  Vanilla JS — prefer #id if multiple widgets exist on the page:

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

                                  Read the current value:

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

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

                                  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
                                  Try a demo showcasing the groupByDate property.

                                  Full working example

                                  Minimal setup for groupByDate with the data and bindings you usually use together on this component.

                                  JavaScript — Scheduler with groupByDate:

                                  // Load Smart UI Scheduler modules and styles.
const dataSource = [
	{ label: 'Stand-up', id: 'e1', dateStart: '2026-04-07T09:00:00', dateEnd: '2026-04-07T09:30:00' },
	{ label: 'Planning', id: 'e2', dateStart: '2026-04-07T13:00:00', dateEnd: '2026-04-07T14:30:00' }
];

const scheduler = new Smart.Scheduler('#myScheduler', {
	dateCurrent: new Date('2026-04-07T00:00:00'),
	dataSource,
	groupByDate: true
});

                                  groupOrientationSpecifies the direction or axis along which items are grouped, such as horizontal or vertical, affecting how elements are arranged and displayed within the interface."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.

                                  Examples

                                  Markup and runtime examples for groupOrientation:

                                  HTML:

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

                                  Vanilla JS — prefer #id if multiple widgets exist on the page:

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

                                  Read the current value:

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

                                  groupsSpecifies 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. array

                                  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.

                                  Examples

                                  Markup and runtime examples for groups:

                                  HTML:

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

                                  Vanilla JS — prefer #id if multiple widgets exist on the page:

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

                                  Read the current value:

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

                                  groupTemplateEnhances 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.any

                                  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.

                                  Try a demo showcasing the groupTemplate property.

                                  Examples

                                  Markup and runtime examples for groupTemplate:

                                  HTML:

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

                                  Vanilla JS — prefer #id if multiple widgets exist on the page:

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

                                  Read the current value:

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

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

                                  Examples

                                  Markup and runtime examples for headerDatePosition:

                                  HTML:

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

                                  Vanilla JS — prefer #id if multiple widgets exist on the page:

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

                                  Read the current value:

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

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

                                  Examples

                                  Markup and runtime examples for headerNavigationStyle:

                                  HTML:

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

                                  Vanilla JS — prefer #id if multiple widgets exist on the page:

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

                                  Read the current value:

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

                                  headerTemplateEnables 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.any

                                  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.

                                  Try a demo showcasing the headerTemplate property.

                                  Examples

                                  Markup and runtime examples for headerTemplate:

                                  HTML:

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

                                  Vanilla JS — prefer #id if multiple widgets exist on the page:

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

                                  Read the current value:

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

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

                                  Examples

                                  Markup and runtime examples for headerViewPosition:

                                  HTML:

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

                                  Vanilla JS — prefer #id if multiple widgets exist on the page:

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

                                  Read the current value:

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

                                  hideAllDaySpecifies 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.boolean

                                  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.

                                  Examples

                                  Markup and runtime examples for hideAllDay:

                                  HTML attribute:

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

                                  Vanilla JS — prefer #id if multiple widgets exist on the page:

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

                                  Read the current value:

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

                                  hideNonworkingWeekdaysSpecifies 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.boolean

                                  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.

                                  Examples

                                  Markup and runtime examples for hideNonworkingWeekdays:

                                  HTML attribute:

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

                                  Vanilla JS — prefer #id if multiple widgets exist on the page:

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

                                  Read the current value:

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

                                  hideOtherMonthDaysEnhances 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.boolean

                                  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

                                  Examples

                                  Markup and runtime examples for hideOtherMonthDays:

                                  HTML attribute:

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

                                  Vanilla JS — prefer #id if multiple widgets exist on the page:

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

                                  Read the current value:

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

                                  hideTodayButtonSpecifies 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.boolean

                                  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.

                                  Examples

                                  Markup and runtime examples for hideTodayButton:

                                  HTML attribute:

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

                                  Vanilla JS — prefer #id if multiple widgets exist on the page:

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

                                  Read the current value:

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

                                  hideViewMenuCheckableItemsControls 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.boolean

                                  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.

                                  Examples

                                  Markup and runtime examples for hideViewMenuCheckableItems:

                                  HTML attribute:

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

                                  Vanilla JS — prefer #id if multiple widgets exist on the page:

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

                                  Read the current value:

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

                                  hideWeekendSpecifies 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.boolean

                                  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.

                                  Examples

                                  Markup and runtime examples for hideWeekend:

                                  HTML attribute:

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

                                  Vanilla JS — prefer #id if multiple widgets exist on the page:

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

                                  Read the current value:

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

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

                                  Examples

                                  Markup and runtime examples for horizontalScrollBarVisibility:

                                  HTML:

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

                                  Vanilla JS — prefer #id if multiple widgets exist on the page:

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

                                  Read the current value:

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

                                  hourEndSpecifies 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.number

                                  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
                                  Try a demo showcasing the hourEnd property.

                                  Full working example

                                  Minimal setup for hourEnd with the data and bindings you usually use together on this component.

                                  JavaScript — Scheduler with hourEnd:

                                  // Load Smart UI Scheduler modules and styles.
const dataSource = [
	{ label: 'Stand-up', id: 'e1', dateStart: '2026-04-07T09:00:00', dateEnd: '2026-04-07T09:30:00' },
	{ label: 'Planning', id: 'e2', dateStart: '2026-04-07T13:00:00', dateEnd: '2026-04-07T14:30:00' }
];

const scheduler = new Smart.Scheduler('#myScheduler', {
	dateCurrent: new Date('2026-04-07T00:00:00'),
	dataSource,
	hourStart: 7,
	hourEnd: 19
});

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

                                  Examples

                                  Markup and runtime examples for hourFormat:

                                  HTML:

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

                                  Vanilla JS — prefer #id if multiple widgets exist on the page:

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

                                  Read the current value:

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

                                  hourStartSpecifies 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.number

                                  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
                                  Try a demo showcasing the hourStart property.

                                  Full working example

                                  Minimal setup for hourStart with the data and bindings you usually use together on this component.

                                  JavaScript — Scheduler with hourStart:

                                  // Load Smart UI Scheduler modules and styles.
const dataSource = [
	{ label: 'Stand-up', id: 'e1', dateStart: '2026-04-07T09:00:00', dateEnd: '2026-04-07T09:30:00' },
	{ label: 'Planning', id: 'e2', dateStart: '2026-04-07T13:00:00', dateEnd: '2026-04-07T14:30:00' }
];

const scheduler = new Smart.Scheduler('#myScheduler', {
	dateCurrent: new Date('2026-04-07T00:00:00'),
	dataSource,
	hourStart: 7,
	hourEnd: 19
});

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

                                  Examples

                                  Markup and runtime examples for legendLayout:

                                  HTML:

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

                                  Vanilla JS — prefer #id if multiple widgets exist on the page:

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

                                  Read the current value:

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

                                  legendLayoutMenuBreakpointSpecifies 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.number

                                  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

                                  Examples

                                  Markup and runtime examples for legendLayoutMenuBreakpoint:

                                  HTML:

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

                                  Vanilla JS — prefer #id if multiple widgets exist on the page:

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

                                  Read the current value:

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

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

                                  Examples

                                  Markup and runtime examples for legendLocation:

                                  HTML:

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

                                  Vanilla JS — prefer #id if multiple widgets exist on the page:

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

                                  Read the current value:

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

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

                                  Examples

                                  Markup and runtime examples for legendPosition:

                                  HTML:

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

                                  Vanilla JS — prefer #id if multiple widgets exist on the page:

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

                                  Read the current value:

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

                                  localeSpecifies 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.string

                                  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.

                                  Examples

                                  Markup and runtime examples for locale:

                                  HTML:

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

                                  Vanilla JS — prefer #id if multiple widgets exist on the page:

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

                                  Read the current value:

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

                                  maxDetermines 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.string | 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
                                  Try a demo showcasing the max property.

                                  Examples

                                  Markup and runtime examples for max:

                                  HTML:

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

                                  Vanilla JS — prefer #id if multiple widgets exist on the page:

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

                                  Read the current value:

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

                                  maxEventsPerCellSpecifies 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.number | 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.

                                  Try a demo showcasing the maxEventsPerCell property.

                                  Examples

                                  Markup and runtime examples for maxEventsPerCell:

                                  HTML:

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

                                  Vanilla JS — prefer #id if multiple widgets exist on the page:

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

                                  Read the current value:

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

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

                                  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.

                                  Examples

                                  Markup and runtime examples for messages:

                                  HTML:

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

                                  Vanilla JS — prefer #id if multiple widgets exist on the page:

                                  const el = document.querySelector('smart-scheduler');
el.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..."}};

                                  Read the current value:

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

                                  minSpecifies 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.string | 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
                                  Try a demo showcasing the min property.

                                  Examples

                                  Markup and runtime examples for min:

                                  HTML:

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

                                  Vanilla JS — prefer #id if multiple widgets exist on the page:

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

                                  Read the current value:

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

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

                                  Examples

                                  Markup and runtime examples for minuteFormat:

                                  HTML:

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

                                  Vanilla JS — prefer #id if multiple widgets exist on the page:

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

                                  Read the current value:

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

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

                                  Examples

                                  Markup and runtime examples for monthFormat:

                                  HTML:

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

                                  Vanilla JS — prefer #id if multiple widgets exist on the page:

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

                                  Read the current value:

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

                                  mouseWheelStepControls 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.number

                                  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

                                  Examples

                                  Markup and runtime examples for mouseWheelStep:

                                  HTML:

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

                                  Vanilla JS — prefer #id if multiple widgets exist on the page:

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

                                  Read the current value:

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

                                  nonworkingDaysSpecifies 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. number[] | 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.

                                  Examples

                                  Markup and runtime examples for nonworkingDays:

                                  HTML:

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

                                  Vanilla JS — prefer #id if multiple widgets exist on the page:

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

                                  Read the current value:

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

                                  nonworkingHoursSpecifies 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. number[] | 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.

                                  Try a demo showcasing the nonworkingHours property.

                                  Examples

                                  Markup and runtime examples for nonworkingHours:

                                  HTML:

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

                                  Vanilla JS — prefer #id if multiple widgets exist on the page:

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

                                  Read the current value:

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

                                  notificationIntervalSpecifies 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.number

                                  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

                                  Examples

                                  Markup and runtime examples for notificationInterval:

                                  HTML:

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

                                  Vanilla JS — prefer #id if multiple widgets exist on the page:

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

                                  Read the current value:

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

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

                                  Examples

                                  Markup and runtime examples for resizeHandlesVisibility:

                                  HTML:

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

                                  Vanilla JS — prefer #id if multiple widgets exist on the page:

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

                                  Read the current value:

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

                                  resizeInterval'' 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.number

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

                                  Examples

                                  Markup and runtime examples for resizeInterval:

                                  HTML:

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

                                  Vanilla JS — prefer #id if multiple widgets exist on the page:

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

                                  Read the current value:

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

                                  resourcesAn 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, 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

                                    dataSourceAn 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.
                                    labelResource label.
                                    sortByDetermines the property name to sort the dataSource by.
                                    sortFunctionDetermines the custom sorting function that will be used to sort the resource dataSource. The sortFunction is used when sortOrder is set to custom.
                                    sortOrderDetermines 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.
                                    valueResource unique value.
                                    Try a demo showcasing the resources property.

                                    Full working example

                                    Minimal setup for resources with the data and bindings you usually use together on this component.

                                    JavaScript — Scheduler with resources:

                                    // Load Smart UI Scheduler modules and styles.
const dataSource = [
	{ label: 'Stand-up', id: 'e1', dateStart: '2026-04-07T09:00:00', dateEnd: '2026-04-07T09:30:00' },
	{ label: 'Planning', id: 'e2', dateStart: '2026-04-07T13:00:00', dateEnd: '2026-04-07T14:30:00' }
];
const resources = [
	{ id: 'r1', label: 'Room A' },
	{ id: 'r2', label: 'Room B' }
];

const scheduler = new Smart.Scheduler('#myScheduler', {
	dateCurrent: new Date('2026-04-07T00:00:00'),
	dataSource,
	resources
});

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

                                    Default value

                                    Back to root property: resources

                                    Try a demo showcasing the dataSource property.

                                    Read the nested value:

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

                                    labelResource label.string

                                    Resource label.

                                    Default value

                                    ""

                                    Back to root property: resources

                                    Try a demo showcasing the label property.

                                    Read the nested value:

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

                                    sortByDetermines the property name to sort the dataSource by.string

                                    Determines the property name to sort the dataSource by.

                                    Default value

                                    "null"

                                    Back to root property: resources

                                    Read the nested value:

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

                                    sortFunctionDetermines the custom sorting function that will be used to sort the resource dataSource. The sortFunction is used when sortOrder is set to custom.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.

                                    Back to root property: resources

                                    Read the nested value:

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

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

                                    Back to root property: resources

                                    Try a demo showcasing the sortOrder property.

                                    Read the nested value:

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

                                    valueResource unique value.string

                                    Resource unique value.

                                    Default value

                                    ""

                                    Back to root property: resources

                                    Try a demo showcasing the value property.

                                    Read the nested value:

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

                                    restrictedDefines 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. array

                                    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.

                                    restrictedDatesSpecifies 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. array

                                    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.

                                    Examples

                                    Markup and runtime examples for restrictedDates:

                                    HTML:

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

                                    Vanilla JS — prefer #id if multiple widgets exist on the page:

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

                                    Read the current value:

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

                                    restrictedHoursSpecifies 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. array

                                    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.

                                    Examples

                                    Markup and runtime examples for restrictedHours:

                                    HTML:

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

                                    Vanilla JS — prefer #id if multiple widgets exist on the page:

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

                                    Read the current value:

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

                                    rightToLeftSets 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.boolean

                                    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.

                                    Examples

                                    Markup and runtime examples for rightToLeft:

                                    HTML attribute:

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

                                    Vanilla JS — prefer #id if multiple widgets exist on the page:

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

                                    Read the current value:

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

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

                                    Examples

                                    Markup and runtime examples for scrollButtonsPosition:

                                    HTML:

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

                                    Vanilla JS — prefer #id if multiple widgets exist on the page:

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

                                    Read the current value:

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

                                    shadeUntilCurrentTimeControls 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.boolean

                                    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.

                                    Examples

                                    Markup and runtime examples for shadeUntilCurrentTime:

                                    HTML attribute:

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

                                    Vanilla JS — prefer #id if multiple widgets exist on the page:

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

                                    Read the current value:

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

                                    showLegendControls 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.boolean

                                    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.

                                    Examples

                                    Markup and runtime examples for showLegend:

                                    HTML attribute:

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

                                    Vanilla JS — prefer #id if multiple widgets exist on the page:

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

                                    Read the current value:

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

                                    sortBySpecifies 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.string

                                    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"

                                    Examples

                                    Markup and runtime examples for sortBy:

                                    HTML:

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

                                    Vanilla JS — prefer #id if multiple widgets exist on the page:

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

                                    Read the current value:

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

                                    sortFunctionEnables 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.function

                                    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.

                                    Examples

                                    Markup and runtime examples for sortFunction:

                                    HTML:

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

                                    Vanilla JS — prefer #id if multiple widgets exist on the page:

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

                                    Read the current value:

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

                                    sortOrderSpecifies 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."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"
                                    Try a demo showcasing the sortOrder property.

                                    Examples

                                    Markup and runtime examples for sortOrder:

                                    HTML:

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

                                    Vanilla JS — prefer #id if multiple widgets exist on the page:

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

                                    Read the current value:

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

                                    spinButtonsDelaySpecifies 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.number

                                    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

                                    Examples

                                    Markup and runtime examples for spinButtonsDelay:

                                    HTML:

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

                                    Vanilla JS — prefer #id if multiple widgets exist on the page:

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

                                    Read the current value:

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

                                    spinButtonsInitialDelaySpecifies 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.number

                                    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

                                    Examples

                                    Markup and runtime examples for spinButtonsInitialDelay:

                                    HTML:

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

                                    Vanilla JS — prefer #id if multiple widgets exist on the page:

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

                                    Read the current value:

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

                                    statusesSpecifies 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. {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

                                    labelStatus label.
                                    valueStatus unique value.
                                    Try a demo showcasing the statuses property.

                                    Examples

                                    Markup and runtime examples for statuses:

                                    HTML:

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

                                    Vanilla JS — prefer #id if multiple widgets exist on the page:

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

                                    Read the current value:

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

                                    labelStatus label.string

                                    Status label.

                                    Default value

                                    ""

                                    Back to root property: statuses

                                    Try a demo showcasing the label property.

                                    Read the nested value:

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

                                    valueStatus unique value.string

                                    Status unique value.

                                    Default value

                                    ""

                                    Back to root property: statuses

                                    Try a demo showcasing the value property.

                                    Read the nested value:

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

                                    themeGets 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.string

                                    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

                                    ""

                                    Examples

                                    Markup and runtime examples for theme:

                                    HTML:

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

                                    Vanilla JS — prefer #id if multiple widgets exist on the page:

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

                                    Read the current value:

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

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

                                    Full working example

                                    Minimal setup for timelineDayScale with the data and bindings you usually use together on this component.

                                    JavaScript — Scheduler with timelineDayScale:

                                    // Load Smart UI Scheduler modules and styles.
const dataSource = [
	{ label: 'Stand-up', id: 'e1', dateStart: '2026-04-07T09:00:00', dateEnd: '2026-04-07T09:30:00' },
	{ label: 'Planning', id: 'e2', dateStart: '2026-04-07T13:00:00', dateEnd: '2026-04-07T14:30:00' }
];

const scheduler = new Smart.Scheduler('#myScheduler', {
	dateCurrent: new Date('2026-04-07T00:00:00'),
	dataSource,
	timelineDayScale: 'quarterHour'
});

                                    timelineHeaderFormatFunctionA 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.function | 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.

                                    Examples

                                    Markup and runtime examples for timelineHeaderFormatFunction:

                                    HTML:

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

                                    Vanilla JS — prefer #id if multiple widgets exist on the page:

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

                                    Read the current value:

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

                                    timeRulerTicksControls 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.boolean

                                    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.

                                    Examples

                                    Markup and runtime examples for timeRulerTicks:

                                    HTML attribute:

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

                                    Vanilla JS — prefer #id if multiple widgets exist on the page:

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

                                    Read the current value:

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

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

                                    Examples

                                    Markup and runtime examples for timeZone:

                                    HTML:

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

                                    Vanilla JS — prefer #id if multiple widgets exist on the page:

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

                                    Read the current value:

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

                                    timeZonesEnables 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. array

                                    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.

                                    Examples

                                    Markup and runtime examples for timeZones:

                                    HTML:

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

                                    Vanilla JS — prefer #id if multiple widgets exist on the page:

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

                                    Read the current value:

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

                                    tooltipDelaySpecifies 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.number

                                    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

                                    Examples

                                    Markup and runtime examples for tooltipDelay:

                                    HTML:

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

                                    Vanilla JS — prefer #id if multiple widgets exist on the page:

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

                                    Read the current value:

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

                                    tooltipOffsetSpecifies 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. number[]

                                    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.

                                    Examples

                                    Markup and runtime examples for tooltipOffset:

                                    HTML:

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

                                    Vanilla JS — prefer #id if multiple widgets exist on the page:

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

                                    Read the current value:

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

                                    undoRedoStepsSpecifies 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.number

                                    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

                                    Examples

                                    Markup and runtime examples for undoRedoSteps:

                                    HTML:

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

                                    Vanilla JS — prefer #id if multiple widgets exist on the page:

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

                                    Read the current value:

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

                                    unfocusableDetermines 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.boolean

                                    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

                                    Examples

                                    Markup and runtime examples for unfocusable:

                                    HTML attribute:

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

                                    Vanilla JS — prefer #id if multiple widgets exist on the page:

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

                                    Read the current value:

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

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

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

                                    Default value

                                    ""

                                    Examples

                                    Markup and runtime examples for unlockKey:

                                    HTML:

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

                                    Vanilla JS — prefer #id if multiple widgets exist on the page:

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

                                    Read the current value:

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

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

                                    Examples

                                    Markup and runtime examples for verticalScrollBarVisibility:

                                    HTML:

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

                                    Vanilla JS — prefer #id if multiple widgets exist on the page:

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

                                    Read the current value:

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

                                    viewSpecifies 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. string

                                    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"
                                    Try a demo showcasing the view property.

                                    Full working example

                                    Minimal setup for view with the data and bindings you usually use together on this component.

                                    JavaScript — Scheduler with view:

                                    // Load Smart UI Scheduler modules and styles.
const dataSource = [
	{ label: 'Stand-up', id: 'e1', dateStart: '2026-04-07T09:00:00', dateEnd: '2026-04-07T09:30:00' },
	{ label: 'Planning', id: 'e2', dateStart: '2026-04-07T13:00:00', dateEnd: '2026-04-07T14:30:00' }
];

const scheduler = new Smart.Scheduler('#myScheduler', {
	dateCurrent: new Date('2026-04-07T00:00:00'),
	dataSource,
	view: 'day'
});

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

                                      Full working example

                                      Minimal setup for views with the data and bindings you usually use together on this component.

                                      JavaScript — Scheduler with views:

                                      // Load Smart UI Scheduler modules and styles.
const dataSource = [
	{ label: 'Stand-up', id: 'e1', dateStart: '2026-04-07T09:00:00', dateEnd: '2026-04-07T09:30:00' },
	{ label: 'Planning', id: 'e2', dateStart: '2026-04-07T13:00:00', dateEnd: '2026-04-07T14:30:00' }
];
const views = {
	day: { type: 'day', timeStep: 30 },
	week: { type: 'week', timeStep: 60 }
};

const scheduler = new Smart.Scheduler('#myScheduler', {
	dateCurrent: new Date('2026-04-07T00:00:00'),
	dataSource,
	views
});

                                      viewSelectorTypeSpecifies 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."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"
                                      Try a demo showcasing the viewSelectorType property.

                                      Examples

                                      Markup and runtime examples for viewSelectorType:

                                      HTML:

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

                                      Vanilla JS — prefer #id if multiple widgets exist on the page:

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

                                      Read the current value:

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

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

                                      Examples

                                      Markup and runtime examples for viewStartDay:

                                      HTML:

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

                                      Vanilla JS — prefer #id if multiple widgets exist on the page:

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

                                      Read the current value:

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

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

                                      Full working example

                                      Minimal setup for viewType with the data and bindings you usually use together on this component.

                                      JavaScript — Scheduler with viewType:

                                      // Load Smart UI Scheduler modules and styles.
const dataSource = [
	{ label: 'Stand-up', id: 'e1', dateStart: '2026-04-07T09:00:00', dateEnd: '2026-04-07T09:30:00' },
	{ label: 'Planning', id: 'e2', dateStart: '2026-04-07T13:00:00', dateEnd: '2026-04-07T14:30:00' }
];

const scheduler = new Smart.Scheduler('#myScheduler', {
	dateCurrent: new Date('2026-04-07T00:00:00'),
	dataSource,
	view: 'day'
});

                                      weekdayFormatSpecifies how the names of the weekdays are displayed within the element (e.g., full names, short names, or initials)."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"

                                      Examples

                                      Markup and runtime examples for weekdayFormat:

                                      HTML:

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

                                      Vanilla JS — prefer #id if multiple widgets exist on the page:

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

                                      Read the current value:

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

                                      windowCustomizationFunctionThis 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.function | 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.

                                      Examples

                                      Markup and runtime examples for windowCustomizationFunction:

                                      HTML:

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

                                      Vanilla JS — prefer #id if multiple widgets exist on the page:

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

                                      Read the current value:

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

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

                                      Examples

                                      Markup and runtime examples for yearFormat:

                                      HTML:

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

                                      Vanilla JS — prefer #id if multiple widgets exist on the page:

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

                                      Read the current value:

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

                                      Events

                                      beginUpdateThis 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.CustomEvent

                                      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.

                                      Examples

                                      Listen for beginUpdate using the pattern that matches your stack.

                                      DOM — listen on the custom element (use a specific selector if the page has more than one):

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

                                      changeThis 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.CustomEvent

                                      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.

                                      Try a demo showcasing the change event.

                                      Examples

                                      Listen for change using the pattern that matches your stack.

                                      DOM — listen on the custom element (use a specific selector if the page has more than one):

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

	// event handling code goes here.
})

                                      contextMenuCloseThis 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.CustomEvent

                                      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.

                                      Examples

                                      Listen for contextMenuClose using the pattern that matches your stack.

                                      DOM — listen on the custom element (use a specific selector if the page has more than one):

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

	// event handling code goes here.
})

                                      contextMenuClosingThis 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.CustomEvent

                                      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.

                                      Examples

                                      Listen for contextMenuClosing using the pattern that matches your stack.

                                      DOM — listen on the custom element (use a specific selector if the page has more than one):

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

	// event handling code goes here.
})

                                      contextMenuOpenThis 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.CustomEvent

                                      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.

                                      Examples

                                      Listen for contextMenuOpen using the pattern that matches your stack.

                                      DOM — listen on the custom element (use a specific selector if the page has more than one):

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

	// event handling code goes here.
})

                                      contextMenuOpeningThis 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.CustomEvent

                                      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.

                                      Examples

                                      Listen for contextMenuOpening using the pattern that matches your stack.

                                      DOM — listen on the custom element (use a specific selector if the page has more than one):

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

	// event handling code goes here.
})

                                      dateChangeThis 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.CustomEvent

                                      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.

                                      Try a demo showcasing the dateChange event.

                                      Examples

                                      Listen for dateChange using the pattern that matches your stack.

                                      DOM — listen on the custom element (use a specific selector if the page has more than one):

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

	// event handling code goes here.
})

                                      dateMenuCloseThis 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.CustomEvent

                                      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.

                                      Examples

                                      Listen for dateMenuClose using the pattern that matches your stack.

                                      DOM — listen on the custom element (use a specific selector if the page has more than one):

                                      document.querySelector('smart-scheduler')?.addEventListener('dateMenuClose', (event) => {
    const detail = event.detail,
        target = detail.target;

	// event handling code goes here.
})

                                      dateMenuOpenThis 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.CustomEvent

                                      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.

                                      Examples

                                      Listen for dateMenuOpen using the pattern that matches your stack.

                                      DOM — listen on the custom element (use a specific selector if the page has more than one):

                                      document.querySelector('smart-scheduler')?.addEventListener('dateMenuOpen', (event) => {
    const detail = event.detail,
        target = detail.target;

	// event handling code goes here.
})

                                      dragEndThis 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.CustomEvent

                                      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.

                                      Try a demo showcasing the dragEnd event.

                                      Examples

                                      Listen for dragEnd using the pattern that matches your stack.

                                      DOM — listen on the custom element (use a specific selector if the page has more than one):

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

	// event handling code goes here.
})

                                      dragStartThis 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.CustomEvent

                                      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.

                                      Try a demo showcasing the dragStart event.

                                      Examples

                                      Listen for dragStart using the pattern that matches your stack.

                                      DOM — listen on the custom element (use a specific selector if the page has more than one):

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

	// event handling code goes here.
})

                                      dropoverCellThis 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.CustomEvent

                                      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.

                                      Examples

                                      Listen for dropoverCell using the pattern that matches your stack.

                                      DOM — listen on the custom element (use a specific selector if the page has more than one):

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

	// event handling code goes here.
})

                                      editDialogCloseThis 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.CustomEvent

                                      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.

                                      Try a demo showcasing the editDialogClose event.

                                      Examples

                                      Listen for editDialogClose using the pattern that matches your stack.

                                      DOM — listen on the custom element (use a specific selector if the page has more than one):

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

	// event handling code goes here.
})

                                      editDialogClosingThis 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.CustomEvent

                                      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.

                                      Examples

                                      Listen for editDialogClosing using the pattern that matches your stack.

                                      DOM — listen on the custom element (use a specific selector if the page has more than one):

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

	// event handling code goes here.
})

                                      editDialogOpenThis 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.CustomEvent

                                      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.

                                      Try a demo showcasing the editDialogOpen event.

                                      Examples

                                      Listen for editDialogOpen using the pattern that matches your stack.

                                      DOM — listen on the custom element (use a specific selector if the page has more than one):

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

	// event handling code goes here.
})

                                      editDialogOpeningThis 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.CustomEvent

                                      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.

                                      Try a demo showcasing the editDialogOpening event.

                                      Examples

                                      Listen for editDialogOpening using the pattern that matches your stack.

                                      DOM — listen on the custom element (use a specific selector if the page has more than one):

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

	// event handling code goes here.
})

                                      endUpdateThis 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.CustomEvent

                                      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.

                                      Examples

                                      Listen for endUpdate using the pattern that matches your stack.

                                      DOM — listen on the custom element (use a specific selector if the page has more than one):

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

                                      eventMenuCloseThis 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.CustomEvent

                                      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.

                                      Examples

                                      Listen for eventMenuClose using the pattern that matches your stack.

                                      DOM — listen on the custom element (use a specific selector if the page has more than one):

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

	// event handling code goes here.
})

                                      eventMenuClosingThis 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.CustomEvent

                                      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.

                                      Examples

                                      Listen for eventMenuClosing using the pattern that matches your stack.

                                      DOM — listen on the custom element (use a specific selector if the page has more than one):

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

	// event handling code goes here.
})

                                      eventMenuOpenThis 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.CustomEvent

                                      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.

                                      Examples

                                      Listen for eventMenuOpen using the pattern that matches your stack.

                                      DOM — listen on the custom element (use a specific selector if the page has more than one):

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

	// event handling code goes here.
})

                                      eventMenuOpeningThis 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.CustomEvent

                                      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.

                                      Examples

                                      Listen for eventMenuOpening using the pattern that matches your stack.

                                      DOM — listen on the custom element (use a specific selector if the page has more than one):

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

	// event handling code goes here.
})

                                      eventShortcutKeyThis 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.CustomEvent

                                      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.

                                      Examples

                                      Listen for eventShortcutKey using the pattern that matches your stack.

                                      DOM — listen on the custom element (use a specific selector if the page has more than one):

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

	// event handling code goes here.
})

                                      itemChangeThis 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.CustomEvent

                                      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.

                                      Examples

                                      Listen for itemChange using the pattern that matches your stack.

                                      DOM — listen on the custom element (use a specific selector if the page has more than one):

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

	// event handling code goes here.
})

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

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

                                      Examples

                                      Listen for itemChanging using the pattern that matches your stack.

                                      DOM — listen on the custom element (use a specific selector if the page has more than one):

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

	// event handling code goes here.
})

                                      itemClickThis 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.CustomEvent

                                      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.

                                      Examples

                                      Listen for itemClick using the pattern that matches your stack.

                                      DOM — listen on the custom element (use a specific selector if the page has more than one):

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

	// event handling code goes here.
})

                                      itemInsertThis 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.CustomEvent

                                      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.

                                      Try a demo showcasing the itemInsert event.

                                      Examples

                                      Listen for itemInsert using the pattern that matches your stack.

                                      DOM — listen on the custom element (use a specific selector if the page has more than one):

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

	// event handling code goes here.
})

                                      itemRemoveThis 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.CustomEvent

                                      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.

                                      Try a demo showcasing the itemRemove event.

                                      Examples

                                      Listen for itemRemove using the pattern that matches your stack.

                                      DOM — listen on the custom element (use a specific selector if the page has more than one):

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

	// event handling code goes here.
})

                                      itemUpdateThis 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.CustomEvent

                                      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.

                                      Try a demo showcasing the itemUpdate event.

                                      Examples

                                      Listen for itemUpdate using the pattern that matches your stack.

                                      DOM — listen on the custom element (use a specific selector if the page has more than one):

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

	// event handling code goes here.
})

                                      notificationCloseThis 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.CustomEvent

                                      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.

                                      Examples

                                      Listen for notificationClose using the pattern that matches your stack.

                                      DOM — listen on the custom element (use a specific selector if the page has more than one):

                                      document.querySelector('smart-scheduler')?.addEventListener('notificationClose', (event) => {
    const detail = event.detail,
        instance = detail.instance;

	// event handling code goes here.
})

                                      notificationOpenThis 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.CustomEvent

                                      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.

                                      Examples

                                      Listen for notificationOpen using the pattern that matches your stack.

                                      DOM — listen on the custom element (use a specific selector if the page has more than one):

                                      document.querySelector('smart-scheduler')?.addEventListener('notificationOpen', (event) => {
    const detail = event.detail,
        instance = detail.instance;

	// event handling code goes here.
})

                                      resizeEndThis 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.CustomEvent

                                      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.

                                      Try a demo showcasing the resizeEnd event.

                                      Examples

                                      Listen for resizeEnd using the pattern that matches your stack.

                                      DOM — listen on the custom element (use a specific selector if the page has more than one):

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

	// event handling code goes here.
})

                                      resizeStartThis 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.CustomEvent

                                      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.

                                      Examples

                                      Listen for resizeStart using the pattern that matches your stack.

                                      DOM — listen on the custom element (use a specific selector if the page has more than one):

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

	// event handling code goes here.
})

                                      viewChangeThis 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.CustomEvent

                                      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.

                                      Try a demo showcasing the viewChange event.

                                      Examples

                                      Listen for viewChange using the pattern that matches your stack.

                                      DOM — listen on the custom element (use a specific selector if the page has more than one):

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

	// event handling code goes here.
})

                                      viewChangingThis 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.CustomEvent

                                      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.

                                      Examples

                                      Listen for viewChanging using the pattern that matches your stack.

                                      DOM — listen on the custom element (use a specific selector if the page has more than one):

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

	// event handling code goes here.
})

                                      viewMenuCloseThis 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.CustomEvent

                                      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.

                                      Examples

                                      Listen for viewMenuClose using the pattern that matches your stack.

                                      DOM — listen on the custom element (use a specific selector if the page has more than one):

                                      document.querySelector('smart-scheduler')?.addEventListener('viewMenuClose', (event) => {
    const detail = event.detail,
        target = detail.target;

	// event handling code goes here.
})

                                      viewMenuOpenThis 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.CustomEvent

                                      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.

                                      Examples

                                      Listen for viewMenuOpen using the pattern that matches your stack.

                                      DOM — listen on the custom element (use a specific selector if the page has more than one):

                                      document.querySelector('smart-scheduler')?.addEventListener('viewMenuOpen', (event) => {
    const detail = event.detail,
        target = detail.target;

	// event handling code goes here.
})

                                      Methods

                                      addEvent( eventObj: any): voidAdds 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.

                                      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.

                                      On the custom element in the DOM (narrow the selector, e.g. to #my-scheduler, if you host multiple widgets):

                                      document.querySelector('smart-scheduler')?.addEvent("{ label: 'Inserted Event 1', dateStart: '2022-08-10', dateEnd: '2022-12-23' }");

                                      addEventException( eventObj: any, exceptionObj: any): voidAdds 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.

                                      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.

                                      On the custom element in the DOM (narrow the selector, e.g. to #my-scheduler, if you host multiple widgets):

                                      document.querySelector('smart-scheduler')?.addEventException("eventObj, exceptionObj");

                                      addView( type: string, label: string, value: string, hideWeekend: boolean, hideNonworkingWeekdays: boolean, additionalDays: number): voidEnhances 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.

                                      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.

                                      On the custom element in the DOM (narrow the selector, e.g. to #my-scheduler, if you host multiple widgets):

                                      document.querySelector('smart-scheduler')?.addView("'week', 'My View', 'myView', false, false, 10");

                                      Try a demo showcasing the addView method.

                                      beginUpdate(): voidInitiates 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.

                                      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.

                                      On the custom element in the DOM (narrow the selector, e.g. to #my-scheduler, if you host multiple widgets):

                                      document.querySelector('smart-scheduler')?.beginUpdate();

                                      canRedo(): booleanSpecifies 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.

                                      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

                                      On the custom element in the DOM (narrow the selector, e.g. to #my-scheduler, if you host multiple widgets):

                                      const result = document.querySelector('smart-scheduler')?.canRedo();

                                      Try a demo showcasing the canRedo method.

                                      canUndo(): booleanSpecifies 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.

                                      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

                                      On the custom element in the DOM (narrow the selector, e.g. to #my-scheduler, if you host multiple widgets):

                                      const result = document.querySelector('smart-scheduler')?.canUndo();

                                      Try a demo showcasing the canUndo method.

                                      clearState(): voidRemoves 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.

                                      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.

                                      On the custom element in the DOM (narrow the selector, e.g. to #my-scheduler, if you host multiple widgets):

                                      document.querySelector('smart-scheduler')?.clearState("state");

                                      Try a demo showcasing the clearState method.

                                      closeEventTooltip(): voidCloses and hides the event tooltip (also known as the event menu), removing it from view and preventing further interactions until it is reopened.

                                      Closes and hides the event tooltip (also known as the event menu), removing it from view and preventing further interactions until it is reopened.

                                      On the custom element in the DOM (narrow the selector, e.g. to #my-scheduler, if you host multiple widgets):

                                      document.querySelector('smart-scheduler')?.closeEventTooltip();

                                      closeNotifications(): voidDismisses and removes all currently active notifications from view, ensuring that no notification messages remain visible to the user.

                                      Dismisses and removes all currently active notifications from view, ensuring that no notification messages remain visible to the user.

                                      On the custom element in the DOM (narrow the selector, e.g. to #my-scheduler, if you host multiple widgets):

                                      document.querySelector('smart-scheduler')?.closeNotifications();

                                      closeWindow(): voidCloses the currently open popup window, removing it from view and returning focus to the main application interface.

                                      Closes the currently open popup window, removing it from view and returning focus to the main application interface.

                                      On the custom element in the DOM (narrow the selector, e.g. to #my-scheduler, if you host multiple widgets):

                                      document.querySelector('smart-scheduler')?.closeWindow();

                                      containsEvent( eventObj: any): booleanDetermines if a specific event is present within the Scheduler's collection of scheduled events. Returns true if the event exists; otherwise, returns false.

                                      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

                                      On the custom element in the DOM (narrow the selector, e.g. to #my-scheduler, if you host multiple widgets):

                                      const result = document.querySelector('smart-scheduler')?.containsEvent("eventObjA","eventObjB");

                                      Try a demo showcasing the containsEvent method.

                                      createEvent( label: string, value: string, dateStart: string, dateEnd: string, allDay: boolean): voidCreates 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.

                                      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.

                                      On the custom element in the DOM (narrow the selector, e.g. to #my-scheduler, if you host multiple widgets):

                                      document.querySelector('smart-scheduler')?.createEvent("'Inserted Event 1', 'value', '2022-08-10', dateEnd: '2022-12-23'");

                                      Try a demo showcasing the createEvent method.

                                      deleteUndoRedoHistory(): booleanRemoves 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.

                                      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

                                      On the custom element in the DOM (narrow the selector, e.g. to #my-scheduler, if you host multiple widgets):

                                      const result = document.querySelector('smart-scheduler')?.deleteUndoRedoHistory();

                                      endUpdate(): voidFinalizes 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.

                                      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.

                                      On the custom element in the DOM (narrow the selector, e.g. to #my-scheduler, if you host multiple widgets):

                                      document.querySelector('smart-scheduler')?.endUpdate();

                                      exportData( dataFormat: string, callback?: any, dataCallback?: any): voidExports 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.

                                      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.

                                      On the custom element in the DOM (narrow the selector, e.g. to #my-scheduler, if you host multiple widgets):

                                      document.querySelector('smart-scheduler')?.exportData("'pdf'");

                                      Try a demo showcasing the exportData method.

                                      getCellDateRange( cell: HTMLElement): objectReturns the start and end dates (dateStart/dateEnd) for a specific timeline cell, representing the time interval covered by that cell on the timeline.

                                      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

                                      On the custom element in the DOM (narrow the selector, e.g. to #my-scheduler, if you host multiple widgets):

                                      const result = document.querySelector('smart-scheduler')?.getCellDateRange("cellA","cellB");

                                      Try a demo showcasing the getCellDateRange method.

                                      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.

                                      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[]

                                      On the custom element in the DOM (narrow the selector, e.g. to #my-scheduler, if you host multiple widgets):

                                      const result = document.querySelector('smart-scheduler')?.getDataSource();

                                      getDateFromCoordinates( x: number, y: number): stringRetrieves 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.

                                      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

                                      On the custom element in the DOM (narrow the selector, e.g. to #my-scheduler, if you host multiple widgets):

                                      const result = document.querySelector('smart-scheduler')?.getDateFromCoordinates("50, 100");

                                      Try a demo showcasing the getDateFromCoordinates method.

                                      getEventExceptions( eventObj: any): arrayReturns 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.

                                      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

                                      On the custom element in the DOM (narrow the selector, e.g. to #my-scheduler, if you host multiple widgets):

                                      const result = document.querySelector('smart-scheduler')?.getEventExceptions("eventObj");

                                      getIsAllDayCellFromCoordinates( x: number, y: number): booleanDetermines 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.

                                      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

                                      On the custom element in the DOM (narrow the selector, e.g. to #my-scheduler, if you host multiple widgets):

                                      const result = document.querySelector('smart-scheduler')?.getIsAllDayCellFromCoordinates("50, 100");

                                      Try a demo showcasing the getIsAllDayCellFromCoordinates method.

                                      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.

                                      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[]

                                      On the custom element in the DOM (narrow the selector, e.g. to #my-scheduler, if you host multiple widgets):

                                      const result = document.querySelector('smart-scheduler')?.getResources();

                                      getState(): objectReturns 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.

                                      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

                                      On the custom element in the DOM (narrow the selector, e.g. to #my-scheduler, if you host multiple widgets):

                                      const result = document.querySelector('smart-scheduler')?.getState();

                                      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.

                                      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[]

                                      On the custom element in the DOM (narrow the selector, e.g. to #my-scheduler, if you host multiple widgets):

                                      const result = document.querySelector('smart-scheduler')?.getViewDates();

                                      Try a demo showcasing the getViewDates method.

                                      insertEvent( eventObj: any, index?: number): voidInserts 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.

                                      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.

                                      On the custom element in the DOM (narrow the selector, e.g. to #my-scheduler, if you host multiple widgets):

                                      document.querySelector('smart-scheduler')?.insertEvent("{ label: 'Inserted Event 1', dateStart: '2022-08-10', dateEnd: '2022-12-23' }");

                                      Try a demo showcasing the insertEvent method.

                                      isDateRestricted( date: Date): booleanDetermines if the specified date is restricted. Returns true if the date falls within the set of restricted dates; otherwise, returns false.

                                      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

                                      On the custom element in the DOM (narrow the selector, e.g. to #my-scheduler, if you host multiple widgets):

                                      const result = document.querySelector('smart-scheduler')?.isDateRestricted("new Date(2022, 1, 1)","new Date(2023, 1, 1)");

                                      isEventRestricted( eventObj: any): booleanDetermines 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.

                                      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

                                      On the custom element in the DOM (narrow the selector, e.g. to #my-scheduler, if you host multiple widgets):

                                      const result = document.querySelector('smart-scheduler')?.isEventRestricted("eventObjA","eventInstance");

                                      Try a demo showcasing the isEventRestricted method.

                                      isHourRestricted( hour: number | Date): booleanDetermines whether the specified hour is restricted. Returns true if the hour falls within a restricted period; otherwise, returns false.

                                      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

                                      On the custom element in the DOM (narrow the selector, e.g. to #my-scheduler, if you host multiple widgets):

                                      const result = document.querySelector('smart-scheduler')?.isHourRestricted("12","new Date(2022, 1, 1, 22, 30)");

                                      loadState( state?: any[]): voidRetrieves 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.

                                      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.

                                      On the custom element in the DOM (narrow the selector, e.g. to #my-scheduler, if you host multiple widgets):

                                      document.querySelector('smart-scheduler')?.loadState("state");

                                      Try a demo showcasing the loadState method.

                                      navigateToDate( date: Date): voidTransitions the Scheduler interface to display and focus on a specific date selected by the user.

                                      Transitions the Scheduler interface to display and focus on a specific date selected by the user.

                                      Arguments

                                      dateDate

                                      The date to navigate to.

                                      On the custom element in the DOM (narrow the selector, e.g. to #my-scheduler, if you host multiple widgets):

                                      document.querySelector('smart-scheduler')?.navigateToDate("2025-5-1");

                                      Try a demo showcasing the navigateToDate method.

                                      occurrenceAfter( eventObj: any, date: number): voidReturns 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.

                                      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.

                                      On the custom element in the DOM (narrow the selector, e.g. to #my-scheduler, if you host multiple widgets):

                                      document.querySelector('smart-scheduler')?.occurrenceAfter("eventObjA, , new Date(2022, 2, 1)","eventObjB, , new Date(2022, 3, 1)");

                                      occurrenceBefore( eventObj: any, date: number): voidReturns the most recent occurrence of the specified event that occurred before the given date.

                                      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.

                                      On the custom element in the DOM (narrow the selector, e.g. to #my-scheduler, if you host multiple widgets):

                                      document.querySelector('smart-scheduler')?.occurrenceBefore("eventObjA, , new Date(2022, 2, 1)","eventObjB, , new Date(2022, 3, 1)");

                                      occurrences( eventObj: any, count: number): voidReturns 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.

                                      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.

                                      On the custom element in the DOM (narrow the selector, e.g. to #my-scheduler, if you host multiple widgets):

                                      document.querySelector('smart-scheduler')?.occurrences("eventObjA","eventObjB");

                                      occurrencesBetween( eventObj: any, dateFrom: Date, dateTo: Date): voidReturns 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.

                                      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.

                                      On the custom element in the DOM (narrow the selector, e.g. to #my-scheduler, if you host multiple widgets):

                                      document.querySelector('smart-scheduler')?.occurrencesBetween("eventObjA, new Date(2022, 2, 1), new Date(2022, 3, 1)","eventObjB, new Date(2022, 3, 1), new Date(2022, 5, 1)");

                                      openEventTooltip( eventObj: any): voidDisplays the tooltip (event menu) associated with a specific event, providing additional information and context about the selected event when triggered.

                                      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.

                                      On the custom element in the DOM (narrow the selector, e.g. to #my-scheduler, if you host multiple widgets):

                                      document.querySelector('smart-scheduler')?.openEventTooltip("eventObjA","2");

                                      openNotification( message: string, toastSettings: any): voidDisplays 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.

                                      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.

                                      On the custom element in the DOM (narrow the selector, e.g. to #my-scheduler, if you host multiple widgets):

                                      document.querySelector('smart-scheduler')?.openNotification("This is a custom notification","Custom Notification 2");

                                      Try a demo showcasing the openNotification method.

                                      openWindow( index: any): voidOpens 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.

                                      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.

                                      On the custom element in the DOM (narrow the selector, e.g. to #my-scheduler, if you host multiple widgets):

                                      document.querySelector('smart-scheduler')?.openWindow("2");

                                      Try a demo showcasing the openWindow method.

                                      print(): voidPrepares 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.

                                      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.

                                      On the custom element in the DOM (narrow the selector, e.g. to #my-scheduler, if you host multiple widgets):

                                      document.querySelector('smart-scheduler')?.print();

                                      Try a demo showcasing the print method.

                                      redo( step?: number): booleanRevert the changes made to the upcoming event modification, restoring the event to its previous state.

                                      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

                                      On the custom element in the DOM (narrow the selector, e.g. to #my-scheduler, if you host multiple widgets):

                                      const result = document.querySelector('smart-scheduler')?.redo("","5");

                                      Try a demo showcasing the redo method.

                                      refresh( fullRefresh?: boolean): voidRefreshes the Scheduler by recalculating and updating the scrollbars to ensure proper alignment and visibility based on the current content and layout changes.

                                      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.

                                      On the custom element in the DOM (narrow the selector, e.g. to #my-scheduler, if you host multiple widgets):

                                      document.querySelector('smart-scheduler')?.refresh(true,false);

                                      Try a demo showcasing the refresh method.

                                      removeEvent( index: any): voidDeletes a specified event from the system, permanently removing its associated data and making it no longer accessible or visible to users.

                                      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.

                                      On the custom element in the DOM (narrow the selector, e.g. to #my-scheduler, if you host multiple widgets):

                                      document.querySelector('smart-scheduler')?.removeEvent("0");

                                      Try a demo showcasing the removeEvent method.

                                      removeEventException( eventObj: any, index: any): voidRemoves a specified exception instance from a recurring event series, thereby restoring the affected occurrence to match the original recurring pattern.

                                      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.

                                      On the custom element in the DOM (narrow the selector, e.g. to #my-scheduler, if you host multiple widgets):

                                      document.querySelector('smart-scheduler')?.removeEventException("eventObj, 1");

                                      saveState( state?: any[]): voidStores 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.

                                      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.

                                      On the custom element in the DOM (narrow the selector, e.g. to #my-scheduler, if you host multiple widgets):

                                      document.querySelector('smart-scheduler')?.saveState("state");

                                      Try a demo showcasing the saveState method.

                                      scrollToDate( date: Date, strictScroll?: boolean, autoScroll?: boolean): voidScrolls 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.

                                      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.

                                      On the custom element in the DOM (narrow the selector, e.g. to #my-scheduler, if you host multiple widgets):

                                      document.querySelector('smart-scheduler')?.scrollToDate("2025-5-1");

                                      Try a demo showcasing the scrollToDate method.

                                      scrollToEvent( index: any): voidSmoothly scrolls the Scheduler component to bring the specified event into view, ensuring it is visible to the user in the current viewport.

                                      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.

                                      On the custom element in the DOM (narrow the selector, e.g. to #my-scheduler, if you host multiple widgets):

                                      document.querySelector('smart-scheduler')?.scrollToEvent("eventObj","2");

                                      Try a demo showcasing the scrollToEvent method.

                                      setLocale( locale: string, messages?: any): voidSets the locale of a component.

                                      Sets the locale of a component.

                                      Arguments

                                      localestring

                                      The locale abbreviation. For example: 'de'.

                                      messages?any

                                      Object containing the locale messages.

                                      On the custom element in the DOM (narrow the selector, e.g. to #my-scheduler, if you host multiple widgets):

                                      document.querySelector('smart-scheduler')?.setLocale("'de'");

                                      setView( view?: string): voidSpecifies 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.

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

                                      On the custom element in the DOM (narrow the selector, e.g. to #my-scheduler, if you host multiple widgets):

                                      document.querySelector('smart-scheduler')?.setView("day");

                                      Try a demo showcasing the setView method.

                                      undo( step?: number): booleanRevert the most recent changes made to the event, restoring it to its previous state.

                                      Revert the most recent changes made to the event, restoring it to its previous state.

                                      Arguments

                                      step?number

                                      A step to undo to.

                                      Returnsboolean

                                      On the custom element in the DOM (narrow the selector, e.g. to #my-scheduler, if you host multiple widgets):

                                      const result = document.querySelector('smart-scheduler')?.undo("","2");

                                      Try a demo showcasing the undo method.

                                      updateEvent( index: any, eventObj: any): voidUpdates 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.

                                      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.

                                      On the custom element in the DOM (narrow the selector, e.g. to #my-scheduler, if you host multiple widgets):

                                      document.querySelector('smart-scheduler')?.updateEvent("2, { label: 'Updated Task', dateEnd: '2022-12-23' }");

                                      Try a demo showcasing the updateEvent method.

                                      updateEventException( eventObj: any, exceptionRef: any, exceptionObj: any): voidUpdates 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.

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

                                      On the custom element in the DOM (narrow the selector, e.g. to #my-scheduler, if you host multiple widgets):

                                      document.querySelector('smart-scheduler')?.updateEventException("eventObj, exceptionObj");

                                      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.