Scheduler JAVASCRIPT UI Component API

Scheduler Javascript API

Class

Scheduler

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

Selector

smart-scheduler

Properties

AautoScrollStep

AautoHeightAllDayCells

Aavailable

CcolorScheme

CcurrentTimeIndicator

CcurrentTimeIndicatorInterval

CcontextMenuDataSource

CcontextMenuClipboardActions

EeventTemplate

EeventCollectorTemplate

EeventRenderMode

EeventTooltipTemplate

DdateSelectorFormatFunction

DdragFeedbackFormatFunction

HheaderNavigationStyle

HheaderViewPosition

HhideAllDay

HhideNonworkingWeekdays

HhideOtherMonthDays

HhideTodayButton

HhideViewMenuCheckableItems

LlegendLayoutMenuBreakpoint

MmouseWheelStep

HhorizontalScrollBarVisibility

Mmax

Mmin

NnotificationInterval

RresizeHandlesVisibility

SscrollButtonsPosition

SshadeUntilCurrentTime

SspinButtonsInitialDelay

Sstatuses

Ttheme

TtimelineHeaderFormatFunction

VverticalScrollBarVisibility

WwindowCustomizationFunction

Properties

autoScrollStepnumber

Determines the scroll speed while dragging an event.

Default value

Example

Set the autoScrollStep property.

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

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

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

 scheduler.autoScrollStep = 10;

Get the autoScrollStep property.

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

 let autoScrollStep = scheduler.autoScrollStep;

autoHeightAllDayCellsboolean

Determines whether the all day cells in Day and Week views automatically change their height depending on the events count in these cells.

Default value

false

Example

Set the autoHeightAllDayCells property.

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

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

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

 scheduler.autoHeightAllDayCells = true;

Get the autoHeightAllDayCells property.

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

 let autoHeightAllDayCells = scheduler.autoHeightAllDayCells;

availablearray

Defines an array of objects with start and end fields, where start and end are Date objects. For example: [{ 'start': '2022-10-25T12:00.000Z', 'end': '2022-10-25T13:00.000Z' }].

Try a demo showcasing the available property.

colorSchemestring[]

Determines the color scheme for the event background selector in the event window editor.

Example

Set the colorScheme property.

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

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

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

 scheduler.colorScheme = ['', '#33B679', '#0B8043', '#039BE5', '#3F51B5'];

Get the colorScheme property.

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

 let colorScheme = scheduler.colorScheme;

currentTimeIndicatorboolean

Enables/Disables the current time indicator. Current time indicator shows the current time in the appropriate view cells.

Default value

false

Example

Set the currentTimeIndicator property.

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

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

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

 scheduler.currentTimeIndicator = false;

Get the currentTimeIndicator property.

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

 let currentTimeIndicator = scheduler.currentTimeIndicator;

currentTimeIndicatorIntervalnumber

Determines the refresh interval in seconds for the currentTimeIndicator.

Default value

Example

Set the currentTimeIndicatorInterval property.

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

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

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

 scheduler.currentTimeIndicatorInterval = 120;

Get the currentTimeIndicatorInterval property.

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

 let currentTimeIndicatorInterval = scheduler.currentTimeIndicatorInterval;

contextMenuDataSource[]

Determines the context menu items that are visible when the Context Menu is opened.

Example

Set the contextMenuDataSource property.

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

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

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

 scheduler.contextMenuDataSource = [{ label: 'Custom Item', value: 'customItemAction' }];

Get the contextMenuDataSource property.

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

 let contextMenuDataSource = scheduler.contextMenuDataSource;

contextMenuClipboardActionsboolean

Determines whether the clipboard shortcuts for copy/paste/cut action of events are visible in the Scheduler context menu or not.

Default value

false

Example

Set the contextMenuClipboardActions property.

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

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

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

 scheduler.contextMenuClipboardActions = false;

Get the contextMenuClipboardActions property.

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

 let contextMenuClipboardActions = scheduler.contextMenuClipboardActions;

Allows to customize the content of the event elements. It can be an HTMLTemplateElement that will be applied to all events or it's id as a string or a function that will be called for each event with the following parameters:

eventContent - the content holder for the event,
eventObj - the event object.

. When using an HTMLTemplateElement it's possible to add property bindings inside the template that will be mapped to the corresponding object properties.

Try a demo showcasing the eventTemplate property.

Example

Set the eventTemplate property.

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

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

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

 scheduler.eventTemplate = eventTemplateId;

Get the eventTemplate property.

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

 let eventTemplate = scheduler.eventTemplate;

eventCollectorTemplateany

Allows to customize the content of the event collector elements. It can be an HTMLTemplateElement that will be applied to all events or it's id as a string or a function that will be called for each event with the following parameters:

eventContent - the content holder for the event,
eventObj - the event object.

. When using an HTMLTemplateElement it's possible to add property bindings inside the template that will be mapped to the corresponding object properties.

Example

Set the eventCollectorTemplate property.

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

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

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

 scheduler.eventCollectorTemplate = eventTemplateId;

Get the eventCollectorTemplate property.

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

 let eventCollectorTemplate = scheduler.eventCollectorTemplate;

eventRenderMode"classic" | "modern"

Determines how the events inside the Scheduler are rendered.

classic - the events are arranged next to each other and try to fit inside the cells.
modern - the events obey the CSS property that determines their size and if there's not enough space inside the cell for all events to appear, an event collector is created to hold the rest of the events. On mobile phones only collectors are created.

Allowed Values

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

Default value

"modern"

Try a demo showcasing the eventRenderMode property.

Example

Set the eventRenderMode property.

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

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

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

 scheduler.eventRenderMode = 'modern';

Get the eventRenderMode property.

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

 let eventRenderMode = scheduler.eventRenderMode;

eventTooltipTemplateany

Allows to customize the content of the event menu items (tooltip). When clicked on an event element an event menu with details opens. It can be an HTMLTemplateElement that will be applied to all events or it's id as a string or a function that will be called for each event with the following parameters:

eventContent - the content holder for the event,
eventObj - the event object.

. When using an HTMLTemplateElement it's possible to add property bindings inside the template that will be mapped to the corresponding object properties.

Example

Set the eventTooltipTemplate property.

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

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

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

 scheduler.eventTooltipTemplate = eventTemplateId;

Get the eventTooltipTemplate property.

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

 let eventTooltipTemplate = scheduler.eventTooltipTemplate;

cellTemplateany

Allows to customize the content of the timeline cells. It can be an HTMLTemplateElement that will be applied to all cells or it's id as a string or a function that will be called for each cell with the following parameters:

cellContent - the content holder for the cell,
cellDate - the cell date.

. When using an HTMLTemplateElement it's possible to add property bindings inside the template that will be mapped to the value of the cell.

Example

Set the cellTemplate property.

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

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

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

 scheduler.cellTemplate = cellTemplateId;

Get the cellTemplate property.

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

 let cellTemplate = scheduler.cellTemplate;

dateCurrentstring | Date

Determines the currently visible date for the Scheduler.

Default value

new Date()

Example

Set the dateCurrent property.

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

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

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

 scheduler.dateCurrent = 2021-05-25;

Get the dateCurrent property.

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

 let dateCurrent = scheduler.dateCurrent;

dataExportobject

Sets the Schedulers's Data Export options.

Properties

headerboolean

Sets whether the columns header will be exported.

Default value

true

Get the header property.

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

 let header = scheduler.dataExport.header;

columnsstring[]

Sets the name of the event properties that will be exported as columns.

Default value

Get the columns property.

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

 let columns = scheduler.dataExport.columns;

styleobject

Sets a custom style object of the dataExport.

Get the style property.

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

 let style = scheduler.dataExport.style;

fileNamestring

Sets the exported file's name.

Default value

"smartScheduler"

Get the fileName property.

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

 let fileName = scheduler.dataExport.fileName;

pageOrientationstring

Sets the page orientation, when exporting to PDF.

Default value

"portrait"

Get the pageOrientation property.

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

 let pageOrientation = scheduler.dataExport.pageOrientation;

Try a demo showcasing the dataExport property.

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

Determines the events that will be loaded inside the Timeline. Each event represents an object that should contain the following properties:

Properties

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

Event Repeat Object.

Default value

null

Properties

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

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

Default value

"hourly"

Get the repeatFreq property.

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

 let repeatFreq = scheduler.dataSource.repeatFreq;

repeatIntervalnumber

Determines the repeating interval.

Default value

Get the repeatInterval property.

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

 let repeatInterval = scheduler.dataSource.repeatInterval;

repeatOnnumber | object | Date | string | undefined

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

Default value

Get the repeatOn property.

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

 let repeatOn = scheduler.dataSource.repeatOn;

repeatEndnumber | date | undefined

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

Default value

Get the repeatEnd property.

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

 let repeatEnd = scheduler.dataSource.repeatEnd;

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

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

Default value

null

Get the exceptions property.

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

 let exceptions = scheduler.dataSource.exceptions;

Get the repeat property.

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

 let repeat = scheduler.dataSource.repeat.repeat;

classstring

Event CSS class.

Default value

Get the class property.

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

 let class = scheduler.dataSource.repeat.class;

dateStartstring | Date

Event start date.

Default value

Get the dateStart property.

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

 let dateStart = scheduler.dataSource.repeat.dateStart;

dateEndstring | Date

Event end date.

Default value

Get the dateEnd property.

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

 let dateEnd = scheduler.dataSource.repeat.dateEnd;

disableDragboolean

Determines whether dragging is disabled for the event.

Default value

false

Get the disableDrag property.

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

 let disableDrag = scheduler.dataSource.repeat.disableDrag;

disableResizeboolean

Determines whether resizing is disabled for the event.

Default value

false

Get the disableResize property.

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

 let disableResize = scheduler.dataSource.repeat.disableResize;

idstring?

Event unique id.

Default value

Get the id property.

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

 let id = scheduler.dataSource.repeat.id;

labelstring?

Event Label.

Default value

Get the label property.

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

 let label = scheduler.dataSource.repeat.label;

descriptionstring?

Event Description.

Default value

Get the description property.

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

 let description = scheduler.dataSource.repeat.description;

allDayboolean?

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

Default value

false

Get the allDay property.

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

 let allDay = scheduler.dataSource.repeat.allDay;

backgroundColorstring?

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

Default value

false

Get the backgroundColor property.

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

 let backgroundColor = scheduler.dataSource.repeat.backgroundColor;

colorstring?

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

Default value

false

Get the color property.

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

 let color = scheduler.dataSource.repeat.color;

statusstring?

Sets the appointment status.

Default value

false

Get the status property.

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

 let status = scheduler.dataSource.repeat.status;

resourceIdstring?

Event resource unique id.

Default value

Get the resourceId property.

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

 let resourceId = scheduler.dataSource.repeat.resourceId;

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

Event notifications.

Properties

intervalnumber

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

Default value

Get the interval property.

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

 let interval = scheduler.dataSource.repeat.notifications[0].interval;

type"days" | "weeks"

The type of the interval for the notification.

Default value

"days"

Get the type property.

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

 let type = scheduler.dataSource.repeat.notifications[0].type;

timenumber[]

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

Get the time property.

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

 let time = scheduler.dataSource.repeat.notifications[0].time;

messagestring?

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

Default value

Get the message property.

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

 let message = scheduler.dataSource.repeat.notifications[0].message;

iconTypestring?

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

Default value

Get the iconType property.

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

 let iconType = scheduler.dataSource.repeat.notifications[0].iconType;

Get the notifications property.

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

 let notifications = scheduler.dataSource.repeat.notifications;

Try a demo showcasing the dataSource property.

Example

Set the dataSource property.

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

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

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

 scheduler.dataSource =  { label: 'City Tour', dateStart: '2021-07-09' dateEnd: '2021-07-10' }, { label: 'Kayaking', dateStart: '2021-07-05' dateEnd: '2021-07-06' };

Get the dataSource property.

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

 let dataSource = scheduler.dataSource;

dateSelectorFormatFunctionany

A callback that can be used to customize the text inside the date selector located in the header. The callback has one parameter - the current date.

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

Determines the day format of the dates in the timeline.

Default value

"short"

Example

Set the dayFormat property.

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

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

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

 scheduler.dayFormat = 'short';

Get the dayFormat property.

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

 let dayFormat = scheduler.dayFormat;

disabledboolean

Enables or disables the element.

Default value

false

Example

Set the disabled property.

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

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

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

 scheduler.disabled = false;

Get the disabled property.

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

 let disabled = scheduler.disabled;

disableAutoScrollboolean

Disables auto scrolling of the timeline while dragging/resizing an event.

Default value

false

Example

Set the disableAutoScroll property.

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

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

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

 scheduler.disableAutoScroll = false;

Get the disableAutoScroll property.

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

 let disableAutoScroll = scheduler.disableAutoScroll;

disableDragboolean

Disables dragging of events.

Default value

false

Try a demo showcasing the disableDrag property.

Example

Set the disableDrag property.

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

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

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

 scheduler.disableDrag = false;

Get the disableDrag property.

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

 let disableDrag = scheduler.disableDrag;

disableDropboolean

Disables dropping of events.

Default value

false

Try a demo showcasing the disableDrop property.

Example

Set the disableDrop property.

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

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

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

 scheduler.disableDrop = false;

Get the disableDrop property.

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

 let disableDrop = scheduler.disableDrop;

disableResizeboolean

Disables resizing of events.

Default value

false

Example

Set the disableResize property.

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

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

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

 scheduler.disableResize = false;

Get the disableResize property.

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

 let disableResize = scheduler.disableResize;

disableSelectionboolean

Disables the cell selection.

Default value

false

Example

Set the disableSelection property.

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

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

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

 scheduler.disableSelection = false;

Get the disableSelection property.

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

 let disableSelection = scheduler.disableSelection;

disableWindowEditorboolean

Disables the window editor for the events.

Default value

false

Try a demo showcasing the disableWindowEditor property.

Example

Set the disableWindowEditor property.

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

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

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

 scheduler.disableWindowEditor = false;

Get the disableWindowEditor property.

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

 let disableWindowEditor = scheduler.disableWindowEditor;

disableContextMenuboolean

Disables the context menu of the events and cells.

Default value

false

Try a demo showcasing the disableContextMenu property.

Example

Set the disableContextMenu property.

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

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

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

 scheduler.disableContextMenu = false;

Get the disableContextMenu property.

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

 let disableContextMenu = scheduler.disableContextMenu;

disableEventMenuboolean

Disables the event menu that appears when an event/collector has been clicked.

Default value

false

Try a demo showcasing the disableEventMenu property.

Example

Set the disableEventMenu property.

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

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

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

 scheduler.disableEventMenu = false;

Get the disableEventMenu property.

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

 let disableEventMenu = scheduler.disableEventMenu;

disableViewMenuboolean

Disables the view menu that allows to select the current Scheduler view.

Default value

false

Try a demo showcasing the disableViewMenu property.

Example

Set the disableViewMenu property.

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

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

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

 scheduler.disableViewMenu = false;

Get the disableViewMenu property.

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

 let disableViewMenu = scheduler.disableViewMenu;

disableDateMenuboolean

Disables the date menu that allows to select the current Scheduler date.

Default value

false

Try a demo showcasing the disableDateMenu property.

Example

Set the disableDateMenu property.

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

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

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

 scheduler.disableDateMenu = false;

Get the disableDateMenu property.

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

 let disableDateMenu = scheduler.disableDateMenu;

dragFeedbackFormatFunctionany

A callback that can be used to customize the drag feedback that appears when an event is dragged.

dragOffsetarray

Determines the offset for the drag feedback from the pointer.

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

Determines the filtering condition for the events.The filter property takes an array of objects or a function. Each object represents a single filtering condition with the following attributes:

name - the name of the Scheduler event property that will be filtered by.
value - the filtering condition value. The value will be used to compare the events based on the filterMode, for example: [{ name: 'price', value: 25 }]. The value can also be a function. The function accepts a single arguemnt - the value that corresponds to the filtered attribute. The function allows to apply custom condition that is different from the default filter modes. It should return true ( if the evnet passes the filtering condition ) or false ( if the event does not meet the filtering condition ). Here's an example: [{ name: 'roomId', value: (id) => ['2', '3'].indexOf(id + '') > -1 }]. In the example the events that do not have a 'roomId' property that is equal to '2' or '3' will be filtered out.

. If a function is set to the filter property instead, it allows to completely customize the filtering logic. The function passes a single argument - each Scheduler event that will be displayed. The function should return true ( if the condition is met ) or false ( if not ).

filterablearray

Determines whether Scheduler's filtering is enabled or not.

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

Determines the filter mode.

Allowed Values

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

Default value

"equals"

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

A getter that returns an array of all Scheduler events.

Default value

null

Properties

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

Event Repeat Object.

Default value

null

Properties

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

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

Default value

"hourly"

Get the repeatFreq property.

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

 let repeatFreq = scheduler.events[0].repeatFreq;

repeatIntervalnumber

Determines the repeating interval.

Default value

Get the repeatInterval property.

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

 let repeatInterval = scheduler.events[0].repeatInterval;

repeatOnnumber | object | Date | string | undefined

Default value

Get the repeatOn property.

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

 let repeatOn = scheduler.events[0].repeatOn;

repeatEndnumber | Date | undefined

Default value

Get the repeatEnd property.

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

 let repeatEnd = scheduler.events[0].repeatEnd;

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

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

Default value

null

Get the exceptions property.

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

 let exceptions = scheduler.events[0].exceptions;

Get the repeat property.

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

 let repeat = scheduler.events[0].repeat.repeat;

classstring

Event CSS class.

Default value

Get the class property.

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

 let class = scheduler.events[0].repeat.class;

dateStartstring | Date

Event start date.

Default value

Get the dateStart property.

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

 let dateStart = scheduler.events[0].repeat.dateStart;

dateEndstring | Date

Event end date.

Default value

Get the dateEnd property.

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

 let dateEnd = scheduler.events[0].repeat.dateEnd;

disableDragboolean

Determines whether dragging is disabled for the event.

Default value

false

Get the disableDrag property.

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

 let disableDrag = scheduler.events[0].repeat.disableDrag;

disableResizeboolean

Determines whether resizing is disabled for the event.

Default value

false

Get the disableResize property.

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

 let disableResize = scheduler.events[0].repeat.disableResize;

idstring | undefined

Event unique id.

Default value

Get the id property.

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

 let id = scheduler.events[0].repeat.id;

labelstring | undefined

Event Label.

Default value

Get the label property.

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

 let label = scheduler.events[0].repeat.label;

descriptionstring | undefined

Event Description.

Default value

Get the description property.

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

 let description = scheduler.events[0].repeat.description;

allDayboolean | undefined

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

Default value

false

Get the allDay property.

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

 let allDay = scheduler.events[0].repeat.allDay;

backgroundColorstring | undefined

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

Default value

false

Get the backgroundColor property.

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

 let backgroundColor = scheduler.events[0].repeat.backgroundColor;

colorstring | undefined

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

Default value

false

Get the color property.

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

 let color = scheduler.events[0].repeat.color;

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

Event notifications.

Properties

intervalnumber

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

Default value

Get the interval property.

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

 let interval = scheduler.events[0].repeat.notifications[0].interval;

type"days" | "weeks"

The type of the interval for the notification.

Default value

"days"

Get the type property.

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

 let type = scheduler.events[0].repeat.notifications[0].type;

timearray

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

Get the time property.

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

 let time = scheduler.events[0].repeat.notifications[0].time;

messagestring | undefined

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

Default value

Get the message property.

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

 let message = scheduler.events[0].repeat.notifications[0].message;

iconTypestring | undefined

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

Default value

Get the iconType property.

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

 let iconType = scheduler.events[0].repeat.notifications[0].iconType;

Get the notifications property.

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

 let notifications = scheduler.events[0].repeat.notifications;

firstDayOfWeeknumber

Determines the first day of week for the Scheduler. By default it's Sunday.

Default value

Example

Set the firstDayOfWeek property.

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

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

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

 scheduler.firstDayOfWeek = 2;

Get the firstDayOfWeek property.

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

 let firstDayOfWeek = scheduler.firstDayOfWeek;

footerTemplateany

Allows to customize the footer of the Scheduler. It can be an HTMLTemplateElement, it's id as a string or a function with the following parameters:

footerContainer - the footer container.

Example

Set the footerTemplate property.

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

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

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

 scheduler.footerTemplate = footerTemplateId;

Get the footerTemplate property.

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

 let footerTemplate = scheduler.footerTemplate;

groupByDateboolean

Determines whether the events will be grouped by date.

Default value

false

Example

Set the groupByDate property.

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

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

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

 scheduler.groupByDate = false;

Get the groupByDate property.

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

 let groupByDate = scheduler.groupByDate;

groupOrientation"horizontal" | "vertical"

Determines the grouping orientation.

Default value

"horizontal"

Try a demo showcasing the groupOrientation property.

Example

Set the groupOrientation property.

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

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

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

 scheduler.groupOrientation = 'horizontal';

Get the groupOrientation property.

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

 let groupOrientation = scheduler.groupOrientation;

groupTemplateany

Allows to customize the content of the group cells that are visible inside the header. It can be an HTMLTemplateElement that will be applied to all cells or it's id as a string or a function that will be called for each group cell with the following parameters:

cellContent - the content holder for the group cell.
cellObj - the group cell object.

. When using an HTMLTemplateElement it's possible to add property bindings inside the template that will be mapped to the corresponding object properties.

Example

Set the groupTemplate property.

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

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

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

 scheduler.groupTemplate = groupCellTemplateId;

Get the groupTemplate property.

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

 let groupTemplate = scheduler.groupTemplate;

groupsarray

Determines the resources that the events are grouped by.

Try a demo showcasing the groups property.

Example

Set the groups property.

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

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

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

 scheduler.groups = priorityId, heroId, movieId;

Get the groups property.

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

 let groups = scheduler.groups;

hourEndnumber

Determines the end hour that will be displayed in 'day' and 'week' views.

Default value

Example

Set the hourEnd property.

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

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

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

 scheduler.hourEnd = 20;

Get the hourEnd property.

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

 let hourEnd = scheduler.hourEnd;

hourStartnumber

Determines the start hour that will be displayed in 'day' and 'week' views.

Default value

Example

Set the hourStart property.

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

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

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

 scheduler.hourStart = 12;

Get the hourStart property.

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

 let hourStart = scheduler.hourStart;

hourFormat"2-digit" | "numeric"

Determines the formatting of hours inside the element.

Default value

"numeric"

Example

Set the hourFormat property.

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

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

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

 scheduler.hourFormat = 'numeric';

Get the hourFormat property.

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

 let hourFormat = scheduler.hourFormat;

headerTemplateany

Allows to customize the header of the Scheduler. It can be an HTMLTemplateElement, it's id as a string or a function with the following parameters:

headerContent - the header container.

Example

Set the headerTemplate property.

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

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

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

 scheduler.headerTemplate = headerTemplateId;

Get the headerTemplate property.

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

 let headerTemplate = scheduler.headerTemplate;

headerDatePosition"far" | "near"

Determines the position of the Date selector inside the Header of the element.

Default value

"near"

Try a demo showcasing the headerDatePosition property.

Example

Set the headerDatePosition property.

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

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

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

 scheduler.headerDatePosition = 'near';

Get the headerDatePosition property.

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

 let headerDatePosition = scheduler.headerDatePosition;

headerNavigationStyle"flat" | "raised"

Determines the styling of the Header navigation controls.

Allowed Values

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

Default value

"flat"

Try a demo showcasing the headerNavigationStyle property.

Example

Set the headerNavigationStyle property.

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

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

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

 scheduler.headerNavigationStyle = 'flat';

Get the headerNavigationStyle property.

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

 let headerNavigationStyle = scheduler.headerNavigationStyle;

headerViewPosition"far" | "near"

Determines the position of the view selector control inside the Header of the element.

Default value

"far"

Try a demo showcasing the headerViewPosition property.

Example

Set the headerViewPosition property.

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

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

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

 scheduler.headerViewPosition = 'far';

Get the headerViewPosition property.

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

 let headerViewPosition = scheduler.headerViewPosition;

hideAllDayboolean

Determines whether the 'All Day' container with the all day events is hidden or not.

Default value

false

Try a demo showcasing the hideAllDay property.

Example

Set the hideAllDay property.

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

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

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

 scheduler.hideAllDay = false;

Get the hideAllDay property.

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

 let hideAllDay = scheduler.hideAllDay;

hideNonworkingWeekdaysboolean

Determines whether the days set by 'nonworkingDays' property are hidden or not.

Default value

false

Try a demo showcasing the hideNonworkingWeekdays property.

Example

Set the hideNonworkingWeekdays property.

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

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

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

 scheduler.hideNonworkingWeekdays = false;

Get the hideNonworkingWeekdays property.

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

 let hideNonworkingWeekdays = scheduler.hideNonworkingWeekdays;

hideOtherMonthDaysboolean

Determines whether other month days are visible when view is set to month. When enabled, events that start on other month days are not displayed and the cells that represent such days do not allow the creation of new events on them. Also dragging and droping an event on other month days is not allowed. Reszing is also affected. Events can end on other month days, but cannot start on one.

Default value

false

Example

Set the hideOtherMonthDays property.

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

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

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

 scheduler.hideOtherMonthDays = false;

Get the hideOtherMonthDays property.

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

 let hideOtherMonthDays = scheduler.hideOtherMonthDays;

hideTodayButtonboolean

Determines whether the 'Today' button is hidden or not.

Default value

false

Try a demo showcasing the hideTodayButton property.

Example

Set the hideTodayButton property.

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

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

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

 scheduler.hideTodayButton = false;

Get the hideTodayButton property.

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

 let hideTodayButton = scheduler.hideTodayButton;

hideViewMenuCheckableItemsboolean

Determines whether the checkable items in the view selection menu are hidden or not.

Default value

false

Try a demo showcasing the hideViewMenuCheckableItems property.

Example

Set the hideViewMenuCheckableItems property.

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

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

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

 scheduler.hideViewMenuCheckableItems = false;

Get the hideViewMenuCheckableItems property.

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

 let hideViewMenuCheckableItems = scheduler.hideViewMenuCheckableItems;

hideWeekendboolean

Determines whether the weekend days are hidden or not.

Default value

false

Try a demo showcasing the hideWeekend property.

Example

Set the hideWeekend property.

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

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

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

 scheduler.hideWeekend = false;

Get the hideWeekend property.

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

 let hideWeekend = scheduler.hideWeekend;

Determines the location of the legend inside the Scheduler. By default the location is inside the footer but it can also reside in the header.

Allowed Values

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

Default value

"footer"

Try a demo showcasing the legendLocation property.

Example

Set the legendLocation property.

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

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

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

 scheduler.legendLocation = 'footer';

Get the legendLocation property.

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

 let legendLocation = scheduler.legendLocation;

legendPosition"near" | "far"

Determines the position of the legend. By default it's positioned to the near side but setting it to 'far' will change that.

Allowed Values

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

Default value

"near"

Try a demo showcasing the legendPosition property.

Example

Set the legendPosition property.

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

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

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

 scheduler.legendPosition = 'near';

Get the legendPosition property.

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

 let legendPosition = scheduler.legendPosition;

Determines the layout of the legend items.

Allowed Values

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

Default value

"auto"

Example

Set the legendLayout property.

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

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

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

 scheduler.legendLayout = 'menu';

Get the legendLayout property.

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

 let legendLayout = scheduler.legendLayout;

legendLayoutMenuBreakpointnumber

Determines the number of items when the legend switches automatically from horizontal list to menu.

Default value

Example

Set the legendLayoutMenuBreakpoint property.

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

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

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

 scheduler.legendLayoutMenuBreakpoint = 15;

Get the legendLayoutMenuBreakpoint property.

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

 let legendLayoutMenuBreakpoint = scheduler.legendLayoutMenuBreakpoint;

mouseWheelStepnumber

Determines the mouse wheel step. When this property is set to a positive number, the scroll step with mouse wheel or trackpad will depend on the property value.

Default value

Example

Set the mouseWheelStep property.

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

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

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

 scheduler.mouseWheelStep = 120;

Get the mouseWheelStep property.

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

 let mouseWheelStep = scheduler.mouseWheelStep;

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

Determines weather or not horizontal scrollbar is shown.

Default value

"auto"

Example

Set the horizontalScrollBarVisibility property.

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

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

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

 scheduler.horizontalScrollBarVisibility = 'hidden';

Get the horizontalScrollBarVisibility property.

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

 let horizontalScrollBarVisibility = scheduler.horizontalScrollBarVisibility;

localestring

Determines the language of the Scheduler.

Default value

"en"

Try a demo showcasing the locale property.

Example

Set the locale property.

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

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

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

 scheduler.locale = 'en';

Get the locale property.

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

 let locale = scheduler.locale;

maxstring | date

Detetmines the maximum view date for the Scheduler.

Default value

2100-1-1

Example

Set the max property.

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

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

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

 scheduler.max = 2025-12-31;

Get the max property.

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

 let max = scheduler.max;

maxEventsPerCellnumber | null

Detetmines the maximum number of events per Scheduler cell. By default this property is null which means that the number of events per cell is automatically determined by the size of the events.

Example

Set the maxEventsPerCell property.

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

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

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

 scheduler.maxEventsPerCell = null;

Get the maxEventsPerCell property.

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

 let maxEventsPerCell = scheduler.maxEventsPerCell;

minstring | date

Detetmines the minimum view date for the Scheduler.

Default value

1900-1-1

Example

Set the min property.

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

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

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

 scheduler.min = 2005-12-31;

Get the min property.

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

 let min = scheduler.min;

messagesobject

Sets or gets an object specifying strings used in the element that can be localized. Used in conjunction with the property locale.

Default value

Try a demo showcasing the messages property.

Example

Set the messages property.

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

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

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

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

Get the messages property.

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

 let messages = scheduler.messages;

minuteFormat"2-digit" | "numeric"

Determines the minute formatting inside the Scheduler.

Default value

"2-digit"

Example

Set the minuteFormat property.

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

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

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

 scheduler.minuteFormat = '2-digit';

Get the minuteFormat property.

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

 let minuteFormat = scheduler.minuteFormat;

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

Determines the month name formatting inside the Scheduler.

Default value

"long"

Example

Set the monthFormat property.

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

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

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

 scheduler.monthFormat = 'short';

Get the monthFormat property.

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

 let monthFormat = scheduler.monthFormat;

nonworkingDaysnumber[] | array[]

Determines the nonworking days of the week from 0 to 6, where 0 is the first day of the week and 6 is the last day. Nonworking days will be colored differently inside the Timeline. The color is determined by a CSS variable.

Try a demo showcasing the nonworkingDays property.

Example

Set the nonworkingDays property.

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

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

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

 scheduler.nonworkingDays = [0,5,6];

Get the nonworkingDays property.

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

 let nonworkingDays = scheduler.nonworkingDays;

nonworkingHoursnumber[] | array[]

Determines the nonworking hours of the day. Hours are represented as numbers inside an array, however ranges of hours can be defined as an array with starting and ending hour separated by a comma. In the timline the cells that represent nonworking days are colored differently from the rest.

Example

Set the nonworkingHours property.

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

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

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

 scheduler.nonworkingHours = [22, 23, [0, 6]];

Get the nonworkingHours property.

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

 let nonworkingHours = scheduler.nonworkingHours;

notificationIntervalnumber

Determines the interval (in seconds) at which the element will check for notifications.

Default value

Example

Set the notificationInterval property.

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

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

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

 scheduler.notificationInterval = 10;

Get the notificationInterval property.

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

 let notificationInterval = scheduler.notificationInterval;

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

Determines the visibility of the resize handles.

Allowed Values

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

Default value

"auto"

Example

Set the resizeHandlesVisibility property.

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

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

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

 scheduler.resizeHandlesVisibility = 'auto';

Get the resizeHandlesVisibility property.

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

 let resizeHandlesVisibility = scheduler.resizeHandlesVisibility;

resizeIntervalnumber

Determines the rate at which the element will refresh it's content on element resize. By default it's refresh immediately. This property is used for element resize throttling

Default value

Example

Set the resizeInterval property.

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

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

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

 scheduler.resizeInterval = 200;

Get the resizeInterval property.

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

 let resizeInterval = scheduler.resizeInterval;

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

An array of resources that can be assigned to the events.

Properties

labelstring

Resource label.

Default value

Get the label property.

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

 let label = scheduler.resources[0].label;

valuestring

Resource unique value.

Default value

Get the value property.

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

 let value = scheduler.resources[0].value;

dataSourceobject[]

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

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

Default value

Get the dataSource property.

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

 let dataSource = scheduler.resources[0].dataSource;

sortBystring

Determines the property name to sort the dataSource by.

Default value

"null"

Get the sortBy property.

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

 let sortBy = scheduler.resources[0].sortBy;

sortFunctionfunction

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

Get the sortFunction property.

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

 let sortFunction = scheduler.resources[0].sortFunction;

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

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

Allowed Values

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

Default value

"asc"

Get the sortOrder property.

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

 let sortOrder = scheduler.resources[0].sortOrder;

Try a demo showcasing the resources property.

Example

Set the resources property.

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

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

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

 scheduler.resources =  { label: 'City Tour', dateStart: '2021-07-09' dateEnd: '2021-07-10' }, { label: 'Kayaking', dateStart: '2021-07-05' dateEnd: '2021-07-06' };

Get the resources property.

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

 let resources = scheduler.resources;

restrictedDatesarray

Defines an array of dates that are not allowed to have events on. Events that overlap restricted Dates or start/end on them will not be displayed.

Try a demo showcasing the restrictedDates property.

Example

Set the restrictedDates property.

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

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

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

 scheduler.restrictedDates = [new Date(2022, 5, 26)];

Get the restrictedDates property.

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

 let restrictedDates = scheduler.restrictedDates;

restrictedHoursarray

Defines an array of hours that are not allowed to have events on. Events that overlap restricted Hours or start/end on them will not be displayed.

Try a demo showcasing the restrictedHours property.

Example

Set the restrictedHours property.

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

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

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

 scheduler.restrictedHours = [21,22,23];

Get the restrictedHours property.

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

 let restrictedHours = scheduler.restrictedHours;

restrictedarray

Defines an array of dates and hours that are not allowed to have events on. Events that overlap restricted Hours or start/end on them will not be displayed. Each array item is an Object and requires 2 fields - date and hours. For example: { date: new Date(2022, 10, 1), hours: [[0, 6], 12, [20, 23]] }. The hours define a range of restricted hours similartly to the restricted hours property, the date defines a date where the restricted hours will be applied.

Try a demo showcasing the restricted property.

rightToLeftboolean

Sets or gets the value indicating whether the element is aligned to support locales using right-to-left fonts.

Default value

false

Try a demo showcasing the rightToLeft property.

Example

Set the rightToLeft property.

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

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

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

 scheduler.rightToLeft = false;

Get the rightToLeft property.

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

 let rightToLeft = scheduler.rightToLeft;

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

Determines the position of the date navigation navigation buttons inside the header of the element.

Allowed Values

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

Default value

"near"

Try a demo showcasing the scrollButtonsPosition property.

Example

Set the scrollButtonsPosition property.

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

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

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

 scheduler.scrollButtonsPosition = 'near';

Get the scrollButtonsPosition property.

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

 let scrollButtonsPosition = scheduler.scrollButtonsPosition;

shadeUntilCurrentTimeboolean

Enables/Disables the current time shader. If enabled all cells that represent past time will be shaded.

Default value

false

Try a demo showcasing the shadeUntilCurrentTime property.

Example

Set the shadeUntilCurrentTime property.

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

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

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

 scheduler.shadeUntilCurrentTime = false;

Get the shadeUntilCurrentTime property.

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

 let shadeUntilCurrentTime = scheduler.shadeUntilCurrentTime;

showLegendboolean

Determines whether the resource legend is visible or not. The Legend shows the resources and their items in the footer section of the Scheduler. If filterable is enabled it is possible to filter by resource items by clicking on the corresponding resource item from the legend.

Default value

false

Try a demo showcasing the showLegend property.

Example

Set the showLegend property.

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

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

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

 scheduler.showLegend = false;

Get the showLegend property.

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

 let showLegend = scheduler.showLegend;

sortBystring

Determines the name of the resource data item property that will be used for sorting the resource data defined as the resource.dataSource.

Default value

"null"

Example

Set the sortBy property.

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

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

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

 scheduler.sortBy = 'id';

Get the sortBy property.

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

 let sortBy = scheduler.sortBy;

sortFunctionfunction

Allows to define a custom sorting function that will be used to sort the resource data. The sortFunction is used when sortOrder is set to custom.

Example

Set the sortFunction property.

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

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

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

 scheduler.sortFunction = (a, b) => a.label.length - b.label.length;

Get the sortFunction property.

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

 let sortFunction = scheduler.sortFunction;

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

Determines the sorting order of the resource data items. 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"

Example

Set the sortOrder property.

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

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

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

 scheduler.sortOrder = 'desc';

Get the sortOrder property.

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

 let sortOrder = scheduler.sortOrder;

spinButtonsDelaynumber

Determines the repeating delay of the repeat buttons inside the header of the element. Such buttons are the Date navigation buttons and the view scroll buttons.

Default value

Example

Set the spinButtonsDelay property.

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

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

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

 scheduler.spinButtonsDelay = 100;

Get the spinButtonsDelay property.

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

 let spinButtonsDelay = scheduler.spinButtonsDelay;

spinButtonsInitialDelaynumber

Determines the initial delay of the repeat buttons inside the header of the element. Such buttons are the Date navigation buttons and the view scroll buttons.

Default value

Example

Set the spinButtonsInitialDelay property.

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

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

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

 scheduler.spinButtonsInitialDelay = 0;

Get the spinButtonsInitialDelay property.

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

 let spinButtonsInitialDelay = scheduler.spinButtonsInitialDelay;

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

Defines the statuses that will be available for selection thourgh the window editor for the events.

Default value

null

Properties

label

value

labelstring

Status label.

Default value

Get the label property.

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

 let label = scheduler.statuses[0].label;

valuestring

Status unique value.

Default value

Get the value property.

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

 let value = scheduler.statuses[0].value;

Example

Set the statuses property.

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

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

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

 scheduler.statuses = [{"label":"Busy","value":"busy"},{"label":"Out of Office","value":"outOfOffice"}];

Get the statuses property.

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

 let statuses = scheduler.statuses;

themestring

Sets or gets the element's visual theme.

Default value

Example

Set the theme property.

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

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

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

 scheduler.theme = 'material-purple';

Get the theme property.

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

 let theme = scheduler.theme;

timelineHeaderFormatFunctionfunction | null

A format function for the Header of the Timeline. Allows to modify the date labels in the header cells.

Try a demo showcasing the timelineHeaderFormatFunction property.

Example

Set the timelineHeaderFormatFunction property.

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

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

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

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

Get the timelineHeaderFormatFunction property.

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

 let timelineHeaderFormatFunction = scheduler.timelineHeaderFormatFunction;

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

Determines the date scale for the timeline cells.

Allowed Values

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

Default value

"hour"

Try a demo showcasing the timelineDayScale property.

Example

Set the timelineDayScale property.

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

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

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

 scheduler.timelineDayScale = 'halfHour';

Get the timelineDayScale property.

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

 let timelineDayScale = scheduler.timelineDayScale;

timeRulerTicksboolean

Enables/Disables the tick marks next to the time cells in the vertical header of the element. Time header appears in 'day' and 'week' views.

Default value

false

Try a demo showcasing the timeRulerTicks property.

Example

Set the timeRulerTicks property.

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

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

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

 scheduler.timeRulerTicks = false;

Get the timeRulerTicks property.

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

 let timeRulerTicks = scheduler.timeRulerTicks;

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

Determines the timeZone for the element. By default if the local time zone is used if the property is not set.

Default value

"Local"

Example

Set the timeZone property.

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

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

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

 scheduler.timeZone = '"UTC"';

Get the timeZone property.

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

 let timeZone = scheduler.timeZone;

timeZonesarray

Allows to display additional timeZones at once along with the default that is set via the timeZone property. Accepts an array values that represent the ids of valid time zones. The possbile time zones can be viewed in the timeZone property description. By default the local time zone is displayed.

Try a demo showcasing the timeZones property.

Example

Set the timeZones property.

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

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

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

 scheduler.timeZones = ["UTC"];

Get the timeZones property.

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

 let timeZones = scheduler.timeZones;

tooltipDelaynumber

Determines the delay ( in miliseconds) before the tooltip/menu appears.

Default value

Example

Set the tooltipDelay property.

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

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

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

 scheduler.tooltipDelay = 100;

Get the tooltipDelay property.

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

 let tooltipDelay = scheduler.tooltipDelay;

tooltipOffsetnumber[]

Determines the offset ot the tooltip/menu.

Example

Set the tooltipOffset property.

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

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

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

 scheduler.tooltipOffset = [0,0];

Get the tooltipOffset property.

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

 let tooltipOffset = scheduler.tooltipOffset;

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

Determines weather or not vertical scrollbar is shown.

Allowed Values

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

Default value

"auto"

Example

Set the verticalScrollBarVisibility property.

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

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

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

 scheduler.verticalScrollBarVisibility = 'visible';

Get the verticalScrollBarVisibility property.

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

 let verticalScrollBarVisibility = scheduler.verticalScrollBarVisibility;

viewstring

Determines the current view. The property accepts view values that are defined in the views property. Custom views should contain a valid value that will be set as the current view.

Default value

"day"

Example

Set the view property.

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

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

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

 scheduler.view = 'customDay';

Get the view property.

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

 let view = scheduler.view;

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

Indicates the current Scheduler viewType. Custom views must contain a valid type property that corresponds to one of the view types. This property should not be set.

Allowed Values

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

Default value

"day"

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

Determines the viewing date range of the timeline. The property should be set to an array of strings or view objects. When you set it to a string, you should use any of the following: 'day', 'week', 'month', 'agenda', 'timelineDay', 'timelineWeek', 'timelineMonth'. Custom views can be defined as objects instead of strings. The view object should contain the following properties:

label - the label for the view.
value - the value for the view. The value is the unique identifier for the view.
type - the type of view. The type should be one of the default allowed values for a view.
hideWeekend - an Optional property that allows to hide the weekend only for this specific view.
hideNonworkingWeekdays - an Optional property that allows to hide the nonwrking weekdays for this specific view.
shortcutKey - an Optional property that allows to set a custom shortcut key for the view.
hideHours - an Optional property applicable only to timelineWeek view that allows to hide the hour cells and only show the day cells.

Allowed Values

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

Try a demo showcasing the views property.

Example

Set the views property.

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

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

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

 scheduler.views = {"label":"Work Month","value":"workMonth","type":"month","hideNonworkingWeekdays":true};

Get the views property.

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

 let views = scheduler.views;

Determines type of the view selector located in the header of the element.

Allowed Values

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

Default value

"menu"

Example

Set the viewSelectorType property.

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

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

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

 scheduler.viewSelectorType = 'auto';

Get the viewSelectorType property.

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

 let viewSelectorType = scheduler.viewSelectorType;

viewStartDay"firstDayOfWeek" | "dateCurrent"

Determines the Start Date rule. The Week and TimelineWeek views start by default from the current date taking into account the firstDayOfWeek property. When this property is set to 'dateCurrent', these views will start from the value of the 'dateCurrent'.

Allowed Values

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

Default value

"firstDayOfWeek"

Example

Set the viewStartDay property.

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

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

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

 scheduler.viewStartDay = 'dateCurrent';

Get the viewStartDay property.

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

 let viewStartDay = scheduler.viewStartDay;

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

Determines the format of the week days inside the element.

Default value

"short"

Example

Set the weekdayFormat property.

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

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

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

 scheduler.weekdayFormat = 'narrow';

Get the weekdayFormat property.

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

 let weekdayFormat = scheduler.weekdayFormat;

yearFormat"2-digit" | "numeric"

Determines the format of the dates inside the timeline header when they represent years.

Default value

"numeric"

Example

Set the yearFormat property.

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

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

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

 scheduler.yearFormat = 'numeric';

Get the yearFormat property.

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

 let yearFormat = scheduler.yearFormat;

unfocusableboolean

Sets or gets if the element can be focused.

Default value

false

Example

Set the unfocusable property.

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

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

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

 scheduler.unfocusable = false;

Get the unfocusable property.

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

 let unfocusable = scheduler.unfocusable;

undoRedoStepsnumber

Determines the maximum number of redo/undo steps that will be remembered by the Scheduler. When the number is reached the oldest records are removed in order to add new.

Default value

100

Example

Set the undoRedoSteps property.

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

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

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

 scheduler.undoRedoSteps = 200;

Get the undoRedoSteps property.

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

 let undoRedoSteps = scheduler.undoRedoSteps;

windowCustomizationFunctionfunction | null

A function that can be used to completly customize the popup Window that is used to edit events. The function has the following arguments:

target - the target popup Window that is about to be opened.
type - the type of the window. The type determines the purpose of the window. The default type is an empty string which means that it's the default event editing window. The other type is 'confirm' ( confirmation window) that appears when clicking on a repeating event.
eventObj - the event object that is going to be edited.

Try a demo showcasing the windowCustomizationFunction property.

Example

Set the windowCustomizationFunction property.

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

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

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

 scheduler.windowCustomizationFunction = null;

Get the windowCustomizationFunction property.

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

 let windowCustomizationFunction = scheduler.windowCustomizationFunction;

Events

beginUpdateCustomEvent

This event is triggered when a batch update was started after executing the beginUpdate method.

Bubbles Yes
Cancelable No
Interface CustomEvent
Event handler property onBeginUpdate

Arguments

evCustomEvent

Methods

isDefaultPrevented

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

Returns

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

preventDefault

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

stopPropagation

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

Example

Set up the event handler of beginUpdate event.

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

endUpdateCustomEvent

This event is triggered when a batch update was ended from after executing the endUpdate method.

Bubbles Yes
Cancelable No
Interface CustomEvent
Event handler property onEndUpdate

Arguments

evCustomEvent

Methods

isDefaultPrevented

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

Returns

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

preventDefault

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

stopPropagation

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

Example

Set up the event handler of endUpdate event.

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

changeCustomEvent

This event is triggered when a new cell is selected/unselected.

Bubbles Yes
Cancelable No
Interface CustomEvent
Event handler property onChange

Arguments

evCustomEvent

ev.detailObject

ev.detail.value - The new selected Date.

ev.detail.oldValue - The previously selected Date.

Methods

isDefaultPrevented

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

Returns

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

preventDefault

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

stopPropagation

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

Example

Set up the event handler of change event.

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

	// event handling code goes here.
})

itemChangeCustomEvent

This event is triggered when an Event has been updated/inserted/removed/dragged/resized or an exception of a repeating event has been added/updated/removed.

Bubbles Yes
Cancelable No
Interface CustomEvent
Event handler property onItemChange

Arguments

evCustomEvent

ev.detailObject

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

ev.detail.type - The type of change that is being done to the item.

Methods

isDefaultPrevented

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

Returns

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

preventDefault

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

stopPropagation

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

Example

Set up the event handler of itemChange event.

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

	// event handling code goes here.
})

itemChangingCustomEvent

This event is triggered when an Event is going to be updated/inserted/removed. This event allows to cancel the operation by calling event.preventDefault() in the event handler function.

Bubbles Yes
Cancelable Yes
Interface CustomEvent
Event handler property onItemChanging

Arguments

evCustomEvent

ev.detailObject

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

ev.detail.type - The type of change that is going to be made to the item (e.g. 'inserting', 'removing', 'updating', 'exceptionInserting', 'exceptionUpdating', 'exceptionRemoving').

Methods

isDefaultPrevented

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

Returns

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

preventDefault

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

stopPropagation

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

Example

Set up the event handler of itemChanging event.

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

	// event handling code goes here.
})

itemClickCustomEvent

This event is triggered when en event, event item or a context menu item is clicked.

Bubbles Yes
Cancelable No
Interface CustomEvent
Event handler property onItemClick

Arguments

evCustomEvent

ev.detailObject

ev.detail.item - The HTMLElement for the event.

ev.detail.type - The type of item that is clicked. The possible values are:
event - when an event item is clicked.
context - when a context menu item is clicked.
.

ev.detail.itemObj - The event object.

Methods

isDefaultPrevented

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

Returns

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

preventDefault

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

stopPropagation

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

Example

Set up the event handler of itemClick event.

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

	// event handling code goes here.
})

itemInsertCustomEvent

This event is triggered when an Event is inserted.

Bubbles Yes
Cancelable No
Interface CustomEvent
Event handler property onItemInsert

Arguments

evCustomEvent

ev.detailObject

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

Methods

isDefaultPrevented

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

Returns

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

preventDefault

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

stopPropagation

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

Example

Set up the event handler of itemInsert event.

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

	// event handling code goes here.
})

itemRemoveCustomEvent

This event is triggered when an Event is removed.

Bubbles Yes
Cancelable No
Interface CustomEvent
Event handler property onItemRemove

Arguments

evCustomEvent

ev.detailObject

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

Methods

isDefaultPrevented

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

Returns

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

preventDefault

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

stopPropagation

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

Example

Set up the event handler of itemRemove event.

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

	// event handling code goes here.
})

itemUpdateCustomEvent

This event is triggered when an Event is updated.

Bubbles Yes
Cancelable No
Interface CustomEvent
Event handler property onItemUpdate

Arguments

evCustomEvent

ev.detailObject

ev.detail.type - The type of item that has been modified.

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

Methods

isDefaultPrevented

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

Returns

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

preventDefault

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

stopPropagation

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

Example

Set up the event handler of itemUpdate event.

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

	// event handling code goes here.
})

viewChangeCustomEvent

This event is triggered when the view is changed via user interaction.

Bubbles Yes
Cancelable No
Interface CustomEvent
Event handler property onViewChange

Arguments

evCustomEvent

ev.detailObject

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

ev.detail.value - The value of the new selected view.

Methods

isDefaultPrevented

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

Returns

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

preventDefault

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

stopPropagation

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

Example

Set up the event handler of viewChange event.

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

	// event handling code goes here.
})

viewChangingCustomEvent

This event is triggered before the view is changed via user interaction. The view change action can be canceled if event.preventDefault() is called on the event.

Bubbles Yes
Cancelable Yes
Interface CustomEvent
Event handler property onViewChanging

Arguments

evCustomEvent

ev.detailObject

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

ev.detail.value - The value of the new selected view.

Methods

isDefaultPrevented

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

Returns

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

preventDefault

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

stopPropagation

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

Example

Set up the event handler of viewChanging event.

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

	// event handling code goes here.
})

eventShortcutKeyCustomEvent

This event is triggered when a shortcut key for an event is pressed. By default only 'Delete' key is used.

Bubbles Yes
Cancelable No
Interface CustomEvent
Event handler property onEventShortcutKey

Arguments

evCustomEvent

ev.detailObject

ev.detail.key - The shortcut key that was pressed.

ev.detail.target - The event target (HTMLElement).

ev.detail.eventObj - The scheduler Event object that affected by the keypress.

Methods

isDefaultPrevented

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

Returns

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

preventDefault

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

stopPropagation

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

Example

Set up the event handler of eventShortcutKey event.

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

	// event handling code goes here.
})

dateChangeCustomEvent

This event is triggered when the 'dateCurrent' property is changed. This can be caused by navigating to a different date.

Bubbles Yes
Cancelable No
Interface CustomEvent
Event handler property onDateChange

Arguments

evCustomEvent

ev.detailObject

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

ev.detail.value - The current date in view.

Methods

isDefaultPrevented

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

Returns

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

preventDefault

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

stopPropagation

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

Example

Set up the event handler of dateChange event.

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

	// event handling code goes here.
})

dragStartCustomEvent

This event is triggered when dragging of an event begins. This event allows to cancel the operation by calling event.preventDefault() in the event handler function.

Bubbles Yes
Cancelable Yes
Interface CustomEvent
Event handler property onDragStart

Arguments

evCustomEvent

ev.detailObject

ev.detail.target - The HTMLElement that corresponds to the event that is going to be dragged.

ev.detail.item - The scheduler Event object that is going to be dragged.

ev.detail.itemDateRange - The start/end dates for the Scheduler Event.

ev.detail.originalEvent - The original event object.

Methods

isDefaultPrevented

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

Returns

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

preventDefault

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

stopPropagation

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

Example

Set up the event handler of dragStart event.

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

	// event handling code goes here.
})

dragEndCustomEvent

This event is triggered when dragging of an event finishes.

Bubbles Yes
Cancelable Yes
Interface CustomEvent
Event handler property onDragEnd

Arguments

evCustomEvent

ev.detailObject

ev.detail.target - The HTMLElement that corresponds to the event that is dragged.

ev.detail.item - The scheduler Event object that is dragged.

ev.detail.itemDateRange - The new start/end dates for the dragged Scheduler Event.

ev.detail.originalEvent - The original event object.

Methods

isDefaultPrevented

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

Returns

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

preventDefault

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

stopPropagation

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

Example

Set up the event handler of dragEnd event.

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

	// event handling code goes here.
})

dropoverCellCustomEvent

This event is triggered when the user drops an item over a cell.

Bubbles Yes
Cancelable No
Interface CustomEvent
Event handler property onDropoverCell

Arguments

evCustomEvent

ev.detailObject

ev.detail.target - The HTMLElement that corresponds to the event that is dragged.

ev.detail.date - The cell's date under the pointer.

ev.detail.allDay - Boolean value, which is true when the cell under the pointer is all day cell.

Methods

isDefaultPrevented

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

Returns

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

preventDefault

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

stopPropagation

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

Example

Set up the event handler of dropoverCell event.

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

	// event handling code goes here.
})

resizeStartCustomEvent

This event is triggered when resizing of a task starts. This event allows to cancel the operation by calling event.preventDefault() in the event handler function.

Bubbles Yes
Cancelable No
Interface CustomEvent
Event handler property onResizeStart

Arguments

evCustomEvent

ev.detailObject

ev.detail.target - The HTMLElement that corresponds to the event that is going to be resized.

ev.detail.item - The scheduler Event object that is going to be resized.

ev.detail.itemDateRange - The start/end dates for Scheduler Event that is going to be resized.

ev.detail.originalEvent - The original event object.

Methods

isDefaultPrevented

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

Returns

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

preventDefault

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

stopPropagation

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

Example

Set up the event handler of resizeStart event.

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

	// event handling code goes here.
})

resizeEndCustomEvent

This event is triggered when the resizing of an event finishes.

Bubbles Yes
Cancelable No
Interface CustomEvent
Event handler property onResizeEnd

Arguments

evCustomEvent

ev.detailObject

ev.detail.target - The HTMLElement that corresponds to the event that is resized.

ev.detail.item - The scheduler Event object that is resized.

ev.detail.itemDateRange - The new start/end dates for the resized Scheduler Event.

ev.detail.originalEvent - The original event object.

Methods

isDefaultPrevented

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

Returns

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

preventDefault

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

stopPropagation

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

Example

Set up the event handler of resizeEnd event.

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

	// event handling code goes here.
})

editDialogOpeningCustomEvent

This event is triggered when the user starts top open the event dialog window. This event allows to cancel the operation by calling event.preventDefault() in the event handler function.

Bubbles Yes
Cancelable Yes
Interface CustomEvent
Event handler property onEditDialogOpening

Arguments

evCustomEvent

ev.detailObject

ev.detail.target - The dialog window that is opening.

ev.detail.item - The event object that is going to be edited.

ev.detail.type - The type of window that is going to open. Two window types are available, the dafault which is an empty string ( does not have a type) and 'confirm' which is displayed when clicked on a repeating event.

ev.detail.eventObj - The event object that is the target of the menu.

Methods

isDefaultPrevented

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

Returns

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

preventDefault

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

stopPropagation

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

Example

Set up the event handler of editDialogOpening event.

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

	// event handling code goes here.
})

editDialogOpenCustomEvent

This event is triggered when the user opens the event dialog window.

Bubbles Yes
Cancelable No
Interface CustomEvent
Event handler property onEditDialogOpen

Arguments

evCustomEvent

ev.detailObject

ev.detail.target - The dialog window that is opened.

ev.detail.editors - An object containing all event editors that are present inside the window. This property is undefined when the window is of type 'confirm', because confirm windows do not contain editors.

ev.detail.item - The event object that is being edited.

ev.detail.eventObj - The event object that is the target of the menu.

Methods

isDefaultPrevented

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

Returns

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

preventDefault

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

stopPropagation

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

Example

Set up the event handler of editDialogOpen event.

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

	// event handling code goes here.
})

editDialogCloseCustomEvent

This event is triggered when the user closes the event dialog window.

Bubbles Yes
Cancelable No
Interface CustomEvent
Event handler property onEditDialogClose

Arguments

evCustomEvent

ev.detailObject

ev.detail.target - The dialog window that is closed.

ev.detail.editors - An object containing all event editors that are present inside the window. This property is undefined when the window is of type 'confirm', because confirm windows do not contain editors.

ev.detail.item - The event object that is being edited.

ev.detail.eventObj - The event object that is the target of the menu.

Methods

isDefaultPrevented

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

Returns

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

preventDefault

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

stopPropagation

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

Example

Set up the event handler of editDialogClose event.

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

	// event handling code goes here.
})

editDialogClosingCustomEvent

This event is triggered when the user is about to close the event dialog window. This event allows to cancel the operation by calling event.preventDefault() in the event handler function.

Bubbles Yes
Cancelable Yes
Interface CustomEvent
Event handler property onEditDialogClosing

Arguments

evCustomEvent

ev.detailObject

ev.detail.target - The dialog window that is closing.

ev.detail.item - The event object that is edited.

ev.detail.type - The type of window that is going to be closed. Two window types are available, the dafault which is an empty string ( does not have a type) and 'confirm' which is displayed when clicked on a repeating event.

ev.detail.eventObj - The event object that is the target of the menu.

Methods

isDefaultPrevented

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

Returns

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

preventDefault

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

stopPropagation

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

Example

Set up the event handler of editDialogClosing event.

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

	// event handling code goes here.
})

contextMenuOpeningCustomEvent

This event is triggered when the user begins to open the context menu on a timeline cell or an event element. This event allows to cancel the operation by calling event.preventDefault() in the event handler function.

Bubbles Yes
Cancelable Yes
Interface CustomEvent
Event handler property onContextMenuOpening

Arguments

evCustomEvent

ev.detailObject

ev.detail.target - The context menu instance.

ev.detail.owner - The HTMLElement that the menu belongs to.

ev.detail.cellObj - The cell object that is the target of the menu. If the target is an event instead of a cell this parameter will be undefined.

ev.detail.eventObj - The event object that is the target of the menu. If the target is a cell instead of an event this paramter will be undefined.

Methods

isDefaultPrevented

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

Returns

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

preventDefault

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

stopPropagation

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

Example

Set up the event handler of contextMenuOpening event.

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

	// event handling code goes here.
})

contextMenuOpenCustomEvent

This event is triggered when the context menu is opened.

Bubbles Yes
Cancelable No
Interface CustomEvent
Event handler property onContextMenuOpen

Arguments

evCustomEvent

ev.detailObject

ev.detail.target - The context menu instance.

ev.detail.owner - The HTMLElement that the menu belongs to.

ev.detail.cellObj - The cell object that is the target of the menu. If the target is an event instead of a cell this parameter will be undefined.

ev.detail.eventObj - The event object that is the target of the menu. If the target is a cell instead of an event this paramter will be undefined.

Methods

isDefaultPrevented

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

Returns

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

preventDefault

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

stopPropagation

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

Example

Set up the event handler of contextMenuOpen event.

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

	// event handling code goes here.
})

contextMenuCloseCustomEvent

This event is triggered when the context menu is closed.

Bubbles Yes
Cancelable No
Interface CustomEvent
Event handler property onContextMenuClose

Arguments

evCustomEvent

ev.detailObject

ev.detail.target - The context menu instance.

ev.detail.owner - The HTMLElement that the menu belongs to.

ev.detail.cellObj - The cell object that is the target of the menu. If the target is an event instead of a cell this parameter will be undefined.

ev.detail.eventObj - The event object that is the target of the menu. If the target is a cell instead of an event this paramter will be undefined.

Methods

isDefaultPrevented

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

Returns

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

preventDefault

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

stopPropagation

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

Example

Set up the event handler of contextMenuClose event.

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

	// event handling code goes here.
})

contextMenuClosingCustomEvent

This event is triggered when the user is about to close the context menu. This event allows to cancel the operation by calling event.preventDefault() in the event handler function.

Bubbles Yes
Cancelable Yes
Interface CustomEvent
Event handler property onContextMenuClosing

Arguments

evCustomEvent

ev.detailObject

ev.detail.target - The context menu instance.

ev.detail.owner - The HTMLElement that the menu belongs to.

ev.detail.cellObj - The cell object that is the target of the menu. If the target is an event instead of a cell this parameter will be undefined.

ev.detail.eventObj - The event object that is the target of the menu. If the target is a cell instead of an event this paramter will be undefined.

Methods

isDefaultPrevented

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

Returns

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

preventDefault

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

stopPropagation

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

Example

Set up the event handler of contextMenuClosing event.

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

	// event handling code goes here.
})

eventMenuOpeningCustomEvent

This event is triggered when the event menu is about to open. This event allows to cancel the operation by calling event.preventDefault() in the event handler function.

Bubbles Yes
Cancelable Yes
Interface CustomEvent
Event handler property onEventMenuOpening

Arguments

evCustomEvent

ev.detailObject

ev.detail.target - The menu instance.

ev.detail.owner - The HTMLElement of the event that the menu belongs to.

ev.detail.eventObj - The event object that is the target of the menu.

Methods

isDefaultPrevented

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

Returns

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

preventDefault

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

stopPropagation

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

Example

Set up the event handler of eventMenuOpening event.

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

	// event handling code goes here.
})

eventMenuOpenCustomEvent

This event is triggered when the event menu is opened.

Bubbles Yes
Cancelable No
Interface CustomEvent
Event handler property onEventMenuOpen

Arguments

evCustomEvent

ev.detailObject

ev.detail.target - The menu instance.

ev.detail.owner - The HTMLElement of the event that the menu belongs to.

ev.detail.eventObj - The event object that is the target of the menu.

Methods

isDefaultPrevented

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

Returns

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

preventDefault

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

stopPropagation

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

Example

Set up the event handler of eventMenuOpen event.

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

	// event handling code goes here.
})

eventMenuCloseCustomEvent

This event is triggered when the event menu is closed.

Bubbles Yes
Cancelable No
Interface CustomEvent
Event handler property onEventMenuClose

Arguments

evCustomEvent

ev.detailObject

ev.detail.target - The menu instance.

ev.detail.owner - The HTMLElement of the event that the menu belongs to.

ev.detail.eventObj - The event object that is the target of the menu.

Methods

isDefaultPrevented

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

Returns

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

preventDefault

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

stopPropagation

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

Example

Set up the event handler of eventMenuClose event.

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

	// event handling code goes here.
})

eventMenuClosingCustomEvent

This event is triggered when the evet menu is about to close. This event allows to cancel the operation by calling event.preventDefault() in the event handler function.

Bubbles Yes
Cancelable Yes
Interface CustomEvent
Event handler property onEventMenuClosing

Arguments

evCustomEvent

ev.detailObject

ev.detail.target - The menu instance.

ev.detail.owner - The HTMLElement of the event that the menu belongs to.

ev.detail.eventObj - The event object that is the target of the menu.

Methods

isDefaultPrevented

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

Returns

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

preventDefault

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

stopPropagation

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

Example

Set up the event handler of eventMenuClosing event.

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

	// event handling code goes here.
})

dateMenuOpenCustomEvent

This event is triggered when the date selection menu is opened.

Bubbles Yes
Cancelable No
Interface CustomEvent
Event handler property onDateMenuOpen

Arguments

evCustomEvent

ev.detailObject

ev.detail.target - The menu instance.

Methods

isDefaultPrevented

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

Returns

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

preventDefault

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

stopPropagation

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

Example

Set up the event handler of dateMenuOpen event.

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

	// event handling code goes here.
})

dateMenuCloseCustomEvent

This event is triggered when the date selection menu is closed.

Bubbles Yes
Cancelable No
Interface CustomEvent
Event handler property onDateMenuClose

Arguments

evCustomEvent

ev.detailObject

ev.detail.target - The menu instance.

Methods

isDefaultPrevented

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

Returns

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

preventDefault

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

stopPropagation

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

Example

Set up the event handler of dateMenuClose event.

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

	// event handling code goes here.
})

viewMenuOpenCustomEvent

This event is triggered when the view selection menu is opened.

Bubbles Yes
Cancelable No
Interface CustomEvent
Event handler property onViewMenuOpen

Arguments

evCustomEvent

ev.detailObject

ev.detail.target - The menu instance.

Methods

isDefaultPrevented

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

Returns

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

preventDefault

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

stopPropagation

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

Example

Set up the event handler of viewMenuOpen event.

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

	// event handling code goes here.
})

viewMenuCloseCustomEvent

This event is triggered when the view selection menu is closed.

Bubbles Yes
Cancelable No
Interface CustomEvent
Event handler property onViewMenuClose

Arguments

evCustomEvent

ev.detailObject

ev.detail.target - The menu instance.

Methods

isDefaultPrevented

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

Returns

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

preventDefault

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

stopPropagation

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

Example

Set up the event handler of viewMenuClose event.

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

	// event handling code goes here.
})

notificationOpenCustomEvent

This event is triggered when a notification is opened.

Bubbles Yes
Cancelable No
Interface CustomEvent
Event handler property onNotificationOpen

Arguments

evCustomEvent

ev.detailObject

ev.detail.instance - The toast item instance that is opened.

Methods

isDefaultPrevented

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

Returns

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

preventDefault

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

stopPropagation

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

Example

Set up the event handler of notificationOpen event.

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

	// event handling code goes here.
})

notificationCloseCustomEvent

This event is triggered when a notification is closed.

Bubbles Yes
Cancelable No
Interface CustomEvent
Event handler property onNotificationClose

Arguments

evCustomEvent

ev.detailObject

ev.detail.instance - The toast item instance that is closed.

Methods

isDefaultPrevented

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

Returns

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

preventDefault

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

stopPropagation

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

Example

Set up the event handler of notificationClose event.

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

	// event handling code goes here.
})

Methods

addEvent( eventObj: any): void

Adds an event to the Scheduler. Accepts an event object of the following format (same as the dataSource format):

{ label?: string, dateStart: date, dateEnd: date, description?: string, id?: string | number, class?: string, backgroundColor?: string, color?: string, notifications?: { interval: numeric, type?: string, time: number[] }[], allDay?: boolean, disableDrag?: boolean, disableResize?: boolean, repeat?: { repeatFreq: string, repeatInterval: number, repeatOn?: number | number[] | date, repeatEnd?: number | date, exceptions?: { date: date, dateStart?: date, dateEnd?: date, hidden?: boolean, backgroundColor?: string, status?: string, label?: string, description?: string, notifications?: { interval: numeric, type?: string, time: number[] }[], disableDrag?: boolean, disableResize?: boolean }[] }, status?: string }

Arguments

eventObjany

An object describing a Scheduler event that is not already present in the element.

Invoke the addEvent method.

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

addView( type: string, label: string, value: string, hideWeekend: boolean, hideNonworkingWeekdays: boolean, additionalDays: number): void

Adds a new view. Example: scheduler.addView('week', 'My View', 'myView', false, false, 10); scheduler.setView('myView');

Arguments

typestring

The view type.

labelstring

The view's label displayed in the header.

valuestring

The view's value used to identify the view.

hideWeekendboolean

Determines whether to hide the weekend.

hideNonworkingWeekdaysboolean

Determines whether to hide the non working days.

additionalDaysnumber

Determines whether to add additional days to the view.

Invoke the addView method.

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

beginUpdate(): void

Starts an update operation. This is appropriate when calling multiple methods or set multiple properties at once.

Invoke the beginUpdate method.

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

createEvent( label: string, value: string, dateStart: string, dateEnd: string, allDay: boolean): void

Creates an event and adds it to the Scheduler.

Arguments

labelstring

Event label.

valuestring

Event value.

dateStartstring

Event date start.

dateEndstring

Event date end.

allDayboolean

Event all day. Set it to true to create all day event.

Invoke the createEvent method.

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

endUpdate(): void

Ends the update operation. This method will resume the rendering and will refresh the element.

Invoke the endUpdate method.

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

getViewDates(): Date[]

Returns an array of the start and end view dates.

ReturnsDate[]

Invoke the getViewDates method.

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

refresh( fullRefresh?: boolean): void

Refereshes the Scheduler by recalculating the Scrollbars.

Arguments

fullRefresh?boolean

If set the Scheduler will be re-rendered completely.

Invoke the refresh method.

const scheduler = document.querySelector('smart-scheduler');
scheduler.refresh(true,false);

exportData( dataFormat: string, callback?: any): void

Exports the events from the Scheduler.

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 ro the Smart Export Documentation.

Invoke the exportData method.

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

getDataSource(): object[]

Returns a JSON representation of the events inside the Scheduler.

Returnsobject[]

Invoke the getDataSource method.

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

getResources(): object[]

Returns a JSON representation of the resources inside the Scheduler.

Returnsobject[]

Invoke the getResources method.

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

getDateFromCoordinates( x: number, y: number): string

Gets a date from coordinates

Arguments

xnumber

X coordinate.

ynumber

Y coordinate.

Returnsstring

Invoke the getDateFromCoordinates method.

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

getIsAllDayCellFromCoordinates( x: number, y: number): boolean

Gets whether a cell is all day cell from coordinates

Arguments

xnumber

X coordinate.

ynumber

Y coordinate.

Returnsboolean

Invoke the getIsAllDayCellFromCoordinates method.

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

getState(): object

Returns the current state of the Scheduler. Includes the current dateCurernt, dataSource and timeZone properties.

Returnsobject

Invoke the getState method.

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

clearState(): void

Removes a previously saved state of the element form LocalStorage according to it's id. Requires an id to be set to the element.

Invoke the clearState method.

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

loadState( state?: any[]): void

Loads a previously saved state of the element or checks LocalStorage for any saved states if no argument is passed to the method.

Arguments

state?any[]

An Array containing a valid structure of Scheduler events. If no state is provided, the element will check localStorage for a saved state.

Invoke the loadState method.

const scheduler = document.querySelector('smart-scheduler');
scheduler.loadState("state");

saveState( state?: any[]): void

Saves the current events of the element to LocalStorage. Requires an id to be set to the element.

Arguments

state?any[]

An Array containing a valid structure of Scheduler events.

Invoke the saveState method.

const scheduler = document.querySelector('smart-scheduler');
scheduler.saveState("state");

setView( view?: string): void

Sets the Scheduler's view. Example: scheduler.addView('week', 'My View', 'myView', false, false, 10); scheduler.setView('myView');

Arguments

view?string

The view's value. For example: 'day'.

Invoke the setView method.

const scheduler = document.querySelector('smart-scheduler');
scheduler.setView("day");

containsEvent( eventObj: any): boolean

Checks whether the Scheduler contains the event.

Arguments

eventObjany

A Scheduler event object.

Returnsboolean

Invoke the containsEvent method.

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

insertEvent( eventObj: any, index?: number): void

Inserts an event as object of the following format (same as the dataSource format):

{ label?: string, dateStart: date, dateEnd: date, description?: string, id?: string | number, class?: string, backgroundColor?: string, color?: string, notifications?: { interval: numeric, type?: string, time: number[] }[], allDay?: boolean, disableDrag?: boolean, disableResize?: boolean, repeat?: { repeatFreq: string, repeatInterval: number, repeatOn?: number | number[] | date, repeatEnd?: number | date, exceptions?: { date: date, dateStart?: date, dateEnd?: date, hidden?: boolean, backgroundColor?: string, status?: string, label?: string, description?: string, notifications?: { interval: numeric, type?: string, time: number[] }[], disableDrag?: boolean, disableResize?: boolean }[] }, status?: string }

Arguments

eventObjany

An object describing a Scheduler event that is not already present in the element.

index?number

A number that represents the index to insert the event at. If not provided the event is inserted at the end of the list.

Invoke the insertEvent method.

const scheduler = document.querySelector('smart-scheduler');
scheduler.insertEvent("{ label: 'Inserted Event 1', dateStart: '2021-08-10', dateEnd: '2021-12-23' }");

updateEvent( index: any, eventObj: any): void

Updates an event object of the following format (same as the dataSource format):

{ label?: string, dateStart: date, dateEnd: date, description?: string, id?: string | number, class?: string, backgroundColor?: string, color?: string, notifications?: { interval: numeric, type?: string, time: number[] }[], allDay?: boolean, disableDrag?: boolean, disableResize?: boolean, repeat?: { repeatFreq: string, repeatInterval: number, repeatOn?: number | number[] | date, repeatEnd?: number | date, exceptions?: { date: date, dateStart?: date, dateEnd?: date, hidden?: boolean, backgroundColor?: string, status?: string, label?: string, description?: string, notifications?: { interval: numeric, type?: string, time: number[] }[], disableDrag?: boolean, disableResize?: boolean }[] }, status?: string }

Arguments

indexany

A number that represents the index of an event or a Scheduler event object.

eventObjany

An object describing a Scheduler event. The properties of this object will be applied to the desired event.

Invoke the updateEvent method.

const scheduler = document.querySelector('smart-scheduler');
scheduler.updateEvent("2, { label: 'Updated Task', dateEnd: '2021-12-23' }");

removeEvent( index: any): void

Removes an existing event.

Arguments

indexany

A number that represents the index of an event or the actual event object to be removed.

Invoke the removeEvent method.

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

getEventExceptions( eventObj: any): array

Returns an array of all exceptions of the target repeating event.

Arguments

eventObjany

The index, id or an object reference of an existing repeating Scheduler event.

Returnsarray

Invoke the getEventExceptions method.

const scheduler = document.querySelector('smart-scheduler');
const result = scheduler.getEventExceptions("eventObj");

addEventException( eventObj: any, exceptionObj: any): void

Adds an event exception to a repeating event. The exception occurences for a repeating event can be gathered via the following methods:

occurences
occurrencesBetween
occurrenceAfter
occurrenceBefore

Example usage:

scheduler.addEventException(eventObj, { date: occuranceDate, dateStart: newDateStart, dateEnd: newDateEnd, label: 'Exception' });

Arguments

eventObjany

The index, id or an object reference of an existing repeating Scheduler event.

exceptionObjany

An event object that describes an exception. Exception event objects must have a date attribute of type Date which indicates the date of occurence.

Invoke the addEventException method.

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

updateEventException( eventObj: any, exceptionRef: any, exceptionObj: any): void

Updates an event exception of a repeating event. The exception occurences for a repeating event can be gathered via the following methods:

occurences
occurrencesBetween
occurrenceAfter
occurrenceBefore

Example usage:

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

Arguments

eventObjany

The index, id or an object reference of an existing repeating Scheduler event.

exceptionRefany

The index, id, an occurence date of the exception or an object reference of an existing Scheduler repeating event exception.

exceptionObjany

An event object that describes an exception. All attributes of an exception can be updated except the occurance date (the date attribute).

Invoke the updateEventException method.

const scheduler = document.querySelector('smart-scheduler');
scheduler.updateEventException("eventObj, exceptionObj");

removeEventException( eventObj: any, index: any): void

Removes an exception from a repeating event.

Arguments

eventObjany

The index, id or an object reference of an existing repeating Scheduler event.

indexany

The index, id, occurance date or an object reference of an event exception that belongs to the target repeating event.

Invoke the removeEventException method.

const scheduler = document.querySelector('smart-scheduler');
scheduler.removeEventException("eventObj, 1");

openWindow( index: any): void

Opens the popup Window for specific event Editing.

Arguments

indexany

A number that represents the index of a event or the actual event object to be edited.

Invoke the openWindow method.

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

closeWindow(): void

Closes the popup window.

Invoke the closeWindow method.

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

print(): void

Prepares the Scheduler for printing by opening the browser's Print Preview.

Invoke the print method.

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

scrollToDate( date: Date, strictScroll?: boolean, autoScroll?: boolean): void

Scrolls the Scheduler to a Date.

Arguments

dateDate

The date to scroll to.

strictScroll?boolean

Determines whether to scroll strictly to the date or not. This mean sthat the Scheduler wll scroll to the begining of the cell that corresponds to the target date.

autoScroll?boolean

Calculates the scroll positions and element bounds, then adds an offset to scroll within the middle of the view.

Invoke the scrollToDate method.

const scheduler = document.querySelector('smart-scheduler');
scheduler.scrollToDate("2025-5-1");

navigateToDate( date: Date): void

Navigates the Scheduler to a Date.

Arguments

dateDate

The date to navigate to.

Invoke the navigateToDate method.

const scheduler = document.querySelector('smart-scheduler');
scheduler.navigateToDate("2025-5-1");

scrollToEvent( index: any): void

Scrolls the Scheduler to an event.

Arguments

indexany

The index of a Scheduler event or the actual event object to scroll to.

Invoke the scrollToEvent method.

const scheduler = document.querySelector('smart-scheduler');
scheduler.scrollToEvent("eventObj","2");

openNotification( message: string, toastSettings: any): void

Opens a custom notification.

Arguments

messagestring

The notification message.

toastSettingsany

Smart.Toast settings to be applied to the Toast element when opening the notification.

Invoke the openNotification method.

const scheduler = document.querySelector('smart-scheduler');
scheduler.openNotification("This is a custom notification","Custom Notification 2");

closeNotifications(): void

Closes all notifications.

Invoke the closeNotifications method.

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

occurrences( eventObj: any, count: number): void

Returns all occurances of an event.

Arguments

eventObjany

A Scheduler evnet object.

countnumber

The number of occurances to return. By default 100 date occurances of the event are returned.

Invoke the occurrences method.

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

occurrencesBetween( eventObj: any, dateFrom: Date, dateTo: Date): void

Returns all occurances of an event between two dates.

Arguments

eventObjany

A Scheduler event object.

dateFromDate

The start date.

dateToDate

The end date.

Invoke the occurrencesBetween method.

const scheduler = document.querySelector('smart-scheduler');
scheduler.occurrencesBetween("eventObjA, new Date(2021, 2, 1), new Date(2021, 3, 1)","eventObjB, new Date(2021, 3, 1), new Date(2021, 5, 1)");

occurrenceAfter( eventObj: any, date: number): void

Returns the first occurance of an event after a date.

Arguments

eventObjany

A Scheduler event object.

datenumber

The date after which the first occurance of the event will be returned.

Invoke the occurrenceAfter method.

const scheduler = document.querySelector('smart-scheduler');
scheduler.occurrenceAfter("eventObjA, , new Date(2021, 2, 1)","eventObjB, , new Date(2021, 3, 1)");

occurrenceBefore( eventObj: any, date: number): void

Returns the last occurance of an event before a date.

Arguments

eventObjany

A Scheduler event object.

datenumber

The date before which the first occurance of the event will be returned.

Invoke the occurrenceBefore method.

const scheduler = document.querySelector('smart-scheduler');
scheduler.occurrenceBefore("eventObjA, , new Date(2021, 2, 1)","eventObjB, , new Date(2021, 3, 1)");

getCellDateRange( cell: HTMLElement): object

Returns the dateStart/dateEnd of a timeline cell.

Arguments

cellHTMLElement

A Scheduler timeline cell element.

Returnsobject

Invoke the getCellDateRange method.

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

openEventTooltip( eventObj: any): void

Opens the tooltip(event menu) for an event.

Arguments

eventObjany

A Scheduler event object or it's index.

Invoke the openEventTooltip method.

const scheduler = document.querySelector('smart-scheduler');
scheduler.openEventTooltip("eventObjA","2");

closeEventTooltip(): void

Closes the event tooltip (event menu).

Invoke the closeEventTooltip method.

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

isDateRestricted( date: Date): boolean

Returns true or false whether the date is restricted or not.

Arguments

dateDate

A Date object.

Returnsboolean

Invoke the isDateRestricted method.

const scheduler = document.querySelector('smart-scheduler');
const result = scheduler.isDateRestricted("new Date(2021, 1, 1)","new Date(2022, 1, 1)");

isHourRestricted( hour: number | Date): boolean

Returns true or false whether the hour is restricted or not.

Arguments

hournumber | Date

A number that represents an hour ( 0 to 23 ) or a Date object.

Returnsboolean

Invoke the isHourRestricted method.

const scheduler = document.querySelector('smart-scheduler');
const result = scheduler.isHourRestricted("12","new Date(2021, 1, 1, 22, 30)");

isEventRestricted( eventObj: any): boolean

Returns true or false whether the event is restricted or not.

Arguments

eventObjany

A Scheduler event object or a direct event HTMLElement instance.

Returnsboolean

Invoke the isEventRestricted method.

const scheduler = document.querySelector('smart-scheduler');
const result = scheduler.isEventRestricted("eventObjA","eventInstance");

deleteUndoRedoHistory(): boolean

Deletes the current undo/redo history.

Returnsboolean

Invoke the deleteUndoRedoHistory method.

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

canRedo(): boolean

Indicates whether it is possible to redo an action.

Returnsboolean

Invoke the canRedo method.

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

canUndo(): boolean

Indicates whether it is possbile to undo an action.

Returnsboolean

Invoke the canUndo method.

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

redo( step?: number): boolean

Redo the next event modification.

Arguments

step?number

A step to redo to.

Returnsboolean

Invoke the redo method.

const scheduler = document.querySelector('smart-scheduler');
const result = scheduler.redo("","5");

undo( step?: number): boolean

Undo the last event modification.

Arguments

step?number

A step to undo to.

Returnsboolean

Invoke the undo method.

const scheduler = document.querySelector('smart-scheduler');
const result = scheduler.undo("","2");

The the maximum width for the date selector control.

Default value

"30px"

The size of the navigaiton buttons inside the header of the Scheduler.

The max height of the context menu.

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.

Scheduler Javascript API

autoScrollStepnumber

Default value

Example

autoHeightAllDayCellsboolean

Default value

Example

availablearray

colorSchemestring[]

Example

currentTimeIndicatorboolean

Default value

Example

currentTimeIndicatorIntervalnumber

Default value

Example

contextMenuDataSource[]

Example

contextMenuClipboardActionsboolean

Default value

Example

eventTemplateany

Example

eventCollectorTemplateany

Example

eventRenderMode"classic" | "modern"

Default value

Example

eventTooltipTemplateany

Example

cellTemplateany

Example

dateCurrentstring | Date

Default value

Example

dataExportobject

Properties

headerboolean

Default value

columnsstring[]

Default value

styleobject

fileNamestring

Default value

pageOrientationstring

Default value

Properties

Default value

Properties

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

Default value

repeatIntervalnumber

Default value

repeatOnnumber | object | Date | string | undefined

Default value

repeatEndnumber | date | undefined

Default value

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

Default value

classstring

Default value

dateStartstring | Date

Default value

dateEndstring | Date

Default value

disableDragboolean

Default value

disableResizeboolean