Options class (Schedule)

Schedule.Options()

new Options()

The Schedule.Options type represents a set of configurable settings that can be applied to a control. These options allow you to customize the control's behavior and appearance. You can assign options to a control either by setting the Options property directly or by using the Options property, which provides a programmatic way to update one or more options at runtime.

Every option of the Schedule.Options type has associated a property of the control. For instance, the option:

allowActions {string}, customizes the actions the user can perform once the user clicks or touches the control
is associated with the property:
AllowActions {string}, customizes the actions the user can perform once the user clicks or touches the control
which means that the following statements are equivalent:
oSchedule.Options = {allowActions: "scroll"}
oSchedule.SetOptions({allowActions: "scroll"})
oSchedule.AllowActions = "scroll"
oSchedule.SetAllowActions("scroll")
where oSchedule is an object of Schedule type

It is important to note that changing a field of the Schedule.Options object does not automatically update the control. For example, oSchedule.Options.allowActions = "scroll" does not apply the change. Instead, you must assign the Options property again, such as oSchedule.Options = {allowActions: "scroll"}, so the control updates and applies the new value.

Members

(static) allowActions :string

The allowActions field defines a list of actions separated by comma that the user can perform by drag or click on the control's content. The order of the actions is very important, as the control checks each action from left to right until it finds a matching action for the performed mouse/touch event. The first matched action is performed, and the rest of the actions are ignored. So if you want to perform a specific action once the user clicks an item, and perform another action if the user clicks an area that does not contain any item, you should place the first action before the second one in the AllowActions property. The dragStartOnMove field specifies the drag-operations (create, resize or move) that start once the pointer is moved. The ensureVisibleOnDrag field specifies the drag-operations (create, resize or move) that calls the EnsureVisibleClient() method once the drag-operation ends.

The format of the property is:

"action(shortcut,shortcut,...),action(shortcut,shortcut,...)..."
where
  • "action", defines the action to perform (as defined below)

    Action Description Flags
    "create" Creates an event by drag (not available if the control is read-only)
    "day-resize" Resizes the day by drag and drop (not available if the control is read-only)
    "drag-drop" Performs drag and drop of the ui-event (the ui-event can be dropped inside or outside of the control). The ExDrop(event, data) method of the target HTML element is invoked once the user drops the ui-event. The event parameter contains information about the mouse/touch event. The data parameter contains information about the source-object that initiated the drag/drop operation as {object, source, client, shape}
    "fit" Fits the drag-area into the control's client area
    "group-drag" Changes the group's position by drag and drop (not available if the control is read-only). The Group.Position property specifies the position of the group.
    "group-resize" Resizes the group by drag and drop (not available if the control is read-only). The Group.Width property defines the width of the group.
    "move" Moves or resizes events by drag (not available if the control is read-only)
    "scroll" Scrolls the control's content by drag
    • [view], specifies that the "scroll" is possible once the user clicks the view
    • [timeScale], specifies that the "scroll" is possible once the user clicks the time-scale
    "select" Selects events by drag
    "zoom" Zooms the control's content at dragging-point

  • "shortcut", defines the event's button or/and the modifier-keys that are required to perform the action. The "shortcut" is a combination of none, one or more of the following values:
    • "Shift", indicates that the SHIFT key is pressed
    • "Ctrl" or "Control", indicates that the CTRL key is pressed
    • "Alt" or "Menu", indicates that the ALT key is pressed
    • "Meta" , indicates that the META key is pressed
    • "LButton", specifies that the mouse's left-button is pressed
    • "RButton", specifies that the mouse's right-button is pressed
    • "MButton", specifies that the mouse's middle/wheel-button is pressed
    • "Long", specifies that the action requires a "long" click or touch before it begins
    • "Double", specifies that the action requires a "double" click before it begins (this flag is available for non-dragable actions only such as "edit")
    • "+", indicates AND between values

The allowActions field is mapped to the AllowActions property, which means that the following statements are equivalent:

oSchedule.Options = {allowActions: "move(LButton),scroll(view),select(Shift+LButton)"}
oSchedule.SetOptions({allowActions: "move(LButton),scroll(view),select(Shift+LButton)"})
oSchedule.AllowActions = "move(LButton),scroll(view),select(Shift+LButton)"
oSchedule.SetAllowActions("move(LButton),scroll(view),select(Shift+LButton)")
Type:
  • string
Example
null {null}, indicates the control's default allowActions value
"" {string}, specifies that no operation is allowed once the user clicks or touches the control
"scroll" {string}, specifies that only "scroll" operation is allowed, no matter of the event's button or modifier-keys is pressed.
allowActions

(static) allowAllDayEventScroll :null|number|Array.<number>

The allowAllDayEventScroll field defines the number of events the all-day header can display one at the time, as one of the following:
  • null {null}, the all-day header displays events as many as it fits
  • positive-number {number}, the all-day header always displays an exact number of levels
  • negative-number {number}, the all-day header displays up to specified number of levels
  • [min,max] {array}, indicates a two-elements array of [min,max] type that defines the minimum and maximum number of levels, where min must be zero or any positive number, while max can be null, negative (up to) or positive number(fixed)

The showAllDayHeader field specifies whether the control's header for all-day events is visible or hidden. The headerAllDayEventHeight field defines the height of the events to display within the all-day header (relative to the font-size of the control). By default, the allowAllDayEventScroll field is set to null, which means that the all-day header displays events as many as it fits.

The allowAllDayEventScroll field is mapped to the AllowAllDayEventScroll property, which means that the following statements are equivalent:

oSchedule.Options = {allowAllDayEventScroll: 3}
oSchedule.SetOptions({allowAllDayEventScroll: 3})
oSchedule.AllowAllDayEventScroll = 3
oSchedule.SetAllowAllDayEventScroll(3)
Type:
  • null | number | Array.<number>
Example
null {null}, the all-day header displays events as many as it fits
3 {number}, indicates that the all-day header always displays 3 levels
-3 {number}, indicates that the all-day header can display up to 3 levels
[1] {array}, indicates 1 to unlimited levels
[1,4] {array}, always displays 4 levels
[1,-4] {array}, displays from 1 to 4 levels
allowAllDayEventScroll

(static) allowMoveEventToOtherGroup :boolean

The allowMoveEventToOtherGroup field specifies whether the user can move an event from one group to another using drag and drop. This option is effective only when the control displays groups (see showGroupingEvents field). When grouping is enabled, the date is split into sections for each group, with the group name shown in each section's header. If allowMoveEventToOtherGroup is true (default), the user can move events between groups by drag and drop; if false, moving events between groups is not allowed.

The control displays groups if:

  • showGroupingEvents field is true
  • The Groups collection has visible elements. By default, the Groups collection contains no Group objects

The allowMoveEventToOtherGroup field is mapped to the AllowMoveEventToOtherGroup property, which means that the following statements are equivalent:

oSchedule.Options = {allowMoveEventToOtherGroup: true}
oSchedule.SetOptions({allowMoveEventToOtherGroup: true})
oSchedule.AllowMoveEventToOtherGroup = true
oSchedule.SetAllowMoveEventToOtherGroup(true)
Type:
  • boolean
Example
false {boolean}, indicates that the event can not be moved from a group to another
true {boolean}, indicates that the event can be moved from a group to another (default)
allowMoveEventToOtherGroup

(static) allowMultiDaysEvent :boolean

The allowMultiDaysEvent field specifies whether the user can create events that may start on a day and ends on other. The showAllDayHeader field specifies whether the control's header for all-day events is visible or hidden. The headerAllDayEventHeight field defines the height of the events to display within the all-day header (relative to the font-size of the control). By default, the allowMultiDaysEvent field is set to true, which means that the user can create multi-dates events by drag and drop (create or resize). If you set the allowMultiDaysEvent field to false, the user can create or resize just single-date events only.

The allowMultiDaysEvent field is mapped to the AllowMultiDaysEvent property which means that the following statements are equivalent:

oSchedule.Options = {allowMultiDaysEvent: true}
oSchedule.SetOptions({allowMultiDaysEvent: true})
oSchedule.AllowMultiDaysEvent = true
oSchedule.SetAllowMultiDaysEvent(true)
Type:
  • boolean
Example
false {boolean}, the user can create or resize just single-date events only
true {boolean}, the user can create multi-dates events by drag and drop (create or resize)
allowMultiDaysEvent

(static) allowUndoRedo :boolean

The allowUndoRedo field enables or disables the Undo/Redo feature. The Undo and Redo features let you remove or repeat single or multiple actions, but all actions must be undone or redone in the order you did or undid them - you can't skip actions. For example, if you added three events (calendar appointments) and then decide you want to undo the first change you made, you must undo all three changes. To undo an action you need to press Ctrl+Z, while for to redo something you've undone, press Ctrl+Y. You can also use the Shortcuts property to customize the keyboard shortcuts for the Undo and Redo commands. By default, the allowUndoRedo field is false, so the Undo/Redo feature is disabled.

The allowUndoRedo field is mapped to the control's AllowUndoRedo property, so the following statements are equivalent:

oSchedule.Options = {allowUndoRedo: true}
oSchedule.SetOptions({allowUndoRedo: true})
oSchedule.AllowUndoRedo = true
oSchedule.SetAllowUndoRedo(true)
Type:
  • boolean
Example
false {boolean}, the Undo/Redo feature is disabled (default)
true {boolean}, enables the Undo/Redo feature.
allowUndoRedo

(static) applyGroupingColors :boolean

The applyGroupingColors field specifies whether the schedule view shows the events using the colors of owner groups (group's eventShape field). When true, the applyGroupingColors field allows the schedule view to show the events using the colors of owner groups. If an event has its own custom shape (the eventShape field of the event is set), the control uses the event's shape and color to display the event, otherwise it uses the shape and color of the owner group. When false, the applyGroupingColors field allows the schedule view to show all events using their own shape and color, without applying the colors of owner groups. The allowMoveEventToOtherGroup field indicates whether the event can be moved from a group to another by drag and drop. By default, the applyGroupingColors field is true, which means that the schedule view shows the events using the colors of owner groups.

The control displays groups if:

  • showGroupingEvents field is true
  • The Groups collection has visible elements. By default, the Groups collection contains no Group objects

The applyGroupingColors field is mapped to the ApplyGroupingColors property, which means that the following statements are equivalent:

oSchedule.Options = {applyGroupingColors: true}
oSchedule.SetOptions({applyGroupingColors: true})
oSchedule.ApplyGroupingColors = true
oSchedule.SetApplyGroupingColors(true)
Type:
  • boolean
Example
false {boolean}, no eventShape (option of Group) is applied to any event
true {boolean}, the group's eventShape field is applied on the event while the event has no custom shape
applyGroupingColors

(static) background :BackgroundOptions

The background field defines the visual appearance of various elements within the schedule or calendar control, as an object of BackgroundOptions type. It allows you to customize the colors, styles, and captions of rulers, time-scale lines, grouping buttons, and event continuation indicators. By adjusting this property, you control how the schedule panel and time-scale panel look, enhancing readability and helping users quickly identify different time markers and event information.

It is important to note that changing a field of the BackgroundOptions object does not automatically update the control. For example, oSchedule.Background.majorTimeRulerColor = "black" does not apply the change. Instead, you must assign the Background property again, such as oSchedule.Background = {majorTimeRulerColor: "black"}, so the control updates and applies the new value.

The background field is mapped to the Background property, which means that the following statements are equivalent:

oSchedule.Options = {background: {majorTimeRulerColor: "black"}}
oSchedule.SetOptions({background: {majorTimeRulerColor: "black"}})
oSchedule.Background = {majorTimeRulerColor: "black"}
oSchedule.SetBackground({majorTimeRulerColor: "black"})
Type:
Example
{majorTimeRulerColor: "black"} {object}, sets the color of the major time ruler to black
{minorTimeRulerColor: "gray"} {object}, sets the color of the minor time ruler to gray
{majorTimeRulerColor: "black", minorTimeRulerColor: "gray"} {object}, sets the color of the major time ruler to black and the minor time ruler to gray
background

(static) calendar :object

The calendar field specifies the options to apply for inside calendar control. By default, the control displays a calendar within the left panel, which allows users to quickly navigate to specific dates. The calendar field is an object that contains various properties to customize the appearance and behavior of this calendar control. The onResizeControl field defines which panel should be resized when the entire control is resized

The options (equivalent of exontrol.Calendar.Options) of the inside calendar control may include but not limited to the following fields:

  • alignCal (exontrol.AlignEnum), aligns the calendar relative to the canvas
  • allowScrollByDrag (boolean), specifies whether the user can scroll the control by dragging
  • allowSwitchView (boolean), specifies whether the user can switch between views (month or year)
  • autoSize (exontrol.Calendar.AutoSizeEnum), specifies whether the size of the calendar's dates is fixed or relative to the current font or client area
  • cursors (string), specifies the mouse cursor displayed when pointing over different parts of the control
  • dayAlign (exontrol.DrawTextFormatEnum), specifies the alignment of the date label in day-view
  • dayFixedHeight (number), defines the height of a date when autoSize is set to exontrol.Calendar.AutoSizeEnum.exFixedSize
  • dayFixedWidth (number), defines the width of a date when autoSize is set to exontrol.Calendar.AutoSizeEnum.exFixedSize
  • dayLabel (string), defines an HTML string (supporting expression tags <%...%>) used to display dates in day-view
  • dayMonthAlign (exontrol.DrawTextFormatEnum), specifies the alignment of the month label in day-view
  • dayMonthHeader (boolean), specifies whether the header displaying the month name is shown (day-view only)
  • dayMonthLabel (string), defines the ex-HTML label used to display the month name in the header (day-view only)
  • dayNonMonth (boolean), specifies whether dates that do not belong to the current month are displayed
  • dayNonMonthLabel (string), defines the ex-HTML label used to display dates outside the current month (day-view only)
  • dayWeekAllLabel (string), defines the ex-HTML label displayed in the top-left corner when both week-day and week-number headers are present (day-view only)
  • dayWeekHeader (boolean), specifies whether the header displaying the days of the week is shown (day-view only)
  • dayWeekLabel (string), defines the ex-HTML label used to display the days of the week in the header (day-view only)
  • dayWeekNoHeader (boolean), specifies whether the header displaying the week number is shown (day-view only)
  • dayWeekNoLabel (string), defines the ex-HTML label used to display the week number in the header (day-view only)
  • flow (exontrol.Calendar.FlowEnum), determines whether the months are arranged from left to right or from top to bottom
  • hlShapes (string), specifies the shape(s) applied to parts of the control when they are highlighted
  • locked (boolean), indicates whether the control is locked (protected) or unlocked
  • maxMonthX (number), specifies the maximum number of months displayed horizontally
  • maxMonthY (number), specifies the maximum number of months displayed vertically
  • minMonthX (number), specifies the minimum number of months displayed horizontally
  • minMonthY (number), specifies the minimum number of months displayed vertically
  • mode (exontrol.Calendar.ModeEnum), specifies the orientation in which the calendar displays the days of the week
  • monthAlign (exontrol.DrawTextFormatEnum), specifies the alignment of the month label in month-view
  • monthLabel (string), defines an ex-HTML string (supporting <%...%>) used to display the month in month-view
  • monthYearAlign (exontrol.DrawTextFormatEnum), specifies the alignment of the year label in month-view
  • pad (number|string|array), specifies the padding applied to the calendar's dates
  • padCal (number|string|array), specifies the padding applied to the calendar
  • selection (null|Date|array), specifies the currently selected date(s)
  • shapes (string), defines the shapes displayed by different parts of the control, allowing customization of its visual appearance
  • singleSel (exontrol.Calendar.SingleSelEnum), specifies whether the control supports single, multiple, or toggle selection
  • smoothSel (number), defines the duration (in milliseconds) for the selection to transition from one state to another
  • tfi (string|object), holds the font attributes for captions within the control (for example, "b monospace 16" or {bold: true, fontName: "monospace", fontSize: 16})
  • wheelChange (number), defines the amount the calendar scrolls when the mouse wheel is used
  • yearAlign (exontrol.DrawTextFormatEnum), specifies the alignment of the year label in year-view
  • yearLabel (string), defines an ex-HTML string (supporting <%...%>) used to display the year in year-view
  • yearRangeAlign (exontrol.DrawTextFormatEnum), specifies the alignment of the label that displays the range of years in year-view

The calendar field is mapped to the Calendar property, which means that the following statements are equivalent:

oSchedule.Options = {calendar: {tfi: "b monospace 16", mode: exontrol.Calendar.ModeEnum.exHorizontal, ...}}
oSchedule.SetOptions({calendar: {tfi: "b monospace 16", mode: exontrol.Calendar.ModeEnum.exHorizontal, ...}})
oSchedule.Calendar.Options = {tfi: "b monospace 16", mode: exontrol.Calendar.ModeEnum.exHorizontal, ...}
oSchedule.Calendar.SetOptions({tfi: "b monospace 16", mode: exontrol.Calendar.ModeEnum.exHorizontal, ...}) oSchedule.SetCalendar({tfi: "b monospace 16", mode: exontrol.Calendar.ModeEnum.exHorizontal, ...})
Type:
  • object
Example
null {null} or {} {object}, no options to apply on the calendar
{locale: "de"} {object}, changes the calendar's locale to German
{tfi: "bold &lt;fgcolor blue&gt;"} {object}, shows days of the month bolded in blue
calendar

(static) createEventLabel :string

The createEventLabel field specifies the label to be shown while creating events. The updateEventsLabel field specifies the label to be shown while moving or resizing the events. The formatEventShortLabel/formatEventLongLabel misc options defines the format to show the label. This field supports ex-HTML such as (<b>, <i>, <fgcolor>, ...) as well as <%=formula%> tags. The <%=formula%> tag represents the result of a given formula. The formula is a format-expression that can include placeholders like %1, %2, and so on. Each placeholder corresponds to a specific property of the event. For example, %1 refers to exEventStartDateTime, %2 refers to exEventEndDateTime, etc. By default, the createEventLabel field is set to "<%=%256%>
<%=((1:=int(0:= %7)) != 0 ? (=:1 + ' day(s)') : '') + (=:1 ? ' ' : '' ) + ((1:=int(0:=((=:0 - =:1 + 1/24/60/60/2)*24))) != 0 ? =:1 + ' hour(s)' : '' ) + (=:1 ? ' ' : '' ) + ((1:=round((=:0 - =:1)*60)) != 0 ? =:1 + ' min(s)' : '')%>", which displays the short margins of the event on the first line, and the duration of the event in days, hours and minutes on the second line while creating events.

The known placeholders that can be used in the formula are:

  • %1 (exEventStartDateTime) {Date}, indicates the starting date/time of the event. This property gets the Start property of the event. The Start property defines the lower margin of the event, and it includes the date and the time values. The exEventStartDate specifies the DATE value only, while the exEventStartTime includes the TIME value only. For instance, the LabelProperty = "<%=weekday(%1)%>" displays the day of the week where the event starts
  • %2 (exEventEndDateTime) {Date}, indicates the ending date/time of the event. This property gets or sets the End property of the event. The End property defines the upper margin of the event, and it includes the date and the time values. The exEventEndDate specifies the DATE value only, while the exEventEndTime includes the TIME value only. For instance, the LabelProperty = "<%=weekday(%2)%>" gets the day of the week where the event ends.
  • %3 (exEventAllDay) {boolean}, indicates if the current event is an all day event. This property is equivalent with the event's AllDay property which indicates if the current event is an all-day event. For instance, the LabelProperty = "<%=%3 ? `All-Day-Event: `: ``%><%=%256%>", displays automatically an "All-Day-Event: " prefix for all-day events. If the event is not an all-day event, the <%=%256%>, or exEventDisplayShortMargins, short margins of the events are displayed.
  • %4 (exEventGroupID) {any}, specifies the identifier/index of the event's group. The GroupID property of the event indicates the identifier of the group that event belongs to. The exEventGroupLabel property indicates the Caption property of the Group's event. The exEventGroupTitle property indicates the Title property of the Group's event. For instance, the LabelProperty = "<%=%4%>
    <%=%256%>" displays on the first line, the group's identifier, and the short margins of the event on the second line. The caption of the label is automatically updated once an event is moved from a group to another.
  • %5 (exEventCaption) {string}, indicates the caption of the event. The Caption property of the event specifies the custom caption that can be displayed on the label, without having to change the event's label. For instance, the LabelProperty = "<%=%256%>
    <%=%5%>" displays on the first line, the event's short margins, while on the second line displays the event's caption. Once you update or edit the event's Caption, the event's body automatically shows the new caption.
  • %6 (exEventUserData) {any}, indicates the extra data associated with the event. The UserData property of the event indicates an extra data associated with the event. For instance, the LabelProperty = "<%=%256%>
    <%=%6%>" displays on the first line, the event's short margins, while on the second line displays the event's user data. Once you update or edit the event's UserData, the event's body automatically shows the new label.
  • %7 (exEventDuration) {number}, specifies the duration of the event. The returned values is of float type, and it indicates the duration of the event in days. For instance, the 1.5 indicates, 1 day and 12 hours. For instance, the LabelProperty = "<%=%256%>
    <%=((1:=int(0:= (date(%2)-date(%1)))) != 0 ? (=:1 + ' day(s)') : '') + (=:1 ? ' ' : '' ) + ((1:=int(0:=((=:0 - =:1 + 1/24/60/60/2)*24))) != 0 ? =:1 + ' hour(s)' : '' ) + (=:1 ? ' ' : '' ) + ((1:=round((=:0 - =:1)*60)) != 0 ? =:1 + ' min(s)' : '')%>" displays on the first line, the event's short margins, while on the second line displays the event's durations in days, hours and minutes. Once you update or edit the event's margins, the event's body automatically shows the new length. You can use the MoveBy method to delay the current event with a specified value time. You can use the SetKnownProperty(exEventDuration) to change the event's duration.
  • %8 (exEventRepetitiveExpression) {string}, specifies the repetitive expression of the event. The Event.Repetitive property indicates the expression that determines whether the event is repetitive. For instance, the LabelProperty = "<%=%256%>
    <%=len(%8)? `repetitive event`:``%>" displays repetitive event for repetitive events.
  • %12 (exEventID) {string}, specifies the event's unique key/identifier/index.
  • %256 (exEventDisplayShortMargins) {string}, displays the margins of the event in a short format (read-only). The ShortDateFormat property defines the short date format. The ShortTimeFormat property defines the short time format.
  • %257 (exEventDisplayLongMargins) {string}, displays the margins of the event in a long format (read-only). The LongDateFormat property defines the long date format. The LongTimeFormat property defines the long time format.
  • %258 (exEventStartDate) {Date}, gets the starting date ( not including the time ) of the event (read-only). You can use this property to get the starting date of the event.
  • %259 (exEventStartTime) {number}, gets the starting time ( not including the date ) of the event, as a number between 0 and 1 (read-only). You can use this property to get the starting time of the event.
  • %260 (exEventEndDate) {Date}, gets the ending date ( not including the time ) of the event (read-only). You can use this property to get the ending date of the event.
  • %261 (exEventEndTime) {number}, gets the ending time ( not including the date ) of the event, as a number between 0 and 1 (read-only). You can use this property to get the ending time of the event.
  • %262 (exEventGroupLabel) {string}, gets the label of the owner group (read-only). The exEventGroupLabel property indicates the Caption property of the Group's event. The GroupID property of the event indicates the identifier of the group that event belongs to. The exEventGroupTitle property indicates the Title property of the Group's event. For instance, the LabelProperty = "<%=%262%>
    <%=%256%>" displays on the first line, the group's caption, and the short margins of the event on the second line. The caption of the label is automatically updated once an event is moved from a group to another.
  • %263 (exEventGroupTitle) {string}, gets the title of the owner group (read-only). The exEventGroupTitle property indicates the Title property of the Group's event. The exEventGroupLabel property indicates the Caption property of the Group's event. The GroupID property of the event indicates the identifier of the group that event belongs to. For instance, the LabelProperty = "<%=%263%>
    <%=%256%>" displays on the first line, the group's caption, and the short margins of the event on the second line. The caption of the label is automatically updated once an event is moved from a group to another.
  • %264 (exEventRepetitive) {boolean}, Indicates if the current event is a repetitive event. (read-only). You can use this flag to specify whether Repetitive property of the Event object is not empty, and valid.

The createEventLabel field is mapped to the CreateEventLabel property, which means that the following statements are equivalent:

oSchedule.Options = {createEventLabel: "<%=%256%>"}
oSchedule.SetOptions({createEventLabel: "<%=%256%>"})
oSchedule.CreateEventLabel = "<%=%256%>"
oSchedule.SetCreateEventLabel("<%=%256%>")
Type:
  • string
Example
null {null}, the control's default label is shown while creating events ("&lt;%=%256%&gt;&lt;br&gt;&lt;%=((1:=int(0:= %7)) != 0 ? (=:1 + ' day(s)') : '') + (=:1 ? ' ' : '' ) + ((1:=int(0:=((=:0 - =:1 + 1/24/60/60/2)*24))) != 0 ? =:1 + ' hour(s)' : '' ) + (=:1 ? ' ' : '' ) + ((1:=round((=:0 - =:1)*60)) != 0 ? =:1 + ' min(s)' : '')%&gt;")
"" {string}, no label is shown for event to create
"Start: &lt;%=%1%&gt;&lt;br&gt;End: &lt;%=%2%&gt;" {string}, displays the starting margin of the even on the first line, while on the second line it displays the ending point of the event
"Duration: &lt;%=((1:=int(0:= %7)) != 0 ? (=:1 + ' day(s)') : '') + (=:1 ? ' ' : '' ) + ((1:=int(0:=((=:0 - =:1 + 1/24/60/60/2)*24))) != 0 ? =:1 + ' hour(s)' : '' ) + (=:1 ? ' ' : '' ) + ((1:=round((=:0 - =:1)*60)) != 0 ? =:1 + ' min(s)' : '')%&gt;" {string},  displays the duration of the event in days, hours and minutes
createEventLabel

(static) cursors :string

The cursors field specifies the mouse cursor to be displayed when pointing over a part of the control. Parts that can be customized include events, date headers, time scales, and more. By defining the cursors field, you can enhance the user experience by providing visual feedback that indicates the interactivity of different parts of the control. For example, setting "pointer(event)" changes the cursor to a pointer (hand) when hovering over events, signaling that they are clickable or draggable.

The format of the property is:

"cursor(part),cursor(part),..."
where:
  • "cursor", defines the CSS mouse cursor to display while cursor hovers the part
  • "part", defines the name of the part the cursor is applied on (as defined below)
The "cursor" can be any of the following:
Cursor Description
"alias"indicates a shortcut or alias will be created
"all-scroll"indicates scrolling in any direction
"auto"lets the browser decide the cursor based on context
"cell"indicates a table cell
"col-resize"indicates a column can be resized horizontally
"context-menu"indicates a context menu is available
"copy"indicates something will be copied
"crosshair"a precise crosshair cursor
"default"the default arrow cursor
"e-resize"resize east (right edge)
"ew-resize"resize horizontally
"grab"indicates an item can be grabbed
"grabbing"indicates an item is being grabbed
"help"indicates help information is available
"move"indicates something can be moved
"n-resize"resize north (top edge)
"ne-resize"resize northeast (top-right corner)
"nesw-resize"resize along the northeast-southwest axis
"no-drop"indicates dropping is not permitted
"not-allowed"indicates the action is not allowed
"ns-resize"resize vertically
"nw-resize"resize northwest (top-left corner)
"nwse-resize"resize along the northwest-southeast axis
"pointer"the pointer cursor (a hand with a pointing finger)
"progress"indicates background processing
"row-resize"indicates a row can be resized vertically
"s-resize"resize south (bottom edge)
"se-resize"resize southeast (bottom-right corner)
"sw-resize"resize southwest (bottom-left corner)
"text"the text selection cursor (I-beam)
"url(...)"uses a custom cursor image (with optional fallback)
"vertical-text"the vertical text selection cursor
"w-resize"resize west (left edge)
"wait"indicates the program is busy
"zoom-in"indicates zooming in
"zoom-out"indicates zooming out
The "part" can be any of the following:
Part Description
"anchor" (hyperlink)defines the mouse-cursor when the mouse pointer hovers the anchor (the <a> ex-HTML part marks an anchor or hyperlink element) (@since 2.2)
"create"defines the mouse-cursor to create new events by drag and drop
"date"defines the mouse-cursor when the mouse pointer hovers the date (any part)
"date-all-day-header"defines the mouse-cursor when the mouse pointer hovers the date's all-day header
"date-all-day-scroll-button"defines the mouse-cursor when the mouse pointer hovers the date's scroll-button of the all-day header
"date-all-day-scroll-wheel"defines the mouse-cursor when the mouse pointer hovers the date's scroll-wheel of the all-day header (the scroll-wheel zone is the portion of the all-day header where user can scroll the events using the mouse wheel)
"date-grouping-header"defines the mouse-cursor when the mouse pointer hovers the date's grouping-header part
"date-header"defines the mouse-cursor when the mouse pointer hovers the header's date
"date-timeScale"defines the mouse-cursor when the mouse pointer hovers the date's time-scale part
"drag-drop"defines the cursor while the event is being dragged using the "drag-drop" action
"event"defines the mouse-cursor when the mouse pointer hovers any movable event. The Event.Cursor property specifies the cursor to be used for a specific event.
"grouping-button"defines the mouse-cursor when the mouse pointer hovers the header's grouping-button
"long"specifies the mouse-cursor to be shown as soon as a "long" click or touch action begins (see allowActions field)
"resize-group"defines the mouse-cursor when the mouse pointer hovers the group's resize margin
"resize-h" (resize-event-horizontal)defines the mouse-cursor when the mouse pointer hovers the all-day event's start and end margins
"resize-v" (resize-event-vertical)defines the mouse-cursor when the mouse pointer hovers the event's start and end margins
"timeScale"defines the mouse-cursor when the mouse pointer hovers the control's time-scale header

The cursors field is mapped to the Cursors property, which means that the following statements are equivalent:

oSchedule.Options = {cursors: "pointer(event),move(drag-drop)"}
oSchedule.SetOptions({cursors: "pointer(event),move(drag-drop)"})
oSchedule.Cursors = "pointer(event),move(drag-drop)"
oSchedule.SetCursors("pointer(event),move(drag-drop)")
Type:
  • string
Example
"pointer(xxx,yy)" {string}, indicates that the "pointer" mouse cursor is shown while cursor hovers any "xxx" or "yyy" part of the control
cursors

(static) dayEndTime :string

The dayEndTime field specifies the time the day ends to, in "HH[:MM[:NN]]" format. The dayStartTime field specifies the time the day starts from, in "HH[:MM[:NN]]" format. If the dayStartTime and dayEndTime fields are not set, the schedule view starts at 8:00 AM and ends at 4:00 PM by default. The time specified by the dayStartTime and dayEndTime fields is used to calculate the height of the schedule's rows, and to determine the position of events within the view. If the event starts before the dayStartTime or ends after the dayEndTime, the control clips the event to the view's boundaries and shows a small arrow at the top or bottom of the event to indicate that it continues outside of the view. The HH[:MM[:NN]] format means that you can specify the time using only hours (HH), or hours and minutes (HH:MM), or hours, minutes and seconds (HH:MM:NN). For example, if you want to specify 4:00 PM, you can set the dayEndTime field to "16", "16:00", or "16:00:00". The timeScale field holds options to apply on the control's time-scale, as an object of TimeScaleOptions type.

The dayEndTime field is mapped to the DayEndTime property, which means that the following statements are equivalent:

oSchedule.Options = {dayEndTime: "16:00"}
oSchedule.SetOptions({dayEndTime: "16:00"})
oSchedule.DayEndTime = "16:00"
oSchedule.SetDayEndTime("16:00")
Type:
  • string
Example
null {null}, every day ends at 4:00 PM
"17:00" {string}, the day ends at 05:00 PM
"24:00" {string}, the day ends at 12:00 AM
dayEndTime

(static) dayStartTime :string

The dayStartTime field specifies the time the day starts from, in "HH[:MM[:NN]]" format. The dayEndTime field specifies the time the day ends to, in "HH[:MM[:NN]]" format. If the dayStartTime and dayEndTime fields are not set, the schedule view starts at 8:00 AM and ends at 4:00 PM by default. The time specified by the dayStartTime and dayEndTime fields is used to calculate the height of the schedule's rows, and to determine the position of events within the view. If the event starts before the dayStartTime or ends after the dayEndTime, the control clips the event to the view's boundaries and shows a small arrow at the top or bottom of the event to indicate that it continues outside of the view. The HH[:MM[:NN]] format means that you can specify the time using only hours (HH), or hours and minutes (HH:MM), or hours, minutes and seconds (HH:MM:NN). For example, if you want to specify 8:00 AM, you can set the dayStartTime field to "08", "08:00", or "08:00:00". The timeScale field holds options to apply on the control's time-scale, as an object of TimeScaleOptions type.

The dayStartTime field is mapped to the DayStartTime property, which means that the following statements are equivalent:

oSchedule.Options = {dayStartTime: "08:00"}
oSchedule.SetOptions({dayStartTime: "08:00"})
oSchedule.DayStartTime = "08:00"
oSchedule.SetDayStartTime("08:00")
Type:
  • string
Example
null {null}, every day starts at 8:00 AM
"00:00" {string}, the day starts at 12:00 AM
"07:00" {string}, the day starts at 07:00 AM
dayStartTime

(static) dayViewHeight :number

The dayViewHeight field specifies the height of the day in the schedule panel. The dayViewWidth field specifies the width of the day in the schedule panel. The showViewCompact field specifies how days of the scheduler get arranged within the schedule-view. The dayViewHeight field has no effect if the showViewCompact field is exViewSingleRow or exViewSingleRowLockHeader, while the dayViewWidth field has no effect if the showViewCompact field is exViewSingleColumn. The MiscellaneousOptions.minWidth field specifies the minimum-width in pixels for the day's view. The MiscellaneousOptions.minHeight field specifies the minimum-height in pixels for the day's view.

The dayViewHeight field is mapped to the DayViewHeight property, which means that the following statements are equivalent:

oSchedule.Options = {dayViewHeight: 128}
oSchedule.SetOptions({dayViewHeight: 128})
oSchedule.DayViewHeight = 128
oSchedule.SetDayViewHeight(128)
Type:
  • number
Example
null {null} or -1 {number}, the day fits vertically the schedule view
128 {number}, the day within the schedule panel has a fixed height
dayViewHeight

(static) dayViewWidth :number

The dayViewWidth field specifies the width of the day in the schedule panel. The dayViewHeight field specifies the height of the day in the schedule panel. The showViewCompact field specifies how days of the scheduler get arranged within the schedule-view. The dayViewWidth field has no effect if the showViewCompact field is exViewSingleColumn, while the dayViewHeight field has no effect if the showViewCompact field is exViewSingleRow or exViewSingleRowLockHeader. The MiscellaneousOptions.minWidth field specifies the minimum-width in pixels for the day's view. The MiscellaneousOptions.minHeight field specifies the minimum-height in pixels for the day's view.

The dayViewWidth field is mapped to the DayViewWidth property, which means that the following statements are equivalent:

oSchedule.Options = {dayViewWidth: 128}
oSchedule.SetOptions({dayViewWidth: 128})
oSchedule.DayViewWidth = 128
oSchedule.SetDayViewWidth(128)
Type:
  • number
Example
null {null} or -1 {number}, the day fits horizontally the schedule view
128 {number}, the day within the schedule panel has a fixed width
dayViewWidth

(static) defaultEventExtraLabel :string

The defaultEventExtraLabel field defines the event's default extra-label. The extraLabel field specifies a custom extra HTML label to be displayed within the event's body. This field supports ex-HTML such as (<b>, <i>, <fgcolor>, ...) as well as <%=formula%> tags. The <%=formula%> tag represents the result of a given formula. The formula is a format-expression that can include placeholders like %1, %2, and so on. Each placeholder corresponds to a specific property of the event. For example, %1 refers to exEventStartDateTime, %2 refers to exEventEndDateTime, etc. The event's extra-label is displayed in the event's body, and it is always displayed if it is not empty. The caption and label of the event are always displayed (while control's time-scale is visible). By default, the defaultEventExtraLabel field is set to "", which means that the extra label of the event is empty by default.

The known identifiers within the <%=formula%> tag are:

  • %1 (exEventStartDateTime) {Date}, indicates the starting date/time of the event. This property gets the Start property of the event. The Start property defines the lower margin of the event, and it includes the date and the time values. The exEventStartDate specifies the DATE value only, while the exEventStartTime includes the TIME value only. For instance, the LabelProperty = "<%=weekday(%1)%>" displays the day of the week where the event starts
  • %2 (exEventEndDateTime) {Date}, indicates the ending date/time of the event. This property gets or sets the End property of the event. The End property defines the upper margin of the event, and it includes the date and the time values. The exEventEndDate specifies the DATE value only, while the exEventEndTime includes the TIME value only. For instance, the LabelProperty = "<%=weekday(%2)%>" gets the day of the week where the event ends.
  • %3 (exEventAllDay) {boolean}, indicates if the current event is an all day event. This property is equivalent with the event's AllDay property which indicates if the current event is an all-day event. For instance, the LabelProperty = "<%=%3 ? `All-Day-Event: `: ``%><%=%256%>", displays automatically an "All-Day-Event: " prefix for all-day events. If the event is not an all-day event, the <%=%256%>, or exEventDisplayShortMargins, short margins of the events are displayed.
  • %4 (exEventGroupID) {any}, specifies the identifier/index of the event's group. The GroupID property of the event indicates the identifier of the group that event belongs to. The exEventGroupLabel property indicates the Caption property of the Group's event. The exEventGroupTitle property indicates the Title property of the Group's event. For instance, the LabelProperty = "<%=%4%>
    <%=%256%>" displays on the first line, the group's identifier, and the short margins of the event on the second line. The caption of the label is automatically updated once an event is moved from a group to another.
  • %5 (exEventCaption) {string}, indicates the caption of the event. The Caption property of the event specifies the custom caption that can be displayed on the label, without having to change the event's label. For instance, the LabelProperty = "<%=%256%>
    <%=%5%>" displays on the first line, the event's short margins, while on the second line displays the event's caption. Once you update or edit the event's Caption, the event's body automatically shows the new caption.
  • %6 (exEventUserData) {any}, indicates the extra data associated with the event. The UserData property of the event indicates an extra data associated with the event. For instance, the LabelProperty = "<%=%256%>
    <%=%6%>" displays on the first line, the event's short margins, while on the second line displays the event's user data. Once you update or edit the event's UserData, the event's body automatically shows the new label.
  • %7 (exEventDuration) {number}, specifies the duration of the event. The returned values is of float type, and it indicates the duration of the event in days. For instance, the 1.5 indicates, 1 day and 12 hours. For instance, the LabelProperty = "<%=%256%>
    <%=((1:=int(0:= (date(%2)-date(%1)))) != 0 ? (=:1 + ' day(s)') : '') + (=:1 ? ' ' : '' ) + ((1:=int(0:=((=:0 - =:1 + 1/24/60/60/2)*24))) != 0 ? =:1 + ' hour(s)' : '' ) + (=:1 ? ' ' : '' ) + ((1:=round((=:0 - =:1)*60)) != 0 ? =:1 + ' min(s)' : '')%>" displays on the first line, the event's short margins, while on the second line displays the event's durations in days, hours and minutes. Once you update or edit the event's margins, the event's body automatically shows the new length. You can use the MoveBy method to delay the current event with a specified value time. You can use the SetKnownProperty(exEventDuration) to change the event's duration.
  • %8 (exEventRepetitiveExpression) {string}, specifies the repetitive expression of the event. The Event.Repetitive property indicates the expression that determines whether the event is repetitive. For instance, the LabelProperty = "<%=%256%>
    <%=len(%8)? `repetitive event`:``%>" displays repetitive event for repetitive events.
  • %12 (exEventID) {string}, specifies the event's unique key/identifier/index.
  • %256 (exEventDisplayShortMargins) {string}, displays the margins of the event in a short format (read-only). The ShortDateFormat property defines the short date format. The ShortTimeFormat property defines the short time format.
  • %257 (exEventDisplayLongMargins) {string}, displays the margins of the event in a long format (read-only). The LongDateFormat property defines the long date format. The LongTimeFormat property defines the long time format.
  • %258 (exEventStartDate) {Date}, gets the starting date ( not including the time ) of the event (read-only). You can use this property to get the starting date of the event.
  • %259 (exEventStartTime) {number}, gets the starting time ( not including the date ) of the event, as a number between 0 and 1 (read-only). You can use this property to get the starting time of the event.
  • %260 (exEventEndDate) {Date}, gets the ending date ( not including the time ) of the event (read-only). You can use this property to get the ending date of the event.
  • %261 (exEventEndTime) {number}, gets the ending time ( not including the date ) of the event, as a number between 0 and 1 (read-only). You can use this property to get the ending time of the event.
  • %262 (exEventGroupLabel) {string}, gets the label of the owner group (read-only). The exEventGroupLabel property indicates the Caption property of the Group's event. The GroupID property of the event indicates the identifier of the group that event belongs to. The exEventGroupTitle property indicates the Title property of the Group's event. For instance, the LabelProperty = "<%=%262%>
    <%=%256%>" displays on the first line, the group's caption, and the short margins of the event on the second line. The caption of the label is automatically updated once an event is moved from a group to another.
  • %263 (exEventGroupTitle) {string}, gets the title of the owner group (read-only). The exEventGroupTitle property indicates the Title property of the Group's event. The exEventGroupLabel property indicates the Caption property of the Group's event. The GroupID property of the event indicates the identifier of the group that event belongs to. For instance, the LabelProperty = "<%=%263%>
    <%=%256%>" displays on the first line, the group's caption, and the short margins of the event on the second line. The caption of the label is automatically updated once an event is moved from a group to another.
  • %264 (exEventRepetitive) {boolean}, Indicates if the current event is a repetitive event. (read-only). You can use this flag to specify whether Repetitive property of the Event object is not empty, and valid.

The defaultEventExtraLabel field is mapped to the DefaultEventExtraLabel property, which means that the following statements are equivalent:

oSchedule.Options = {defaultEventExtraLabel: "<%=%256%>"}< oSchedule.SetOptions({defaultEventExtraLabel: "<%=%256%>"})
oSchedule.DefaultEventExtraLabel = "<%=%256%>"
oSchedule.SetDefaultEventExtraLabel("<%=%256%>")
Type:
  • string
Example
"" {string}, no extra label is shown
"&lt;img&gt;image&lt;/img&gt; and text" {string}, the event displays the image and text. The image can be added using the exontrol.HTMLPicture.Add method
"&lt;%=%256%&gt;", displays the event's start and end margins in a short format
defaultEventExtraLabel

(static) defaultEventLongLabel :string

The defaultEventLongLabel field defines the event's default long-label. The EventOptions.longLabel field defines the event's custom long-label. This field supports ex-HTML such as (<b>, <i>, <fgcolor>, ...) as well as <%=formula%> tags. The <%=formula%> tag represents the result of a given formula. The formula is a format-expression that can include placeholders like %1, %2, and so on. Each placeholder corresponds to a specific property of the event. For example, %1 refers to exEventStartDateTime, %2 refers to exEventEndDateTime, etc. The event's long-label is displayed only if it is not empty and fits the event. The event's short-label is displayed if the event's long-label is empty or does not fit the event. The caption and extra-label of the event are always displayed (while control's time-scale is visible). By default, the defaultEventLongLabel field is set to "<%=%256%>", which means that the long label of the event shows the event's margins in a short format.

The known identifiers within the <%=formula%> tag are:

  • %1 (exEventStartDateTime) {Date}, indicates the starting date/time of the event. This property gets the Start property of the event. The Start property defines the lower margin of the event, and it includes the date and the time values. The exEventStartDate specifies the DATE value only, while the exEventStartTime includes the TIME value only. For instance, the LabelProperty = "<%=weekday(%1)%>" displays the day of the week where the event starts
  • %2 (exEventEndDateTime) {Date}, indicates the ending date/time of the event. This property gets or sets the End property of the event. The End property defines the upper margin of the event, and it includes the date and the time values. The exEventEndDate specifies the DATE value only, while the exEventEndTime includes the TIME value only. For instance, the LabelProperty = "<%=weekday(%2)%>" gets the day of the week where the event ends.
  • %3 (exEventAllDay) {boolean}, indicates if the current event is an all day event. This property is equivalent with the event's AllDay property which indicates if the current event is an all-day event. For instance, the LabelProperty = "<%=%3 ? `All-Day-Event: `: ``%><%=%256%>", displays automatically an "All-Day-Event: " prefix for all-day events. If the event is not an all-day event, the <%=%256%>, or exEventDisplayShortMargins, short margins of the events are displayed.
  • %4 (exEventGroupID) {any}, specifies the identifier/index of the event's group. The GroupID property of the event indicates the identifier of the group that event belongs to. The exEventGroupLabel property indicates the Caption property of the Group's event. The exEventGroupTitle property indicates the Title property of the Group's event. For instance, the LabelProperty = "<%=%4%>
    <%=%256%>" displays on the first line, the group's identifier, and the short margins of the event on the second line. The caption of the label is automatically updated once an event is moved from a group to another.
  • %5 (exEventCaption) {string}, indicates the caption of the event. The Caption property of the event specifies the custom caption that can be displayed on the label, without having to change the event's label. For instance, the LabelProperty = "<%=%256%>
    <%=%5%>" displays on the first line, the event's short margins, while on the second line displays the event's caption. Once you update or edit the event's Caption, the event's body automatically shows the new caption.
  • %6 (exEventUserData) {any}, indicates the extra data associated with the event. The UserData property of the event indicates an extra data associated with the event. For instance, the LabelProperty = "<%=%256%>
    <%=%6%>" displays on the first line, the event's short margins, while on the second line displays the event's user data. Once you update or edit the event's UserData, the event's body automatically shows the new label.
  • %7 (exEventDuration) {number}, specifies the duration of the event. The returned values is of float type, and it indicates the duration of the event in days. For instance, the 1.5 indicates, 1 day and 12 hours. For instance, the LabelProperty = "<%=%256%>
    <%=((1:=int(0:= (date(%2)-date(%1)))) != 0 ? (=:1 + ' day(s)') : '') + (=:1 ? ' ' : '' ) + ((1:=int(0:=((=:0 - =:1 + 1/24/60/60/2)*24))) != 0 ? =:1 + ' hour(s)' : '' ) + (=:1 ? ' ' : '' ) + ((1:=round((=:0 - =:1)*60)) != 0 ? =:1 + ' min(s)' : '')%>" displays on the first line, the event's short margins, while on the second line displays the event's durations in days, hours and minutes. Once you update or edit the event's margins, the event's body automatically shows the new length. You can use the MoveBy method to delay the current event with a specified value time. You can use the SetKnownProperty(exEventDuration) to change the event's duration.
  • %8 (exEventRepetitiveExpression) {string}, specifies the repetitive expression of the event. The Event.Repetitive property indicates the expression that determines whether the event is repetitive. For instance, the LabelProperty = "<%=%256%>
    <%=len(%8)? `repetitive event`:``%>" displays repetitive event for repetitive events.
  • %12 (exEventID) {string}, specifies the event's unique key/identifier/index.
  • %256 (exEventDisplayShortMargins) {string}, displays the margins of the event in a short format (read-only). The ShortDateFormat property defines the short date format. The ShortTimeFormat property defines the short time format.
  • %257 (exEventDisplayLongMargins) {string}, displays the margins of the event in a long format (read-only). The LongDateFormat property defines the long date format. The LongTimeFormat property defines the long time format.
  • %258 (exEventStartDate) {Date}, gets the starting date ( not including the time ) of the event (read-only). You can use this property to get the starting date of the event.
  • %259 (exEventStartTime) {number}, gets the starting time ( not including the date ) of the event, as a number between 0 and 1 (read-only). You can use this property to get the starting time of the event.
  • %260 (exEventEndDate) {Date}, gets the ending date ( not including the time ) of the event (read-only). You can use this property to get the ending date of the event.
  • %261 (exEventEndTime) {number}, gets the ending time ( not including the date ) of the event, as a number between 0 and 1 (read-only). You can use this property to get the ending time of the event.
  • %262 (exEventGroupLabel) {string}, gets the label of the owner group (read-only). The exEventGroupLabel property indicates the Caption property of the Group's event. The GroupID property of the event indicates the identifier of the group that event belongs to. The exEventGroupTitle property indicates the Title property of the Group's event. For instance, the LabelProperty = "<%=%262%>
    <%=%256%>" displays on the first line, the group's caption, and the short margins of the event on the second line. The caption of the label is automatically updated once an event is moved from a group to another.
  • %263 (exEventGroupTitle) {string}, gets the title of the owner group (read-only). The exEventGroupTitle property indicates the Title property of the Group's event. The exEventGroupLabel property indicates the Caption property of the Group's event. The GroupID property of the event indicates the identifier of the group that event belongs to. For instance, the LabelProperty = "<%=%263%>
    <%=%256%>" displays on the first line, the group's caption, and the short margins of the event on the second line. The caption of the label is automatically updated once an event is moved from a group to another.
  • %264 (exEventRepetitive) {boolean}, Indicates if the current event is a repetitive event. (read-only). You can use this flag to specify whether Repetitive property of the Event object is not empty, and valid.

The defaultEventLongLabel field is mapped to the DefaultEventLongLabel property, which means that the following statements are equivalent:

oSchedule.Options = {defaultEventLongLabel: "<%=%256%>"}
oSchedule.SetOptions({defaultEventLongLabel: "<%=%256%>"}) oSchedule.DefaultEventLongLabel = "<%=%256%>"
oSchedule.SetDefaultEventLongLabel("<%=%256%>")
Type:
  • string
Example
null {null} or undefined {undefined}, the default short-label is used ("&lt;%=%256%&gt;")
"" {string}, the short-label is hidden
"&lt;img&gt;image&lt;/img&gt; and text" {string}, the event displays the image and text. The image can be added using the exontrol.HTMLPicture.Add method
"&lt;%=%256%&gt;", displays the event's start and end margins in a short format
defaultEventLongLabel

(static) defaultEventShortLabel :string

The defaultEventShortLabel field defines the event's default short label. The EventOptions.shortLabel field specifies a custom short label for the event. This field supports ex-HTML such as (<b>, <i>, <fgcolor>, ...) as well as <%=formula%> tags. The <%=formula%> tag represents the result of a given formula. The formula is a format-expression that can include placeholders like %1, %2, and so on. Each placeholder corresponds to a specific property of the event. For example, %1 refers to exEventStartDateTime, %2 refers to exEventEndDateTime, etc. The event's long-label is displayed only if it is not empty and fits the event. The event's short-label is displayed if the event's long-label is empty or does not fit the event. The caption and extra-label of the event are always displayed (while control's time-scale is visible). By default, the defaultEventShortLabel field is set to "", which means that the short label of the event is empty by default.

The known identifiers within the <%=formula%> tag are:

  • %1 (exEventStartDateTime) {Date}, indicates the starting date/time of the event. This property gets the Start property of the event. The Start property defines the lower margin of the event, and it includes the date and the time values. The exEventStartDate specifies the DATE value only, while the exEventStartTime includes the TIME value only. For instance, the LabelProperty = "<%=weekday(%1)%>" displays the day of the week where the event starts
  • %2 (exEventEndDatef {Date}, indicates the ending date/time of the event. This property gets or sets the End property of the event. The End property defines the upper margin of the event, and it includes the date and the time values. The exEventEndDate specifies the DATE value only, while the exEventEndTime includes the TIME value only. For instance, the LabelProperty = "<%=weekday(%2)%>" gets the day of the week where the event ends.
  • %3 (exEventAllDay) {boolean}, indicates if the current event is an all day event. This property is equivalent with the event's AllDay property which indicates if the current event is an all-day event. For instance, the LabelProperty = "<%=%3 ? `All-Day-Event: `: ``%><%=%256%>", displays automatically an "All-Day-Event: " prefix for all-day events. If the event is not an all-day event, the <%=%256%>, or exEventDisplayShortMargins, short margins of the events are displayed.
  • %4 (exEventGroupID) {any}, specifies the identifier/index of the event's group. The GroupID property of the event indicates the identifier of the group that event belongs to. The exEventGroupLabel property indicates the Caption property of the Group's event. The exEventGroupTitle property indicates the Title property of the Group's event. For instance, the LabelProperty = "<%=%4%>
    <%=%256%>" displays on the first line, the group's identifier, and the short margins of the event on the second line. The caption of the label is automatically updated once an event is moved from a group to another.
  • %5 (exEventCaption) {string}, indicates the caption of the event. The Caption property of the event specifies the custom caption that can be displayed on the label, without having to change the event's label. For instance, the LabelProperty = "<%=%256%>
    <%=%5%>" displays on the first line, the event's short margins, while on the second line displays the event's caption. Once you update or edit the event's Caption, the event's body automatically shows the new caption.
  • %6 (exEventUserData) {any}, indicates the extra data associated with the event. The UserData property of the event indicates an extra data associated with the event. For instance, the LabelProperty = "<%=%256%>
    <%=%6%>" displays on the first line, the event's short margins, while on the second line displays the event's user data. Once you update or edit the event's UserData, the event's body automatically shows the new label.
  • %7 (exEventDuration) {number}, specifies the duration of the event. The returned values is of float type, and it indicates the duration of the event in days. For instance, the 1.5 indicates, 1 day and 12 hours. For instance, the LabelProperty = "<%=%256%>
    <%=((1:=int(0:= (date(%2)-date(%1)))) != 0 ? (=:1 + ' day(s)') : '') + (=:1 ? ' ' : '' ) + ((1:=int(0:=((=:0 - =:1 + 1/24/60/60/2)*24))) != 0 ? =:1 + ' hour(s)' : '' ) + (=:1 ? ' ' : '' ) + ((1:=round((=:0 - =:1)*60)) != 0 ? =:1 + ' min(s)' : '')%>" displays on the first line, the event's short margins, while on the second line displays the event's durations in days, hours and minutes. Once you update or edit the event's margins, the event's body automatically shows the new length. You can use the MoveBy method to delay the current event with a specified value time. You can use the SetKnownProperty(exEventDuration) to change the event's duration.
  • %8 (exEventRepetitiveExpression) {string}, specifies the repetitive expression of the event. The Event.Repetitive property indicates the expression that determines whether the event is repetitive. For instance, the LabelProperty = "<%=%256%>
    <%=len(%8)? `repetitive event`:``%>" displays repetitive event for repetitive events.
  • %12 (exEventID) {string}, specifies the event's unique key/identifier/index.
  • %256 (exEventDisplayShortMargins) {string}, displays the margins of the event in a short format (read-only). The ShortDateFormat property defines the short date format. The ShortTimeFormat property defines the short time format.
  • %257 (exEventDisplayLongMargins) {string}, displays the margins of the event in a long format (read-only). The LongDateFormat property defines the long date format. The LongTimeFormat property defines the long time format.
  • %258 (exEventStartDate) {Date}, gets the starting date ( not including the time ) of the event (read-only). You can use this property to get the starting date of the event.
  • %259 (exEventStartTime) {number}, gets the starting time ( not including the date ) of the event, as a number between 0 and 1 (read-only). You can use this property to get the starting time of the event.
  • %260 (exEventEndDate) {Date}, gets the ending date ( not including the time ) of the event (read-only). You can use this property to get the ending date of the event.
  • %261 (exEventEndTime) {number}, gets the ending time ( not including the date ) of the event, as a number between 0 and 1 (read-only). You can use this property to get the ending time of the event.
  • %262 (exEventGroupLabel) {string}, gets the label of the owner group (read-only). The exEventGroupLabel property indicates the Caption property of the Group's event. The GroupID property of the event indicates the identifier of the group that event belongs to. The exEventGroupTitle property indicates the Title property of the Group's event. For instance, the LabelProperty = "<%=%262%>
    <%=%256%>" displays on the first line, the group's caption, and the short margins of the event on the second line. The caption of the label is automatically updated once an event is moved from a group to another.
  • %263 (exEventGroupTitle) {string}, gets the title of the owner group (read-only). The exEventGroupTitle property indicates the Title property of the Group's event. The exEventGroupLabel property indicates the Caption property of the Group's event. The GroupID property of the event indicates the identifier of the group that event belongs to. For instance, the LabelProperty = "<%=%263%>
    <%=%256%>" displays on the first line, the group's caption, and the short margins of the event on the second line. The caption of the label is automatically updated once an event is moved from a group to another.
  • %264 (exEventRepetitive) {boolean}, Indicates if the current event is a repetitive event. (read-only). You can use this flag to specify whether Repetitive property of the Event object is not empty, and valid.

The defaultEventShortLabel field is mapped to the DefaultEventShortLabel property, which means that the following statements are equivalent:

oSchedule.Options = {defaultEventShortLabel: "<%=formula%>"}
oSchedule.SetOptions({defaultEventShortLabel: "<%=formula%>"})
oSchedule.DefaultEventShortLabel = "<%=formula%>"
oSchedule.SetDefaultEventShortLabel("<%=formula%>")
Type:
  • string
Example
null {null} or undefined {undefined}, the default short-label is used ("&lt;%=%256%&gt;")
"" {string}, the short-label is hidden
"&lt;img&gt;image&lt;/img&gt; and text" {string}, the event displays the image and text. The image can be added using the exontrol.HTMLPicture.Add method
"&lt;%=%256%&gt;", displays the event's start and end margins in a short format
defaultEventShortLabel

(static) defaultEventToolTip :string

The defaultEventToolTip field defines the event's default tooltip. The event's tooltip is shown when the mouse is over the event. The defaultEventToolTip field allows you to specify a default tooltip for all events, without having to set the tooltip for each event separately. The EventOptions.toolTip field defines the custom tooltip of the event, displayed when the cursor hovers over it. This field supports ex-HTML such as (<b>, <i>, <fgcolor>, ...) as well as <%=formula%> tags. The <%=formula%> tag represents the result of a given formula. The formula is a format-expression that can include placeholders like %1, %2, and so on. Each placeholder corresponds to a specific property of the event. For example, %1 refers to exEventStartDateTime, %2 refers to exEventEndDateTime, etc. The defaultEventToolTip field supports dynamic properties that are replaced with the corresponding values of the event when the tooltip is shown. By default, the defaultEventToolTip field is set to "Start: <%=%1%>
End: <%=%2%>
Duration: <%=((1:=int(0:= %7)) != 0 ? (=:1 + ' day(s)') : '') + (=:1 ? ' ' : '' ) + ((1:=int(0:=((=:0 - =:1 + 1/24/60/60/2)*24))) != 0 ? =:1 + ' hour(s)' : '' ) + (=:1 ? ' ' : '' ) + ((1:=round((=:0 - =:1)*60)) != 0 ? =:1 + ' min(s)' : '')%>", which means that the tooltip of each event shows the event's start and end date/time, and the event's duration in days, hours and minutes.

The following dynamic properties are supported in the defaultEventToolTip field:

  • %1 (exEventStartDateTime) {Date}, indicates the starting date/time of the event. This property gets the Start property of the event. The Start property defines the lower margin of the event, and it includes the date and the time values. The exEventStartDate specifies the DATE value only, while the exEventStartTime includes the TIME value only. For instance, the LabelProperty = "<%=weekday(%1)%>" displays the day of the week where the event starts
  • %2 (exEventEndDateTime) {Date}, indicates the ending date/time of the event. This property gets or sets the End property of the event. The End property defines the upper margin of the event, and it includes the date and the time values. The exEventEndDate specifies the DATE value only, while the exEventEndTime includes the TIME value only. For instance, the LabelProperty = "<%=weekday(%2)%>" gets the day of the week where the event ends.
  • %3 (exEventAllDay) {boolean}, indicates if the current event is an all day event. This property is equivalent with the event's AllDay property which indicates if the current event is an all-day event. For instance, the LabelProperty = "<%=%3 ? `All-Day-Event: `: ``%><%=%256%>", displays automatically an "All-Day-Event: " prefix for all-day events. If the event is not an all-day event, the <%=%256%>, or exEventDisplayShortMargins, short margins of the events are displayed.
  • %4 (exEventGroupID) {any}, specifies the identifier/index of the event's group. The GroupID property of the event indicates the identifier of the group that event belongs to. The exEventGroupLabel property indicates the Caption property of the Group's event. The exEventGroupTitle property indicates the Title property of the Group's event. For instance, the LabelProperty = "<%=%4%>
    <%=%256%>" displays on the first line, the group's identifier, and the short margins of the event on the second line. The caption of the label is automatically updated once an event is moved from a group to another.
  • %5 (exEventCaption) {string}, indicates the caption of the event. The Caption property of the event specifies the custom caption that can be displayed on the label, without having to change the event's label. For instance, the LabelProperty = "<%=%256%>
    <%=%5%>" displays on the first line, the event's short margins, while on the second line displays the event's caption. Once you update or edit the event's Caption, the event's body automatically shows the new caption.
  • %6 (exEventUserData) {any}, indicates the extra data associated with the event. The UserData property of the event indicates an extra data associated with the event. For instance, the LabelProperty = "<%=%256%>
    <%=%6%>" displays on the first line, the event's short margins, while on the second line displays the event's user data. Once you update or edit the event's UserData, the event's body automatically shows the new label.
  • %7 (exEventDuration) {number}, specifies the duration of the event. The returned values is of float type, and it indicates the duration of the event in days. For instance, the 1.5 indicates, 1 day and 12 hours. For instance, the LabelProperty = "<%=%256%>
    <%=((1:=int(0:= (date(%2)-date(%1)))) != 0 ? (=:1 + ' day(s)') : '') + (=:1 ? ' ' : '' ) + ((1:=int(0:=((=:0 - =:1 + 1/24/60/60/2)*24))) != 0 ? =:1 + ' hour(s)' : '' ) + (=:1 ? ' ' : '' ) + ((1:=round((=:0 - =:1)*60)) != 0 ? =:1 + ' min(s)' : '')%>" displays on the first line, the event's short margins, while on the second line displays the event's durations in days, hours and minutes. Once you update or edit the event's margins, the event's body automatically shows the new length. You can use the MoveBy method to delay the current event with a specified value time. You can use the SetKnownProperty(exEventDuration) to change the event's duration.
  • %8 (exEventRepetitiveExpression) {string}, specifies the repetitive expression of the event. The Event.Repetitive property indicates the expression that determines whether the event is repetitive. For instance, the LabelProperty = "<%=%256%>
    <%=len(%8)? `repetitive event`:``%>" displays repetitive event for repetitive events.
  • %12 (exEventID) {string}, specifies the event's unique key/identifier/index.
  • %256 (exEventDisplayShortMargins) {string}, displays the margins of the event in a short format (read-only). The ShortDateFormat property defines the short date format. The ShortTimeFormat property defines the short time format.
  • %257 (exEventDisplayLongMargins) {string}, displays the margins of the event in a long format (read-only). The LongDateFormat property defines the long date format. The LongTimeFormat property defines the long time format.
  • %258 (exEventStartDate) {Date}, gets the starting date ( not including the time ) of the event (read-only). You can use this property to get the starting date of the event.
  • %259 (exEventStartTime) {number}, gets the starting time ( not including the date ) of the event, as a number between 0 and 1 (read-only). You can use this property to get the starting time of the event.
  • %260 (exEventEndDate) {Date}, gets the ending date ( not including the time ) of the event (read-only). You can use this property to get the ending date of the event.
  • %261 (exEventEndTime) {number}, gets the ending time ( not including the date ) of the event, as a number between 0 and 1 (read-only). You can use this property to get the ending time of the event.
  • %262 (exEventGroupLabel) {string}, gets the label of the owner group (read-only). The exEventGroupLabel property indicates the Caption property of the Group's event. The GroupID property of the event indicates the identifier of the group that event belongs to. The exEventGroupTitle property indicates the Title property of the Group's event. For instance, the LabelProperty = "<%=%262%>
    <%=%256%>" displays on the first line, the group's caption, and the short margins of the event on the second line. The caption of the label is automatically updated once an event is moved from a group to another.
  • %263 (exEventGroupTitle) {string}, gets the title of the owner group (read-only). The exEventGroupTitle property indicates the Title property of the Group's event. The exEventGroupLabel property indicates the Caption property of the Group's event. The GroupID property of the event indicates the identifier of the group that event belongs to. For instance, the LabelProperty = "<%=%263%>
    <%=%256%>" displays on the first line, the group's caption, and the short margins of the event on the second line. The caption of the label is automatically updated once an event is moved from a group to another.
  • %264 (exEventRepetitive) {boolean}, Indicates if the current event is a repetitive event. (read-only). You can use this flag to specify whether Repetitive property of the Event object is not empty, and valid.

The defaultEventToolTip field is mapped to the DefaultEventToolTip property, which means that the following statements are equivalent:

oSchedule.Options = {defaultEventToolTip: "<%=%256%>"
oSchedule.SetOptions({defaultEventToolTip: "<%=%256%>"})
oSchedule.DefaultEventToolTip = "<%=%256%>"
oSchedule.SetDefaultEventToolTip("<%=%256%>")
Type:
  • string
Example
null {null} or undefined {undefined}, the default-tooltip is used ("Start: &lt;%=%1%&gt;&lt;br&gt;End: &lt;%=%2%&gt;&lt;br&gt;Duration: &lt;%=((1:=int(0:= %7)) != 0 ? (=:1 + ' day(s)') : '') + (=:1 ? ' ' : '' ) + ((1:=int(0:=((=:0 - =:1 + 1/24/60/60/2)*24))) != 0 ? =:1 + ' hour(s)' : '' ) + (=:1 ? ' ' : '' ) + ((1:=round((=:0 - =:1)*60)) != 0 ? =:1 + ' min(s)' : '')%&gt;")
"" {string}, no tooltip
"&lt;img&gt;image&lt;/img&gt; and text" {string}, the image and text is being shown once the mouse pointer hovers the event. The image can be added using the exontrol.HTMLPicture.Add method
"&lt;%=%256%&gt;", displays the event's start and end margins in a short format
defaultEventToolTip

(static) displayGroupingButton :boolean

The displayGroupingButton field gets or sets a value that indicates whether the grouping button is displayed in the date header. The showGroupingEvents field specifies whether the schedule view shows grouped events. The grouping button allows the user to toggle the visibility of grouped events within the schedule view. When the user clicks the grouping button, the schedule view shows or hides the groups of events. The displayGroupingButton field has effect only if the control displays groups. By default, the displayGroupingButton field is false, which means that the grouping button is not shown in the date header.

The grouping button is displayed if:

  • displayGroupingButton field is true
  • showGroupingEvents field is true

The control displays groups if:

  • showGroupingEvents field is true
  • The Groups collection has visible elements. By default, the Groups collection contains no Group objects

The displayGroupingButton field is mapped to the DisplayGroupingButton property, which means that the following statements are equivalent:

oSchedule.Options = {displayGroupingButton: true}
oSchedule.SetOptions({displayGroupingButton: true})
oSchedule.DisplayGroupingButton = true
oSchedule.SetDisplayGroupingButton(true)
Type:
  • boolean
Example
false {boolean}, no grouping button is shown
true {boolean}, shows the grouping button within the date's header
displayGroupingButton

(static) events :object|Array.<EventOptions>

The events field defines the events within the control. The events are the core elements of the schedule control, and they represent the scheduled items or appointments. Each event has specific properties such as start time, end time, caption, and more. The events field allows you to define multiple events within the control, and each event can have specific properties that determine how it is displayed and behaves within the schedule. You can use the Events.Add method to add new events to the control. By default, the events field is set to null, which means that no events are defined within the control. The start and end fields of the EventOptions type must be defined to have a valid event.

The events field can be any of the following:

  • {array(any)}, defines multiple events, with specified options, as an array of [{EventOptions}] type
  • {object}, defines multiple events, where each property(key) of the object defines the event with its options, of EventOptions type

The events field is mapped to the Events property, which means that the following statements are equivalent:

oSchedule.Options = {events: [{start: "#1/1/2001 10:00#", end: "#1/1/2001 12:00#"}]}
oSchedule.SetOptions({events: [{start: "#1/1/2001 10:00#", end: "#1/1/2001 12:00#"}]})
oSchedule.Events = [{start: "#1/1/2001 10:00#", end: "#1/1/2001 12:00#"}]
oSchedule.SetEvents([{start: "#1/1/2001 10:00#", end: "#1/1/2001 12:00#"}])
Type:
Example
The following sample defines three events within the control, as object:

 {
   "A":
   {
     groupID: "G1",
     start: "#1/1/2022 10:00#",
     end: "#1/1/2022 12:00#", 
     caption: "!Important"
   },
   "B":
   {
     groupID: "G1",
     start: "#1/1/2022 11:00#",
     end: "#1/1/2022 13:00#"
   },
   "C":
   {
     groupID: "G2", 
     start: "#1/1/2022 12:00#", 
     end: "#1/1/2022 14:00#"
   },
 }

The following sample defines three events within the control, as array:

 [
   {
     key: "A",
     groupID: "G1",
     start: "#1/1/2022 10:00#",
     end: "#1/1/2022 12:00#", 
     caption: "!Important"
   },
   {
     key: "B",
     groupID: "G1",
     start: "#1/1/2022 11:00#",
     end: "#1/1/2022 13:00#"
   },
   {
     key: "C",
     groupID: "G2", 
     start: "#1/1/2022 12:00#", 
     end: "#1/1/2022 14:00#"
   },
 ]
events

(static) formatText :exontrol.DrawTextFormatEnum

The formatText field specifies the format to display captions of the events (appointments). The formatText field is a bitwise combination of flags that control the alignment, word-breaking, tab expansion, and other aspects of how text is rendered within the control. For example, you can choose to align text to the center, enable word-breaking for long captions, or specify that text should be displayed on a single line. The exontrol.DrawTextFormatEnum type defines various flags that can be combined to achieve the desired text formatting. By default, the formatText field is set to exTextAlignRight | exTextAlignBottom | exTextSingleLine | exTextWordEllipsis, which means that event captions are right-aligned, bottom-aligned, displayed on a single line, and truncated with ellipses if they exceed the available space.

The following fields can be used to specify the format for different captions and labels within the control:

  • Event captions and labels
    • The formatText field specifies the format used to display event (appointment) captions.
    • The formatEventShortLabel, formatEventLongLabel, and formatEventExtraLabel fields specify the format and alignment for the event's short, long, and extra labels.
  • Event interaction (drag & drop)
    • The formatCreateEventLabel field specifies the format and alignment of the event's label while the user creates it by drag and drop.
    • The formatUpdateEventLabel field specifies the format and alignment of the event's label while the user moves or resizes it by drag and drop.
  • Other captions

The exontrol.DrawTextFormatEnum type supports the following flags:

  • exTextAlignTop (0x00), justifies the text to the top of the rectangle
  • exTextAlignLeft (0x00), aligns text to the left
  • exTextAlignCenter (0x01), centers text horizontally in the rectangle
  • exTextAlignRight (0x02), aligns text to the right
  • exTextAlignVCenter (0x04), centers text vertically
  • exTextAlignBottom (0x08), justifies the text to the bottom of the rectangle.
  • exTextAlignMask (0x0F), specifies the mask for text's alignment.
  • exTextWordBreak (0x10), breaks words. Lines are automatically broken between words if a word would extend past the edge of the rectangle specified by the lpRect parameter. A carriage return-line feed sequence also breaks the line. If this is not specified, output is on one line.
  • exTextSingleLine (0x20), displays text on a single line only. Carriage returns and line feeds do not break the line.
  • exTextExpandTabs (0x40), expands tab characters. The default number of characters per tab is eight.
  • exPlainText (0x80), treats the text as plain text.
  • exTextNoClip (0x0100), draws without clipping.
  • exHTMLTextNoColors (0x0200), ignores the and tags.
  • exTextCalcRect (0x0400), determines the width and height of the text.
  • exHTMLTextNoTags (0x0800), ignores all HTML tags.
  • exTextPathEllipsis (0x4000), for displayed text, replaces characters in the middle of the string with ellipses so that the result fits in the specified rectangle. If the string contains backslash (\) characters, exTextPathEllipsis preserves as much as possible of the text after the last backslash.
  • exTextEndEllipsis (0x8000), for displayed text, if the end of a string does not fit in the rectangle, it is truncated and ellipses are added. If a word that is not at the end of the string goes beyond the limits of the rectangle, it is truncated without ellipses.
  • exTextWordEllipsis (0x040000), truncates any word that does not fit in the rectangle and adds ellipses.

The formatText field is mapped to the FormatText property, which means that the following statements are equivalent:

oSchedule.Options = {formatText: 32}
oSchedule.SetOptions({formatText: 32})
oSchedule.FormatText = 32
oSchedule.SetFormatText(32)
Type:
  • exontrol.DrawTextFormatEnum
Example
null {null}, centers the caption
32 or exontrol.DrawTextFormatEnum.exTextSingleLine {number}, defines a single-line caption
0x2A or exontrol.DrawTextFormatEnum.exTextSingleLine | exontrol.DrawTextFormatEnum.exTextAlignRight | exontrol.DrawTextFormatEnum.exTextAlignBottom {number}, defines a single-line caption right/bottom-aligned
formatText

(static) groups :object|Array.<GroupOptions>

The groups field defines the groups within the control. The groups are used to categorize events within the schedule control. Each group can have its own set of events, and it can be visually distinguished from other groups using different colors, captions, or other styling options. The groups field allows you to define multiple groups within the control, and each group can have specific properties such as caption, identifier, and more. You can use the Groups.Add method to add new groups to the control. By default, the groups field is set to null, which means that no groups are defined within the control.

The groups field can be any of the following:

  • {string}, defines a single group with specified caption/identifier
  • {array(any)}, defines multiple groups, with specified caption/identifier/options, as an array of [caption] or [{GroupOptions}] type
  • {object}, defines multiple groups, where each property of the object defines a group with its options, of GroupOptions type

The groups field is mapped to the Groups property, which means that the following statements are equivalent:

oSchedule.Options = {groups: [{caption: "Group 1"}]}
oSchedule.SetOptions({groups: [{caption: "Group 1"}]})
oSchedule.Groups = [{caption: "Group 1"}]
oSchedule.SetGroups([{caption: "Group 1"}])
Type:
Example
The following sample defines two groups within the control, as object:

 {
   "G1":
   {
     eventShape: "red", 
     headerShape: "red"
   },
   "G2":
   {
     eventShape: "lime",
     headerShape: "lime"
   }
 }

The following sample defines two groups within the control, as array:

 [
   {
     caption: "G1",
     eventShape: "red", 
     headerShape: "red",
   },
   {
     caption: "G2",
     eventShape: "lime",
     headerShape: "lime",
   }
 ]
groups

(static) headerAllDayEventHeight :number

The headerAllDayEventHeight field defines the height of the events to display within the all-day header (relative to the font-size of the control). The showAllDayHeader field specifies whether the control's header for all-day events is visible or hidden. The all-day header is a special section within the schedule control that is designed to display events that last for an entire day or more. By default, the headerAllDayEventHeight field is set to 1, which means that the height of the events within the all-day header is the same as the size of the control's font.

The headerAllDayEventHeight field is mapped to the HeaderAllDayEventHeight property, which means that the following statements are equivalent:

oSchedule.Options = {headerAllDayEventHeight: 2}
oSchedule.SetOptions({headerAllDayEventHeight: 2})
oSchedule.HeaderAllDayEventHeight = 2
oSchedule.SetHeaderAllDayEventHeight(2)
Type:
  • number
Example
null {null}, the height of the event within the control's all-day header is the same as the size of the control's font (100%)
0 {number}, hides the all-day header
2 {number}, the height of the event within the control's all-day header is 2 times the size of the control's font
headerAllDayEventHeight

(static) headerDayHeight :number

The headerDayHeight field defines the height of the day's header (relative to the font-size of the control). The headerDayHeight field can be set to a specific value (e.g., 2) to make the height of the day's header 2 times the size of the control's font, or it can be set to null to make the height of the day's header 1.5 times the size of the control's font (150%). Setting the headerDayHeight field to 0 will hide the day's header. The day's header is the area of the schedule view that displays the name or number of the day, and adjusting its height can help improve the readability and visual appeal of the schedule, allowing users to easily identify and differentiate between days in the schedule view.

The headerDayHeight field is mapped to the HeaderDayHeight property, which means that the following statements are equivalent:

oSchedule.Options = {headerDayHeight: 2}
oSchedule.SetOptions({headerDayHeight: 2})
oSchedule.HeaderDayHeight = 2
oSchedule.SetHeaderDayHeight(2)
Type:
  • number
Example
null {null}, the height of the day's header is 1.5 times the size of the control's font (150%)
0 {number}, hides the day's header
2 {number}, the height of the day's header is 2 times the size of the control's font
headerDayHeight

(static) headerDayLongLabel :string

The headerDayLongLabel field defines the alternate HTML labels being shown on date's header, when the time-scale is visible. The headerDayShortLabel field defines the alternate HTML labels being shown on date's header, when the time-scale is hidden. The format the headerDayLongLabel property is "ALT1[<|>ALT2<|>...][<=>EXPR]", where ALT defines a HTML label that supports a lot of predefined built-in tags, EXPR defines an expression to specify which HTML label to be shown when a condition is met. The EXPR supports the value keyword which represents the date being queried, and it evaluates to a numeric value that specifies the index (zero-based) of the alternate label to be shown for that date. Additionally, if the EXPR returns -1, any negative value, or a value outside the range of alternate labels, the control automatically selects the label that best fits the width of the date header.

The ALT part of the label supports ex-HTLM tags (such as <b>, <i>, <fgcolor>, ...) and <%DATE%> tags as follows:

Name Description Sample
(day-patterns)
<%d%>Day of the month using one or two numeric digits, depending on the value1 - 31
<%dd%>Day of the month using exactly two numeric digits01 - 31
<%d1%>Weekday using its first letterS - S
<%loc_d1%>Weekday as a single-letter abbreviation based on the current user settingsS - S
<%d2%>Weekday using its first two lettersSu - Sa
<%loc_d2%>Weekday as a two-letter abbreviation based on the current user settingsSu - Sa
<%d3%>Weekday using its first three lettersSun - Sat
<%ddd%>Weekday using its first three lettersSun - Sat
<%loc_d3%>Weekday as a three-letter abbreviation based on the current user regional and language settings; equivalent to <%loc_ddd%>Sun - Sat
<%loc_ddd%>Weekday as a three-letter abbreviation based on the current user regional and language settingsSun - Sat
<%dddd%>Full name of the weekdaySunday - Saturday
<%loc_dddd%>Full weekday name based on the current user regional and language settingsSunday - Saturday
<%w%>Numeric day of the week1 - 7
<%y%>Numeric day of the year1 - 366
(week-patterns)
<%ww%>Week of the year1 - 53
(month-patterns)
<%m%>Month of the year using one or two numeric digits, as needed1 - 12
<%mm%>Month of the year using exactly two numeric digits01 - 12
<%mr%>Month of the year using Roman numerals, as neededI - XII
<%m1%>Month using its first letterJ - D
<%loc_m1%>Month as a single-letter abbreviation based on the current user settingsJ - D
<%m2%>Month using its first two lettersJa - De
<%loc_m2%>Month as a two-letter abbreviation based on the current user settingsJa - De
<%m3%>Month using its first three lettersJan - Dec
<%mmm%>Month using its first three lettersJan - Dec
<%loc_m3%>Month as a three-letter abbreviation based on the current user regional and language settings; equivalent to <%loc_mmm%>Jan - Dec
<%loc_mmm%>Month as a three-letter abbreviation based on the current user regional and language settingsJan - Dec
<%mmmm%>Full name of the monthJanuary - December
<%loc_mmmm%>Full month name based on the current user regional and language settingsJanuary - December
(year-patterns)
<%q%>Date shown as the quarter of the year1 - 4
<%hy%>Date shown as the half of the year1 - 2
<%loc_y%>Year represented by the last digit only, based on the current regional settings0 - 9
<%yy%>Last two digits of the year01 - 99
<%loc_yy%>Year represented by the last two digits only, based on the current regional settings; a leading zero is added for single-digit years01 - 99
<%yyyy%>Full year using four digits0100 - 9999
<%loc_yyyy%>Year represented using four or five digits, depending on the calendar in use. Thai Buddhist and Korean calendars use five-digit years; the "yyyy" pattern displays five digits for these calendars and four digits for all other supported calendars. Calendars with single-digit or two-digit years, such as the Japanese Emperor era, are formatted differently: single-digit years include a leading zero (for example, "03"), two-digit years use two digits (for example, "13"), and no additional leading zeros are applied0100 - 9999
<%i%>Numeric value displayed instead of a date, representing the number of milliseconds elapsed since the Unix Epoch, January 1, 1970, 00:00:00 UTC1767085565940
(localized era-patterns)
<%loc_g%>Period/era based on the current user regional and language settingsA,B
<%loc_gg%>Period/era based on the current user regional and language settingsAD,BC
(localized date-patterns)
<%loc_sdate%>Date in short format based on the current user regional and language settings12/31/2000
<%loc_ldate%>Date in long format based on the current user regional and language settingsDecember 31, 2000
<%loc_dsep%>Date separator based on the current user regional and language settings/
(time-patterns)
<%h%>Hour in one or two digits, as needed0 - 23
<%hh%>Hour in two digits00 - 23
<%h12%>Hour in 12-hour format, in one or two digits0/12 - 11
<%hh12%>Hour in 12-hour format, in two digits00/12 - 11
<%n%>Minute in one or two digits, as needed0 - 59
<%nn%>Minute in two digits00 - 59
<%s%>Second in one or two digits, as needed0 - 59
<%ss%>Second in two digits00 - 59
<%AM/PM%>12-hour clock with uppercase "AM" or "PM" as appropriateAM, PM
(localized time-patterns)
<%loc_AM/PM%>Time marker such as AM or PM based on the current user regional and language settingsAM, PM
<%loc_A/P%>Single-character time marker such as A or P based on the current user regional and language settingsA, P
<%loc_time%>Time based on the current user regional and language settings1:30:15 PM
<%loc_time24%>Time in 24-hour format without a time marker based on the current user regional and language settings13:30:15
<%loc_tsep%>Time separator based on the current user regional and language settings:

The headerDayShortLabel field is mapped to the HeaderDayShortLabel property, which means that the following statements are equivalent:

oSchedule.Options = {headerDayLongLabel: "<%loc_ldate%>"}
oSchedule.SetOptions({headerDayLongLabel: "<%loc_ldate%>"})
oSchedule.HeaderDayLongLabel = "<%loc_ldate%>"
oSchedule.SetHeaderDayLongLabel("<%loc_ldate%>")
Type:
  • string
Example
null {null}, the date's header displays the label using default alternate-labels (and expression)
"" {string}, the date's header displays no date
"&lt;%loc_ldate%&gt;" {string}, displays the date in the long format using the current user regional and language settings
"&lt;%d3%&gt;, &lt;%d%&gt;&lt;|&gt;&lt;%d2%&gt;, &lt;%d%&gt;&lt;|&gt;&lt;%d1%&gt;, &lt;%d%&gt;&lt;|&gt;&lt;%d%&gt;" {string}, the date's header displays one, two or three letters for the week day based on the best fit
"&lt;fgcolor red&gt;&lt;%d3%&gt;, &lt;%d%&gt;&lt;|&gt;&lt;%d3%&gt;, &lt;%d%&gt;&lt;=&gt;month(value) = 1 ? 0 : 1" {string}, displays the date's header in red for January, and in black for the rest
headerDayLongLabel

(static) headerDayShortLabel :string

The headerDayShortLabel field defines the alternate HTML labels being shown on date's header, when the time-scale is hidden. The headerDayLongLabel field defines the alternate HTML labels being shown on date's header, when the time-scale is visible.The format the headerDayShortLabel property is "ALT1[<|>ALT2<|>...][<=>EXPR]", where ALT defines a HTML label that supports a lot of predefined built-in tags, EXPR defines an expression to specify which HTML label to be shown when a condition is met. The EXPR supports the value keyword which represents the date being queried, and it evaluates to a numeric value that specifies the index (zero-based) of the alternate label to be shown for that date. Additionally, if the EXPR returns -1, any negative value, or a value outside the range of alternate labels, the control automatically selects the label that best fits the width of the date header.

The ALT part of the label supports ex-HTLM tags (such as <b>, <i>, <fgcolor>, ...) and <%DATE%> tags as follows:

Name Description Sample
(day-patterns)
<%d%>Day of the month using one or two numeric digits, depending on the value1 - 31
<%dd%>Day of the month using exactly two numeric digits01 - 31
<%d1%>Weekday using its first letterS - S
<%loc_d1%>Weekday as a single-letter abbreviation based on the current user settingsS - S
<%d2%>Weekday using its first two lettersSu - Sa
<%loc_d2%>Weekday as a two-letter abbreviation based on the current user settingsSu - Sa
<%d3%>Weekday using its first three lettersSun - Sat
<%ddd%>Weekday using its first three lettersSun - Sat
<%loc_d3%>Weekday as a three-letter abbreviation based on the current user regional and language settings; equivalent to <%loc_ddd%>Sun - Sat
<%loc_ddd%>Weekday as a three-letter abbreviation based on the current user regional and language settingsSun - Sat
<%dddd%>Full name of the weekdaySunday - Saturday
<%loc_dddd%>Full weekday name based on the current user regional and language settingsSunday - Saturday
<%w%>Numeric day of the week1 - 7
<%y%>Numeric day of the year1 - 366
(week-patterns)
<%ww%>Week of the year1 - 53
(month-patterns)
<%m%>Month of the year using one or two numeric digits, as needed1 - 12
<%mm%>Month of the year using exactly two numeric digits01 - 12
<%mr%>Month of the year using Roman numerals, as neededI - XII
<%m1%>Month using its first letterJ - D
<%loc_m1%>Month as a single-letter abbreviation based on the current user settingsJ - D
<%m2%>Month using its first two lettersJa - De
<%loc_m2%>Month as a two-letter abbreviation based on the current user settingsJa - De
<%m3%>Month using its first three lettersJan - Dec
<%mmm%>Month using its first three lettersJan - Dec
<%loc_m3%>Month as a three-letter abbreviation based on the current user regional and language settings; equivalent to <%loc_mmm%>Jan - Dec
<%loc_mmm%>Month as a three-letter abbreviation based on the current user regional and language settingsJan - Dec
<%mmmm%>Full name of the monthJanuary - December
<%loc_mmmm%>Full month name based on the current user regional and language settingsJanuary - December
(year-patterns)
<%q%>Date shown as the quarter of the year1 - 4
<%hy%>Date shown as the half of the year1 - 2
<%loc_y%>Year represented by the last digit only, based on the current regional settings0 - 9
<%yy%>Last two digits of the year01 - 99
<%loc_yy%>Year represented by the last two digits only, based on the current regional settings; a leading zero is added for single-digit years01 - 99
<%yyyy%>Full year using four digits0100 - 9999
<%loc_yyyy%>Year represented using four or five digits, depending on the calendar in use. Thai Buddhist and Korean calendars use five-digit years; the "yyyy" pattern displays five digits for these calendars and four digits for all other supported calendars. Calendars with single-digit or two-digit years, such as the Japanese Emperor era, are formatted differently: single-digit years include a leading zero (for example, "03"), two-digit years use two digits (for example, "13"), and no additional leading zeros are applied0100 - 9999
<%i%>Numeric value displayed instead of a date, representing the number of milliseconds elapsed since the Unix Epoch, January 1, 1970, 00:00:00 UTC1767085565940
(localized era-patterns)
<%loc_g%>Period/era based on the current user regional and language settingsA,B
<%loc_gg%>Period/era based on the current user regional and language settingsAD,BC
(localized date-patterns)
<%loc_sdate%>Date in short format based on the current user regional and language settings12/31/2000
<%loc_ldate%>Date in long format based on the current user regional and language settingsDecember 31, 2000
<%loc_dsep%>Date separator based on the current user regional and language settings/
(time-patterns)
<%h%>Hour in one or two digits, as needed0 - 23
<%hh%>Hour in two digits00 - 23
<%h12%>Hour in 12-hour format, in one or two digits0/12 - 11
<%hh12%>Hour in 12-hour format, in two digits00/12 - 11
<%n%>Minute in one or two digits, as needed0 - 59
<%nn%>Minute in two digits00 - 59
<%s%>Second in one or two digits, as needed0 - 59
<%ss%>Second in two digits00 - 59
<%AM/PM%>12-hour clock with uppercase "AM" or "PM" as appropriateAM, PM
(localized time-patterns)
<%loc_AM/PM%>Time marker such as AM or PM based on the current user regional and language settingsAM, PM
<%loc_A/P%>Single-character time marker such as A or P based on the current user regional and language settingsA, P
<%loc_time%>Time based on the current user regional and language settings1:30:15 PM
<%loc_time24%>Time in 24-hour format without a time marker based on the current user regional and language settings13:30:15
<%loc_tsep%>Time separator based on the current user regional and language settings:

The headerDayShortLabel field is mapped to the HeaderDayShortLabel property, which means that the following statements are equivalent:

oSchedule.Options = {headerDayShortLabel: "<%loc_ldate%>"}
oSchedule.SetOptions({headerDayShortLabel: "<%loc_ldate%>"})
oSchedule.HeaderDayShortLabel = "<%loc_ldate%>"
oSchedule.SetHeaderDayShortLabel("<%loc_ldate%>")
Type:
  • string
Example
null {null}, the date's header displays the label using default alternate-labels (and expression)
"" {string}, the date's header displays no date
"&lt;%loc_sdate%&gt;" {string}, displays the date in the short format using the current user regional and language settings
"&lt;%d3%&gt;, &lt;%d%&gt;&lt;|&gt;&lt;%d2%&gt;, &lt;%d%&gt;&lt;|&gt;&lt;%d1%&gt;, &lt;%d%&gt;&lt;|&gt;&lt;%d%&gt;" {string}, the date's header displays one, two or three letters for the week day based on the best fit
"&lt;fgcolor red&gt;&lt;%d3%&gt;, &lt;%d%&gt;&lt;|&gt;&lt;%d3%&gt;, &lt;%d%&gt;&lt;=&gt;month(value) = 1 ? 0 : 1" {string}, displays the date's header in red for January, and in black for the rest
headerDayShortLabel

(static) headerGroupHeight :number

The headerGroupHeight field defines the height of the group's header (relative to the font-size of the control). The headerGroupHeight field is used to calculate the height of the group's header when the control displays groups. If the headerGroupHeight field is set to 0, the control hides the group's header and does not display the name of the group. If the headerGroupHeight field is set to a value greater than 0, the control shows the group's header with a height equal to that value multiplied by the size of the control's font. For example, if you want to show the group's header with a height of 2 times the size of the control's font, you can set the headerGroupHeight field to 2. By default, the headerGroupHeight field is set to 2, which means that the control shows the group's header with a height of 2 times the size of the control's font.

The control displays groups if:

  • showGroupingEvents field is true
  • The Groups collection has visible elements. By default, the Groups collection contains no Group objects

The headerGroupHeight field is mapped to the HeaderGroupHeight property, which means that the following statements are equivalent:

oSchedule.Options = {headerGroupHeight: 2}
oSchedule.SetOptions({headerGroupHeight: 2})
oSchedule.HeaderGroupHeight = 2
oSchedule.SetHeaderGroupHeight(2)
Type:
  • number
Example
0 {number}, hides the group's header
2 {number}, the height of the group's header is 2 times the size of the control's font
headerGroupHeight

(static) imageAlign :number

The imageAlign field defines the alignment of the image within the event (reserved for future use only). The imageSize field defines the size of the event's image. The imageAlign and imageSize properties work together to control how the image is displayed within the event. The imageSize property specifies the dimensions of the image, while the imageAlign property determines where the image is positioned in relation to the caption.

The imageAlign propery can be any of the following:

  • 0, the image is on the left of the event's caption
  • 1, the image is on the right of the event's caption
  • 2, the image is on the top of the event's caption
  • 3, the image is on the bottom of the event's caption

The imageAlign field is mapped to the ImageAlign property, which means that the following statements are equivalent:

oSchedule.Options = {imageAlign: 1}
oSchedule.SetOptions({imageAlign: 1})
oSchedule.ImageAlign = 1
oSchedule.SetImageAlign(1)
Type:
  • number
Example
null {null}, the image is aligned left to the caption (default)
1 {number}, the image is displayed to the right of the event's caption
imageAlign

(static) imageSize :null|number|Array.<number>

The imageSize field defines the size of the event's image (reserved for future use only). The imageAlign field defines the alignment of the image within the event. The imageSize and imageAlign properties work together to control how the image is displayed within the event. The imageSize property specifies the dimensions of the image, while the imageAlign property determines where the image is positioned in relation to the caption. Captions or labels that support ex-HTML formatting can include images using the <img> ex-HTML tag; however, the imageSize field does not affect images inserted with the <img> tag. The <img> tag supports additional size attribute that specifies the picture's size such as "<img>apple:18</img>2002", which indicates that the image named apple has a size of 18.

The imageSize could be of one of the following types:

  • {null}, Indicates that the event's image is displayed as it is (full-sized).
  • {number}, Specifies that the event's image is displayed into a square of giving size (same width and height). If 0 the event displays no image, if negative the event's image is stretched to giving square, else the event's picture is scaled to fit the giving rectangle.
  • {number[]}, Specifies an array of [aspect-width,aspect-height] type that defines the limits for width or/and height. The aspect-width and aspect-height define the width/height of the event's picture to scale or stretch to.

The imageSize field is mapped to the ImageSize property, which means that the following statements are equivalent:

oSchedule.Options = {imageSize: 64}
oSchedule.SetOptions({imageSize: 64})
oSchedule.ImageSize = 64
oSchedule.SetImageSize(64)
Type:
  • null | number | Array.<number>
Example
null {null}, Indicates that the event's image is displayed as it is (full-sized).
0 {number}, no image is displayed
64 {number}, the image is scaled to fit a 64 x 64 rectangle
-64 {number}, the image is strected to a 64 x 64 rectangle
[32,64] {array}, scales the image to the largest ratio-rectangle (32 x 64) that fits the client
[-32,-64] {array}, stretches the image to a 32 x 64 rectangle
imageSize

(static) locked :boolean

The locked field indicates whether the control is locked(protected) or unlocked.
  • When locked is set to true, the control is fully locked. Users cannot scroll, select, or interact with any event within the control.
  • When locked is set to false, the control is unlocked and behaves normally, allowing users to scroll, select, and interact with events.

In contrast, when the control is read-only, users cannot create, resize, or move events, but they can still scroll, select, and interact with the existing events in the control. Therefore, locked mode completely prevents user interaction with the control, while read-only mode only prevents modifications to the events.

The locked field is mapped to the Locked property, which means that the following statements are equivalent:

oSchedule.Options = {locked: true}
oSchedule.SetOptions({locked: true})
oSchedule.Locked = true
oSchedule.SetLocked(true)
Type:
  • boolean
Example
false {boolean}, unlocks the control (can select any event)
true {boolean}, locks the control (can't select any event)
locked

(static) longDateFormat :string

The longDateFormat field specifies how dates are displayed in long form (date only, no time). The longDateFormat field supports ex-HTLM tags (such as <b>, <i>, <fgcolor>, ...) and <%DATE%> tags. The KnownProperty(exEventDisplayLongMargins) property (equivalent to using the <%=%257%> tag in an event's label) shows the event's start and end margins in long format according to the longDateFormat and longTimeFormat fields. For example, if longDateFormat uses '<%mmmm%>/<%d%>' and an event runs from April 3 to April 5, using <%=%257%> in the label will display April/3 - April/5. The eventDisplayMarginsSep field indicates the separator character(s) between start and end date-times. By default, the longDateFormat field is set to "<%loc_ldate%>", which displays the date in the locale's long date format.

The known identifiers within the <%DATE%> tag are:

Name Description Sample
(day-patterns)
<%d%>Day of the month using one or two numeric digits, depending on the value1 - 31
<%dd%>Day of the month using exactly two numeric digits01 - 31
<%d1%>Weekday using its first letterS - S
<%loc_d1%>Weekday as a single-letter abbreviation based on the current user settingsS - S
<%d2%>Weekday using its first two lettersSu - Sa
<%loc_d2%>Weekday as a two-letter abbreviation based on the current user settingsSu - Sa
<%d3%>Weekday using its first three lettersSun - Sat
<%ddd%>Weekday using its first three lettersSun - Sat
<%loc_d3%>Weekday as a three-letter abbreviation based on the current user regional and language settings; equivalent to <%loc_ddd%>Sun - Sat
<%loc_ddd%>Weekday as a three-letter abbreviation based on the current user regional and language settingsSun - Sat
<%dddd%>Full name of the weekdaySunday - Saturday
<%loc_dddd%>Full weekday name based on the current user regional and language settingsSunday - Saturday
<%w%>Numeric day of the week1 - 7
<%y%>Numeric day of the year1 - 366
(week-patterns)
<%ww%>Week of the year1 - 53
(month-patterns)
<%m%>Month of the year using one or two numeric digits, as needed1 - 12
<%mm%>Month of the year using exactly two numeric digits01 - 12
<%mr%>Month of the year using Roman numerals, as neededI - XII
<%m1%>Month using its first letterJ - D
<%loc_m1%>Month as a single-letter abbreviation based on the current user settingsJ - D
<%m2%>Month using its first two lettersJa - De
<%loc_m2%>Month as a two-letter abbreviation based on the current user settingsJa - De
<%m3%>Month using its first three lettersJan - Dec
<%mmm%>Month using its first three lettersJan - Dec
<%loc_m3%>Month as a three-letter abbreviation based on the current user regional and language settings; equivalent to <%loc_mmm%>Jan - Dec
<%loc_mmm%>Month as a three-letter abbreviation based on the current user regional and language settingsJan - Dec
<%mmmm%>Full name of the monthJanuary - December
<%loc_mmmm%>Full month name based on the current user regional and language settingsJanuary - December
(year-patterns)
<%q%>Date shown as the quarter of the year1 - 4
<%hy%>Date shown as the half of the year1 - 2
<%loc_y%>Year represented by the last digit only, based on the current regional settings0 - 9
<%yy%>Last two digits of the year01 - 99
<%loc_yy%>Year represented by the last two digits only, based on the current regional settings; a leading zero is added for single-digit years01 - 99
<%yyyy%>Full year using four digits0100 - 9999
<%loc_yyyy%>Year represented using four or five digits, depending on the calendar in use. Thai Buddhist and Korean calendars use five-digit years; the "yyyy" pattern displays five digits for these calendars and four digits for all other supported calendars. Calendars with single-digit or two-digit years, such as the Japanese Emperor era, are formatted differently: single-digit years include a leading zero (for example, "03"), two-digit years use two digits (for example, "13"), and no additional leading zeros are applied0100 - 9999
<%i%>Numeric value displayed instead of a date, representing the number of milliseconds elapsed since the Unix Epoch, January 1, 1970, 00:00:00 UTC1767085565940
(localized era-patterns)
<%loc_g%>Period/era based on the current user regional and language settingsA,B
<%loc_gg%>Period/era based on the current user regional and language settingsAD,BC
(localized date-patterns)
<%loc_sdate%>Date in short format based on the current user regional and language settings12/31/2000
<%loc_ldate%>Date in long format based on the current user regional and language settingsDecember 31, 2000
<%loc_dsep%>Date separator based on the current user regional and language settings/
(time-patterns)
<%h%>Hour in one or two digits, as needed0 - 23
<%hh%>Hour in two digits00 - 23
<%h12%>Hour in 12-hour format, in one or two digits0/12 - 11
<%hh12%>Hour in 12-hour format, in two digits00/12 - 11
<%n%>Minute in one or two digits, as needed0 - 59
<%nn%>Minute in two digits00 - 59
<%s%>Second in one or two digits, as needed0 - 59
<%ss%>Second in two digits00 - 59
<%AM/PM%>12-hour clock with uppercase "AM" or "PM" as appropriateAM, PM
(localized time-patterns)
<%loc_AM/PM%>Time marker such as AM or PM based on the current user regional and language settingsAM, PM
<%loc_A/P%>Single-character time marker such as A or P based on the current user regional and language settingsA, P
<%loc_time%>Time based on the current user regional and language settings1:30:15 PM
<%loc_time24%>Time in 24-hour format without a time marker based on the current user regional and language settings13:30:15
<%loc_tsep%>Time separator based on the current user regional and language settings:

The longDateFormat field is mapped to the LongDateFormat property, which means that the following statements are equivalent:

oSchedule.Options = {longDateFormat: "<%mmmm%>/<%d%>"}
oSchedule.SetOptions({longDateFormat: "<%mmmm%>/<%d%>"})
oSchedule.LongDateFormat = "<%mmmm%>/<%d%>"
oSchedule.SetLongDateFormat("<%mmmm%>/<%d%>")
Type:
  • string
Example
null {null}, "&lt;%loc_ldate%&gt;"
"" {string}, nothing is displayed
"&lt;%loc_ldate%&gt;" {string}, displays the date in the long format using the current user regional and language settings
"&lt;%mm%&gt;/&lt;%dd%&gt;/&lt;%yyyy%&gt;" {string}, displays the date in mm/dd/yyyy format
longDateFormat

(static) longTimeFormat :string

The longTimeFormat field specifies how times are displayed in long form (time only, no date). The longTimeFormat field supports ex-HTLM tags (such as <b>, <i>, <fgcolor>, ...) and <%DATE%> tags. The KnownProperty(exEventDisplayLongMargins) property (equivalent to using the <%=%257%> tag in an event's label) shows the event's start and end margins in long format according to the longDateFormat and longTimeFormat fields. For example, if longTimeFormat uses '<%hh%>:<%nn%>:<%ss%> <%AM/PM%>' and an event runs from 5:00 PM to 6:00 PM, using <%=%257%> in the label will display 5:00:00 PM - 6:00:00 PM. The eventDisplayMarginsSep field indicates the separator character(s) between start and end date-times. By default, the longTimeFormat field is set to "<%hh%>:<%nn%>:<%ss%> <%AM/PM%>", which displays the time in hh:nn:ss AM/PM format.

The known identifiers within the <%DATE%> tag are:

Name Description Sample
(day-patterns)
<%d%>Day of the month using one or two numeric digits, depending on the value1 - 31
<%dd%>Day of the month using exactly two numeric digits01 - 31
<%d1%>Weekday using its first letterS - S
<%loc_d1%>Weekday as a single-letter abbreviation based on the current user settingsS - S
<%d2%>Weekday using its first two lettersSu - Sa
<%loc_d2%>Weekday as a two-letter abbreviation based on the current user settingsSu - Sa
<%d3%>Weekday using its first three lettersSun - Sat
<%ddd%>Weekday using its first three lettersSun - Sat
<%loc_d3%>Weekday as a three-letter abbreviation based on the current user regional and language settings; equivalent to <%loc_ddd%>Sun - Sat
<%loc_ddd%>Weekday as a three-letter abbreviation based on the current user regional and language settingsSun - Sat
<%dddd%>Full name of the weekdaySunday - Saturday
<%loc_dddd%>Full weekday name based on the current user regional and language settingsSunday - Saturday
<%w%>Numeric day of the week1 - 7
<%y%>Numeric day of the year1 - 366
(week-patterns)
<%ww%>Week of the year1 - 53
(month-patterns)
<%m%>Month of the year using one or two numeric digits, as needed1 - 12
<%mm%>Month of the year using exactly two numeric digits01 - 12
<%mr%>Month of the year using Roman numerals, as neededI - XII
<%m1%>Month using its first letterJ - D
<%loc_m1%>Month as a single-letter abbreviation based on the current user settingsJ - D
<%m2%>Month using its first two lettersJa - De
<%loc_m2%>Month as a two-letter abbreviation based on the current user settingsJa - De
<%m3%>Month using its first three lettersJan - Dec
<%mmm%>Month using its first three lettersJan - Dec
<%loc_m3%>Month as a three-letter abbreviation based on the current user regional and language settings; equivalent to <%loc_mmm%>Jan - Dec
<%loc_mmm%>Month as a three-letter abbreviation based on the current user regional and language settingsJan - Dec
<%mmmm%>Full name of the monthJanuary - December
<%loc_mmmm%>Full month name based on the current user regional and language settingsJanuary - December
(year-patterns)
<%q%>Date shown as the quarter of the year1 - 4
<%hy%>Date shown as the half of the year1 - 2
<%loc_y%>Year represented by the last digit only, based on the current regional settings0 - 9
<%yy%>Last two digits of the year01 - 99
<%loc_yy%>Year represented by the last two digits only, based on the current regional settings; a leading zero is added for single-digit years01 - 99
<%yyyy%>Full year using four digits0100 - 9999
<%loc_yyyy%>Year represented using four or five digits, depending on the calendar in use. Thai Buddhist and Korean calendars use five-digit years; the "yyyy" pattern displays five digits for these calendars and four digits for all other supported calendars. Calendars with single-digit or two-digit years, such as the Japanese Emperor era, are formatted differently: single-digit years include a leading zero (for example, "03"), two-digit years use two digits (for example, "13"), and no additional leading zeros are applied0100 - 9999
<%i%>Numeric value displayed instead of a date, representing the number of milliseconds elapsed since the Unix Epoch, January 1, 1970, 00:00:00 UTC1767085565940
(localized era-patterns)
<%loc_g%>Period/era based on the current user regional and language settingsA,B
<%loc_gg%>Period/era based on the current user regional and language settingsAD,BC
(localized date-patterns)
<%loc_sdate%>Date in short format based on the current user regional and language settings12/31/2000
<%loc_ldate%>Date in long format based on the current user regional and language settingsDecember 31, 2000
<%loc_dsep%>Date separator based on the current user regional and language settings/
(time-patterns)
<%h%>Hour in one or two digits, as needed0 - 23
<%hh%>Hour in two digits00 - 23
<%h12%>Hour in 12-hour format, in one or two digits0/12 - 11
<%hh12%>Hour in 12-hour format, in two digits00/12 - 11
<%n%>Minute in one or two digits, as needed0 - 59
<%nn%>Minute in two digits00 - 59
<%s%>Second in one or two digits, as needed0 - 59
<%ss%>Second in two digits00 - 59
<%AM/PM%>12-hour clock with uppercase "AM" or "PM" as appropriateAM, PM
(localized time-patterns)
<%loc_AM/PM%>Time marker such as AM or PM based on the current user regional and language settingsAM, PM
<%loc_A/P%>Single-character time marker such as A or P based on the current user regional and language settingsA, P
<%loc_time%>Time based on the current user regional and language settings1:30:15 PM
<%loc_time24%>Time in 24-hour format without a time marker based on the current user regional and language settings13:30:15
<%loc_tsep%>Time separator based on the current user regional and language settings:

The longTimeFormat field is mapped to the LongTimeFormat property, which means that the following statements are equivalent:

oSchedule.Options = {longTimeFormat: "<%loc_time24%>"}
oSchedule.SetOptions({longTimeFormat: "<%loc_time24%>"})
oSchedule.LongTimeFormat = "<%loc_time24%>"
oSchedule.SetLongTimeFormat("<%loc_time24%>")
Type:
  • string
Example
null {null}, "&lt;%hh%&gt;:&lt;%nn%&gt;:&lt;%ss%&gt; &lt;%AM/PM%&gt;"
"" {string}, nothing is displayed
"&lt;%loc_time24%&gt;" {string}, Indicates the time in 24 hours format without a time marker using the current user regional and language settings
"&lt;%hh%&gt;:&lt;%nn%&gt;:&lt;%ss%&gt;" {string}, displays the time in hh:nn:ss format (no time marker)
longTimeFormat

(static) markZones :object|Array.<MarkZoneOptions>

The markZones field defines the mark-zones within the control. The showMarkZone field specifies whether the mark-zones are displayed on the background (behind events), on the foreground, or not displayed at all. The mark-zones are special time zones that are highlighted within the control to indicate specific time intervals. For instance, you can define mark-zones to indicate non-working hours, lunch breaks, or any other significant time periods. You can use the MarkZones.Add method to add new mark-zones to the control. By default, the markZones field is set to null, which means that no mark-zone is defined within the control. The start and end fields of the MarkZoneOptions type must be defined to have a valid mark-zone.

The markZones field can be any of the following:

  • {string}, defines a single mark-zone with specified caption/identifier
  • {array(any)}, defines multiple mark-zones, with specified caption/identifier/options, as an array of [caption] or [{MarkZoneOptions}] type
  • {object}, defines multiple mark-zones, where each property of the object defines a mark-zone with its options, of MarkZoneOptions type

The markZones field is mapped to the MarkZones property, which means that the following statements are equivalent:

oSchedule.Options = {markZones: [{start: "#1/1/2022 08:00#", end: "#1/1/2022 08:15#"}]}
oSchedule.SetOptions({markZones: [{start: "#1/1/2022 08:00#", end: "#1/1/2022 08:15#"}]})
oSchedule.MarkZones = [{start: "#1/1/2022 08:00#", end: "#1/1/2022 08:15#"}]
oSchedule.SetMarkZones([{start: "#1/1/2022 08:00#", end: "#1/1/2022 08:15#"}])
Type:
Example
The following sample defines two mark-zones within the control, as object:

 {
   "inventory":
   {
     start: "#1/1/2022 08:00#",
     end: "#1/1/2022 09:00#",
     shape: "rgba(0,0,0,0.25)",
   },
   "break":
   {
     start: "#1/1/2022 12:15#",
     end: "#1/1/2022 13:15#",
   }
 }

The following sample defines two mark-zones within the control, as array:

 [
   {
     caption: "inventory",
     start: "#1/1/2022 08:00#",
     end: "#1/1/2022 09:00#",
     shape: "rgba(0,0,0,0.25)",
   },
   {
     caption: "break",
     start: "#1/1/2022 12:15#",
     end: "#1/1/2022 13:15#",
   }
 ]
markZones

(static) misc :MiscellaneousOptions

The misc field Holds miscellaneous configuration options for the control, as an object of MiscellaneousOptions type, including layout sizes, event spacing, drag-and-drop behavior, and text formatting for events, groups, and mark-zones. It allows fine-tuning of how the calendar or schedule view displays and interacts with events.

It is important to note that changing a field of the MiscellaneousOptions object does not automatically update the control. For example, oSchedule.Misc.padSelectEvent = 6 does not apply the change. Instead, you must assign the Misc property again, such as oSchedule.Misc = {padSelectEvent: 6}, so the control updates and applies the new value.

The misc field is mapped to the Misc property, which means that the following statements are equivalent:

oSchedule.Options = {misc: {padSelectEvent: 6}}
oSchedule.SetOptions({misc: {padSelectEvent: 6}})
oSchedule.Misc = {padSelectEvent: 6}
oSchedule.SetMisc({padSelectEvent: 6})
Type:
Example
{padSelectEvent: 6} {object}, sets the padding between the event's border and its content to 6 pixels
{dragDummyAlpha: 0.5} {object}, specifies the transparency to display the dummy-event being dragged
{dragDummyAlpha: 0.25, padSelectEvent: 4} {object}, sets the opacity of the drag dummy to 25% and adds a padding of 4 pixels around the selected event
misc

(static) onResizeControl :exontrol.Schedule.OnResizeControlEnum

The onResizeControl field defines which panel should be resized when the entire control is resized. Additionally, it can be used to disable or hide the splitter, swap the content of panels, ensure the calendar fits its panel, or enable/disable the calendar panel when the cursor leaves the panels. By default, the onResizeControl field exResizePanelRight | exCalendarFit, which means that the right panel (the schedule view) is resized once the entire control gets resized, and the calendar fits to its panel.

The exontrol.Schedule.OnResizeControlEnum type defines the following flags:

  • exResizePanelLeft(0), specifies that the left panel of the control is resized, once the entire-control gets resized
  • exResizePanelRight(1), specifies that the right panel of the control is resized, once the entire-control gets resized
  • exDisableSplitter(128), disables the splitter, so the user can not resize the panels using the control's vertical split bar
  • exHideSplitter(256), hides the splitter, so a single panel is visible at runtime (calendar or schedule view)
  • exChangePanels(512), exchanges the content of the panels (the calendar panel is aligned to the right)
  • exCalendarFit(1024), ensures that the calendar fits to the panel that hosts it
  • exCalendarAutoHide(2048), turns on or off the calendar panel when the cursor leaves the panels

The onResizeControl field is mapped to the OnResizeControl property, which means that the following statements are equivalent:

oSchedule.Options = {onResizeControl: 128}
oSchedule.SetOptions({onResizeControl: 128})
oSchedule.OnResizeControl = 128
oSchedule.SetOnResizeControl(128)
Type:
  • exontrol.Schedule.OnResizeControlEnum
Example
128 or exontrol.Schedule.OnResizeControlEnum.exDisableSplitter {number}, disables the splitter, so the user can not resize the panels using the control's vertical split bar
768 or exontrol.Schedule.OnResizeControlEnum.exChangePanels | exontrol.Schedule.OnResizeControlEnum.exHideSplitter {number}, shows the schedule view only (hides the calendar panel)
onResizeControl

(static) onSelectDate :exontrol.Schedule.OnSelectDateEnum

The onSelectDate field specifies the action that the control does once the user selects new dates in the calendar panel. By default, the onSelectDate field is set to exFitSelToView, which means that the control changes the day's size and scrolls the view so the calendar's selection fits the schedule view. If you set the onSelectDate field to exNoViewChange, no change/scroll occurs within the view once the user selects new dates in the calendar panel. If you set the onSelectDate field to exEnsureVisibleDate, the control scrolls the view to ensure that clicked date fits the schedule view.

The onSelectDate field supports the following values:

  • exFitSelToView (-1), changes the day's size and scrolls the view so the calendar's selection fits the schedule view (the control adjusts the dayViewWidth and dayViewHeight fields to fit the calendar's selection within the schedule view, and scrolls the view to ensure that the calendar's selected date is visible within the schedule view)
  • exNoViewChange (0), no change/scroll occurs within the view
  • exEnsureVisibleDate (1), scrolls the view to ensure that clicked date fits the schedule view

The onSelectDate field is mapped to the OnSelectDate property, which means that the following statements are equivalent:

oSchedule.Options = {onSelectDate: exontrol.Schedule.OnSelectDateEnum.exFitSelToView}
oSchedule.SetOptions({onSelectDate: exontrol.Schedule.OnSelectDateEnum.exFitSelToView})
oSchedule.OnSelectDate = exontrol.Schedule.OnSelectDateEnum.exFitSelToView
oSchedule.SetOnSelectDate(exontrol.Schedule.OnSelectDateEnum.exFitSelToView)
Type:
  • exontrol.Schedule.OnSelectDateEnum
Example
null {null}, equivalent of -1 or exontrol.Schedule.OnSelectDateEnum.exFitSelToView
0 or exontrol.Schedule.OnSelectDateEnum.exNoViewChange {number}, no scroll / change occurs whitin the schedule view once the calendar's selection is changed
onSelectDate

(static) pad :number|Array.<number>|string

The pad field can be used to increase the event's size by adding extra space around its content, while the padSelectEvent field can be used to create a gap between the event and its selection border, which can enhance the visual distinction of selected events. By default, the pad field is set to [2,2], which means that the event's width is increased by 4 pixels (2 pixels on each side) and the event's height is increased by 4 pixels (2 pixels on top and 2 pixels on bottom).

The pad field can be of one of the following types:

  • {number} a numeric value, to pad horizontal and vertical size with the same value
  • {(string|number[])} a "x,y" or [x,y] type to specify the padding on horizontal and vertical side

The pad field is mapped to the Pad property, which means that the following statements are equivalent:

oSchedule.Options = {pad: "8,4"}
oSchedule.SetOptions({pad: "8,4"})
oSchedule.Pad = "8,4"
oSchedule.SetPad("8,4")
Type:
  • number | Array.<number> | string
Example
null {null}, indicates that the default padding value of [4,4] is applied
0 {number}, indicates no padding
"8,4" {string}, increases the event's width with 2 * 8-pixels and event's height with 2 * 4-pixels
[8,4] {array}, increases the event's width with 2 * 8-pixels and event's height with 2 * 4-pixels
pad

(static) paneMinWidthLeft :number

The paneMinWidthLeft field defines the minimum size(width) of the left panel. The paneWidthLeft field defines the size(width) of the left panel. The paneMinWidthRight field defines the minimum size(width) of the right panel. The onResizeControl field defines which panel should be resized when the entire control is resized. Setting the paneMinWidthLeft or paneMinWidthRight to a specific value (e.g., 196) will set the minimum size of the corresponding panel to that value in pixels, while setting it to null will ignore this option and allow the panel to be resized without any minimum width constraint.

The paneMinWidthLeft field is mapped to the PaneMinWidthLeft property, which means that the following statements are equivalent:

oSchedule.Options = {paneMinWidthLeft: 196}
oSchedule.SetOptions({paneMinWidthLeft: 196})
oSchedule.PaneMinWidthLeft = 196
oSchedule.SetPaneMinWidthLeft(196)
Type:
  • number
Example
null {null}, ignored
196 {number}, the minimum size of the left-panel is set to 196
paneMinWidthLeft

(static) paneMinWidthRight :number

The paneMinWidthRight field defines the minimum size(width) of the right panel. The paneWidthRight field defines the size(width) of the right panel. The paneMinWidthLeft field defines the minimum size(width) of the left panel. The onResizeControl field defines which panel should be resized when the entire control is resized. Setting the paneMinWidthLeft or paneMinWidthRight to a specific value (e.g., 196) will set the minimum size of the corresponding panel to that value in pixels, while setting it to null will ignore this option and allow the panel to be resized without any minimum width constraint.

The paneMinWidthRight field is mapped to the PaneMinWidthRight property, which means that the following statements are equivalent:

oSchedule.Options = {paneMinWidthRight: 196}
oSchedule.SetOptions({paneMinWidthRight: 196})
oSchedule.PaneMinWidthRight = 196
oSchedule.SetPaneMinWidthRight(196)
Type:
  • number
Example
null {null}, ignored
196 {number}, the minimum size of the right-panel is set to 196
paneMinWidthRight

(static) paneWidthLeft :number

The paneWidthLeft field defines the size(width) of the left panel. The paneMinWidthLeft field defines the minimum size(width) of the left panel. The paneWidthRight field defines the size(width) of the right panel. The onResizeControl field defines which panel should be resized when the entire control is resized. Setting the paneWidthLeft or paneWidthRight to 0 will hide the corresponding panel, while setting it to a specific value (e.g., 196) will set the size of the corresponding panel to that value in pixels.

The paneWidthLeft field is mapped to the PaneWidthLeft property, which means that the following statements are equivalent:

oSchedule.Options = {paneWidthLeft: 196}
oSchedule.SetOptions({paneWidthLeft: 196})
oSchedule.PaneWidthLeft = 196
oSchedule.SetPaneWidthLeft(196)
Type:
  • number
Example
0 {number}, hides the left-panel (has no effect if onResizeControl field does not include exCalendarFit flag)
196 {number}, the size of the left-panel is set to 196
paneWidthLeft

(static) paneWidthRight :number

The paneWidthRight field defines the size(width) of the right panel. The paneMinWidthRight field defines the minimum size(width) of the right panel. The paneWidthLeft field defines the size(width) of the left panel. The onResizeControl field defines which panel should be resized when the entire control is resized. Setting the paneWidthLeft or paneWidthRight to 0 will hide the corresponding panel, while setting it to a specific value (e.g., 196) will set the size of the corresponding panel to that value in pixels.

The paneWidthRight field is mapped to the PaneWidthRight property, which means that the following statements are equivalent:

oSchedule.Options = {paneWidthRight: 196}
oSchedule.SetOptions({paneWidthRight: 196})
oSchedule.PaneWidthRight = 196
oSchedule.SetPaneWidthRight(196)
Type:
  • number
Example
0 {number}, hides the right-panel
196 {number}, the size of the right-panel is set to 196
paneWidthRight

(static) readOnly :boolean

The readOnly field indicates whether the control is read-only. The locked field indicates whether the control is locked(protected) or unlocked. When the control is read-only, users cannot create, resize, or move any event within the control, but they can still scroll, select, and interact with the existing events. In contrast, when the control is locked, users cannot scroll, select, or interact with any event within the control. Therefore, read-only mode prevents modifications to the events while still allowing interaction with them, whereas locked mode completely prevents user interaction with the control.

The readOnly field is mapped to the ReadOnly property, which means that the following statements are equivalent:

oSchedule.Options = {readOnly: true}
oSchedule.SetOptions({readOnly: true})
oSchedule.ReadOnly = true
oSchedule.SetReadOnly(true)
Type:
  • boolean
Example
false {boolean}, the user can edit or drag any event
true {boolean}, the user can not edit or drag the events
readOnly

(static) scrollBars :exontrol.ScrollBarsEnum

The scrollBars field determines whether the control has horizontal and/or vertical scroll bars. The scroll bars are shown when the control's content exceeds the visible area of the control. The scrollPos field defines the horizontal and vertical scroll-position of the view. By default, the scrollBars field is set to exBoth, so both horizontal and vertical scroll bars are shown when the control's content exceeds the visible area of the control.

The exontrol.ScrollBarsEnum type defines the following flags:

  • exNoScroll (0), specifies that no scroll bars are shown (scroll is not allowed)
  • exHorizontal (1), specifies that only horizontal scroll bars is shown
  • exVertical (2), specifies that only vertical scroll bars is shown
  • exBoth (3), specifies that both horizontal and vertical scroll bars are shown
  • exDisableNoHorizontal (5), specifies that the horizontal scroll bar is always shown, it is disabled if it is unnecessary
  • exDisableNoVertical (10), specifies that the vertical scroll bar is always shown, it is disabled if it is unnecessary
  • exDisableBoth (15), specifies that both horizontal and vertical scroll bars are always shown, disabled if they are unnecessary
  • exHScrollOnThumbRelease (0x100), specifies that the control's content is horizontally scrolled as soon as the user releases the thumb of the horizontal scroll bar (use this option to specify that the user scrolls the control's content when the thumb of the scroll box is released)
  • exVScrollOnThumbRelease (0x200), specifies that the control's content is vertically scrolled as soon as the user releases the thumb of the vertical scroll bar (use this option to specify that the user scrolls the control's content when the thumb of the scroll box is released)
  • exScrollOnThumbRelease (0x300), specifies that the control's content is scrolled as soon as the user releases the thumb of the horizontal scroll bar (use this option to specify that the user scrolls the control's content when the thumb of the scroll box is released)
  • exHScrollEmptySpace (0x400), allows empty space, when the control's content is horizontally scrolled to the end
  • exVScrollEmptySpace (0x800), allows empty space, when the control's content is vertically scrolled to the end
  • exScrollEmptySpace (0xC00), allows empty space, when the control's content is scrolled to the end
  • exExtendSBS (0x3000), specifies that the control's scroll-bars are visible only when cursor hovers the window. Also, the control's client area is extended on the scroll bars portion
  • exMinSBS (0xC000), specifies that the control's scroll-bars are shown as minimized
  • exHideSBS (0x10000), specifies that no scroll bars are shown (scroll is allowed)

The scrollBars field is mapped to the control's ScrollBars property, so the following statements are equivalent:

oSchedule.Options = {scrollBars: exontrol.ScrollBarsEnum.exDisableBoth}
oSchedule.SetOptions({scrollBars: exontrol.ScrollBarsEnum.exDisableBoth})
oSchedule.ScrollBars = exontrol.ScrollBarsEnum.exDisableBoth
oSchedule.SetScrollBars(exontrol.ScrollBarsEnum.exDisableBoth)
Type:
  • exontrol.ScrollBarsEnum
Example
0 or exontrol.ScrollBarsEnum.exNoScroll {number}, removes the control's scroll bars, so scroll is not allowed
15 or exontrol.ScrollBarsEnum.exDisableBoth {number}, the control always displays the scroll bars, and they are active only if scroll is possible
12291 or exontrol.ScrollBarsEnum.exBoth | exontrol.ScrollBarsEnum.exExtendSBS {number}, the control shows the scroll bars only if the cursor hovers the control, and the control scroll bars are hidden as soon as the cursor leaves the control
scrollBars

(static) scrollPos :object

The scrollPos field defines the horizontal and vertical scroll-position of the view. The scrollPos field is an object of {x,y} type that specifies the view's horizontal and vertical scroll-position. The x property indicates the horizontal scroll-position, while the y property indicates the vertical scroll-position. Adjusting the scrollPos allows you to control which portion of the content is visible within the view, enabling users to navigate through the schedule efficiently. For example, setting scrollPos to {x: 100} will scroll the view horizontally to position 100, while setting it to {x: 100, y: 50} will scroll horizontally to position 100 and vertically to position 50. The scrollBars field specifies whether horizontal and vertical scroll bars are displayed, and the onscroll event is fired whenever the user scrolls the control's content.

It specifies an object of {x,y} type that defines the view's horizontal and vertical scroll-position as explained:

x {number}, indicates the horizontal scroll-position
y {number}, indicates the vertical scroll-position

The scrollPos field is mapped to the ScrollPos property, which means that the following statements are equivalent:

oSchedule.Options = {scrollPos: {x: 100, y: 50}}
oSchedule.SetOptions({scrollPos: {x: 100, y: 50}})
oSchedule.ScrollPos = {x: 100, y: 50}
oSchedule.SetScrollPos({x: 100, y: 50})
Type:
  • object
Example
{x: 100} {object}, scrolls horizontally to position 100
{x: 100, y: 50} {object}, scrolls horizontally to position 100, and vertically to 50
scrollPos

(static) selectEventStyle :Schedule.SelectEventStyleEnum

The selectEventStyle field specifies how the selected-event gets displayed. The "select" shape (shapes field) specifies the shape and color used to display the selected event. The singleSel field defines whether the control supports single, multiple, toggle selection. By default, the selectEventStyle field is set to 0, which means that the "select" shape is combined with the event's shape.

The selectEventStyle field supports the following values:

  • 0 {number}, the "select" shape is combined with the event's shape
  • 1 {number}, the "select" shape is displayed on the event's background. The padSelectEvent field specifies the space between the event's content and its selection border.
  • 2 {number}, the "select" shape is displayed on the event's background, but it is shown using the event's primitive (rectangle, round, oval...). The padSelectEvent field specifies the space between the event's content and its selection border.

The selectEventStyle field is mapped to the SelectEventStyle property, which means that the following statements are equivalent:

oSchedule.Options = {selectEventStyle: 1}
oSchedule.SetOptions({selectEventStyle: 1})
oSchedule.SelectEventStyle = 1
oSchedule.SetSelectEventStyle(1)
Type:
Example
null {null}, equivalent of 0 so the "select" shape is combined with the event's shape
1 {number}, the event's shape and color is not altered so the "select" shape is displayed on the event's background
selectEventStyle

(static) selection :any

The selection field defines the control's selection. The singleSel field defines whether the control supports single, multiple, toggle selection. The selectEventStyle field specifies how the selected-event gets displayed. The selection field allows you to specify which events are currently selected within the control. The selection can be defined using different types of values, such as event indices, event keys, event references, or even an array of these types. The Event.Selected property indicates whether the event is selected or not. The Event.Selectable property indicates whether the event can be selected or not. The onselchange event notifies that the control's selection has been changed (events). By default, the selection field is set to null, which means that no events are selected within the control.

The selection field can be any of the following:

  • {null}, clears the entire selection (unselect all)
  • {number}, selects an event giving index within the events collection
  • {string}, selects an event giving its identifier/key
  • {Event}, selects an event giving its reference
  • {Event}, selects all events within the control
  • {array}, specifies an array of [type] type, where type could be any number, string or Event type.

The selection field is mapped to the Selection property, which means that the following statements are equivalent:

oSchedule.Options = {selection: 0}
oSchedule.SetOptions({selection: 0})
oSchedule.Selection = 0
oSchedule.SetSelection(0)
Type:
  • any
Since:
  • 1.9
Example
null {null}, clears the entire selection
0 {number}, selects the event with the index 0
[0,"key"] {number}, selects the event with the index 0 and the event with the identifier/key "key"
selection

(static) shapes :string

The shapes field defines the shapes each part of the control can display. The shapes field customizes the control's visual appearance. The shapes field allows you to apply different shapes and colors to parts of the control, enhancing the overall look and feel of the control. For example, the string "green(event),lime(calendar-uiHighlight)" applies a green color to events and a lime color to dates of the calendar that contains events.

The format of the property is:

"shape(part),shape(part),..."
where:
  • "shape", defines the shape to apply on the UI part as one of the following:

    ◦ any of 140 color names any browser supports (such as red, blue, green, ...)
    ◦ hexadecimal colors, is specified with: #RRGGBB, where the RR (red), GG (green) and BB (blue) hexadecimal integers specify the components of the color. All values must be between 00 and FF (such as #0000ff which defines a blue background)
    ◦ hexadecimal colors with transparency, is specified with: #RRGGBBAA, where AA (alpha) value must be between 00 and FF (such as #0000ff80 which defines a semi-transparent blue background)
    ◦ RGB colors, is specified with the RGB(red, green, blue) function. Each parameter (red, green, and blue) defines the intensity of the color and can be an integer between 0 and 255( such as rgb(0,0,255) that defines a blue background)
    ◦ RGBA colors, are an extension of RGB color values with an alpha channel as RGBA(red, green, blue, alpha) function, where the alpha parameter is a number between 0.0 (fully transparent) and 1.0 (fully opaque) ( such as rgba(0,0,255,0.5) which defines a semi-transparent blue background)
    ◦ HSL colors, is specified with the HSL(hue, saturation, lightness) function, where hue is a degree on the color wheel (from 0 to 360) - 0 (or 360) is red, 120 is green, 240 is blue. saturation is a percentage value; 0% means a shade of gray and 100% is the full color. lightness is also a percentage; 0% is black, 100% is white. HSL stands for hue, saturation, and lightness - and represents a cylindrical-coordinate representation of colors (such as hsl(240, 100%, 50%) that defines a blue background)
    ◦ HSLA colors, are an extension of HSL color values with an alpha channel - which specifies the opacity of the object as HSLA(hue, saturation, lightness, alpha) function, where alpha parameter is a number between 0.0 (fully transparent) and 1.0 (fully opaque) (such as hsla(240, 100%, 50%,0.5) that defines a semi-transparent blue background)
    ◦ a JSON representation of the shape object to apply (while it starts with { character, such as '{"normal": {"primitive": "RoundRect","fillColor":"black","tfi": {"fgColor": "white"}}}')
    ◦ specifies the name of the field within the exontrol.Shapes.Schedule object (while it starts with a lowercase letter, such as shevent which refers to exontrol.Shapes.Schedule.shevent shape)
    ◦ specifies the name of the field within the exontrol.Shapes object (while it starts with an uppercase letter, such as Button which refers to exontrol.Shapes.Button shape)

  • "part", defines the name of the part the shape is applied on (as defined below)
The shapes property supports any of the following parts:
Part Description
"calendar-uiHighlight"defines the visual-appearance to highlight the date that contains events (similar with uiHighlight but applied to calendar-panel only) (The showHighlightEvent option specifies whether the control highlights the dates that contain events)
"date-all-day-header"defines the visual-appearance for the date's all-day-header (schedule view only)
"date-all-day-scroll-button"defines the visual-appearance for scroll-butttons to display within the all-day header
"date-frame"defines the visual-appearance for the frame around each date (schedule view only)
"date-frame-select"defines the visual-appearance for the frame around each selected date (schedule view only)
"date-grouping-header"defines the visual-appearance for the date's grouping-header (schedule view only)
"date-header"defines the visual-appearance for the date's header (schedule view only)
"dateAlt"defines the visual-appearance for alternate-date (schedule view only)
"dateAlt-header"defines the visual-appearance for the alternate-date's header (schedule view only)
"date-timeScale"defines the visual-appearance for the date's time-scale part (schedule view only)
"event"defines the visual-appearance for all events within the control. The Event.Shape property specifies the individual shape of the event.
"event-drag"defines additional visual-appearance to apply on the event being dragged
"frameFit"defines the visual-appearance to display the frame while fitting objects into the control's client area by drag
"frameSel"defines the visual appearance to display a frame while selecting objects by drag
"grouping-button"defines the visual-appearance for the header's grouping-button (schedule view only)
"mark-zone"defines the visual-appearance for all mark-zones within the control
"select"defines the visual-appearance of selected-event (the SelectEventStyle property specifies how the selected-event gets displayed)
"timeScale"defines the visual appearance for control's time-scale. The TimeScale.Shape property defines the custom shape for the time-scale header.
"uiHighlight"defines the visual-appearance to highlight the date that contains events (The showHighlightEvent option specifies whether the control highlights the dates that contain events)

The shapes field is mapped to the Shapes property, which means that the following statements are equivalent:

oSchedule.Options = {shapes: "red(event),blue(date-header)"}
oSchedule.SetOptions({shapes: "red(event),blue(date-header)"})
oSchedule.Shapes = "red(event),blue(date-header)"
oSchedule.SetShapes("red(event),blue(date-header)")
Type:
  • string
Example
null {null}, specifies the default visual appearance
"" {string}, no shape (no visual appearance is applied to any part of the control)
"red(eventAlt)", "#FF0000(eventAlt)", "rgb(255,0,0)(eventAlt)", "rgba(255,0,0,1)(eventAlt)" {string}, shows alternate-events in red
'{"hover":{"fillColor":"black","tfi":{"fgColor":"white"}}}(event)' {string}, shows the event in white on a black-background, while the cursor hovers it
"xxx(d),yyy(d,m),zzz(y)"  {string}, specifies that the exontrol.Shapes.Schedule.xxx combined with exontrol.Shapes.Schedule.yyy object defines the visual appearance of "d" part of the control, exontrol.Shapes.Schedule.yyy object defines the visual appearance of "m" part of the control and exontrol.Shapes.Schedule.zzz object defines the visual appearance of "y" part of the control
shapes

(static) shortDateFormat :string

The shortDateFormat field specifies how dates are displayed in short form (date only, no time). The shortDateFormat field supports ex-HTLM tags (such as <b>, <i>, <fgcolor>, ...) and <%DATE%> tags. The KnownProperty(exEventDisplayShortMargins) property (equivalent to using the <%=%256%> tag in an event's label) shows the event's start and end margins in short format according to the shortDateFormat and shortTimeFormat fields. For example, if shortDateFormat uses '<%mm%>/<%dd%>' and an event runs from April 3 to April 5, using <%=%256%> in the label will display 04/03 - 04/05. The eventDisplayMarginsSep field indicates the separator character(s) between start and end date-times. By default, the shortDateFormat field is set to "<%loc_sdate%>", which means that the short date format is defined by the current user settings.

The known identifiers within the <%DATE%> tag are:

Name Description Sample
(day-patterns)
<%d%>Day of the month using one or two numeric digits, depending on the value1 - 31
<%dd%>Day of the month using exactly two numeric digits01 - 31
<%d1%>Weekday using its first letterS - S
<%loc_d1%>Weekday as a single-letter abbreviation based on the current user settingsS - S
<%d2%>Weekday using its first two lettersSu - Sa
<%loc_d2%>Weekday as a two-letter abbreviation based on the current user settingsSu - Sa
<%d3%>Weekday using its first three lettersSun - Sat
<%ddd%>Weekday using its first three lettersSun - Sat
<%loc_d3%>Weekday as a three-letter abbreviation based on the current user regional and language settings; equivalent to <%loc_ddd%>Sun - Sat
<%loc_ddd%>Weekday as a three-letter abbreviation based on the current user regional and language settingsSun - Sat
<%dddd%>Full name of the weekdaySunday - Saturday
<%loc_dddd%>Full weekday name based on the current user regional and language settingsSunday - Saturday
<%w%>Numeric day of the week1 - 7
<%y%>Numeric day of the year1 - 366
(week-patterns)
<%ww%>Week of the year1 - 53
(month-patterns)
<%m%>Month of the year using one or two numeric digits, as needed1 - 12
<%mm%>Month of the year using exactly two numeric digits01 - 12
<%mr%>Month of the year using Roman numerals, as neededI - XII
<%m1%>Month using its first letterJ - D
<%loc_m1%>Month as a single-letter abbreviation based on the current user settingsJ - D
<%m2%>Month using its first two lettersJa - De
<%loc_m2%>Month as a two-letter abbreviation based on the current user settingsJa - De
<%m3%>Month using its first three lettersJan - Dec
<%mmm%>Month using its first three lettersJan - Dec
<%loc_m3%>Month as a three-letter abbreviation based on the current user regional and language settings; equivalent to <%loc_mmm%>Jan - Dec
<%loc_mmm%>Month as a three-letter abbreviation based on the current user regional and language settingsJan - Dec
<%mmmm%>Full name of the monthJanuary - December
<%loc_mmmm%>Full month name based on the current user regional and language settingsJanuary - December
(year-patterns)
<%q%>Date shown as the quarter of the year1 - 4
<%hy%>Date shown as the half of the year1 - 2
<%loc_y%>Year represented by the last digit only, based on the current regional settings0 - 9
<%yy%>Last two digits of the year01 - 99
<%loc_yy%>Year represented by the last two digits only, based on the current regional settings; a leading zero is added for single-digit years01 - 99
<%yyyy%>Full year using four digits0100 - 9999
<%loc_yyyy%>Year represented using four or five digits, depending on the calendar in use. Thai Buddhist and Korean calendars use five-digit years; the "yyyy" pattern displays five digits for these calendars and four digits for all other supported calendars. Calendars with single-digit or two-digit years, such as the Japanese Emperor era, are formatted differently: single-digit years include a leading zero (for example, "03"), two-digit years use two digits (for example, "13"), and no additional leading zeros are applied0100 - 9999
<%i%>Numeric value displayed instead of a date, representing the number of milliseconds elapsed since the Unix Epoch, January 1, 1970, 00:00:00 UTC1767085565940
(localized era-patterns)
<%loc_g%>Period/era based on the current user regional and language settingsA,B
<%loc_gg%>Period/era based on the current user regional and language settingsAD,BC
(localized date-patterns)
<%loc_sdate%>Date in short format based on the current user regional and language settings12/31/2000
<%loc_ldate%>Date in long format based on the current user regional and language settingsDecember 31, 2000
<%loc_dsep%>Date separator based on the current user regional and language settings/
(time-patterns)
<%h%>Hour in one or two digits, as needed0 - 23
<%hh%>Hour in two digits00 - 23
<%h12%>Hour in 12-hour format, in one or two digits0/12 - 11
<%hh12%>Hour in 12-hour format, in two digits00/12 - 11
<%n%>Minute in one or two digits, as needed0 - 59
<%nn%>Minute in two digits00 - 59
<%s%>Second in one or two digits, as needed0 - 59
<%ss%>Second in two digits00 - 59
<%AM/PM%>12-hour clock with uppercase "AM" or "PM" as appropriateAM, PM
(localized time-patterns)
<%loc_AM/PM%>Time marker such as AM or PM based on the current user regional and language settingsAM, PM
<%loc_A/P%>Single-character time marker such as A or P based on the current user regional and language settingsA, P
<%loc_time%>Time based on the current user regional and language settings1:30:15 PM
<%loc_time24%>Time in 24-hour format without a time marker based on the current user regional and language settings13:30:15
<%loc_tsep%>Time separator based on the current user regional and language settings:

The shortDateFormat field is mapped to the ShortDateFormat property, which means that the following statements are equivalent:

oSchedule.Options = {shortDateFormat: "<%loc_sdate%>"}
oSchedule.SetOptions({shortDateFormat: "<%loc_sdate%>"})
oSchedule.ShortDateFormat = "<%loc_sdate%>"
oSchedule.SetShortDateFormat("<%loc_sdate%>")
Type:
  • string
Example
null {null}, "&lt;%loc_sdate%&gt;"
"" {string}, nothing is displayed
"&lt;%loc_sdate%&gt;" {string}, displays the date in the short format using the current user regional and language settings
"&lt;%mm%&gt;/&lt;%dd%&gt;/&lt;%yyyy%&gt;" {string}, displays the date in mm/dd/yyyy format
shortDateFormat

(static) shortTimeFormat :string

The shortTimeFormat field specifies how time values are displayed in short form (time only, no date). The shortTimeFormat field supports ex-HTLM tags (such as <b>, <i>, <fgcolor>, ...) and <%DATE%> tags. The KnownProperty(exEventDisplayShortMargins) property (equivalent to using the <%=%256%> tag in an event's label) shows the event's start and end margins in short format according to the shortDateFormat and shortTimeFormat fields. For example, if shortTimeFormat uses '<%hh%>:<%nn%>' and an event runs from 9:05 to 17:30, using <%=%256%> in the label will display 09:05 - 17:30. The eventDisplayMarginsSep field indicates the separator character(s) between start and end date-times. By default, the shortTimeFormat field is set to "<%h%>:<%nn%> <%AM/PM%>", which means that the short time format is defined by the current user settings.

The known identifiers within the <%DATE%> tag are:

Name Description Sample
(day-patterns)
<%d%>Day of the month using one or two numeric digits, depending on the value1 - 31
<%dd%>Day of the month using exactly two numeric digits01 - 31
<%d1%>Weekday using its first letterS - S
<%loc_d1%>Weekday as a single-letter abbreviation based on the current user settingsS - S
<%d2%>Weekday using its first two lettersSu - Sa
<%loc_d2%>Weekday as a two-letter abbreviation based on the current user settingsSu - Sa
<%d3%>Weekday using its first three lettersSun - Sat
<%ddd%>Weekday using its first three lettersSun - Sat
<%loc_d3%>Weekday as a three-letter abbreviation based on the current user regional and language settings; equivalent to <%loc_ddd%>Sun - Sat
<%loc_ddd%>Weekday as a three-letter abbreviation based on the current user regional and language settingsSun - Sat
<%dddd%>Full name of the weekdaySunday - Saturday
<%loc_dddd%>Full weekday name based on the current user regional and language settingsSunday - Saturday
<%w%>Numeric day of the week1 - 7
<%y%>Numeric day of the year1 - 366
(week-patterns)
<%ww%>Week of the year1 - 53
(month-patterns)
<%m%>Month of the year using one or two numeric digits, as needed1 - 12
<%mm%>Month of the year using exactly two numeric digits01 - 12
<%mr%>Month of the year using Roman numerals, as neededI - XII
<%m1%>Month using its first letterJ - D
<%loc_m1%>Month as a single-letter abbreviation based on the current user settingsJ - D
<%m2%>Month using its first two lettersJa - De
<%loc_m2%>Month as a two-letter abbreviation based on the current user settingsJa - De
<%m3%>Month using its first three lettersJan - Dec
<%mmm%>Month using its first three lettersJan - Dec
<%loc_m3%>Month as a three-letter abbreviation based on the current user regional and language settings; equivalent to <%loc_mmm%>Jan - Dec
<%loc_mmm%>Month as a three-letter abbreviation based on the current user regional and language settingsJan - Dec
<%mmmm%>Full name of the monthJanuary - December
<%loc_mmmm%>Full month name based on the current user regional and language settingsJanuary - December
(year-patterns)
<%q%>Date shown as the quarter of the year1 - 4
<%hy%>Date shown as the half of the year1 - 2
<%loc_y%>Year represented by the last digit only, based on the current regional settings0 - 9
<%yy%>Last two digits of the year01 - 99
<%loc_yy%>Year represented by the last two digits only, based on the current regional settings; a leading zero is added for single-digit years01 - 99
<%yyyy%>Full year using four digits0100 - 9999
<%loc_yyyy%>Year represented using four or five digits, depending on the calendar in use. Thai Buddhist and Korean calendars use five-digit years; the "yyyy" pattern displays five digits for these calendars and four digits for all other supported calendars. Calendars with single-digit or two-digit years, such as the Japanese Emperor era, are formatted differently: single-digit years include a leading zero (for example, "03"), two-digit years use two digits (for example, "13"), and no additional leading zeros are applied0100 - 9999
<%i%>Numeric value displayed instead of a date, representing the number of milliseconds elapsed since the Unix Epoch, January 1, 1970, 00:00:00 UTC1767085565940
(localized era-patterns)
<%loc_g%>Period/era based on the current user regional and language settingsA,B
<%loc_gg%>Period/era based on the current user regional and language settingsAD,BC
(localized date-patterns)
<%loc_sdate%>Date in short format based on the current user regional and language settings12/31/2000
<%loc_ldate%>Date in long format based on the current user regional and language settingsDecember 31, 2000
<%loc_dsep%>Date separator based on the current user regional and language settings/
(time-patterns)
<%h%>Hour in one or two digits, as needed0 - 23
<%hh%>Hour in two digits00 - 23
<%h12%>Hour in 12-hour format, in one or two digits0/12 - 11
<%hh12%>Hour in 12-hour format, in two digits00/12 - 11
<%n%>Minute in one or two digits, as needed0 - 59
<%nn%>Minute in two digits00 - 59
<%s%>Second in one or two digits, as needed0 - 59
<%ss%>Second in two digits00 - 59
<%AM/PM%>12-hour clock with uppercase "AM" or "PM" as appropriateAM, PM
(localized time-patterns)
<%loc_AM/PM%>Time marker such as AM or PM based on the current user regional and language settingsAM, PM
<%loc_A/P%>Single-character time marker such as A or P based on the current user regional and language settingsA, P
<%loc_time%>Time based on the current user regional and language settings1:30:15 PM
<%loc_time24%>Time in 24-hour format without a time marker based on the current user regional and language settings13:30:15
<%loc_tsep%>Time separator based on the current user regional and language settings:

The shortTimeFormat field is mapped to the ShortTimeFormat property, which means that the following statements are equivalent:

oSchedule.Options = {shortTimeFormat: "<%hh%>:<%nn%>"}
oSchedule.SetOptions({shortTimeFormat: "<%hh%>:<%nn%>"})
oSchedule.ShortTimeFormat = "<%hh%>:<%nn%>"
oSchedule.SetShortTimeFormat("<%hh%>:<%nn%>")
Type:
  • string
Example
null {null}, "&lt;%h%&gt;:&lt;%nn%&gt; &lt;%AM/PM%&gt;"
"" {string}, nothing is displayed
"&lt;%loc_time%&gt;" {string}, indicates the time using the current user regional and language settings
"&lt;%hh%&gt;:&lt;%nn%&gt;" {string}, displays the time in hh:nn format
shortTimeFormat

(static) showAllDayHeader :boolean

The showAllDayHeader field specifies whether the control's header for all-day events is visible or hidden. The all-day header is a special section within the schedule control that is designed to display events that last for an entire day or more. The headerAllDayEventHeight field defines the height of the events to display within the all-day header (relative to the font-size of the control). The allowMultiDaysEvent field specifies whether the user can create events that may start on a day and ends on other. The EventOptions.allDay field indicates an all-day event event. The time is ignored for all-day events, while it is shown in the all-day header. By default, the showAllDayHeader field is set to false, which means that the all-day header is hidden by default. If you set the showAllDayHeader field to true, the all-day header becomes visible, allowing you to display all-day events separately from regular timed events.

The showAllDayHeader field is mapped to the ShowAllDayHeader property, which means that the following statements are equivalent:

oSchedule.Options = {showAllDayHeader: true}
oSchedule.SetOptions({showAllDayHeader: true})
oSchedule.ShowAllDayHeader = true
oSchedule.SetShowAllDayHeader(true)
Type:
  • boolean
Example
false{boolean} or null {null}, hides the all-day header (default)
true{boolean}, shows the all-day header
showAllDayHeader

(static) showEventLabels :boolean

The showEventLabels field specifies whether the short, long and extra labels of the events are visible or hidden. The event's caption is still visible if provided, even if the showEventLabels field is set to false. The shortLabel, longLabel and extraLabel fields of the event are used to specify the content of the short, long and extra labels of the events, respectively. The defaultEventShortLabel, defaultEventLongLabel and defaultEventExtraLabel fields are used to specify the default content of the short, long and extra labels of the events, respectively. The caption field defines the event's caption. The showEventLabels field is set to true by default, which means that the event's short, long and extra labels are visible by default.

The showEventLabels field is mapped to the ShowEventLabels property, which means that the following statements are equivalent:

oSchedule.Options = {showEventLabels: false}
oSchedule.SetOptions({showEventLabels: false})
oSchedule.ShowEventLabels = false
oSchedule.SetShowEventLabels(false)
Type:
  • boolean
Example
false {boolean}, the event's short, long or extra labels are not shown
true {boolean}, the event's short, long or extra labels are visible (default)
showEventLabels

(static) showEvents :Schedule.ShowEventsEnum

The showEvents field indicates the type of the events the control displays. The events are the core elements of the schedule control, and they represent the scheduled items or appointments. Each event has specific properties such as start time, end time, caption, and more. The showEvents field allows you to control which types of events are visible within the schedule control. The EventOptions.visible field indicates whether the event is visible or hidden. By default, the showEvents field is set to -1 (exShowAllEvents), which means that all events are displayed within the control.

The showEvents field can be any of the following:

  • -1 (exShowAllEvents) {number}, shows all events (default)
  • 0 (exHideEvents) {number}, the control displays no events
  • 1 (exShowRegularEvents) {number}, the control displays regular events
  • 2 (exShowRepetitiveEvents) {number}, the control displays repetitive events (The Event.Repetitive property indicates the expression that defines the dates where the event occurs)

The showEvents field is mapped to the ShowEvents property, which means that the following statements are equivalent:

oSchedule.Options = {showEvents: "hide"}
oSchedule.SetOptions({showEvents: "hide"})
oSchedule.ShowEvents = "hide"
oSchedule.SetShowEvents("hide")
Type:
Example
-1 {number} or null {null}, the control displays all events, equivalent to -1 (exShowAllEvents)
0 {number}, hides the events
1 {number}, shows only the regular events (non-repetitive events)
3 {number} or "reg,rep" {string}, shows regular and repetitive events, where 3 is 1 (exShowRegularEvents) | 2 (exShowRepetitiveEvents)
showEvents

(static) showGroupingEvents :boolean

The showGroupingEvents field specifies whether the schedule view shows grouped events. The displayGroupingButton field gets or sets a value that indicates whether the grouping button is displayed in the date header. The applyGroupingColors field specifies whether the schedule view shows the events using the colors of owner groups (group's eventShape field). The showGroupingEvents field has effect only if the control displays groups. When true, the showGroupingEvents field allows the schedule view to display events grouped by their owner group. When false, the showGroupingEvents field allows the schedule view to display all events in a single list without grouping them by their owner group. The date is splited in sections for each group, and the name of the group is shown in the section's header. The allowMoveEventToOtherGroup field indicates whether the event can be moved from a group to another by drag and drop. By default, the showGroupingEvents field is false, which means that the schedule view does not show grouped events.

The control displays groups if:

  • showGroupingEvents field is true
  • The Groups collection has visible elements. By default, the Groups collection contains no Group objects

The showGroupingEvents field is mapped to the ShowGroupingEvents property, which means that the following statements are equivalent:

oSchedule.Options = {showGroupingEvents: true}
oSchedule.SetOptions({showGroupingEvents: true})
oSchedule.ShowGroupingEvents = true
oSchedule.SetShowGroupingEvents(true)
Type:
  • boolean
Example
false {boolean}, no grouped events are shown
true {boolean}, shows the events grouped
showGroupingEvents

(static) showHighlightEvent :boolean

The showHighlightEvent field specifies whether the control highlights the dates that contain events. The "uiHighlight"/"calendar-uiHighlight" shape is applied on dates with events. The calendar panel can highlight dates that contain events, making them easier to spot and navigate in the schedule view. Setting the showHighlightEvent field to true will enable this feature, while setting it to false will disable it, allowing users to choose whether they want to see highlighted dates with events in the calendar panel.

The showHighlightEvent field is mapped to the ShowHighlightEvent property, which means that the following statements are equivalent:

oSchedule.Options = {showHighlightEvent: true}
oSchedule.SetOptions({showHighlightEvent: true})
oSchedule.ShowHighlightEvent = true
oSchedule.SetShowHighlightEvent(true)
Type:
  • boolean
Example
false {boolean}, no date is highlighted
true {boolean}, the date with events is highlighted using the "uiHighlight"/"calendar-uiHighlight" shape
showHighlightEvent

(static) showMarkZone :Schedule.ShowMarkZoneEnum

The showMarkZone field indicates how the control shows the mark-zones. The markZones field defines the mark-zones within the control. The mark-zones are special time zones that are highlighted within the control to indicate specific time intervals. For instance, you can define mark-zones to indicate non-working hours, lunch breaks, or any other significant time periods. The showMarkZone field specifies whether the mark-zones are displayed on the background (behind events), on the foreground, or not displayed at all. By default, the showMarkZone field is set to 2 (exShowMarkZonesFront), which means that the mark-zones are displayed on the foreground, in front of the events.

The showMarkZone field can be any of the following:

  • 0 (exHideMarkZones) {number}, no mark-zone is displayed
  • 1 (exShowMarkZonesBack) {number}, the mark-zone(s) are displayed on the background (behind events)
  • 2 (exShowMarkZonesFront) {number}, the mark-zone(s) are displayed on the foreground

The showMarkZone field is mapped to the ShowMarkZone property, which means that the following statements are equivalent:

oSchedule.Options = {showMarkZone: 1}
oSchedule.SetOptions({showMarkZone: 1})
oSchedule.ShowMarkZone = 1
oSchedule.SetShowMarkZone(1)
Type:
Example
null {null}, the mark-zones are displayed on front, equivalent to 2 (exShowMarkZonesFront)
0 {number}, hides the mark-zones
1 {number}, shows the mark-zones on the background (behind events)
showMarkZone

(static) showViewCompact :exontrol.Schedule.ShowViewCompactEnum

The showViewCompact field specifies how days of the scheduler get arranged within the schedule-view. This option is useful to optimize the schedule view for different scenarios such as showing more days within the view, or showing the days as they are shown in the calendar panel, etc. By default, the showViewCompact field is set to exViewCalendarCompact, which means that the schedule view arranges the days as they are shown in the calendar panel, excepts that the first day of the month starts right after the last day of the previously month, or start to a new row.

The exontrol.Schedule.ShowViewCompactEnum type defines the following flags:

  • exViewCalendar(0), specifies that the schedule view arranges the days as they are shown in the calendar panel.
  • exViewCalendarCompact(-1), the schedule view arranges the days as they are shown in the calendar panel, excepts that the first day of the month starts right after the last day of the previously month, or start to a new row.
  • exViewSingleRow(1), the schedule view arranges all days to a single row (horizontally)
  • exViewSingleColumn(2), the schedule view arranges all days to a single column (vertically)
  • exViewSingleRowLockHeader(3), the schedule view arranges all days to a single row (horizontally), while the date header is shown/locked on the top while the chart is vertically scrolled
  • exViewSingleWeek(4), the schedule view displays weekdays vertically across 7 rows (@since 4.1)

The showViewCompact field is mapped to the ShowViewCompact property, which means that the following statements are equivalent:

oSchedule.Options = {showViewCompact: -1}
oSchedule.SetOptions({showViewCompact: -1})
oSchedule.ShowViewCompact = -1
oSchedule.SetShowViewCompact(-1)
Type:
  • exontrol.Schedule.ShowViewCompactEnum
Example
-1 or exontrol.Schedule.ShowViewCompactEnum.exViewCalendarCompact {number}, the schedule view arranges the days as they are shown in the calendar panel, excepts that the first day of the month starts right after the last day of the previously month, or start to a new row.
3 or exontrol.Schedule.ShowViewCompactEnum.exViewSingleRowLockHeader {number}, the schedule view arranges all days to a single row (horizontally), while the date header is shown/locked on the top while the chart is vertically scrolled.
showViewCompact

(static) singleSel :Schedule.SingleSelEnum

The singleSel field defines whether the control supports single, multiple, toggle selection. The selection field defines the control's selection. The selectEventStyle field specifies how the selected-event gets displayed. The selection mode of the control is determined by the SingleSel property, which can be set to enable single-selection, multiple-selection, or toggle selection. When single-selection is enabled, only one event can be selected at a time. When multiple-selection is enabled, users can select multiple events simultaneously. When toggle selection is enabled, clicking on an event toggles its selection state (selected/unselected). The Selection property retrieves the currently selected events in the control, and the Event.Selected property indicates whether a specific event is selected. The selection behavior can be further customized using additional flags that control how users can select events, such as disabling selection with modifier keys or by dragging.

The Schedule.SingleSelEnum type defines the following flags:

  • exDisableSel(0), specifies that the control's selection is disabled (can not be combined with any other flags)
  • exEnableSel(1), specifies that the control's selection is enabled (multiple-selection, unless the exSingleSel is set )
  • exSingleSel(2), specifies that the user can select a event only
  • exToggleSel(4), specifies that the event's selection state is toggled once the user clicks a event.
  • exDisableCtrlSel(8), disables toggling the event's selection state when user clicks a event, while CTRL modifier key is pressed.
  • exDisableShiftSel(16), disables selecting events using the SHIFT key.
  • exDisableDrag(32), disables selecting events by drag.

The singleSel field is mapped to the SingleSel property, which means that the following statements are equivalent:

oSchedule.Options = {singleSel: 3}
oSchedule.SetOptions({singleSel: 3})
oSchedule.SingleSel = 3
oSchedule.SetSingleSel(3)
Type:
Example
0 or exontrol.Schedule.SingleSelEnum.exDisableSel {number}, disables selecting any event
3 or exontrol.Schedule.SingleSelEnum.exSingleSel | exontrol.Schedule.SingleSelEnum.exEnableSel {number}, enables control's single selection, so only a single event can be selected
6 or exontrol.Schedule.SingleSelEnum.exToggleSel | exontrol.Schedule.SingleSelEnum.exSingleSel {number}, enables control's single and toggle selection, which means that once a event is selected it gets unselected once it is clicked, or reverse, and only a single-event can be selected at once.
singleSel

(static) smooth :number

The smooth field defines the time in ms the control goes from one layout to another. Setting the smooth field to 0 means that no smooth changes are performed once the control goes from a layout to another. Setting the smooth field to 125 means that a smooth-transition is performed from a layout to another for 125 ms. The Smooth() method smoothly transitions the control from the current layout to a new layout, applying gradual changes rather than an immediate switch.
Type:
  • number
Example
0 {number}, no smooth changes once the control goes from a layout to another
125 {number}, specifies that a smooth-transition is performed from a layout to another for 125 ms.
smooth

(static) tfi :string|object

The tfi field applies font attributes to captions within the control. The tfi field can be defined using a string representation such as "b monospace 16" or as an object such as {bold: true, fontName: "monospace", fontSize: 16}. By default, the tfi field is null, so the canvas uses its own default font defined by exontrol.defGUIFont (typically "12px sans-serif"). CSS fonts applied to surrounding HTML elements do not affect the canvas; the canvas text is independent of page styles, and the default font can be changed by setting exontrol.defGUIFont.

The tfi field as string supports any of the following keywords (each keyword can be specified using first letters only such as "b" for "bold) separated by space characters:

  • bold, displays the text in bold (equivalent of <b> tag)
  • italic, displays the text in italics (equivalent of <i> tag)
  • underline, underlines the text (equivalent of <u> tag)
  • strikeout, specifies whether the text is strike-through (equivalent of <s> tag)
  • <fontName name>, specifies the font's family (equivalent of <font name> tag)
  • <fontSize size>, specifies the size of the font (equivalent of <font ;size> tag)
  • <fgColor CSSColor>, specifies the text's foreground color (equivalent of <fgcolor> tag)
  • <bgColor CSSColor>, specifies the text's background color (equivalent of <bgcolor> tag)
  • <shaColor CSSColor;width;offset>, defines the text's shadow (equivalent of <sha color;width;offset> tag)
  • <outColor CSSColor>, shows the text with outlined characters (CSScolor) (equivalent of <out color> tag)
  • <graColor CSSColor;mode;blend>, defines a gradient text (equivalent of <gra color;mode;blend> tag)

Any other word within the tfi field that's not recognized as a keyword is interpreted as:

  • name of the font (not a number), specifies the font's family (equivalent of <font name> tag)
  • size of the font (number), specifies the size of the font (equivalent of <font ;size> tag)

The tfi field as object supports any of the following fields:

  • bold {boolean}, displays the text in bold (equivalent of <b> tag)
  • italic {boolean}, displays the text in italics (equivalent of <i> tag)
  • underline {boolean}, underlines the text (equivalent of <u> tag)
  • strikeout {boolean}, specifies whether the text is strike-through (equivalent of <s> tag)
  • fontName {string}, specifies the font's family (equivalent of <font name> tag)
  • fontSize {number}, specifies the size of the font (equivalent of <font ;size> tag)
  • fgColor {string}, specifies the text's foreground color (CSScolor) (equivalent of <fgcolor> tag)
  • bgColor {string}, specifies the text's background color (CSScolor) (equivalent of <bgcolor> tag)
  • shaColor {object}, specifies an object of {color, width, offset} type that defines the text's shadow (equivalent of <sha color;width;offset> tag), where:
    • color {string}, defines the color of the text's shadow (CSScolor)
    • width {number}, defines the size of the text's shadow
    • offset {number}, defines the offset to show the text's shadow relative to the text
  • outColor {string}, shows the text with outlined characters (CSScolor) (equivalent of <out color> tag)
  • graColor {object}, specifies an object of {color, mode, blend} type that defines a gradient text (equivalent of <gra color;mode;blend> tag), where:
    • color {string}, defines the gradient-color (CSScolor)
    • mode {number}, defines the gradient direction as 0 (left-right), 1 (default, top-bottom), 2 (left-center-right), and 3 (top-center-bottom)
    • blend {number}, defines the gradient blend as a value between 0 and 1

CSSColor or CSS legal color values can be specified by the following methods:

  • Hexadecimal colors, is specified with: #RRGGBB, where the RR (red), GG (green) and BB (blue) hexadecimal integers specify the components of the color. All values must be between 00 and FF. For example, #0000ff value is rendered as blue, because the blue component is set to its highest value (ff) and the others are set to 00.
  • Hexadecimal colors with transparency, is specified with: #RRGGBBAA, where AA (alpha) value must be between 00 and FF. For example, #0000ff80 defines a semi-transparent blue.
  • RGB colors, is specified with the RGB(red, green, blue) function. Each parameter (red, green, and blue) defines the intensity of the color and can be an integer between 0 and 255. For example, rgb(0,0,255) defines the blue color.
  • RGBA colors, are an extension of RGB color values with an alpha channel as RGBA(red, green, blue, alpha) function, where the alpha parameter is a number between 0.0 (fully transparent) and 1.0 (fully opaque). For example, rgba(0,0,255,0.5) defines a semi-transparent blue.
  • HSL colors, is specified with the HSL(hue, saturation, lightness) function, where hue is a degree on the color wheel (from 0 to 360) - 0 (or 360) is red, 120 is green, 240 is blue. saturation is a percentage value; 0% means a shade of gray and 100% is the full color. lightness is also a percentage; 0% is black, 100% is white. HSL stands for hue, saturation, and lightness - and represents a cylindrical-coordinate representation of colors. For example, hsl(240, 100%, 50%) defines the blue color.
  • HSLA colors, are an extension of HSL color values with an alpha channel - which specifies the opacity of the object as HSLA(hue, saturation, lightness, alpha) function, where alpha parameter is a number between 0.0 (fully transparent) and 1.0 (fully opaque). For example, hsla(240, 100%, 50%,0.5) defines a semi-transparent blue.
  • Predefined/Cross-browser color names, 140 color names are predefined in the HTML and CSS color specification. For example, blue defines the blue color.

The tfi field is mapped to the Tfi property, which means that the following statements are equivalent:

oSchedule.Options = {tfi: "b monospace 16 <fg blue>"}
oSchedule.SetOptions({tfi: "b monospace 16 <fg blue>"})
oSchedule.Tfi = "b monospace 16 <fg blue>"
oSchedule.SetTfi("b monospace 16 <fg blue>")
Type:
  • string | object
Example
null {null}, the tfi field is ignored
"bold monospace 16 &lt;fg blue&gt;" {string}, defines Monospace font of 16px height, bold and blue
{bold: true, fontName: "monospace", fontSize: 16, fgColor: "blue"} {object}, defines Monospace font of 16px height, bold and blue
tfi

(static) timeScale :TimeScaleOptions

The timeScale field holds options to apply on the control's time-scale, as an object of TimeScaleOptions type. The time-scale is a visual representation of the time intervals within the schedule control, which helps users to understand the timing and duration of events in relation to the overall schedule. The time-scale appears as a vertical axis that displays time units such as hours, minutes, or seconds, depending on the level of detail you want to show. The timeScale field allows you to customize the appearance and behavior of the time-scale, including the time unit, the format of the time labels, and more. The dayStartTime field specifies the time the day starts from, in "HH[:MM[:NN]]" format. The dayEndTime field specifies the time the day ends to, in "HH[:MM[:NN]]" format. By default, the timeScale field is set to null, which means that the control uses its default settings for the time-scale.

The timeScale field is mapped to the TimeScale property, which means that the following statements are equivalent:

oSchedule.Options = {timeScale: {allowResize: false}
oSchedule.SetOptions({timeScale: {allowResize: false}})
oSchedule.TimeScale = {allowResize: false}
oSchedule.SetTimeScale({allowResize: false})

It is important to note that changing a field of the TimeScaleOptions object does not automatically update the control. For example, oSchedule.TimeScale.cursor = "pointer" does not apply the change. Instead, you must assign the TimeScale property again, such as oSchedule.TimeScale = {cursor: "pointer"}, so the control updates and applies the new value.

Type:
Example
The following sample defines the time-scale to show hours without AM/PM designations

{
  width: 36,
  allowResize: false,
  majorTimeLabel: "&lt;%hh%&gt;:&lt;%nn%&gt; ",
  minorTimeLabel: ":&lt;%nn%&gt; ",
  shape: "rgba(0,0,0,0.10)"
}
timeScale

(static) toolTipDelay :number

The toolTipDelay field specifies the amount of time the mouse pointer must hover over an object before the tool tip is displayed. Adjusting this value allows you to control how quickly tool tips appear, improving usability and user experience. Setting the property to 0 will cause tool tips to appear immediately when the mouse pointer hovers over an object, while setting it to a higher value (e.g., 128) will introduce a delay before the tool tip is shown, allowing users to avoid accidental tool tip pop-ups when quickly moving the mouse across the control.

The toolTipDelay field is mapped to the ToolTipDelay property, which means that the following statements are equivalent:

oSchedule.Options = {toolTipDelay: 128}
oSchedule.SetOptions({toolTipDelay: 128})
oSchedule.ToolTipDelay = 128
oSchedule.SetToolTipDelay(128)
Type:
  • number
Example
0 {number}, the tooltip is shown "immediately"
128 {number}, the tooltip is displayed in 128 ms.
toolTipDelay

(static) toolTipPopDelay :number

The toolTipPopDelay field specifies the period in ms of time the tool top remains visible if the mouse pointer is stationary within a control. Adjusting this value allows you to control how long tool tips stay visible, improving usability and user experience. Setting the property to 0 will cause tool tips to disappear immediately when the mouse pointer stops moving, while setting it to a higher value (e.g., 5000) will allow tool tips to remain visible for a longer period of time, giving users more time to read the information provided in the tool tip. The toolTipDelay field specifies the amount of time the mouse pointer must hover over an object before the tool tip is displayed. The toolTipWidth field indicates the max-width of the control's tooltip (in pixels).

The toolTipPopDelay field is mapped to the ToolTipPopDelay property, which means that the following statements are equivalent:

oSchedule.Options = {toolTipPopDelay: 5000}
oSchedule.SetOptions({toolTipPopDelay: 5000})
oSchedule.ToolTipPopDelay = 5000
oSchedule.SetToolTipPopDelay(5000)
Type:
  • number
Example
0 {number}, no tooltip is shown for any object (disabled)
-1 {number}, the tooltip stays indefinitely (negative)
1000 {number}, the tooltip is visible for 1 second
toolTipPopDelay

(static) toolTipWidth :number

The toolTipWidth field indicates the max-width of the control's tooltip (in pixels). Adjusting this value allows you to control the width of tool tips, improving readability and user experience. Setting the property to 0 will cause tool tips to have no maximum width, allowing them to expand as needed to fit their content, while setting it to a specific value (e.g., 300) will limit the width of tool tips, causing longer content to wrap within the specified width, making it easier for users to read and understand the information provided in the tool tip. The toolTipDelay field specifies the amount of time the mouse pointer must hover over an object before the tool tip is displayed. The toolTipPopDelay field specifies the period in ms of time the tool top remains visible if the mouse pointer is stationary within a control.

The toolTipWidth field is mapped to the ToolTipWidth property, which means that the following statements are equivalent:

oSchedule.Options = {toolTipWidth: 300}
oSchedule.SetOptions({toolTipWidth: 300})
oSchedule.ToolTipWidth = 300
oSchedule.SetToolTipWidth(300)
Type:
  • number
Example
0 {number}, no tooltip is shown for any object (disabled)
-1 {number}, the tooltip's content is displayed on a single line (without limit the width of it)
300 {number}, the tooltip's max-width is 300 pixels
toolTipWidth

(static) undoRedoQueueLength :number

The undoRedoQueueLength field gets or sets the maximum number of Undo/Redo actions that may be stored to the control's Undo/Redo queue as explained:
  • negative {number}, no limit for the control's Undo/Redo queue
  • 0 {number}, the control's Undo/Redo feature is disabled
  • positive {number}, specifies the maximum number of Undo/Redo actions that may be stored to the control's Undo/Redo queue

When the number of actions in the Undo/Redo queue exceeds the specified limit, the oldest actions are removed from the queue to make room for new ones. For instance, if the undoRedoQueueLength is set to 5 and you perform 6 actions, the first action will be discarded from the queue, and only the last 5 actions will be available for undoing or redoing.

The undoRedoQueueLength field is mapped to the control's UndoRedoQueueLength property, so the following statements are equivalent:

oSchedule.Options = {undoRedoQueueLength: -1}
oSchedule.SetOptions({undoRedoQueueLength: -1})
oSchedule.UndoRedoQueueLength = -1
oSchedule.SetUndoRedoQueueLength(-1)

The Undo() method reverses the last action or a series of actions, while the Redo() method reapplies the last undone action (essentially reversing Undo). To undo an action, press Ctrl+Z; to redo an action that was undone, press Ctrl+Y.

Type:
  • number
Since:
  • 2.0
Example
-1 {number}, the Undo/Redo queue is limitless (default)
1 {number}, the Undo/Redo queue limits the number of actions to store to 1 (one action or one block of actions)
undoRedoQueueLength

(static) updateEventsLabel :string

The updateEventsLabel field specifies the label to be shown while moving or resizing the events. The createEventLabel field specifies the label to be shown while creating events. The formatEventUpdateLabel misc options defines the format to show the label. This field supports ex-HTML such as (<b>, <i>, <fgcolor>, ...) as well as <%=formula%> tags. The <%=formula%> tag represents the result of a given formula. The formula is a format-expression that can include placeholders like %1, %2, and so on. Each placeholder corresponds to a specific property of the event. For example, %1 refers to exEventStartDateTime, %2 refers to exEventEndDateTime, etc. By default, the updateEventsLabel field is set to "<%=%256%>
<%=((1:=int(0:= %7)) != 0 ? (=:1 + ' day(s)') : '') + (=:1 ? ' ' : '' ) + ((1:=int(0:=((=:0 - =:1 + 1/24/60/60/2)*24))) != 0 ? =:1 + ' hour(s)' : '' ) + (=:1 ? ' ' : '' ) + ((1:=round((=:0 - =:1)*60)) != 0 ? =:1 + ' min(s)' : '')%>", which displays the short margins of the event on the first line, and the duration of the event in days, hours and minutes on the second line while moving or resizing events.

The known placeholders that can be used in the formula are:

  • %1 (exEventStartDateTime) {Date}, indicates the starting date/time of the event. This property gets the Start property of the event. The Start property defines the lower margin of the event, and it includes the date and the time values. The exEventStartDate specifies the DATE value only, while the exEventStartTime includes the TIME value only. For instance, the LabelProperty = "<%=weekday(%1)%>" displays the day of the week where the event starts
  • %2 (exEventEndDateTime) {Date}, indicates the ending date/time of the event. This property gets or sets the End property of the event. The End property defines the upper margin of the event, and it includes the date and the time values. The exEventEndDate specifies the DATE value only, while the exEventEndTime includes the TIME value only. For instance, the LabelProperty = "<%=weekday(%2)%>" gets the day of the week where the event ends.
  • %3 (exEventAllDay) {boolean}, indicates if the current event is an all day event. This property is equivalent with the event's AllDay property which indicates if the current event is an all-day event. For instance, the LabelProperty = "<%=%3 ? `All-Day-Event: `: ``%><%=%256%>", displays automatically an "All-Day-Event: " prefix for all-day events. If the event is not an all-day event, the <%=%256%>, or exEventDisplayShortMargins, short margins of the events are displayed.
  • %4 (exEventGroupID) {any}, specifies the identifier/index of the event's group. The GroupID property of the event indicates the identifier of the group that event belongs to. The exEventGroupLabel property indicates the Caption property of the Group's event. The exEventGroupTitle property indicates the Title property of the Group's event. For instance, the LabelProperty = "<%=%4%>
    <%=%256%>" displays on the first line, the group's identifier, and the short margins of the event on the second line. The caption of the label is automatically updated once an event is moved from a group to another.
  • %5 (exEventCaption) {string}, indicates the caption of the event. The Caption property of the event specifies the custom caption that can be displayed on the label, without having to change the event's label. For instance, the LabelProperty = "<%=%256%>
    <%=%5%>" displays on the first line, the event's short margins, while on the second line displays the event's caption. Once you update or edit the event's Caption, the event's body automatically shows the new caption.
  • %6 (exEventUserData) {any}, indicates the extra data associated with the event. The UserData property of the event indicates an extra data associated with the event. For instance, the LabelProperty = "<%=%256%>
    <%=%6%>" displays on the first line, the event's short margins, while on the second line displays the event's user data. Once you update or edit the event's UserData, the event's body automatically shows the new label.
  • %7 (exEventDuration) {number}, specifies the duration of the event. The returned values is of float type, and it indicates the duration of the event in days. For instance, the 1.5 indicates, 1 day and 12 hours. For instance, the LabelProperty = "<%=%256%>
    <%=((1:=int(0:= (date(%2)-date(%1)))) != 0 ? (=:1 + ' day(s)') : '') + (=:1 ? ' ' : '' ) + ((1:=int(0:=((=:0 - =:1 + 1/24/60/60/2)*24))) != 0 ? =:1 + ' hour(s)' : '' ) + (=:1 ? ' ' : '' ) + ((1:=round((=:0 - =:1)*60)) != 0 ? =:1 + ' min(s)' : '')%>" displays on the first line, the event's short margins, while on the second line displays the event's durations in days, hours and minutes. Once you update or edit the event's margins, the event's body automatically shows the new length. You can use the MoveBy method to delay the current event with a specified value time. You can use the SetKnownProperty(exEventDuration) to change the event's duration.
  • %8 (exEventRepetitiveExpression) {string}, specifies the repetitive expression of the event. The Event.Repetitive property indicates the expression that determines whether the event is repetitive. For instance, the LabelProperty = "<%=%256%>
    <%=len(%8)? `repetitive event`:``%>" displays repetitive event for repetitive events.
  • %12 (exEventID) {string}, specifies the event's unique key/identifier/index.
  • %256 (exEventDisplayShortMargins) {string}, displays the margins of the event in a short format (read-only). The ShortDateFormat property defines the short date format. The ShortTimeFormat property defines the short time format.
  • %257 (exEventDisplayLongMargins) {string}, displays the margins of the event in a long format (read-only). The LongDateFormat property defines the long date format. The LongTimeFormat property defines the long time format.
  • %258 (exEventStartDate) {Date}, gets the starting date ( not including the time ) of the event (read-only). You can use this property to get the starting date of the event.
  • %259 (exEventStartTime) {number}, gets the starting time ( not including the date ) of the event, as a number between 0 and 1 (read-only). You can use this property to get the starting time of the event.
  • %260 (exEventEndDate) {Date}, gets the ending date ( not including the time ) of the event (read-only). You can use this property to get the ending date of the event.
  • %261 (exEventEndTime) {number}, gets the ending time ( not including the date ) of the event, as a number between 0 and 1 (read-only). You can use this property to get the ending time of the event.
  • %262 (exEventGroupLabel) {string}, gets the label of the owner group (read-only). The exEventGroupLabel property indicates the Caption property of the Group's event. The GroupID property of the event indicates the identifier of the group that event belongs to. The exEventGroupTitle property indicates the Title property of the Group's event. For instance, the LabelProperty = "<%=%262%>
    <%=%256%>" displays on the first line, the group's caption, and the short margins of the event on the second line. The caption of the label is automatically updated once an event is moved from a group to another.
  • %263 (exEventGroupTitle) {string}, gets the title of the owner group (read-only). The exEventGroupTitle property indicates the Title property of the Group's event. The exEventGroupLabel property indicates the Caption property of the Group's event. The GroupID property of the event indicates the identifier of the group that event belongs to. For instance, the LabelProperty = "<%=%263%>
    <%=%256%>" displays on the first line, the group's caption, and the short margins of the event on the second line. The caption of the label is automatically updated once an event is moved from a group to another.
  • %264 (exEventRepetitive) {boolean}, Indicates if the current event is a repetitive event. (read-only). You can use this flag to specify whether Repetitive property of the Event object is not empty, and valid.

The updateEventsLabel field is mapped to the UpdateEventsLabel property, which means that the following statements are equivalent:

oSchedule.Options = {updateEventsLabel: "<%=%256%>"}
oSchedule.SetOptions({updateEventsLabel: "<%=%256%>"})
oSchedule.UpdateEventsLabel = "<%=%256%>"
oSchedule.SetUpdateEventsLabel("<%=%256%>")
Type:
  • string
Example
null {null}, the control's default label is shown while resizing or moving events ("&lt;%=%256%&gt;&lt;br&gt;&lt;%=((1:=int(0:= %7)) != 0 ? (=:1 + ' day(s)') : '') + (=:1 ? ' ' : '' ) + ((1:=int(0:=((=:0 - =:1 + 1/24/60/60/2)*24))) != 0 ? =:1 + ' hour(s)' : '' ) + (=:1 ? ' ' : '' ) + ((1:=round((=:0 - =:1)*60)) != 0 ? =:1 + ' min(s)' : '')%&gt;")
"" {string}, no label is shown for the event to resize or move
"Start: &lt;%=%1%&gt;&lt;br&gt;End: &lt;%=%2%&gt;" {string}, displays the starting margin of the even on the first line, while on the second line it displays the ending point of the event
"Duration: &lt;%=((1:=int(0:= %7)) != 0 ? (=:1 + ' day(s)') : '') + (=:1 ? ' ' : '' ) + ((1:=int(0:=((=:0 - =:1 + 1/24/60/60/2)*24))) != 0 ? =:1 + ' hour(s)' : '' ) + (=:1 ? ' ' : '' ) + ((1:=round((=:0 - =:1)*60)) != 0 ? =:1 + ' min(s)' : '')%&gt;" {string},  displays the duration of the event in days, hours and minutes
updateEventsLabel

(static) wheelChange :number

The wheelChange field specifies how much the control scrolls when the user rotates the mouse wheel. This setting allows you to adjust the sensitivity of the mouse wheel interaction with the control.
  • Setting wheelChange to 0 disables mouse wheel actions, preventing the control from changing when the wheel is scrolled
  • Setting wheelChange to a positive number, such as 5, increases the control's value by that amount each time the wheel is rotated, enabling faster adjustments

By modifying this value, you can fine-tune the control's responsiveness, making it easier for users to perform precise changes or larger adjustments as needed.

The wheelChange field is mapped to the WheelChange property, which means that the following statements are equivalent:

oSchedule.Options = {wheelChange: 5}
oSchedule.SetOptions({wheelChange: 5})
oSchedule.WheelChange = 5
oSchedule.SetWheelChange(5)
Type:
  • number
Example
0 {number}, locks any action the mouse's wheel performs
18 {number}, scrolls the control by 18-pixels when mouse's wheel is rotated (CTRL + wheel scrolls horizontally)
wheelChange

(static) zoom :number

The zoom field defines the zoom factor of the control's content and can range from 10 (10%) to 1000 (1000%). Together, the zoom and zoomLevels fields control the zooming behavior, allowing users to magnify or reduce the view of the content. Setting zoom determines the current zoom level, while zoomLevels defines the allowed zoom options. For example, if zoom is set to 150 and zoomLevels to "50,100,150,200", the current zoom level will be 150%, and users can choose from the listed zoom levels.

The zoom field is mapped to the Zoom property, which means that the following statements are equivalent:

oSchedule.Options = {zoom: 150}
oSchedule.SetOptions({zoom: 150})
oSchedule.Zoom = 150
oSchedule.SetZoom(150)
Type:
  • number
Example
null {null}, Specifies normal-view (100%)
150 {number}, Indicates that the control's content is magnfied to 150%
zoom

(static) zoomLevels :string

The zoomLevels field defines the allowed zoom levels that the user can select from, as a comma-separated string of values. Each value can be either a specific zoom level (such as 150 for 150%) or a range of zoom levels (such as "50-350" for zoom levels between 50% and 350%). The zoomLevels field works in conjunction with the zoom field to control the zooming behavior of the control. For example, if zoom is set to 150 and zoomLevels is set to "50,100,150,200", users can select from the specified zoom levels, and the current zoom level will be 150%. If zoomLevels is set to "50-350", users can select any zoom level within that range.

The zoomLevels field is mapped to the ZoomLevels property, which means that the following statements are equivalent:

oSchedule.Options = {zoomLevels: "50,100,150,200"}
oSchedule.SetOptions({zoomLevels: "50,100,150,200"})
oSchedule.ZoomLevels = "50,100,150,200"
oSchedule.SetZoomLevels("50,100,150,200")
Type:
  • string
Example
null {null}, Specifies that the control's zoom factor is always 100%
150 {number}, Specifies that the control's zoom factor is always 150%
"50,100,200,350" {string}, Indicates that the zoom-factor can be any of selected values, and the levels of zoom-factor is 50% to 350%
zoomLevels