TimeScaleOptions class (Schedule)

TimeScaleOptions()

new TimeScaleOptions()

The TimeScaleOptions type is a structure (or object) that encapsulates all configurable properties related to the time-scale of the control. In other words, it defines everything the time-scale can display, control, or customize. The time-scale is the vertical area usually displayed on the left side of the control, and its role is to visually represent time intervals (such as hours, half-hours, minutes, etc.). It acts as a reference axis for scheduling data, helping users understand when events occur. The dayStartTime and dayEndTime fields define the time range displayed by the time-scale, while the majorTimeRuler and minorTimeRuler fields specify the increments for the major and minor rulers, respectively.

Every option of the TimeScaleOptions type has associated a property of the TimeScale object. For instance, the option:

cursor {string}, defines the mouse-cursor for the time-scale header
is associated with the property:
Cursor {string}, defines the mouse-cursor for individual time-scale header
which means that the following statements are equivalent:
oTimeScale.Options = {cursor: "pointer"}
oTimeScale.SetOptions({cursor: "pointer"})
oTimeScale.Cursor = "pointer"
oTimeScale.SetCursor("pointer")
where oTimeScale is an object of TimeScale type

Members

(static) allowResize :boolean

The allowResize field specifies whether the user can resize the time-scale header. The minWidth field defines the minimal size of the time-scale header. The maxWidth field defines the maximal size of the time-scale header. The width field defines the size of the time-scale header. The allowResize, minWidth, maxWidth and width fields are used together to control the resizing behavior of the time-scale header. If allowResize is set to true, the user can resize the time-scale header by dragging its edge. The minWidth and maxWidth fields specify the minimum and maximum size that the time-scale header can be resized to, while the width field specifies the initial size of the time-scale header. If allowResize is set to false, the user cannot resize the time-scale header, and the width field defines its fixed size. By default, allowResize is true, which means that the user can resize the time-scale header by dragging its edge.

The allowResize field is mapped to the AllowResize property of the TimeScale object, which means that the following statements are equivalent:

oTimeScale.Options = {allowResize: true}
oTimeScale.SetOptions({allowResize: true})
oTimeScale.AllowResize = true
oTimeScale.SetAllowResize(true)
Type:
  • boolean
Example
false {boolean}, the user can not resize the time-scale header by drag and drop
true {boolean}, the user can resize the time-scale header by drag and drop
allowResize

(static) caption :string

The caption field specifies the ex-HTML caption to be displayed on the top side of the time scale. The majorTimeLabel and majorTimeRuler fields control the display of the major rulers on the time-scale, while the minorTimeLabel and minorTimeRuler fields control the display of the minor rulers on the time-scale. The caption field is used to display a custom caption on the top side of the time scale, which can provide additional information or context to users.

The caption field is mapped to the Caption property of the TimeScale object, which means that the following statements are equivalent:

oTimeScale.Options = {caption: "<b>time"}
oTimeScale.SetOptions({caption: "<b>time"})
oTimeScale.Caption = "<b>time"
oTimeScale.SetCaption("<b>time")
Type:
  • string
Example
null {null}, no caption is displayed
"&lt;b&gt;time" {string}, displays the "time" caption in bold
caption

(static) cursor :string

The cursor field defines the mouse-cursor for the current time-scale header. The "timeScale" part of the cursors field defines the default mouse-cursor for the time-scale header, while the "date-timeScale" part defines the default mouse-cursor for the schedule view (usually displayed to the right of the time-scale header). If the cursor field is explicitly set, it overrides the default mouse-cursor for the time-scale header, otherwise, if the cursor field is not specified, the default mouse-cursor defined by the "timeScale" part is applied. By default, the cursor field is null, meaning that no custom mouse-cursor is applied (the default mouse-cursor defined by the "timeScale" part may be applied).

The cursor field 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 cursor field is mapped to the Cursor property of the TimeScale object, which means that the following statements are equivalent:

oTimeScale.Options = {cursor: "pointer"}
oTimeScale.SetOptions({cursor: "pointer"})
oTimeScale.Cursor = "pointer"
oTimeScale.SetCursor("pointer")
Type:
  • string
Example
"pointer" {string}, The cursor is a pointer that indicates a link (typically an image of a pointing hand)
cursor

(static) majorTimeLabel :string

The majorTimeLabel field defines the label of the time-scale's major ruler. The majorTimeRuler field indicates the increment for the time-scale's major ruler. Together, the majorTimeLabel and majorTimeRuler fields control the display of the major rulers on the time-scale. The majorTimeRuler field specifies the time intervals at which the major rulers are displayed (for example, every hour, every 2 hours, etc.), while the majorTimeLabel field defines the format of the labels for these major rulers. The majorTimeRulerColor and majorTimeRulerStyle fields defines the color and style of the major rulers, respectively. By default, the majorTimeLabel is set to "<%hh%>:<%nn%> <%AM/PM%>", which means that the labels for the major rulers will display hours and minutes in 12-hour format along with AM/PM indicators.

The majorTimeLabel field supports ex-HTLM tags (such as <b>, <i>, <fgcolor>, ...) and <%DATE%> tags as follows:

  • <%h%> - Hour in one or two digits, as needed (0 to 23)
  • <%hh%> - Hour in two digits (00 to 23)
  • <%h12%> - Hour in 12-hour time format, in one or two digits - [0(12),11]
  • <%hh12%> - Hour in 12-hour time format, in two digits - [00(12),11]
  • <%n%> - Minute in one or two digits, as needed (0 to 59)
  • <%nn%> - Minute in two digits (00 to 59)
  • <%s%> - Second in one or two digits, as needed (0 to 59)
  • <%ss%> - Second in two digits (00 to 59)
  • <%AM/PM%> - Twelve-hour clock with the uppercase letters "AM" or "PM", as appropriate
  • <%loc_AM/PM%> - Indicates the time marker such as AM or PM using the current user regional and language settings
  • <%loc_A/P%> - Indicates the one character time marker such as A or P using the current user regional and language settings

The majorTimeLabel field is mapped to the MajorTimeLabel property of the TimeScale object, which means that the following statements are equivalent:

oTimeScale.Options = {majorTimeLabel: "<%hh%>:<%nn%>"}
oTimeScale.SetOptions({majorTimeLabel: "<%hh%>:<%nn%>"})
oTimeScale.MajorTimeLabel = "<%hh%>:<%nn%>"
oTimeScale.SetMajorTimeLabel("<%hh%>:<%nn%>")
Type:
  • string
Example
null {null}, the default label of the major ruler is "&lt;%hh%&gt;:&lt;%nn%&gt; &lt;%AM/PM%&gt;"
"&lt;%hh%&gt;:&lt;%nn%&gt;" {string}, displays the major ruler without AM/PM indicators (24-hours)
majorTimeLabel

(static) majorTimeRuler :string

The majorTimeRuler field indicates the increment for the time-scale's major ruler. The format of majorTimeRuler field is "HH[:MM[:NN]]" format, where HH indicates hours, MM indicates minutes, and NN indicates seconds. The majorTimeRuler field works together with the majorTimeLabel field to control the display of the major rulers on the time-scale. The majorTimeRuler field specifies the time intervals at which the major rulers are displayed (for example, every hour, every 2 hours, etc.), while the majorTimeLabel field defines the format of the labels for these major rulers. By default, the majorTimeRuler is set to null, which means that major rulers are displayed from hour to hour (equivalent of "01:00").

The majorTimeRuler field is mapped to the MajorTimeRuler property of the TimeScale object, which means that the following statements are equivalent:

oTimeScale.Options = {majorTimeRuler: "02:00"}
oTimeScale.SetOptions({majorTimeRuler: "02:00"})
oTimeScale.MajorTimeRuler = "02:00"
oTimeScale.SetMajorTimeRuler("02:00")
Type:
  • string
Example
null {null}, displays major rulers from hour to hour, equivalent of "01:00"
"02:00" {string}, displays the major rulers every 2 hours
majorTimeRuler

(static) maxWidth :number

The maxWidth field defines the maximal size of the time-scale header. The minWidth field defines the minimal size of the time-scale header. The width field defines the size of the time-scale header. The allowResize field specifies whether the user can resize the time-scale header. The minWidth, maxWidth, width and allowResize fields are used together to control the resizing behavior of the time-scale header. If allowResize is set to true, the user can resize the time-scale header by dragging its edge. The minWidth and maxWidth fields specify the minimum and maximum size that the time-scale header can be resized to, while the width field specifies the initial size of the time-scale header. If allowResize is set to false, the user cannot resize the time-scale header, and the width field defines its fixed size. By default, maxWidth is 96, which means that the time-scale header cannot be resized to a size larger than 96.

The maxWidth field is mapped to the MaxWidth property of the TimeScale object, which means that the following statements are equivalent:

oTimeScale.Options = {maxWidth: 96}
oTimeScale.SetOptions({maxWidth: 96})
oTimeScale.MaxWidth = 96
oTimeScale.SetMaxWidth(96)
Type:
  • number
Example
null {null} or negative number, no maximum size constraint (the time-scale header can be resized to any size)
96 {number}, The time-scale header maximal-size is set to 96 (default value)
maxWidth

(static) minWidth :number

The minWidth field defines the minimal size of the time-scale header. The maxWidth field defines the maximal size of the time-scale header. The width field defines the size of the time-scale header. The allowResize field specifies whether the user can resize the time-scale header. The minWidth, maxWidth, width and allowResize fields are used together to control the resizing behavior of the time-scale header. If allowResize is set to true, the user can resize the time-scale header by dragging its edge. The minWidth and maxWidth fields specify the minimum and maximum size that the time-scale header can be resized to, while the width field specifies the initial size of the time-scale header. If allowResize is set to false, the user cannot resize the time-scale header, and the width field defines its fixed size. By default, minWidth is null (ignored), which means there is no minimum size constraint.

The minWidth field is mapped to the MinWidth property of the TimeScale object, which means that the following statements are equivalent:

oTimeScale.Options = {minWidth: 32}
oTimeScale.SetOptions({minWidth: 32})
oTimeScale.MinWidth = 32
oTimeScale.SetMinWidth(32)
Type:
  • number
Example
null {null} or negative number, no minimum size constraint (the time-scale header can be resized to any size)
32 {number}, The time-scale header minimal-size is set to 32
minWidth

(static) minorTimeLabel :string

The minorTimeLabel field defines the label of the time-scale's minor ruler. The minorTimeRuler field indicates the increment for the time-scale's minor ruler. Together, the minorTimeLabel and minorTimeRuler fields control the display of the minor rulers on the time-scale. The minorTimeRuler field specifies the time intervals at which the minor rulers are displayed (for example, every 15 minutes, every 30 minutes, etc.), while the minorTimeLabel field defines the format of the labels for these minor rulers. By default, the minorTimeLabel is set to ":<%nn%>", which means that the labels for the minor rulers will display only minutes preceded by a colon.

The minorTimeLabel field supports ex-HTLM tags (such as <b>, <i>, <fgcolor>, ...) and <%DATE%> tags as follows:

  • <%h%> - Hour in one or two digits, as needed (0 to 23)
  • <%hh%> - Hour in two digits (00 to 23)
  • <%h12%> - Hour in 12-hour time format, in one or two digits - [0(12),11]
  • <%hh12%> - Hour in 12-hour time format, in two digits - [00(12),11]
  • <%n%> - Minute in one or two digits, as needed (0 to 59)
  • <%nn%> - Minute in two digits (00 to 59)
  • <%s%> - Second in one or two digits, as needed (0 to 59)
  • <%ss%> - Second in two digits (00 to 59)
  • <%AM/PM%> - Twelve-hour clock with the uppercase letters "AM" or "PM", as appropriate
  • <%loc_AM/PM%> - Indicates the time marker such as AM or PM using the current user regional and language settings
  • <%loc_A/P%> - Indicates the one character time marker such as A or P using the current user regional and language settings

The minorTimeLabel field is mapped to the MinorTimeLabel property of the TimeScale object, which means that the following statements are equivalent:

oTimeScale.Options = {minorTimeLabel: ":<%nn%>"}
oTimeScale.SetOptions({minorTimeLabel: ":<%nn%>"})
oTimeScale.MinorTimeLabel = ":<%nn%>"
oTimeScale.SetMinorTimeLabel(":<%nn%>")
Type:
  • string
Example
null {null}, the default label of the minor ruler is ":&lt;%nn%&gt;"
"&lt;%hh%&gt;:&lt;%nn%&gt;" {string}, displays the minor ruler without AM/PM indicators (24-hours)
minorTimeLabel

(static) minorTimeRuler :string

The minorTimeRuler field indicates the increment for the time-scale's minor ruler. The format of minorTimeRuler field is "HH[:MM[:NN]]" format, where HH indicates hours, MM indicates minutes, and NN indicates seconds. The minorTimeRuler field works together with the minorTimeLabel field to control the display of the minor rulers on the time-scale. The minorTimeRuler field specifies the time intervals at which the minor rulers are displayed (for example, every 15 minutes, every 30 minutes, etc.), while the minorTimeLabel field defines the format of the labels for these minor rulers. By default, the minorTimeRuler is set to null, which means that minor rulers are displayed from 30 minutes to 30 minutes (equivalent of "00:30").

The minorTimeRuler field is mapped to the MinorTimeRuler property of the TimeScale object, which means that the following statements are equivalent:

oTimeScale.Options = {minorTimeRuler: "00:15"}
oTimeScale.SetOptions({minorTimeRuler: "00:15"})
oTimeScale.MinorTimeRuler = "00:15"
oTimeScale.SetMinorTimeRuler("00:15")
Type:
  • string
Example
null {null}, displays minor rulers from 15 to 15 minutes, equivalent of "00:15"
"00:30" {string}, displays the minor rulers every half an hour
minorTimeRuler

(static) shape :any

The shape field specifies the custom shape applied to the time-scale header. Within the shapes field definition, the "timeScale" part defines the default appearance of the time-scale header, while the "date-timeScale" part defines the default appearance of the schedule view (usually displayed to the right of the time-scale header). If the shape field is explicitly set, it overrides the default appearance of the time-scale header, otherwise, if the shape field is not specified, the default shape defined by the timeScale part is applied. by default, the shape field is null, meaning that no custom shape is applied (the default shape defined by the "timeScale" part may be applied).

The shape field can be any of the following:

  • the shape's name within the exontrol.Shapes.Schedule or exontrol.Shapes namespace
  • a CSS color
  • a JSON string-representation of an object of exontrol.Def.Shape type, for the time-scale header itself
  • an object of {normal,hover,click,disabled} type. The normal, hover, click and disabled are objects of exontrol.Def.Shape type

The shape field is mapped to the Shape property of the TimeScale object, which means that the following statements are equivalent:

oTimeScale.Options = {shape: "red"}
oTimeScale.SetOptions({shape: "red"})
oTimeScale.Shape = "red"
oTimeScale.SetShape("red")
Type:
  • any
Example
null {null}, no custom shape is applied (default object's shape may be applied)
"" {string}, no custom shape is applied (no default object's shape is be applied)
"red" {string}, fills the object's background in red (CSS color)
'{"fillColor": "red"}' or '{"normal":{"fillColor": "red"}}' {string}, fills the object's background in red (JSON-representation of an object of exontrol.Def.Shape type)
"xxx" {string}, indicates that exontrol.Shapes.Schedule.xxx or exontrol.Shapes.xxx is applied on the object's background. If the xxx field is missing, no custom shape is applied (no default object's shape is be applied)
"Button" or exontrol.Shapes.Button {object}, applies the "Button" shape on the object as defined into exontrol.Shapes namespace (@since 5.2)
shape

(static) timeZone :string

The timeZone field indicates the time zone for the time scale. The format of minorTimeRuler field is "[-]HH[:MM[:NN]]" format, where HH indicates hours, MM indicates minutes, and NN indicates seconds. The timeZone field is used to apply a time zone offset to the time scale. If the timeZone field is set to a specific value, it will adjust the time scale by the specified offset, allowing you to display the schedule in a different time zone. For example, if you set timeZone to "-02:00", it will delay the time scale by 2 hours earlier, while if you set it to "+03:00", it will add 3 hours to the current time on the time scale. By default, the timeZone field is null, which means that no time zone offset is applied and the time scale is displayed in the local time zone of the user's device.

The timeZone field is mapped to the TimeZone property of the TimeScale object, which means that the following statements are equivalent:

oTimeScale.Options = {timeZone: "-02:00"}
oTimeScale.SetOptions({timeZone: "-02:00"})
oTimeScale.TimeZone = "-02:00"
oTimeScale.SetTimeZone("-02:00")
Type:
  • string
Example
null {null}, no time delay is applied
"-02:00" {string}, delays the time scale with 2 hours earlier
"+03:00" {string}, adds a three hours to the current time
timeZone

(static) visible :boolean

The visible field indicates whether the time-scale header is visible or hidden. The time-scale header is the area of the time-scale that displays the time labels (such as hours, half-hours, minutes, etc.) corresponding to the time intervals represented by the time-scale. You can use the visible field to show or hide the time-scale header. When the time-scale header is hidden, the time labels and the time intervals are not displayed, allowing more space for the scheduling data. When the time-scale header is visible, it provides a reference for users to understand the timing of events. By default, the visible field is set to true, meaning that the time-scale header is shown.

The visible field is mapped to the Visible property of the TimeScale object, which means that the following statements are equivalent:

oTimeScale.Options = {visible: false}
oTimeScale.SetOptions({visible: false})
oTimeScale.Visible = false
oTimeScale.SetVisible(false)
Type:
  • boolean
Example
false {boolean}, hides the time-scale header
true {boolean}, shows the time-scale header
visible

(static) width :number

The width field defines the size of the time-scale header. The minWidth field defines the minimal size of the time-scale header. The maxWidth field defines the maximal size of the time-scale header. The allowResize field specifies whether the user can resize the time-scale header. The minWidth, maxWidth, width and allowResize fields are used together to control the resizing behavior of the time-scale header. If allowResize is set to true, the user can resize the time-scale header by dragging its edge. The minWidth and maxWidth fields specify the minimum and maximum size that the time-scale header can be resized to, while the width field specifies the initial size of the time-scale header. If allowResize is set to false, the user cannot resize the time-scale header, and the width field defines its fixed size. By default, width is 64, which means that the time-scale header is initially set to a size of 64.

The width field is mapped to the Width property of the TimeScale object, which means that the following statements are equivalent:

oTimeScale.Options = {width: 64}
oTimeScale.SetOptions({width: 64})
oTimeScale.Width = 64
oTimeScale.SetWidth(64)
Type:
  • number
Example
null {null}, Sets the time-scale's width to 0 (the time-scale header is shrunk to its minimal size)
64 {number}, Sets the size of the time-scale header to 64 (default value)
width