TimeScale class (Schedule)

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

true {boolean}, the user can resize the time-scale header by dragging its edge (default)
false {boolean}, the user cannot resize the time-scale header by dragging its edge

The Caption property defines the ex-HTML caption to be displayed on the top side of the time scale. The MajorTimeLabel and MajorTimeRuler properties control the display of the major rulers on the time-scale, while the MinorTimeLabel and MinorTimeRuler properties control the display of the minor rulers on the time-scale. The Caption property is used to display a custom caption on the top side of the time scale, which can provide additional information or context to users.

null {null}, no caption is displayed
"<b>time" {string}, displays the "time" caption in bold

The Cursor property defines the mouse cursor for the current time-scale header. The "timeScale" part of the Cursors property 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 property is explicitly set, it overrides the default mouse cursor for the time-scale header; otherwise, if the Cursor property is not specified, the default mouse cursor defined by the "timeScale" part is applied. By default, the Cursor property is null, meaning that no custom mouse cursor is applied (the default mouse cursor defined by the "timeScale" part may be applied).

The value of the Cursor property is a string expression that defines the mouse cursor for the time-scale itself, as one 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

"pointer" {string}, The cursor is a pointer that indicates a link (typically an image of a pointing hand)

The MajorTimeLabel property defines the label of the time-scale's major ruler. The MajorTimeRuler property indicates the increment for the time-scale's major ruler. Together, the MajorTimeLabel and MajorTimeRuler properties control the display of the major rulers on the time-scale. The MajorTimeRuler property specifies the time intervals at which the major rulers are displayed (for example, every hour, every 2 hours, etc.), while the MajorTimeLabel property 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 property is set to "<%hh%>:<%nn%> <%AM/PM%>", which means that the labels for the major rulers display hours and minutes in 12-hour format along with AM/PM indicators.

The MajorTimeLabel property 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

null {null}, the default label of the major ruler is "<%hh%>:<%nn%> <%AM/PM%>"
"<%hh%>:<%nn%>" {string}, displays the major ruler without AM/PM indicators (24-hours)

The MajorTimeRuler property defines the increment for the time-scale's major ruler. The format of the MajorTimeRuler property is "HH[:MM[:NN]]", where HH indicates hours, MM indicates minutes, and NN indicates seconds. The MajorTimeRuler property works together with the MajorTimeLabel property to control the display of the major rulers on the time-scale. The MajorTimeRuler property specifies the time intervals at which the major rulers are displayed (for example, every hour, every 2 hours, etc.), while the MajorTimeLabel property 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 MajorTimeRuler property is set to null, which means that major rulers are displayed from hour to hour (equivalent to "01:00").

null {null}, displays major rulers from hour to hour, equivalent of "01:00"
"02:00" {string}, displays the major rulers every 2 hours

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

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 cannot be resized to a size larger than 96 pixels (default)

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

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 cannot be resized to a size smaller than 32 pixels

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

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

null {null}, the default label of the minor ruler is ":<%nn%>"
"<%hh%>:<%nn%>" {string}, displays the minor ruler without AM/PM indicators (24-hours)

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

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

The Options property defines the time-scale's options (visibility, caption, ...) at once. This method allows you to update multiple settings of a time-scale in a single call, providing a convenient way to modify the time-scale's appearance and behavior on the control. You can pass an object of TimeScaleOptions type with the desired properties to change, and the method will apply those changes to the group accordingly.

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

shape {string}, defines the shape for the time-scale

is associated with the property:

Shape {string}, defines the shape for the time-scale

which means that the following statements are equivalent:

oTimeScale.Options = {shape: "red"}
oTimeScale.SetOptions({shape: "red"})
oTimeScale.Shape = "red"
oTimeScale.Shape("red")

It is important to note that changing a field of the Options object does not automatically update the time-scale. For example, oTimeScale.Options.allowResize = false does not apply the change. Instead, you must assign the Options property again, such as oTimeScale.SetOptions({allowResize: false}), so the control updates and applies the new value.

The following statements are equivalents:

 oTimeScale.Options = {shape: "red", allowResize: false}
 oTimeScale.SetOptions({shape: "red", allowResize: false})

where oTimeScale is an object of TimeScale type

The Shape property defines the custom shape for the time-scale header. Within the Shapes property 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 property is explicitly set, it overrides the default appearance of the time-scale header; otherwise, if the Shape property is not specified, the default shape defined by the "timeScale" part is applied. By default, the Shape property is null, meaning that no custom shape is applied (the default shape defined by the "timeScale" part may be applied).

The value of the Shape property could be any of the following:

• null, no custom-shape is applied on the object (default-shape may be applied instead)
• 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 itself
• an object of {normal,hover,click,disabled} type. The normal, hover, click and disabled are objects of exontrol.Def.Shape type

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)

The TimeZone property defines the time zone for the time scale. The format of the TimeZone property is "[+/-]HH[:MM[:NN]]", where HH indicates hours, MM indicates minutes, and NN indicates seconds. The TimeZone property is used to apply a time zone offset to the time scale. If the TimeZone property 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 shift the time scale by 2 hours earlier, while if you set it to "+03:00", it will shift it by 3 hours forward. By default, the TimeZone property 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.

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

The Visible property shows or hides the time-scale. The time-scale header is the area of the time-scale that displays the time labels (such as hours, half-hours, minutes, and so on) corresponding to the time intervals represented by the time-scale. You can use the SetVisible() method 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 property is set to true, meaning that the time-scale header is shown.

false {boolean}, hides the time-scale
true {boolean}, shows the time-scale

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

0 {number}, the time-scale header is set to a size of 0 (collapsed)
64 {number}, the time-scale header is initially set to a size of 64 (default)