new SV(oSchedule)
Defines the schedule view of the control, that displays the events. The schedule view is the main part of the control, where events are displayed. The control can display one or more schedule-views, but only one of them is active (visible) at a time. The
oSV field defines the control's base schedule-view. Use the
AddScheduleView() method to add a new view to the control.
RemoveScheduleView() method removes a schedule-view already created by AddScheduleView() method. The
ShowViewCompact property defines how days are arranged within the schedule view. The DayViewWidth and DayViewHeight options define the size of the day-view within the schedule-view.
Parameters:
| Name |
Type |
Description |
oSchedule |
Schedule
|
Specifies an object of Schedule type that defines the owner control of the view to be created. |
Methods
Copy()
The Copy() method copies the current selection of events (appointments) to the clipboard. The Cut, Copy, and
Paste methods work only when the control is visible. The Copy() method generates the data to export to the clipboard from the selected events by calling the
onCopy() method, and then sets this data in the clipboard. The onCopy() method can be overridden to customize the default data format for derived objects. By default, onCopy() returns an object of {e(vents)} type, where e(vents) is a collection of [{EventOptions}] objects representing the selected events (appointments). The clipboard data is stored as a JSON representation of the object returned by onCopy(), which can later be retrieved by the Paste() method through the Clipboard API.
- Since:
Example
The following samples demonstrate how to implement the Copy, Cut, and Paste methods for the control using the Clipboard API when the user presses the CTRL + C, CTRL + X, CTRL + V (the "See text and images copied to the clipboard /Allow/Block" message may occur due security permissions):
oSchedule.on("{CTRL + C}", oSchedule.Copy)
oSchedule.on("{CTRL + X}", oSchedule.Cut)
oSchedule.on("{CTRL + V}", oSchedule.Paste)
Please note that the control requires focus, so CTRL + C, CTRL + X or CTRL + V will work only when the control has focus. In the same manner, the tabIndex attribute must be present in the definition of the HTML element that hosts the control.
Copy
Cut()
The Cut() method moves the current selection of events (appointments) to the Clipboard. In short, the Cut() method copies the current selection to the clipboard by calling the
Copy() method, and then removes the selected events from the schedule by calling the
RemoveSelection() method. The Cut, Copy, and
Paste methods work only when the control is visible. The Cut() method is used to cut the selected events (appointments) to the clipboard, and the Paste() method is used to paste them back into the schedule.
- Since:
Example
The following samples demonstrate how to implement the Copy, Cut, and Paste methods for the control using the Clipboard API when the user presses CTRL + C, CTRL + X, CTRL + V (the "See text and images copied to the clipboard /Allow/Block" message may occur due to security permissions):
oSchedule.on("{CTRL + C}", oSchedule.Copy)
oSchedule.on("{CTRL + X}", oSchedule.Cut)
oSchedule.on("{CTRL + V}", oSchedule.Paste)
Please note that the control requires focus, so CTRL + C, CTRL + X or CTRL + V will work only when the control has focus. In the same manner, the tabIndex attribute must be present in the definition of the HTML element that hosts the control.
Cut
EnsureVisibleClient(clientA, ensureOptsopt)
The EnsureVisibleClient() method ensures that the specified client fits within the control's client area. The
EnsureVisibleDate() method scrolls the schedule view so the giving date(s) fit the view's client-rectangle. The
EnsureVisibleSelection() method is an alias of EnsureVisibleClient and ensures that the specified selection fits within the control's client area. The EnsureVisibleClient() method can adjust the control's scale or zoom factor to fully fit the client if the allowScale option is set to true. Additionally, if the nearestFit option is set to true, it ensures that the corner of the object nearest to the window's client area is visible; this option only applies when the object's size is larger than the window's client area.
Parameters:
| Name |
Type |
Attributes |
Description |
clientA |
object
|
|
The client parameter could be any of the following:
- clientA {number[]}, specifies an array of [x,y,width,height] type that indicates the absolute-coordinates of the layout-rectangle to fit into the control's client area
- clientA {Event}, indicates an object of {Event} type that indicates the event to fit the client area of the control
- clientA {MarkZone}, indicates an object of {MarkZone} type that indicates the mark-zone to fit the client area of the control
- clientA {Date}, indicates an object of {Date} type that indicates the date and time to fit the client area of the control
|
ensureOpts |
object
|
<optional>
|
Specifies different options to run the current method as explained:
- force {boolean}, forces the EnsureVisibleClient()'s smooth operation to run, not matter if no zoom/scale or scrol changed
- allowScale {boolean}, updates the control's scale/zoom-factor to ensure full-fit the client
- allowScroll {number}, specifies whether horizontal/vertical is allowed as explained:
- 3 {number}/{null}/{undefined}, allows scrolling horizontal and vertical as required
- 0 {number}, no horizontal or vertical scroll is allowed
- 1 {number}, horizontal scroll is allowed
- 2 {number}, vertical scroll is allowed
- nearestFit {boolean}, ensures that corner of the object nearest the window's client area fits it (it has effect only if the size of the object is greater than size of the window's client area)
- duration {number}, specifies the time in ms the control is smoothly performs the changes
- thisArg {any}, specifies the value of "this" keyword during the cbkI/cbkT callbacks
- cbkR {callback}, specifies a function of callback(p) type that's invoked once the EnsureVisibleClient()'s smooth operation runs (p {number}, specifies the progress of the smooth so far, as a value between 0 and 1)
- cbkI {callback}, specifies a function of callback() type that's invoked once the EnsureVisibleClient()'s smooth operation begins
- cbkT {callback}, specifies a function of callback() type that's invoked once the EnsureVisibleClient()'s smooth operation ends
|
Example
oSchedule.EnsureVisibleClient([100, 100, 50, 50]), ensures that the rectangle of [x:100,y:100,width:50,height:50] absolute-coordinates fits within the control's client area
oSchedule.EnsureVisibleClient(oSchedule.Event(0)), ensures that the event with id 0 fits within the control's client area
EnsureVisibleClient
EnsureVisibleDate(dateopt, flagsopt)
The EnsureVisibleDate() method scrolls the schedule view so the giving date(s) fit the view's client-rectangle. The
EnsureVisibleClient() method ensures that the specified client(event) fits within the control's client area. The
EnsureVisibleSelection() method is an alias of EnsureVisibleClient and ensures that the specified selection fits within the control's client area. The EnsureVisibleDate() method does nothing if the giving date(s) already fit the view's client-rectangle or the dates are not part of the view's layout (the view's layout contains all dates of one year). The EnsureVisibleDate() method can scroll horizontally and/or vertically as specified by the flags parameter.
Parameters:
| Name |
Type |
Attributes |
Description |
date |
any
|
<optional>
|
Specifies a date or a collection of dates to ensure that fits the view's client rectangle.
The date parameter can be one of the following:
- date {null|undefined}, ensures that the first visible date of the layout fits the schedule view's client area
- date {Date}, specifies a date to ensure that fits the view's client rectangle
- date {Date[]}, specifies an array of dates to ensure that fit the view's client rectangle
|
flags |
number
|
<optional>
|
Specifies the flags to run the EnsureVisibleDate() method as explained:
- 1 {number}, allows horizontal scroll
- 2 {number}, allows vertical scroll
If flags is missing, the method uses the default value of 3, which allows both horizontal and vertical scroll. |
Example
oSchedule.EnsureVisibleDate(), ensures that the first visible date of the layout fits the schedule view's client area
oSchedule.EnsureVisibleDate(new Date(2021,0,1)), ensures that Jan 1st, 2021 fits within the control's client area
EnsureVisibleDate
EnsureVisibleSelection(ensureOptsopt)
The EnsureVisibleSelection() method scrolls the schedule's view to ensure that the current selection of events (appointments) is visible within the control's client area. The
Selection property can be used to set or retrieve the selected events. The
EnsureVisibleDate() method can be used to ensure that specific date(s) fit within the schedule's view. The
EnsureVisibleClient() method can be used to ensure that a specific client (event or time range) fits within the schedule's view. The EnsureVisibleSelection() method retrieves the current selection and determines the time range that covers all selected events. It then calls the EnsureVisibleClient() method with the calculated range to adjust the view accordingly. This ensures that all selected events are visible within the schedule, providing a better user experience when working with selections.
Parameters:
| Name |
Type |
Attributes |
Description |
ensureOpts |
object
|
<optional>
|
Specifies different options to run the current method as explained:
- selection {array}, holds an array of events as [Event] type to fit into current-view (if not specified, the method uses the current selection of the control)
- duration {number}, specifies the time in ms the control is smoothly performs the changes (0 indicates no animation, the default value is the control's smooth value)
|
Example
oSchedule.EnsureVisibleSelection(), scrolls the schedule's view to ensure that the current selection fits within the visible area
EnsureVisibleSelection
FitToClient(range)
The FitToClient() method ensures that the entire schedule (if null/undefined) or a specified time range fits within the control's visible area. The FitToClient() method is typically used to fit the entire schedule or a specific time interval into the control's view, while the
EnsureVisibleClient() method is used to ensure that a specific client (event or time range) is visible within the schedule. The
EnsureVisibleSelection() method ensures that the current selection of events fits within the visible area. The
Home() method resets the view (zoom level, if applicable) and scrolls the schedule to its initial position.
Parameters:
| Name |
Type |
Description |
range |
any
|
Indicates null for the entire schedule or a value that defines the time range to fit into view (for example, a start/end date or equivalent structure). |
Example
oSchedule.FitToClient(), fits the entire schedule into the control's visible area
FitToClient
GetAllowActions() → {string}
The GetAllowActions() method gets the actions the user can perform once the control is clicked or touched. 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.
Returns:
Returns the actions the user can perform once the control is clicked or touched
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
-
Type
-
string
Example
The following statements are equivalent:
oSchedule.GetAllowActions() {string}, gets the actions the user can perform once the control is clicked or touched
oSchedule.AllowActions {string}, gets the actions the user can perform once the control is clicked or touched
where oSchedule is an instance of Schedule control.
GetAllowActions
The GetAllowAllDayEventScroll() method gets how many event levels the all-day header can display at a time. The
ShowAllDayHeader property specifies whether the all-day header is visible, while the HeaderAllDayEventHeight property defines the height of events displayed within it, relative to the control's font size. By default, the AllowAllDayEventScroll property is set to null, meaning the all-day header displays as many events as can fit.
Returns:
Returns the number of events the all-day header can display one at the time, as explained:
- 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)
-
Type
-
null
|
number
|
Array.<number>
Example
The following statements are equivalent:
oSchedule.GetAllowAllDayEventScroll() {null|number|number[]}, gets how many event levels the all-day header can display at a time
oSchedule.AllowAllDayEventScroll {null|number|number[]}, gets how many event levels the all-day header can display at a time
where oSchedule is an instance of the Schedule control.
GetAllowAllDayEventScroll
GetAllowMoveEventToOtherGroup() → {boolean}
The GetAllowMoveEventToOtherGroup() method 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 the ShowGroupingEvents property). When grouping is enabled, each date is divided into sections for each group, with the group name displayed in the header of each section. If AllowMoveEventToOtherGroup is set to True (default), users can move events between groups by drag and drop; if set to False, moving events between groups is not allowed.
Returns:
Returns true if the event can be moved from a group to another
-
Type
-
boolean
Example
The following statements are equivalent:
oSchedule.GetAllowMoveEventToOtherGroup() {boolean}, gets whether the event can be moved from a group to another by drag and drop
oSchedule.AllowMoveEventToOtherGroup {boolean}, gets whether the event can be moved from a group to another by drag and drop
where oSchedule is an instance of the Schedule class.
GetAllowMoveEventToOtherGroup
GetAllowMultiDaysEvent() → {boolean}
The GetAllowMultiDaysEvent() method specifies whether users can create events that span multiple days. The
ShowAllDayHeader property controls whether the all-day header is visible, while the HeaderAllDayEventHeight property defines the height of events displayed within the all-day header, relative to the control's font size. By default, the AllowMultiDaysEvent property is set to True, allowing users to create or resize multi-day events using drag and drop. When set to False, users can create or resize only single-day events.
Returns:
Returns a truthy value if user can create or resizes multi-dates events
-
Type
-
boolean
Example
The following statements are equivalent:
oSchedule.GetAllowMultiDaysEvent() {boolean}, specifies whether users can create events that span multiple days
oSchedule.AllowMultiDaysEvent {boolean}, specifies whether users can create events that span multiple days
where oSchedule is an instance of the Schedule control.
GetAllowMultiDaysEvent
GetApplyGroupingColors() → {boolean}
The GetApplyGroupingColors() method specifies whether the schedule view displays events using the colors of their owner groups (based on the Group.EventShape property). When set to True, events inherit the shape and color of their owner group unless they define their own EventShape, in which case the event's custom appearance is used. When set to False, all events are displayed using their own shape and color, without applying group-based styling. The AllowMoveEventToOtherGroup property indicates whether an event can be moved from one group to another using drag and drop. By default, the
ApplyGroupingColors property is set to True.
Returns:
Returns true if the grouping button is displayed in the date header.
-
Type
-
boolean
Example
The following statements are equivalent:
oSchedule.GetApplyGroupingColors() {boolean}, gets whether the schedule view shows the events using the colors of owner groups
oSchedule.ApplyGroupingColors {boolean}, gets whether the schedule view shows the events using the colors of owner groups
where oSchedule is an instance of the Schedule class.
GetApplyGroupingColors
The GetBackground() method gets 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.
Returns:
Returns the display options to show different parts of the control
-
Type
-
BackgroundOptions
Example
The following statements are equivalent:
oSchedule.GetBackground() {object}, returns the display options to show different parts of the control as an object of BackgroundOptions type
oSchedule.Background {object}, returns the display options to show different parts of the control as an object of BackgroundOptions type
where oSchedule is an instance of the Schedule control.
GetBackground
GetCalendar() → {object}
The GetCalendar() method gets the options applied to the internal calendar control, as an object of
exontrol.Calendar.Options. By default, the control displays a calendar in the left panel, allowing users to quickly navigate to specific dates. The
Calendar property is an object that contains various settings to customize the appearance and behavior of this calendar. The options include settings such as the calendar's view mode (month, year, decade), locale, first day of the week, and other visual and functional aspects. The
OnResizeControl property defines which panel should be resized when the entire control is resized.
Returns:
Returns the current options of the inside calendar control, as an object of {exontrol.Calendar.Options} type
-
Type
-
object
Example
console.log(oSchedule.GetCalendar()), logs the current options of the inside calendar control, as an object of {exontrol.Calendar.Options} type, to the console
GetCalendar
GetCreateEventLabel() → {string}
The GetCreateEventLabel() method specifies the label displayed while creating events, while the UpdateEventsLabel property defines the label shown when moving or resizing events. The FormatEventShortLabel and FormatEventLongLabel options define how these labels are formatted. These properties support
ex-HTML tags (such as <b>, <i>, <fgcolor>, ...), as well as <%=formula%> tags. The <%=formula%> tag evaluates a
format expression that can include placeholders like %1, %2, and so on, where each placeholder corresponds to a specific event property (for example, %1 refers to ExEventStartDateTime, %2 to ExEventEndDateTime). By default, the CreateEventLabel property 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 event's short margins on the first line and its duration (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.
Returns:
Returns the event's label while it is created by drag and drop
-
Type
-
string
Example
The following statements are equivalent:
oSchedule.GetCreateEventLabel() {string}, specifies the label displayed while creating events
oSchedule.CreateEventLabel {string}, specifies the label displayed while creating events
where oSchedule is an instance of the Schedule control.
GetCreateEventLabel
GetCursors() → {string}
The GetCursors() method specifies the mouse cursor displayed when pointing over different parts of the control. Customizable parts include events, date headers, time scales, and more. By defining the
Cursors property, you can enhance the user experience by providing visual feedback that indicates the interactivity of various elements. For example, setting "pointer(event)" changes the cursor to a pointer (hand) when hovering over events, indicating that they are clickable or draggable.
Returns:
A string expression that defines the mouse cursor to display when pointing over different parts of the control.
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 |
-
Type
-
string
Example
The following statements are equivalent:
oSchedule.GetCursors() {string}, returns the current cursor settings
oSchedule.Cursors {string}, returns the current cursor settings
where oSchedule is an instance of the Schedule control
GetCursors
GetDayEndTime() → {string}
The GetDayEndTime() method gets the time at which the day ends, using the "HH[:MM[:NN]]" format, while the
DayStartTime property specifies the time at which the day begins using the same format. If these properties are not set, the schedule view defaults to a range from 8:00 AM to 4:00 PM. The values of DayStartTime and DayEndTime are used to calculate the height of the schedule's rows and to determine the position of events within the view. If an event starts before DayStartTime or ends after DayEndTime, the control clips the event to the visible area and displays a small arrow at the top or bottom to indicate that it continues outside the view. The
TimeScale property holds options to apply on the control's time-scale, as an object of
TimeScaleOptions type.
Returns:
Returns the time the day ends at, in "HH[:MM[:NN]]" format, where HH represents hours in 24-hour format, MM represents minutes, and NN represents seconds. The MM and NN parts are optional. For example, "08:00" or "08:00:00" represent 8 AM, while "16:00" or "16:00:00" represent 4 PM.
-
Type
-
string
Example
The following statements are equivalent:
oSchedule.GetDayEndTime() {string}, gets the time the day ends at
oSchedule.DayEndTime {string}, gets the time the day ends at
where oSchedule is an instance of the Schedule class.
GetDayEndTime
GetDayStartTime() → {string}
The GetDayStartTime() method gets the time at which the day begins, using the "HH[:MM[:NN]]" format, while the
DayEndTime property specifies the time at which the day ends using the same format. If these properties are not set, the schedule view defaults to a range from 8:00 AM to 4:00 PM. The values of DayStartTime and DayEndTime are used to calculate the height of the schedule's rows and to determine the position of events within the view. If an event starts before DayStartTime or ends after DayEndTime, the control clips the event to the visible area and displays a small arrow at the top or bottom of the event to indicate that it continues outside the view. The
TimeScale property holds options to apply on the control's time-scale, as an object of
TimeScaleOptions type.
Returns:
Returns the time the day starts at, in "HH[:MM[:NN]]" format, where HH represents hours in 24-hour format, MM represents minutes, and NN represents seconds. The MM and NN parts are optional. For example, "08:00" or "08:00:00" represent 8 AM, while "16:00" or "16:00:00" represent 4 PM.
-
Type
-
string
Example
The following statements are equivalent:
oSchedule.GetDayStartTime() {string}, gets the time the day starts at
oSchedule.DayStartTime {string}, gets the time the day starts at
where oSchedule is an instance of the Schedule class.
GetDayStartTime
GetDayViewHeight() → {number}
The GetDayViewHeight() method gets the height of a day within the schedule panel, while the
DayViewWidth property specifies its width. The
ShowViewCompact property determines how days are arranged within the schedule view. The
DayViewHeight property has no effect when ShowViewCompact is set to exViewSingleRow or exViewSingleRowLockHeader, while the DayViewWidth property has no effect when ShowViewCompact is set to 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.
Returns:
Returns the height of the day within the schedule panel
-
Type
-
number
Example
The following statements are equivalent:
oSchedule.GetDayViewHeight() {number}, returns the height of the day within the schedule panel
oSchedule.DayViewHeight {number}, returns the height of the day within the schedule panel
where oSchedule is an instance of the Schedule control.
GetDayViewHeight
GetDayViewWidth() → {number}
The GetDayViewWidth() method specifies the width of a day within the schedule panel, while the
DayViewHeight property specifies its height. The
ShowViewCompact property determines how days are arranged within the schedule view. The
DayViewWidth property has no effect when ShowViewCompact is set to exViewSingleColumn, while the DayViewHeight property has no effect when ShowViewCompact is set to 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.
Returns:
Returns the width of the day within the schedule panel
-
Type
-
number
Example
The following statements are equivalent:
oSchedule.GetDayViewWidth() {number}, returns the width of the day within the schedule panel
oSchedule.DayViewWidth {number}, returns the width of the day within the schedule panel
where oSchedule is an instance of the Schedule control.
GetDayViewWidth
The GetDefaultEventExtraLabel() method the default extra label for events. This property supports
ex-HTML as well as <%=formula%> tags, where each formula evaluates to a value based on event properties. Placeholders such as %0, %1, %2, and so on correspond to specific event properties—for example, %1 refers to ExEventStartDateTime, %2 to ExEventEndDateTime, and so on. The extra label is displayed within the body of the event and is always shown if it is not empty. The event's caption and label are always displayed. By default, the DefaultEventExtraLabel property is set to an empty string (""), meaning no extra label is displayed unless explicitly defined.
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.
Returns:
Returns the event's default extra-label
-
Type
-
string
Example
The following statements are equivalent:
oSchedule.GetDefaultEventExtraLabel() {string}, returns the event's default extra-label
oSchedule.DefaultEventExtraLabel {string}, returns the event's default extra-label
where oSchedule is an instance of Schedule.
GetDefaultEventExtraLabel
GetDefaultEventLongLabel() → {string}
The GetDefaultEventLongLabel() method gets the default long label for events. The Event.
LongLabel property defines the event's custom long-label. This property supports
ex-HTML as well as <%=formula%> tags, where each formula evaluates to a value based on event properties. Placeholders like %0, %1, %2, etc., correspond to specific event properties—for example, %1 refers to ExEventStartDateTime, %2 to ExEventEndDateTime, and so on. The event's long label is displayed only if it is not empty and fits within the event. If the long label is empty or does not fit, the short label is displayed instead. The event's caption and extra label are always shown. By default, the DefaultEventLongLabel property is set to "<%=%256%>", which displays 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.
Returns:
Returns the event's default long-label
-
Type
-
string
Example
The following statements are equivalent:
oSchedule.GetDefaultEventLongLabel() {string}, returns the event's default long-label
oSchedule.DefaultEventLongLabel {string}, returns the event's default long-label
where oSchedule is an instance of Schedule.
GetDefaultEventLongLabel
GetDefaultEventShortLabel() → {string}
The GetDefaultEventShortLabel() method gets the default short label for events. The Event.
ShortLabel field specifies a custom short label for the event. This property supports
ex-HTML as well as <%=formula%> tags, where each formula evaluates to a value based on event properties. Placeholders like %0, %1, %2, etc., correspond to specific event properties—for example, %1 refers to ExEventStartDateTime, %2 to ExEventEndDateTime, and so on. The event's long label is displayed if it is not empty and fits within the event. The short label is displayed only when the long label is empty or does not fit. The event's caption and extra label are always displayed. By default, the DefaultEventShortLabel property is set to an empty string (""), meaning events have no short label unless explicitly defined.
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.
Returns:
Returns the event's default short-label
-
Type
-
string
Example
The following statements are equivalent:
oSchedule.GetDefaultEventShortLabel() {string}, returns the event's default short-label
oSchedule.DefaultEventShortLabel {string}, returns the event's default short-label
where oSchedule is an instance of Schedule.
GetDefaultEventShortLabel
The GetDefaultEventToolTip() method gets the default tooltip for events, which is displayed when the mouse hovers over an event. This property allows you to set a tooltip for all events without defining it individually for each one. The Event.
ToolTip property defines the custom tooltip of the event, displayed when the cursor hovers over it. The DefaultEventToolTip property supports dynamic placeholders that are replaced with the corresponding values of the event when the tooltip is shown. 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, it 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)' : '')%>". This default setting ensures that each event's tooltip displays its start and end date/time, as well as its duration in days, hours, and minutes.
The following properties are supported in the DefaultEventToolTip property:
- %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.
Returns:
Returns the event's default tooltip
-
Type
-
string
Example
The following statements are equivalent:
oSchedule.GetDefaultEventToolTip() {string}, gets the event's default tooltip
oSchedule.DefaultEventToolTip {string}, gets the event's default tooltip
where oSchedule is an instance of the Schedule class.
GetDefaultEventToolTip
The GetDisplayGroupingButton() method gets whether the grouping button is displayed in the date header, while the ShowGroupingEvents property specifies whether the schedule view displays grouped events. The grouping button allows users to toggle the visibility of grouped events within the schedule view. When clicked, it shows or hides event groups. The
DisplayGroupingButton property has effect only when the control includes groups. By default, the grouping button is not displayed in the date header (false).
The grouping button is displayed if:
- DisplayGroupingButton property is true
- ShowGroupingEvents property is true
The control displays groups if:
- ShowGroupingEvents property is true
- The Groups collection has visible elements. By default, the Groups collection contains no Group objects
Returns:
Returns true if the grouping button is displayed in the date header.
-
Type
-
boolean
Example
The following statements are equivalent:
oSchedule.GetDisplayGroupingButton() {boolean}, gets whether the grouping button is displayed in the date header
oSchedule.DisplayGroupingButton {boolean}, gets whether the grouping button is displayed in the date header
where oSchedule is an instance of the Schedule class.
GetDisplayGroupingButton
GetFormatText() → {exontrol.DrawTextFormatEnum}
The GetFormatText() method specifies how event (appointment) captions are displayed. It is a bitwise combination of flags that control alignment, word-breaking, tab expansion, and other aspects of text rendering within the control. For example, you can align text to the center, enable word-breaking for long captions, or display text on a single line. The exontrol.DrawTextFormatEnum type defines the flags that can be combined to achieve the desired formatting. By default, the
FormatText property is set to exTextAlignRight | exTextAlignBottom | exTextSingleLine | exTextWordEllipsis, meaning that captions are right-aligned, bottom-aligned, displayed on a single line, and truncated with ellipses if they exceed the available space.
The following properties and fields can be used to specify the format for different captions and labels within the control:
-
Event captions and labels
- The FormatText property 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
Returns:
Returns a value of exontrol.DrawTextFormatEnum type, that defines the format to display the event's caption.
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.
-
Type
-
exontrol.DrawTextFormatEnum
Example
The following statements are equivalent:
oSchedule.GetFormatText() {exontrol.DrawTextFormatEnum}, gets the current format to display the event's caption
oSchedule.FormatText {exontrol.DrawTextFormatEnum}, gets the current format to display the event's caption
where oSchedule is an instance of Schedule control.
GetFormatText
The GetHeaderAllDayEventHeight() method gets the height of events displayed within the all-day header, relative to the control's font size. The
ShowAllDayHeader property specifies whether the all-day header is visible. The all-day header is a dedicated section within the schedule control used to display events that span an entire day or more. By default, the HeaderAllDayEventHeight property is set to 1, meaning the height of events in the all-day header matches the control's font size.
Returns:
Returns the height of the events to display within the all-day header (relative to the font-size of the control)
-
Type
-
number
Example
The following statements are equivalent:
oSchedule.GetHeaderAllDayEventHeight() {number}, gets the height of the events to display within the all-day header
oSchedule.HeaderAllDayEventHeight {number}, gets the height of the events to display within the all-day header
where oSchedule is an instance of the Schedule control.
GetHeaderAllDayEventHeight
The GetHeaderDayHeight() method gets the height of the day's header relative to the control's font size. It can be set to a specific value (for example, 2) to make the header height twice the font size, or set to null to use the default value of 1.5 times the font size (150%). Setting the
HeaderDayHeight property to 0 hides the day's header. The day's header is the area within the schedule view that displays the day's name or number, and adjusting its height can improve readability and visual clarity, making it easier to distinguish between days.
Returns:
Returns the height of the day's header (relative to the font-size of the control)
-
Type
-
number
Example
The following statements are equivalent:
oSchedule.GetHeaderDayHeight() {number}, returns the height of the day's header (relative to the font-size of the control)
oSchedule.HeaderDayHeight {number}, returns the height of the day's header (relative to the font-size of the control)
where oSchedule is an instance of the Schedule control.
GetHeaderDayHeight
The GetHeaderDayLongLabel() method gets the alternate HTML labels displayed in the day's header when the time scale is visible, while the
HeaderDayShortLabel property defines alternate HTML labels when the time scale is hidden. The format of the
HeaderDayLongLabel property is "ALT1[<|>ALT2<|>...][<=>EXPR]", where each ALT represents an HTML label that can include predefined built-in tags, and EXPR is an expression used to determine which label is displayed. 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 value | 1 - 31 |
| <%dd%> | Day of the month using exactly two numeric digits | 01 - 31 |
| <%d1%> | Weekday using its first letter | S - S |
| <%loc_d1%> | Weekday as a single-letter abbreviation based on the current user settings | S - S |
| <%d2%> | Weekday using its first two letters | Su - Sa |
| <%loc_d2%> | Weekday as a two-letter abbreviation based on the current user settings | Su - Sa |
| <%d3%> | Weekday using its first three letters | Sun - Sat |
| <%ddd%> | Weekday using its first three letters | Sun - 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 settings | Sun - Sat |
| <%dddd%> | Full name of the weekday | Sunday - Saturday |
| <%loc_dddd%> | Full weekday name based on the current user regional and language settings | Sunday - Saturday |
| <%w%> | Numeric day of the week | 1 - 7 |
| <%y%> | Numeric day of the year | 1 - 366 |
| (week-patterns) |
| <%ww%> | Week of the year | 1 - 53 |
| (month-patterns) |
| <%m%> | Month of the year using one or two numeric digits, as needed | 1 - 12 |
| <%mm%> | Month of the year using exactly two numeric digits | 01 - 12 |
| <%mr%> | Month of the year using Roman numerals, as needed | I - XII |
| <%m1%> | Month using its first letter | J - D |
| <%loc_m1%> | Month as a single-letter abbreviation based on the current user settings | J - D |
| <%m2%> | Month using its first two letters | Ja - De |
| <%loc_m2%> | Month as a two-letter abbreviation based on the current user settings | Ja - De |
| <%m3%> | Month using its first three letters | Jan - Dec |
| <%mmm%> | Month using its first three letters | Jan - 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 settings | Jan - Dec |
| <%mmmm%> | Full name of the month | January - December |
| <%loc_mmmm%> | Full month name based on the current user regional and language settings | January - December |
| (year-patterns) |
| <%q%> | Date shown as the quarter of the year | 1 - 4 |
| <%hy%> | Date shown as the half of the year | 1 - 2 |
| <%loc_y%> | Year represented by the last digit only, based on the current regional settings | 0 - 9 |
| <%yy%> | Last two digits of the year | 01 - 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 years | 01 - 99 |
| <%yyyy%> | Full year using four digits | 0100 - 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 applied | 0100 - 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 UTC | 1767085565940 |
| (localized era-patterns) |
| <%loc_g%> | Period/era based on the current user regional and language settings | A,B |
| <%loc_gg%> | Period/era based on the current user regional and language settings | AD,BC |
| (localized date-patterns) |
| <%loc_sdate%> | Date in short format based on the current user regional and language settings | 12/31/2000 |
| <%loc_ldate%> | Date in long format based on the current user regional and language settings | December 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 needed | 0 - 23 |
| <%hh%> | Hour in two digits | 00 - 23 |
| <%h12%> | Hour in 12-hour format, in one or two digits | 0/12 - 11 |
| <%hh12%> | Hour in 12-hour format, in two digits | 00/12 - 11 |
| <%n%> | Minute in one or two digits, as needed | 0 - 59 |
| <%nn%> | Minute in two digits | 00 - 59 |
| <%s%> | Second in one or two digits, as needed | 0 - 59 |
| <%ss%> | Second in two digits | 00 - 59 |
| <%AM/PM%> | 12-hour clock with uppercase "AM" or "PM" as appropriate | AM, PM |
| (localized time-patterns) |
| <%loc_AM/PM%> | Time marker such as AM or PM based on the current user regional and language settings | AM, PM |
| <%loc_A/P%> | Single-character time marker such as A or P based on the current user regional and language settings | A, P |
| <%loc_time%> | Time based on the current user regional and language settings | 1:30:15 PM |
| <%loc_time24%> | Time in 24-hour format without a time marker based on the current user regional and language settings | 13:30:15 |
| <%loc_tsep%> | Time separator based on the current user regional and language settings | : |
Returns:
Returns the alternate HTML labels being shown on date's header, when the time-scale is visible.
-
Type
-
string
Example
The following statements are equivalent:
oSchedule.GetHeaderDayLongLabel() {string}, returns the alternate HTML labels being shown on date's header, when the time-scale is visible
oSchedule.HeaderDayLongLabel {string}, returns the alternate HTML labels being shown on date's header, when the time-scale is visible
where oSchedule is an instance of the Schedule control.
GetHeaderDayLongLabel
The GetHeaderDayShortLabel() method gets the alternate HTML labels displayed in the day's header when the time scale is hidden, while the
HeaderDayLongLabel property defines alternate HTML labels when the time scale is visible. The format of the
HeaderDayShortLabel property is "ALT1[<|>ALT2<|>...][<=>EXPR]", where each ALT represents an HTML label that supports predefined built-in tags, and EXPR is an expression used to determine which label is displayed. 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 value | 1 - 31 |
| <%dd%> | Day of the month using exactly two numeric digits | 01 - 31 |
| <%d1%> | Weekday using its first letter | S - S |
| <%loc_d1%> | Weekday as a single-letter abbreviation based on the current user settings | S - S |
| <%d2%> | Weekday using its first two letters | Su - Sa |
| <%loc_d2%> | Weekday as a two-letter abbreviation based on the current user settings | Su - Sa |
| <%d3%> | Weekday using its first three letters | Sun - Sat |
| <%ddd%> | Weekday using its first three letters | Sun - 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 settings | Sun - Sat |
| <%dddd%> | Full name of the weekday | Sunday - Saturday |
| <%loc_dddd%> | Full weekday name based on the current user regional and language settings | Sunday - Saturday |
| <%w%> | Numeric day of the week | 1 - 7 |
| <%y%> | Numeric day of the year | 1 - 366 |
| (week-patterns) |
| <%ww%> | Week of the year | 1 - 53 |
| (month-patterns) |
| <%m%> | Month of the year using one or two numeric digits, as needed | 1 - 12 |
| <%mm%> | Month of the year using exactly two numeric digits | 01 - 12 |
| <%mr%> | Month of the year using Roman numerals, as needed | I - XII |
| <%m1%> | Month using its first letter | J - D |
| <%loc_m1%> | Month as a single-letter abbreviation based on the current user settings | J - D |
| <%m2%> | Month using its first two letters | Ja - De |
| <%loc_m2%> | Month as a two-letter abbreviation based on the current user settings | Ja - De |
| <%m3%> | Month using its first three letters | Jan - Dec |
| <%mmm%> | Month using its first three letters | Jan - 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 settings | Jan - Dec |
| <%mmmm%> | Full name of the month | January - December |
| <%loc_mmmm%> | Full month name based on the current user regional and language settings | January - December |
| (year-patterns) |
| <%q%> | Date shown as the quarter of the year | 1 - 4 |
| <%hy%> | Date shown as the half of the year | 1 - 2 |
| <%loc_y%> | Year represented by the last digit only, based on the current regional settings | 0 - 9 |
| <%yy%> | Last two digits of the year | 01 - 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 years | 01 - 99 |
| <%yyyy%> | Full year using four digits | 0100 - 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 applied | 0100 - 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 UTC | 1767085565940 |
| (localized era-patterns) |
| <%loc_g%> | Period/era based on the current user regional and language settings | A,B |
| <%loc_gg%> | Period/era based on the current user regional and language settings | AD,BC |
| (localized date-patterns) |
| <%loc_sdate%> | Date in short format based on the current user regional and language settings | 12/31/2000 |
| <%loc_ldate%> | Date in long format based on the current user regional and language settings | December 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 needed | 0 - 23 |
| <%hh%> | Hour in two digits | 00 - 23 |
| <%h12%> | Hour in 12-hour format, in one or two digits | 0/12 - 11 |
| <%hh12%> | Hour in 12-hour format, in two digits | 00/12 - 11 |
| <%n%> | Minute in one or two digits, as needed | 0 - 59 |
| <%nn%> | Minute in two digits | 00 - 59 |
| <%s%> | Second in one or two digits, as needed | 0 - 59 |
| <%ss%> | Second in two digits | 00 - 59 |
| <%AM/PM%> | 12-hour clock with uppercase "AM" or "PM" as appropriate | AM, PM |
| (localized time-patterns) |
| <%loc_AM/PM%> | Time marker such as AM or PM based on the current user regional and language settings | AM, PM |
| <%loc_A/P%> | Single-character time marker such as A or P based on the current user regional and language settings | A, P |
| <%loc_time%> | Time based on the current user regional and language settings | 1:30:15 PM |
| <%loc_time24%> | Time in 24-hour format without a time marker based on the current user regional and language settings | 13:30:15 |
| <%loc_tsep%> | Time separator based on the current user regional and language settings | : |
Returns:
Returns the alternate HTML labels being shown on date's header, when the time-scale is not visible.
-
Type
-
string
Example
The following statements are equivalent:
oSchedule.GetHeaderDayShortLabel() {string}, gets the format of the alternate HTML labels being shown on date's header, when the time-scale is not visible
oSchedule.HeaderDayShortLabel {string}, gets the format of the alternate HTML labels being shown on date's header, when the time-scale is not visible
where oSchedule is an instance of the Schedule class.
GetHeaderDayShortLabel
The GetHeaderGroupHeight() method gets the height of the group's header (relative to the font size of the control). The
HeaderGroupHeight property is used to calculate the height of the group's header when the control displays groups. If the HeaderGroupHeight property is set to 0, the control hides the group's header and does not display the name of the group. If the HeaderGroupHeight property 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 property to 2. By default, the HeaderGroupHeight property 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 property is true
- The Groups collection has visible elements. By default, the Groups collection contains no Group objects
Returns:
Returns the height of the group's header (relative to the font-size of the control)
-
Type
-
number
Example
The following statements are equivalent:
oSchedule.GetHeaderGroupHeight() {number}, gets the height of the group's header
oSchedule.HeaderGroupHeight {number}, gets the height of the group's header
where oSchedule is an instance of the Schedule class.
GetHeaderGroupHeight
GetImageAlign() → {number}
The GetImageAlign() method gets the alignment of the image within the event, while the
ImageSize property defines its dimensions (reserved for future use only). Together, these properties control how the image is displayed within the event, with ImageSize specifying the image's size and ImageAlign determining its position relative to the caption.
Returns:
Returns the alignment of the event's image as explained:
- 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
-
Type
-
number
Example
The following statements are equivalent:
oSchedule.GetImageAlign() {number}, gets the alignment of the event's image
oSchedule.ImageAlign {number}, gets the alignment of the event's image
where oSchedule is an instance of Schedule control.
GetImageAlign
GetImageSize() → {any}
The GetImageSize() method gets the size of the event's image, and the
ImageAlign property defines its alignment within the event (reserved for future use only). Together, they control how the image is displayed relative to the caption. ImageSize sets the image dimensions, while ImageAlign determines its position in relation to the caption. For captions or labels that support
ex-HTML formatting, images can be included using the
![]()
ex-HTML tag; however, ImageSize does not affect these images. The
![]()
tag supports a size attribute to specify the image's dimensions, for example:
![]()
apple:182002 sets the image named "apple" to size 18.
Returns:
Returns the size, range of limits the event's image is displayed as expalined:
- {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.
-
Type
-
any
Example
The following statements are equivalent:
oSchedule.GetImageSize() {any}, gets the size of the event's image
oSchedule.ImageSize {any}, gets the size of the event's image
where oSchedule is an instance of Schedule control.
GetImageSize
GetLocked() → {boolean}
The GetLocked() method specifies whether the control is locked(protected) or unlocked.
- When Locked is set to True, the control is fully locked, and users cannot scroll, select, or interact with any events within it
- When Locked is set to False, the control behaves normally, allowing users to scroll, select, and interact with events
In contrast, when the control is in read-only mode, users cannot create, resize, or move events, but they can still scroll, select, and interact with existing events. Therefore, the locked mode completely prevents user interaction with the control, while read-only mode only prevents modifications to events.
Returns:
Returns true, if the control is locked(protected) or unlocked
-
Type
-
boolean
Example
The following statements are equivalent:
oSchedule.GetLocked() {boolean}, specifies whether the control is locked(protected) or unlocked
oSchedule.Locked {boolean}, specifies whether the control is locked(protected) or unlocked
where oSchedule is an instance of Schedule control
GetLocked
The GetLongDateFormat() method specifies how dates are displayed in long form (date only, without time). This property supports
ex-HTML 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 dates in long format according to the
LongDateFormat and
LongTimeFormat properties. For example, if LongDateFormat is set to "<%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 property 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 value | 1 - 31 |
| <%dd%> | Day of the month using exactly two numeric digits | 01 - 31 |
| <%d1%> | Weekday using its first letter | S - S |
| <%loc_d1%> | Weekday as a single-letter abbreviation based on the current user settings | S - S |
| <%d2%> | Weekday using its first two letters | Su - Sa |
| <%loc_d2%> | Weekday as a two-letter abbreviation based on the current user settings | Su - Sa |
| <%d3%> | Weekday using its first three letters | Sun - Sat |
| <%ddd%> | Weekday using its first three letters | Sun - 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 settings | Sun - Sat |
| <%dddd%> | Full name of the weekday | Sunday - Saturday |
| <%loc_dddd%> | Full weekday name based on the current user regional and language settings | Sunday - Saturday |
| <%w%> | Numeric day of the week | 1 - 7 |
| <%y%> | Numeric day of the year | 1 - 366 |
| (week-patterns) |
| <%ww%> | Week of the year | 1 - 53 |
| (month-patterns) |
| <%m%> | Month of the year using one or two numeric digits, as needed | 1 - 12 |
| <%mm%> | Month of the year using exactly two numeric digits | 01 - 12 |
| <%mr%> | Month of the year using Roman numerals, as needed | I - XII |
| <%m1%> | Month using its first letter | J - D |
| <%loc_m1%> | Month as a single-letter abbreviation based on the current user settings | J - D |
| <%m2%> | Month using its first two letters | Ja - De |
| <%loc_m2%> | Month as a two-letter abbreviation based on the current user settings | Ja - De |
| <%m3%> | Month using its first three letters | Jan - Dec |
| <%mmm%> | Month using its first three letters | Jan - 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 settings | Jan - Dec |
| <%mmmm%> | Full name of the month | January - December |
| <%loc_mmmm%> | Full month name based on the current user regional and language settings | January - December |
| (year-patterns) |
| <%q%> | Date shown as the quarter of the year | 1 - 4 |
| <%hy%> | Date shown as the half of the year | 1 - 2 |
| <%loc_y%> | Year represented by the last digit only, based on the current regional settings | 0 - 9 |
| <%yy%> | Last two digits of the year | 01 - 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 years | 01 - 99 |
| <%yyyy%> | Full year using four digits | 0100 - 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 applied | 0100 - 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 UTC | 1767085565940 |
| (localized era-patterns) |
| <%loc_g%> | Period/era based on the current user regional and language settings | A,B |
| <%loc_gg%> | Period/era based on the current user regional and language settings | AD,BC |
| (localized date-patterns) |
| <%loc_sdate%> | Date in short format based on the current user regional and language settings | 12/31/2000 |
| <%loc_ldate%> | Date in long format based on the current user regional and language settings | December 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 needed | 0 - 23 |
| <%hh%> | Hour in two digits | 00 - 23 |
| <%h12%> | Hour in 12-hour format, in one or two digits | 0/12 - 11 |
| <%hh12%> | Hour in 12-hour format, in two digits | 00/12 - 11 |
| <%n%> | Minute in one or two digits, as needed | 0 - 59 |
| <%nn%> | Minute in two digits | 00 - 59 |
| <%s%> | Second in one or two digits, as needed | 0 - 59 |
| <%ss%> | Second in two digits | 00 - 59 |
| <%AM/PM%> | 12-hour clock with uppercase "AM" or "PM" as appropriate | AM, PM |
| (localized time-patterns) |
| <%loc_AM/PM%> | Time marker such as AM or PM based on the current user regional and language settings | AM, PM |
| <%loc_A/P%> | Single-character time marker such as A or P based on the current user regional and language settings | A, P |
| <%loc_time%> | Time based on the current user regional and language settings | 1:30:15 PM |
| <%loc_time24%> | Time in 24-hour format without a time marker based on the current user regional and language settings | 13:30:15 |
| <%loc_tsep%> | Time separator based on the current user regional and language settings | : |
Returns:
Returns the long date format
-
Type
-
string
Example
The following statements are equivalent:
oSchedule.GetLongDateFormat() {string}, gets the long date format
oSchedule.LongDateFormat {string}, gets the long date format
where oSchedule is an instance of the Schedule control.
GetLongDateFormat
The GetLongTimeFormat() specifies how times are displayed in long form (time only, without date). This property supports
ex-HTML 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 times in long format according to the
LongDateFormat and
LongTimeFormat properties. For example, if LongTimeFormat is set to "<%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 property is set to "<%hh%>:<%nn%>:<%ss%> <%AM/PM%>", which displays 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 value | 1 - 31 |
| <%dd%> | Day of the month using exactly two numeric digits | 01 - 31 |
| <%d1%> | Weekday using its first letter | S - S |
| <%loc_d1%> | Weekday as a single-letter abbreviation based on the current user settings | S - S |
| <%d2%> | Weekday using its first two letters | Su - Sa |
| <%loc_d2%> | Weekday as a two-letter abbreviation based on the current user settings | Su - Sa |
| <%d3%> | Weekday using its first three letters | Sun - Sat |
| <%ddd%> | Weekday using its first three letters | Sun - 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 settings | Sun - Sat |
| <%dddd%> | Full name of the weekday | Sunday - Saturday |
| <%loc_dddd%> | Full weekday name based on the current user regional and language settings | Sunday - Saturday |
| <%w%> | Numeric day of the week | 1 - 7 |
| <%y%> | Numeric day of the year | 1 - 366 |
| (week-patterns) |
| <%ww%> | Week of the year | 1 - 53 |
| (month-patterns) |
| <%m%> | Month of the year using one or two numeric digits, as needed | 1 - 12 |
| <%mm%> | Month of the year using exactly two numeric digits | 01 - 12 |
| <%mr%> | Month of the year using Roman numerals, as needed | I - XII |
| <%m1%> | Month using its first letter | J - D |
| <%loc_m1%> | Month as a single-letter abbreviation based on the current user settings | J - D |
| <%m2%> | Month using its first two letters | Ja - De |
| <%loc_m2%> | Month as a two-letter abbreviation based on the current user settings | Ja - De |
| <%m3%> | Month using its first three letters | Jan - Dec |
| <%mmm%> | Month using its first three letters | Jan - 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 settings | Jan - Dec |
| <%mmmm%> | Full name of the month | January - December |
| <%loc_mmmm%> | Full month name based on the current user regional and language settings | January - December |
| (year-patterns) |
| <%q%> | Date shown as the quarter of the year | 1 - 4 |
| <%hy%> | Date shown as the half of the year | 1 - 2 |
| <%loc_y%> | Year represented by the last digit only, based on the current regional settings | 0 - 9 |
| <%yy%> | Last two digits of the year | 01 - 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 years | 01 - 99 |
| <%yyyy%> | Full year using four digits | 0100 - 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 applied | 0100 - 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 UTC | 1767085565940 |
| (localized era-patterns) |
| <%loc_g%> | Period/era based on the current user regional and language settings | A,B |
| <%loc_gg%> | Period/era based on the current user regional and language settings | AD,BC |
| (localized date-patterns) |
| <%loc_sdate%> | Date in short format based on the current user regional and language settings | 12/31/2000 |
| <%loc_ldate%> | Date in long format based on the current user regional and language settings | December 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 needed | 0 - 23 |
| <%hh%> | Hour in two digits | 00 - 23 |
| <%h12%> | Hour in 12-hour format, in one or two digits | 0/12 - 11 |
| <%hh12%> | Hour in 12-hour format, in two digits | 00/12 - 11 |
| <%n%> | Minute in one or two digits, as needed | 0 - 59 |
| <%nn%> | Minute in two digits | 00 - 59 |
| <%s%> | Second in one or two digits, as needed | 0 - 59 |
| <%ss%> | Second in two digits | 00 - 59 |
| <%AM/PM%> | 12-hour clock with uppercase "AM" or "PM" as appropriate | AM, PM |
| (localized time-patterns) |
| <%loc_AM/PM%> | Time marker such as AM or PM based on the current user regional and language settings | AM, PM |
| <%loc_A/P%> | Single-character time marker such as A or P based on the current user regional and language settings | A, P |
| <%loc_time%> | Time based on the current user regional and language settings | 1:30:15 PM |
| <%loc_time24%> | Time in 24-hour format without a time marker based on the current user regional and language settings | 13:30:15 |
| <%loc_tsep%> | Time separator based on the current user regional and language settings | : |
Returns:
Returns the long time format
-
Type
-
string
Example
The following statements are equivalent:
oSchedule.GetLongTimeFormat() {string}, gets the long time format
oSchedule.LongTimeFormat {string}, gets the long time format
where oSchedule is an instance of the Schedule control.
GetLongTimeFormat
The GetMisc() method gets 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.
Returns:
Returns the control's miscellaneous options
-
Type
-
MiscellaneousOptions
Example
The following statements are equivalent:
oSchedule.GetMisc() {object}, returns the control's miscellaneous options as an object of MiscellaneousOptions type
oSchedule.Misc {object}, returns the control's miscellaneous options as an object of MiscellaneousOptions type
where oSchedule is an instance of the Schedule control.
GetMisc
GetOnResizeControl() → {exontrol.Schedule.OnResizeControlEnum}
The GetOnResizeControl() method defines which panel is resized when the entire control is resized. It can also 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 property is set to exResizePanelRight | exCalendarFit, meaning the right panel (the schedule view) is resized when the control is resized, and the calendar automatically fits its panel.
Returns:
Returns the panel to resize once the entire control gets resized
-
Type
-
exontrol.Schedule.OnResizeControlEnum
Example
The following statements are equivalent:
oSchedule.GetOnResizeControl() {exontrol.Schedule.OnResizeControlEnum}, returns the panel to resize once the entire control gets resized
oSchedule.OnResizeControl {exontrol.Schedule.OnResizeControlEnum}, returns the panel to resize once the entire control gets resized
where oSchedule is an instance of the Schedule control.
GetOnResizeControl
GetOnSelectDate() → {exontrol.Schedule.OnSelectDateEnum}
The GetOnSelectDate() method specifies the action performed when the user selects new dates in the calendar panel. By default, the
OnSelectDate property is set to exFitSelToView, which adjusts the day size and scrolls the view so the selected dates fit within the schedule view. Setting OnSelectDate to exNoViewChange prevents any scrolling or layout changes when new dates are selected. Setting it to exEnsureVisibleDate scrolls the view to ensure that the selected date is visible within the schedule view.
Returns:
Returns the action that the control does once the user selects new dates in the calendar panel
-
Type
-
exontrol.Schedule.OnSelectDateEnum
Example
The following statements are equivalent:
oSchedule.GetOnSelectDate() {exontrol.Schedule.OnSelectDateEnum}, gets the action that the control does once the user selects new dates in the calendar panel
oSchedule.OnSelectDate {exontrol.Schedule.OnSelectDateEnum}, gets the action that the control does once the user selects new dates in the calendar panel
where oSchedule is an instance of the Schedule class.
GetOnSelectDate
The GetOptions() method gets a collection of configurable settings that can be applied to a control, allowing you to customize its behavior and appearance. You can assign these options either directly through the
Options property or programmatically, enabling you to update one or more settings at runtime. The
oSV member of the control contains an SV object that defines the default schedule view. All options exposed by oSV are also available as properties of the control, allowing you to get or set them directly through the control's interface.
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.GetOptions().allowActions {string}, gets the actions the user can perform once the user clicks or touches the control
oSchedule.Options.allowActions {string}, gets the actions the user can perform once the user clicks or touches the control
oSchedule.GetAllowActions() {string}, gets the actions the user can perform once the user clicks or touches the control
oSchedule.AllowActions {string}, gets the actions the user can perform once the user clicks or touches the control
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.
Returns:
An object of
Schedule.Options type that indicates the options to display the control.
-
Type
-
Schedule.Options
GetPad() → {number|Array.<number>|string}
The GetPad() method can be used to increase the size of an event by adding extra space around its content, while the PadSelectEvent property creates a gap between the event and its selection border, enhancing the visual distinction of selected events. By default, the
Pad property is set to [2,2], meaning the event's width is increased by 4 pixels (2 pixels on each side) and its height is increased by 4 pixels (2 pixels on the top and bottom).
Returns:
Returns a value that could be:
- {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
-
Type
-
number
|
Array.<number>
|
string
Example
The following statements are equivalent:
oSchedule.GetPad() {(number|number[]|string)}, gets the event's padding
oSchedule.Pad {number|number[]|string}, gets the event's padding
where oSchedule is an instance of Schedule control.
GetPad
GetPaneMinWidthLeft() → {number}
The GetPaneMinWidthLeft() method gets the minimum width of the left panel, while the
PaneWidthLeft property defines its actual width. Similarly, the
PaneMinWidthRight property defines the minimum width of the right panel. The
OnResizeControl property specifies which panel is resized when the entire control is resized. Setting PaneMinWidthLeft or PaneMinWidthRight to a specific value (for example, 196) enforces that minimum width in pixels, while setting it to null removes the constraint and allows the panel to be resized without a minimum width limit.
Returns:
Returns the minimum size(width) of the left panel
-
Type
-
number
Example
The following statements are equivalent:
oSchedule.GetPaneMinWidthLeft() {number}, returns the minimum size(width) of the left panel
oSchedule.PaneMinWidthLeft {number}, returns the minimum size(width) of the left panel
where oSchedule is an instance of the Schedule control.
GetPaneMinWidthLeft
GetPaneMinWidthRight() → {number}
The GetPaneMinWidthRight() method gets the minimum width of the right panel, while the
PaneWidthRight property defines its actual width. Similarly, the
PaneMinWidthLeft property defines the minimum width of the left panel. The
OnResizeControl property specifies which panel is resized when the entire control is resized. Setting PaneMinWidthLeft or PaneMinWidthRight to a specific value (for example, 196) enforces that minimum width in pixels, while setting it to null removes the constraint and allows the panel to be resized without a minimum width limit.
Returns:
Returns the minimum size(width) of the right panel
-
Type
-
number
Example
The following statements are equivalent:
oSchedule.GetPaneMinWidthRight() {number}, returns the minimum size(width) of the right panel
oSchedule.PaneMinWidthRight {number}, returns the minimum size(width) of the right panel
where oSchedule is an instance of the Schedule control.
GetPaneMinWidthRight
GetPaneWidthLeft() → {number}
The GetPaneWidthLeft() method gets the width of the left panel, while the
PaneWidthRight property defines the width of the right panel. The
PaneMinWidthLeft property defines the minimum size(width) of the left panel. The
OnResizeControl property specifies which panel is resized when the entire control is resized. Setting PaneWidthLeft or PaneWidthRight to 0 hides the corresponding panel, while setting it to a specific value (for example, 196) defines the panel's width in pixels.
Returns:
Returns the size(width) of the left panel
-
Type
-
number
Example
The following statements are equivalent:
oSchedule.GetPaneWidthLeft() {number}, returns the size(width) of the left panel
oSchedule.PaneWidthLeft {number}, returns the size(width) of the left panel
where oSchedule is an instance of the Schedule control.
GetPaneWidthLeft
GetPaneWidthRight() → {number}
The GetPaneWidthRight() method gets the width of the right panel, while the
PaneWidthLeft property defines the width of the left panel. The
PaneMinWidthRight property defines the minimum size(width) of the right panel. The
OnResizeControl property specifies which panel is resized when the entire control is resized. Setting PaneWidthLeft or PaneWidthRight to 0 hides the corresponding panel, while setting it to a specific value (for example, 196) defines the panel's width in pixels.
Returns:
Returns the size(width) of the right panel
-
Type
-
number
Example
The following statements are equivalent:
oSchedule.GetPaneWidthRight() {number}, returns the size(width) of the right panel
oSchedule.PaneWidthRight {number}, returns the size(width) of the right panel
where oSchedule is an instance of the Schedule control.
GetPaneWidthRight
GetReadOnly() → {string}
The GetReadOnly() method indicates whether the control is in read-only mode, while the
Locked property specifies whether the control is locked (protected) or unlocked. When ReadOnly is set, users cannot create, resize, or move events within the control, but they can still scroll, select, and interact with existing events. In contrast, when Locked is set, users cannot scroll, select, or interact with any events. Therefore, the read-only mode prevents modifications to events while still allowing interaction, whereas the locked mode completely disables all user interaction with the control.
Returns:
Returns true, if the control is read-only
-
Type
-
string
Example
The following statements are equivalent:
oSchedule.GetReadOnly() {boolean}, indicates whether the control is in read-only mode
oSchedule.ReadOnly {boolean}, indicates whether the control is in read-only mode
where oSchedule is an instance of Schedule control
GetReadOnly
The GetScrollPos() method gets the horizontal and vertical scroll position of the view. It is an object of
type {x, y}, where the x value specifies the horizontal scroll position and the y value specifies the vertical scroll position. Adjusting the
ScrollPos property allows you to control which portion of the content is visible, enabling efficient navigation through the schedule. For example, setting ScrollPos to {x: 100} scrolls the view horizontally to position 100, while {x: 100, y: 50} scrolls horizontally to 100 and vertically to 50. The
ScrollBars property specifies whether horizontal and vertical scroll bars are displayed, and the onscroll event is triggered whenever the user scrolls the control's content.
Returns:
Returns 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
-
Type
-
object
Example
The following statements are equivalent:
oSchedule.GetScrollPos() {object}, gets the horizontal and vertical scroll position of the view
oSchedule.ScrollPos {object}, gets the horizontal and vertical scroll position of the view
where oSchedule is an instance of Schedule control.
GetScrollPos
The GetSelectEventStyle() method specifies how a selected event is displayed. The "select" shape (defined in the
Shapes property) determines the shape and color used for the selected event. The
SingleSel property defines whether the control supports single, multiple, or toggle selection. By default, the SelectEventStyle property is set to 0, which combines the "select" shape with the event's own shape.
Returns:
Returns how the selected-event gets displayed, as one of 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.
-
Type
-
Schedule.SelectEventStyleEnum
Example
The following statements are equivalent:
oSchedule.GetSelectEventStyle() {number}, gets how the selected-event gets displayed
oSchedule.SelectEventStyle {number}, gets how the selected-event gets displayed
where oSchedule is an instance of the Schedule class.
GetSelectEventStyle
GetShapes()
The GetShapes() method gets the shapes that each part of the control can display and is used to customize its visual appearance. It allows you to apply different shapes and colors to various parts of the control, enhancing its overall look and feel. For example, the string "green(event),lime(calendar-uiHighlight)" applies a green color to events and a lime color to calendar dates that contain 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) |
Example
The following statements are equivalent:
oSchedule.GetShapes() {string}, returns a string expression that defines the shapes each part of the control can display
oSchedule.Shapes {string}, returns a string expression that defines the shapes each part of the control can display
where oSchedule is an instance of the Schedule control.
GetShapes
The GetShortDateFormat() method specifies how dates are displayed in short form (date only, without time). This property 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 dates in short format according to the
ShortDateFormat and
ShortTimeFormat properties. For example, if ShortDateFormat is set to "<%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 property is set to "<%loc_sdate%>", meaning the short date format is determined 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 value | 1 - 31 |
| <%dd%> | Day of the month using exactly two numeric digits | 01 - 31 |
| <%d1%> | Weekday using its first letter | S - S |
| <%loc_d1%> | Weekday as a single-letter abbreviation based on the current user settings | S - S |
| <%d2%> | Weekday using its first two letters | Su - Sa |
| <%loc_d2%> | Weekday as a two-letter abbreviation based on the current user settings | Su - Sa |
| <%d3%> | Weekday using its first three letters | Sun - Sat |
| <%ddd%> | Weekday using its first three letters | Sun - 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 settings | Sun - Sat |
| <%dddd%> | Full name of the weekday | Sunday - Saturday |
| <%loc_dddd%> | Full weekday name based on the current user regional and language settings | Sunday - Saturday |
| <%w%> | Numeric day of the week | 1 - 7 |
| <%y%> | Numeric day of the year | 1 - 366 |
| (week-patterns) |
| <%ww%> | Week of the year | 1 - 53 |
| (month-patterns) |
| <%m%> | Month of the year using one or two numeric digits, as needed | 1 - 12 |
| <%mm%> | Month of the year using exactly two numeric digits | 01 - 12 |
| <%mr%> | Month of the year using Roman numerals, as needed | I - XII |
| <%m1%> | Month using its first letter | J - D |
| <%loc_m1%> | Month as a single-letter abbreviation based on the current user settings | J - D |
| <%m2%> | Month using its first two letters | Ja - De |
| <%loc_m2%> | Month as a two-letter abbreviation based on the current user settings | Ja - De |
| <%m3%> | Month using its first three letters | Jan - Dec |
| <%mmm%> | Month using its first three letters | Jan - 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 settings | Jan - Dec |
| <%mmmm%> | Full name of the month | January - December |
| <%loc_mmmm%> | Full month name based on the current user regional and language settings | January - December |
| (year-patterns) |
| <%q%> | Date shown as the quarter of the year | 1 - 4 |
| <%hy%> | Date shown as the half of the year | 1 - 2 |
| <%loc_y%> | Year represented by the last digit only, based on the current regional settings | 0 - 9 |
| <%yy%> | Last two digits of the year | 01 - 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 years | 01 - 99 |
| <%yyyy%> | Full year using four digits | 0100 - 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 applied | 0100 - 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 UTC | 1767085565940 |
| (localized era-patterns) |
| <%loc_g%> | Period/era based on the current user regional and language settings | A,B |
| <%loc_gg%> | Period/era based on the current user regional and language settings | AD,BC |
| (localized date-patterns) |
| <%loc_sdate%> | Date in short format based on the current user regional and language settings | 12/31/2000 |
| <%loc_ldate%> | Date in long format based on the current user regional and language settings | December 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 needed | 0 - 23 |
| <%hh%> | Hour in two digits | 00 - 23 |
| <%h12%> | Hour in 12-hour format, in one or two digits | 0/12 - 11 |
| <%hh12%> | Hour in 12-hour format, in two digits | 00/12 - 11 |
| <%n%> | Minute in one or two digits, as needed | 0 - 59 |
| <%nn%> | Minute in two digits | 00 - 59 |
| <%s%> | Second in one or two digits, as needed | 0 - 59 |
| <%ss%> | Second in two digits | 00 - 59 |
| <%AM/PM%> | 12-hour clock with uppercase "AM" or "PM" as appropriate | AM, PM |
| (localized time-patterns) |
| <%loc_AM/PM%> | Time marker such as AM or PM based on the current user regional and language settings | AM, PM |
| <%loc_A/P%> | Single-character time marker such as A or P based on the current user regional and language settings | A, P |
| <%loc_time%> | Time based on the current user regional and language settings | 1:30:15 PM |
| <%loc_time24%> | Time in 24-hour format without a time marker based on the current user regional and language settings | 13:30:15 |
| <%loc_tsep%> | Time separator based on the current user regional and language settings | : |
Returns:
Returns the short date format
-
Type
-
string
Example
The following statements are equivalent:
oSchedule.GetShortDateFormat() {string}, returns the short date format
oSchedule.ShortDateFormat {string}, returns the short date format
where oSchedule is an instance of Schedule.
GetShortDateFormat
The GetShortTimeFormat() method gets how time values are displayed in short form (time only, without date). This property 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 times in short format according to the
ShortDateFormat and
ShortTimeFormat properties. For example, if ShortTimeFormat is set to "<%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 property is set to "<%h%>:<%nn%> <%AM/PM%>", meaning the short time format is determined 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 value | 1 - 31 |
| <%dd%> | Day of the month using exactly two numeric digits | 01 - 31 |
| <%d1%> | Weekday using its first letter | S - S |
| <%loc_d1%> | Weekday as a single-letter abbreviation based on the current user settings | S - S |
| <%d2%> | Weekday using its first two letters | Su - Sa |
| <%loc_d2%> | Weekday as a two-letter abbreviation based on the current user settings | Su - Sa |
| <%d3%> | Weekday using its first three letters | Sun - Sat |
| <%ddd%> | Weekday using its first three letters | Sun - 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 settings | Sun - Sat |
| <%dddd%> | Full name of the weekday | Sunday - Saturday |
| <%loc_dddd%> | Full weekday name based on the current user regional and language settings | Sunday - Saturday |
| <%w%> | Numeric day of the week | 1 - 7 |
| <%y%> | Numeric day of the year | 1 - 366 |
| (week-patterns) |
| <%ww%> | Week of the year | 1 - 53 |
| (month-patterns) |
| <%m%> | Month of the year using one or two numeric digits, as needed | 1 - 12 |
| <%mm%> | Month of the year using exactly two numeric digits | 01 - 12 |
| <%mr%> | Month of the year using Roman numerals, as needed | I - XII |
| <%m1%> | Month using its first letter | J - D |
| <%loc_m1%> | Month as a single-letter abbreviation based on the current user settings | J - D |
| <%m2%> | Month using its first two letters | Ja - De |
| <%loc_m2%> | Month as a two-letter abbreviation based on the current user settings | Ja - De |
| <%m3%> | Month using its first three letters | Jan - Dec |
| <%mmm%> | Month using its first three letters | Jan - 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 settings | Jan - Dec |
| <%mmmm%> | Full name of the month | January - December |
| <%loc_mmmm%> | Full month name based on the current user regional and language settings | January - December |
| (year-patterns) |
| <%q%> | Date shown as the quarter of the year | 1 - 4 |
| <%hy%> | Date shown as the half of the year | 1 - 2 |
| <%loc_y%> | Year represented by the last digit only, based on the current regional settings | 0 - 9 |
| <%yy%> | Last two digits of the year | 01 - 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 years | 01 - 99 |
| <%yyyy%> | Full year using four digits | 0100 - 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 applied | 0100 - 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 UTC | 1767085565940 |
| (localized era-patterns) |
| <%loc_g%> | Period/era based on the current user regional and language settings | A,B |
| <%loc_gg%> | Period/era based on the current user regional and language settings | AD,BC |
| (localized date-patterns) |
| <%loc_sdate%> | Date in short format based on the current user regional and language settings | 12/31/2000 |
| <%loc_ldate%> | Date in long format based on the current user regional and language settings | December 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 needed | 0 - 23 |
| <%hh%> | Hour in two digits | 00 - 23 |
| <%h12%> | Hour in 12-hour format, in one or two digits | 0/12 - 11 |
| <%hh12%> | Hour in 12-hour format, in two digits | 00/12 - 11 |
| <%n%> | Minute in one or two digits, as needed | 0 - 59 |
| <%nn%> | Minute in two digits | 00 - 59 |
| <%s%> | Second in one or two digits, as needed | 0 - 59 |
| <%ss%> | Second in two digits | 00 - 59 |
| <%AM/PM%> | 12-hour clock with uppercase "AM" or "PM" as appropriate | AM, PM |
| (localized time-patterns) |
| <%loc_AM/PM%> | Time marker such as AM or PM based on the current user regional and language settings | AM, PM |
| <%loc_A/P%> | Single-character time marker such as A or P based on the current user regional and language settings | A, P |
| <%loc_time%> | Time based on the current user regional and language settings | 1:30:15 PM |
| <%loc_time24%> | Time in 24-hour format without a time marker based on the current user regional and language settings | 13:30:15 |
| <%loc_tsep%> | Time separator based on the current user regional and language settings | : |
Returns:
Returns the short time format
-
Type
-
string
Example
The following statements are equivalent:
oSchedule.GetShortTimeFormat() {string}, gets the short time format
oSchedule.ShortTimeFormat {string}, gets the short time format
where oSchedule is an instance of the Schedule control.
GetShortTimeFormat
The GetShowAllDayHeader() method specifies whether the header for all-day events is visible. The all-day header is a dedicated section within the schedule control used to display events that span an entire day or more. The HeaderAllDayEventHeight property defines the height of events displayed within the all-day header, relative to the control's font size. The AllowMultiDaysEvent property specifies whether users can create events that span multiple days. The Event.
AllDay property 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 property is set to False, meaning the all-day header is hidden. Setting it to True makes the all-day header visible, allowing all-day events to be displayed separately from regular timed events.
Returns:
Returns true if the control's header for all-day events is visible
-
Type
-
boolean
Example
The following statements are equivalent:
oSchedule.GetShowAllDayHeader() {boolean}, specifies whether the header for all-day events is visible
oSchedule.ShowAllDayHeader {boolean}, specifies whether the header for all-day events is visible
where oSchedule is an instance of the Schedule control.
GetShowAllDayHeader
GetShowEventLabels() → {boolean}
The GetShowEventLabels() method specifies whether the short, long, and extra labels of events are visible. The events caption remains visible (if defined) even when ShowEventLabels is set to False. The ShortLabel, LongLabel, and
ExtraLabel properties of the Event object define the content of its labels, while the DefaultEventShortLabel, DefaultEventLongLabel, and DefaultEventExtraLabel properties define their default values (applies to events that do not have their own labels defined). The Event.
Caption property defines the event's caption. By default, the ShowEventLabels property is True, meaning all labels are displayed.
Returns:
Returns true if the short, long and extra labels of the events are visible or hidden
-
Type
-
boolean
Example
The following statements are equivalent:
oSchedule.GetShowEventLabels() {boolean}, specifies whether labels of events (the event's caption is not included) are visible
oSchedule.ShowEventLabels {boolean}, specifies whether labels of events (the event's caption is not included) are visible
where oSchedule is an instance of the Schedule control.
GetShowEventLabels
The GetShowEvents() method specifies which types of events are displayed within the control. Events are the core elements of the schedule control and represent scheduled items or appointments, each having properties such as start time, end time, caption, and more. The ShowEvents property allows you to control the visibility of different types of events within the schedule. The Event.
Visible field indicates whether the event is visible or hidden. By default, it is set to -1 (exShowAllEvents), meaning that all events are displayed.
Returns:
Returns a numeric value that specifies the type of the events the control displays, as one of the following values:
- -1 (exShowAllEvents) {number}, shows all events
- 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)
-
Type
-
Schedule.ShowEventsEnum
Example
The following statements are equivalent:
oSchedule.GetShowEvents() {number}, indicates the type of the events the control displays
oSchedule.ShowEvents {number}, indicates the type of the events the control displays
where oSchedule is an instance of the Schedule control.
GetShowEvents
GetShowGroupingEvents() → {boolean}
The GetShowGroupingEvents() method specifies whether the schedule view displays grouped events, and it has effect only when the control includes groups. The
DisplayGroupingButton property gets or sets a value that indicates whether the grouping button is displayed in the date header. The
ApplyGroupingColors property specifies whether the schedule view shows the events using the colors of owner groups (group's eventShape field). When set to True, events are displayed grouped by their owner group. When set to False, all events are displayed in a single list without grouping. In grouped mode, each date is divided into sections for each group, and the group name is displayed in the header of each section. The AllowMoveEventToOtherGroup property indicates whether the event can be moved from a group to another by drag and drop. By default, the schedule view does not show grouped events (false).
The control displays groups if:
- ShowGroupingEvents property is true
- The Groups collection has visible elements. By default, the Groups collection contains no Group objects
Returns:
Returns true if the schedule view shows grouped events.
-
Type
-
boolean
Example
The following statements are equivalent:
oSchedule.GetShowGroupingEvents() {boolean}, gets whether the schedule view shows grouped events
oSchedule.ShowGroupingEvents {boolean}, gets whether the schedule view shows grouped events
where oSchedule is an instance of the Schedule class.
GetShowGroupingEvents
GetShowHighlightEvent() → {boolean}
The GetShowHighlightEvent() method whether the control highlights dates that contain events. When enabled, the "uiHighlight" or "calendar-uiHighlight" shape is applied to dates with events, making them easier to identify and navigate within the schedule view. The calendar panel can visually emphasize these dates to improve usability. Setting the ShowHighlightEvent property to True enables this feature, while setting it to False disables it.
Returns:
Returns truthy value if the control highlights the dates that contain events (relative to the font-size of the control)
-
Type
-
boolean
Example
The following statements are equivalent:
oSchedule.GetShowHighlightEvent() {boolean}, returns whether the control highlights the dates that contain events
oSchedule.ShowHighlightEvent {boolean}, returns whether the control highlights the dates that contain events
where oSchedule is an instance of the Schedule control.
GetShowHighlightEvent
The GetShowMarkZone() method specifies how mark-zones are displayed within the control, while the
MarkZones property defines the mark-zones themselves. Mark-zones represent highlighted time intervals used to indicate special periods such as non-working hours, lunch breaks, or other significant ranges. The
ShowMarkZone property controls whether mark-zones are displayed in the background (behind events), in the foreground (in front of events), or not displayed at all. By default, the ShowMarkZone property is set to 2 (exShowMarkZonesFront), meaning mark-zones are displayed in the foreground.
Returns:
Returns a numeric value that specifies how the control's mark-zones are shown as one of the following values:
- 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
-
Type
-
Schedule.ShowMarkZoneEnum
Example
The following statements are equivalent:
oSchedule.GetShowMarkZone() {number}, specifies how the control's mark-zones are shown
oSchedule.ShowMarkZone {number}, specifies how the control's mark-zones are shown
where oSchedule is an instance of the Schedule control.
GetShowMarkZone
GetShowViewCompact() → {exontrol.Schedule.ShowViewCompactEnum}
The GetShowViewCompact() method specifies how days are arranged within the schedule view. This option is useful for optimizing the display, such as showing more days in the view or aligning the days to match the calendar panel. By default, the
ShowViewCompact property is set to exViewCalendarCompact, which arranges the schedule view days to match the calendar panel, except that the first day of the month either continues immediately after the last day of the previous month or starts a new row.
Returns:
Returns a value that specifies how the days get arranged within the schedule-view
-
Type
-
exontrol.Schedule.ShowViewCompactEnum
Example
The following statements are equivalent:
oSchedule.GetShowViewCompact() {exontrol.Schedule.ShowViewCompactEnum}, returns a value that specifies how the days get arranged within the schedule-view
oSchedule.ShowViewCompact {exontrol.Schedule.ShowViewCompactEnum}, returns a value that specifies how the days get arranged within the schedule-view
where oSchedule is an instance of the Schedule control.
GetShowViewCompact
GetSmooth() → {number}
The GetSmooth() method gets the time in ms the control goes from one layout to another. The
smooth field is a number that 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.
Returns:
Returns the time in ms the control goes from one layout to another.
The following statements are equivalent:
oSchedule.GetSmooth() {number}, returns the time in ms the control goes from one layout to another
oSchedule.Smooth {number}, returns the time in ms the control goes from one layout to another
where oSchedule is an instance of Schedule control
-
Type
-
number
GetTfi() → {string|object}
The GetTfi() method gets the
font attributes to apply on captions of the control. The GetTfi() method returns the font attributes as a string representation such as "b monospace 16" or as an object such as {bold: true, fontName: "monospace", fontSize: 16}. Correspondingly, the
Tfi property defines the font attributes that are applied to the control's captions and can be set to customize their appearance.
Returns:
Returns the font attributes as a string representation such as "b monospace 16" or as an object such as {bold: true, fontName: "monospace", fontSize: 16}.
The result as a {string} can include any of the following keywords 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 string result 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 result as {object} can include 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.
-
Type
-
string
|
object
Example
The following statements are equivalent:
oSchedule.GetTfi() {string}, returns the control's font attributes as a string such as "b monospace 16"
oSchedule.Tfi {string}, returns the control's font attributes as a string such as "b monospace 16"
where oSchedule is an instance of Schedule control
GetTfi
The GetTimeScale() method gets the options of 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 property 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 property specifies the time the day starts from, in "HH[:MM]" format. The
DayEndTime property specifies the time the day ends to, in "HH[:MM]" format. By default, the TimeScale property is set to null, which means that the control uses its default settings for the time-scale.
Returns:
Returns the options of the view's time-scale, as an object of
TimeScaleOptions type
-
Type
-
TimeScaleOptions
Example
The following statements are equivalent:
oSchedule.GetTimeScale() {object}, gets the options of the view's time-scale
oSchedule.TimeScale {object}, gets the options of the view's time-scale
where oSchedule is an instance of the Schedule class.
GetTimeScale
The GetToolTipDelay() method retrieves the time the mouse pointer must hover over an object before the tool tip appears. Setting it to 0 makes tool tips appear immediately, while a higher value (for example, 128) introduces a delay to prevent accidental pop-ups when moving the mouse quickly. The
ToolTipPopDelay property determines how long the tool tip remains visible (in milliseconds) if the mouse pointer stays stationary, and the
ToolTipWidth property sets the maximum width of the control's tool tip in pixels.
Returns:
Returns how long the mouse pointer must point to an object before the tool tip appears
-
Type
-
number
Example
The following statements are equivalent:
oSchedule.GetToolTipDelay() {number}, returns how long the mouse pointer must point to an object before the tool tip appears
oSchedule.ToolTipDelay {number}, returns how long the mouse pointer must point to an object before the tool tip appears
where oSchedule is an instance of the Schedule control.
GetToolTipDelay
The GetToolTipPopDelay() method returns the duration, in milliseconds, that a tooltip remains visible when the mouse pointer is stationary over a control. The
ToolTipPopDelay property is expressed in milliseconds. The
ToolTipDelay property defines how long the mouse pointer must hover over an object before the tooltip appears. The
ToolTipWidth property specifies the width of the tooltip window in pixels. By default, the tooltip remains visible for 5000 milliseconds.
Returns:
Returns the period in ms of time the tool top remains visible if the mouse pointer is stationary within a control
-
Type
-
number
Example
The following statements are equivalent:
oSchedule.GetToolTipPopDelay() {number}, returns the period in ms of time the tool top remains visible if the mouse pointer is stationary within a control
oSchedule.ToolTipPopDelay {number}, returns the period in ms of time the tool top remains visible if the mouse pointer is stationary within a control
where oSchedule is an instance of the Schedule control.
GetToolTipPopDelay
The GetToolTipWidth() method returns the tooltip window's width in pixels. The
ToolTipWidth property defines the tooltip window's width in pixels and accepts a numeric value; a value of -1 (default) displays the tooltip on a single line without any width restriction. The
ToolTipDelay property specifies the time in milliseconds the mouse pointer must hover over an object before the tooltip appears. The
ToolTipPopDelay property specifies how long, in milliseconds, the tooltip remains visible while the mouse pointer stays stationary within the control.
Returns:
Returns the width of the tooltip window, in pixels
-
Type
-
number
Example
The following statements are equivalent:
oSchedule.GetToolTipWidth() {number}, returns the width of the tooltip window, in pixels
oSchedule.ToolTipWidth {number}, returns the width of the tooltip window, in pixels
where oSchedule is an instance of the Schedule control.
GetToolTipWidth
GetUpdateEventsLabel() → {string}
The GetUpdateEventsLabel() method specifies the label displayed while moving or resizing events, while the CreateEventLabel property defines the label shown when creating events. The FormatEventUpdateLabel option defines how the label is formatted. These properties support
ex-HTML tags (such as <b>, <i>, <fgcolor>, ...), as well as <%=formula%> tags. The <%=formula%> tag evaluates a
format expression that can include placeholders like %1, %2, and so on, where each placeholder corresponds to a specific event property (for example, %1 refers to ExEventStartDateTime, %2 to ExEventEndDateTime). By default, the UpdateEventsLabel property 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 event's short margins on the first line and its duration (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.
Returns:
Returns the event's label while it is resized or moved by drag and drop
-
Type
-
string
Example
The following statements are equivalent:
oSchedule.GetUpdateEventsLabel() {string}, specifies the label displayed while moving or resizing events
oSchedule.UpdateEventsLabel {string}, specifies the label displayed while moving or resizing events
where oSchedule is an instance of the Schedule control.
GetUpdateEventsLabel
GetWheelChange() → {number}
The GetWheelChange() method defines the amount the calendar scrolls when the user rolls 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.
Returns:
Returns the amount the control scrolls when the user rolls the mouse wheel.
-
Type
-
number
Example
The following statements are equivalent:
oSchedule.GetWheelChange() {number}, returns the amount the control scrolls when the user rolls the mouse wheel
oSchedule.wheelChange {number}, returns the amount the control scrolls when the user rolls the mouse wheel
where oSchedule is an instance of Schedule control
GetWheelChange
GetZoom() → {number}
The GetZoom() method defines the zoom factor of the control's content. The zoom factor determines how much the control's content is magnified or reduced. Once the user adjusts the browser's zoom level, the control automatically recalculates its zoom factor to maintain the correct scaling of its content. The
ZoomLevels property defines the allowed zoom levels the user can select from. By default, the
Zoom property is set to null, indicating a normal view (100% zoom).
Returns:
A numeric value between 10 and 1000 that specifies the zoom factor of the control's content.
-
Type
-
number
GetZoomLevels() → {string}
The GetZoomLevels() method defines the allowed zoom levels for the control and can be specified as a comma-separated string of numeric values (e.g., "50,100,150,200"). These values represent the percentage levels at which users can zoom in or out of the control's content. The
ZoomLevels property works together with the
Zoom property to provide a range of zoom options. For example, if ZoomLevels is set to "50,100,150,200", users can choose from these predefined zoom levels to adjust their view of the content.
Returns:
Specifies a list of numbers separated by comma that indicates the zoom-levels/zoom-levels the control's content is allowed to zoom.
-
Type
-
string
Example
The following statements are equivalent:
oSchedule.GetZoomLevels() {string}, gets the zoom-levels as a string of comma-separated values
oSchedule.ZoomLevels() {string}, gets the zoom-levels as a string of comma-separated values
where oSchedule is an instance of the Schedule control.
GetZoomLevels
Home()
The Home() method zooms to 100% and scrolls the control to the first-date in the layout (usually the Jan 1st). The
FitToClient() method ensures that the entire schedule (if null/undefined) or a specified time range fits within the control's visible area. The FitToClient() method is typically used to fit the entire schedule or a specific time interval into the control's view, while the
EnsureVisibleClient() method is used to ensure that a specific client (event or time range) is visible within the schedule. The
EnsureVisibleSelection() method ensures that the current selection of events fits within the visible area. The Home() method resets the view (zoom level, if applicable) and scrolls the schedule to its initial position.
Example
oSchedule.Home(), zooms to 100% and scrolls the control to the first-date in the layout (usually the Jan 1st)
Home
Paste()
The Paste() method pastes the contents of the Clipboard into the schedule. The Cut, Copy, and Paste methods work only when the control is visible. The Paste() method retrieves the clipboard data through the Clipboard API, and then calls the
onPaste() method to add the events (appointments) represented by this data into the schedule. The onPaste() method can be overridden to customize how the clipboard data is processed for derived objects. By default, onPaste() expects an object of {e(vents)} type, where e(vents) is a collection of [{EventOptions}] objects representing the events (appointments) to be pasted. The Paste() method also ensures that the newly pasted events are visible within the schedule's view, adjusting the view if necessary.
- Since:
Example
The following samples demonstrate how to implement the Copy, Cut, and Paste methods for the control using the Clipboard API when the user presses CTRL + C, CTRL + X, CTRL + V (the "See text and images copied to the clipboard /Allow/Block" message may occur due to security permissions):
oSchedule.on("{CTRL + C}", oSchedule.Copy)
oSchedule.on("{CTRL + X}", oSchedule.Cut)
oSchedule.on("{CTRL + V}", oSchedule.Paste)
Please note that the control requires focus, so CTRL + C, CTRL + X or CTRL + V will work only when the control has focus. In the same manner, the tabIndex attribute must be present in the definition of the HTML element that hosts the control.
Paste
The Scroll() method scrolls the window based on the giving key. The Scroll() method scrolls the view without changing the selection. The
ScrollPos property scrolls horizontally and/or vertically the control's default view. The onscroll event is fired when the user scrolls the view by mouse, touch or keyboard, or when the view's scroll is changed programmatically by ScrollPos property.
Parameters:
| Name |
Type |
Description |
key |
string
|
Specifies a key to determines the direction to scroll the view as follows:
- "Home" {string}, scrolls to the left/top of the control
- "End" {string}, scrolls to the right/end of the control
- "Prior" or "PageUp"{string}, scrolls by a page left/up
- "Next" or "PageDown" {string}, scrolls by a page right/down
- "Up" or "ArrowUp" {string}, scrolls up
- "Down" or "ArrowDown" {string}, scrolls down
- "Left" or "ArrowLeft" {string}, scrolls left
- "Right" or "ArrowRight" {string}, scrolls right
|
Example
The following sample code shows how to scroll the view by a page up or down using the Scroll() method:
oSchedule.on("{PageUp}", oSchedule.Scroll.bind(oSchedule, "PageUp"));
oSchedule.on("{PageDown}", oSchedule.Scroll.bind(oSchedule, "PageDown"));
where oSchedule is an object of Schedule type
Scroll
SetAllowActions(value)
The SetAllowActions() method customizes the actions the user can perform once the control is clicked or touched. 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.
Parameters:
| Name |
Type |
Description |
value |
string
|
Indicates the actions the user can perform once the control is clicked or touched.
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
|
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.
SetAllowActions
The SetAllowAllDayEventScroll() method sets how many event levels the all-day header can display at a time. The
ShowAllDayHeader property specifies whether the all-day header is visible, while the HeaderAllDayEventHeight property defines the height of events displayed within it, relative to the control's font size. By default, the AllowAllDayEventScroll property is set to null, meaning the all-day header displays as many events as can fit.
Parameters:
| Name |
Type |
Description |
value |
null
|
number
|
Array.<number>
|
Indicates the number of events the all-day header can display one at the time, as explained:
- 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)
|
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
SetAllowAllDayEventScroll
SetAllowMoveEventToOtherGroup(value)
The SetAllowMoveEventToOtherGroup() method 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 the ShowGroupingEvents property). When grouping is enabled, each date is divided into sections for each group, with the group name displayed in the header of each section. If AllowMoveEventToOtherGroup is set to True (default), users can move events between groups by drag and drop; if set to False, moving events between groups is not allowed.
Parameters:
| Name |
Type |
Description |
value |
boolean
|
A value that indicates whether the event can be moved from a group to another by drag and drop. |
Example
false {boolean}, the user cannot move an event from one group to another using drag and drop
true {boolean}, the user can move an event from one group to another using drag and drop (default)
SetAllowMoveEventToOtherGroup
SetAllowMultiDaysEvent(value)
The SetAllowMultiDaysEvent() method specifies whether users can create events that span multiple days. The
ShowAllDayHeader property controls whether the all-day header is visible, while the HeaderAllDayEventHeight property defines the height of events displayed within the all-day header, relative to the control's font size. By default, the AllowMultiDaysEvent property is set to True, allowing users to create or resize multi-day events using drag and drop. When set to False, users can create or resize only single-day events.
Parameters:
| Name |
Type |
Description |
value |
boolean
|
Indicates whether the user can create or resize single or multi-dates events. |
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)
SetAllowMultiDaysEvent
SetApplyGroupingColors(value)
The SetApplyGroupingColors() method defines whether the schedule view displays events using the colors of their owner groups (based on the Group.EventShape property). When set to True, events inherit the shape and color of their owner group unless they define their own EventShape, in which case the event's custom appearance is used. When set to False, all events are displayed using their own shape and color, without applying group-based styling. The AllowMoveEventToOtherGroup property indicates whether an event can be moved from one group to another using drag and drop. By default, the
ApplyGroupingColors property is set to True.
Parameters:
| Name |
Type |
Description |
value |
boolean
|
Indicates the schedule view shows the events using the colors of owner groups. |
Example
false {boolean}, the schedule view does not show the events using the colors of owner groups
true {boolean}, the schedule view shows the events using the colors of owner groups (default)
SetApplyGroupingColors
SetBackground(value)
The SetBackground() method sets 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.
Parameters:
| Name |
Type |
Description |
value |
BackgroundOptions
|
A value that indicates the display options to show different parts of the control. |
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
SetBackground
SetCalendar(oOptions)
The SetCalendar() method applies the given options to the internal calendar control, as an object of
exontrol.Calendar.Options. By default, the control displays a calendar in the left panel, allowing users to quickly navigate to specific dates. The
Calendar property is an object that contains various settings to customize the appearance and behavior of this calendar. The options include settings such as the calendar's view mode (month, year, decade), locale, first day of the week, and other visual and functional aspects. The
OnResizeControl property defines which panel should be resized when the entire control is resized.
Parameters:
| Name |
Type |
Description |
oOptions |
object
|
Indicates options to apply to the inside calendar control, as an object of exontrol.Calendar.Options type. |
Example
The following statements are equivalent:
oSchedule.Calendar.Options = {locale: "de-DE"}, applies the German locale to the inside calendar control of oSchedule instance
or
oSchedule.SetCalendar({locale: "de-DE"}), applies the German locale to the inside calendar control of oSchedule instance
where oSchedule is an instance of the Schedule control.
SetCalendar
SetCreateEventLabel(value)
The SetCreateEventLabel() method specifies the label displayed while creating events, while the UpdateEventsLabel property defines the label shown when moving or resizing events. The FormatEventShortLabel and FormatEventLongLabel options define how these labels are formatted. These properties support
ex-HTML tags (such as <b>, <i>, <fgcolor>, ...), as well as <%=formula%> tags. The <%=formula%> tag evaluates a
format expression that can include placeholders like %1, %2, and so on, where each placeholder corresponds to a specific event property (for example, %1 refers to ExEventStartDateTime, %2 to ExEventEndDateTime). By default, the CreateEventLabel property 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 event's short margins on the first line and its duration (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.
Parameters:
| Name |
Type |
Description |
value |
string
|
A value that indicates the event's label while it is created by drag and drop. |
Example
null {null}, the control's default label is shown while creating events ("<%=%256%><br><%=((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)' : '')%>")
"" {string}, no label is shown for event to create
"Start: <%=%1%><br>End: <%=%2%>" {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: <%=((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)' : '')%>" {string}, displays the duration of the event in days, hours and minutes
SetCreateEventLabel
SetCursors(value)
The SetCursors() method specifies the mouse cursor displayed when pointing over different parts of the control. Customizable parts include events, date headers, time scales, and more. By defining the
Cursors property, you can enhance the user experience by providing visual feedback that indicates the interactivity of various elements. For example, setting "pointer(event)" changes the cursor to a pointer (hand) when hovering over events, indicating that they are clickable or draggable.
Parameters:
| Name |
Type |
Description |
value |
string
|
A string expression that defines the mouse cursor to display when pointing over different parts of the control.
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 |
|
Example
"pointer(event)" {string}, sets the cursor to a pointer (hand) when hovering over events (indicating that they are clickable or draggable)
"not-allowed(date)" {string}, sets the cursor to "not-allowed" when hovering over dates (indicating that they are not interactive)
SetCursors
SetDayEndTime(value)
The SetDayEndTime() method sets the time at which the day ends, using the "HH[:MM[:NN]]" format, while the
DayStartTime property specifies the time at which the day begins using the same format. If these properties are not set, the schedule view defaults to a range from 8:00 AM to 4:00 PM. The values of DayStartTime and DayEndTime are used to calculate the height of the schedule's rows and to determine the position of events within the view. If an event starts before DayStartTime or ends after DayEndTime, the control clips the event to the visible area and displays a small arrow at the top or bottom to indicate that it continues outside the view. The
TimeScale property holds options to apply on the control's time-scale, as an object of
TimeScaleOptions type.
Parameters:
| Name |
Type |
Description |
value |
string
|
A value that indicates the time the day ends at, in "HH[:MM[:NN]]" format, where HH represents hours in 24-hour format, MM represents minutes, and NN represents seconds. The MM and NN parts are optional. For example, "08:00" or "08:00:00" represent 8 AM, while "16:00" or "16:00:00" represent 4 PM. |
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
SetDayEndTime
SetDayStartTime(value)
The SetDayStartTime() method sets the time at which the day begins, using the "HH[:MM[:NN]]" format, while the
DayEndTime property specifies the time at which the day ends using the same format. If these properties are not set, the schedule view defaults to a range from 8:00 AM to 4:00 PM. The values of DayStartTime and DayEndTime are used to calculate the height of the schedule's rows and to determine the position of events within the view. If an event starts before DayStartTime or ends after DayEndTime, the control clips the event to the visible area and displays a small arrow at the top or bottom of the event to indicate that it continues outside the view. The
TimeScale property holds options to apply on the control's time-scale, as an object of
TimeScaleOptions type.
Parameters:
| Name |
Type |
Description |
value |
string
|
A value that indicates the time the day starts at, in "HH[:MM[:NN]]" format, where HH represents hours in 24-hour format, MM represents minutes, and NN represents seconds. The MM and NN parts are optional. For example, "08:00" or "08:00:00" represent 8 AM, while "16:00" or "16:00:00" represent 4 PM. |
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
SetDayStartTime
SetDayViewHeight(value)
The SetDayViewHeight() method sets the height of a day within the schedule panel, while the
DayViewWidth property specifies its width. The
ShowViewCompact property determines how days are arranged within the schedule view. The
DayViewHeight property has no effect when ShowViewCompact is set to exViewSingleRow or exViewSingleRowLockHeader, while the DayViewWidth property has no effect when ShowViewCompact is set to 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.
Parameters:
| Name |
Type |
Description |
value |
number
|
A value that indicates the height of the day within the schedule panel. |
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
SetDayViewHeight
SetDayViewWidth(value)
The SetDayViewWidth() method sets the width of a day within the schedule panel, while the
DayViewHeight property specifies its height. The
ShowViewCompact property determines how days are arranged within the schedule view. The
DayViewWidth property has no effect when ShowViewCompact is set to exViewSingleColumn, while the DayViewHeight property has no effect when ShowViewCompact is set to 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.
Parameters:
| Name |
Type |
Description |
value |
number
|
A value that indicates the width of the day within the schedule panel. |
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
SetDayViewWidth
The SetDefaultEventExtraLabel() method sets event's default extra-label. This property supports
ex-HTML as well as <%=formula%> tags, where each formula evaluates to a value based on event properties. Placeholders such as %0, %1, %2, and so on correspond to specific event properties—for example, %1 refers to ExEventStartDateTime, %2 to ExEventEndDateTime, and so on. The extra label is displayed within the body of the event and is always shown if it is not empty. The event's caption and label are always displayed. By default, the DefaultEventExtraLabel property is set to an empty string (""), meaning no extra label is displayed unless explicitly defined.
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.
Parameters:
| Name |
Type |
Description |
value |
string
|
A value that indicates the event's default extra-label. |
Example
"" {string}, no extra label is shown
"<img>image</img> and text" {string}, the event displays the image and text. The image can be added using the exontrol.HTMLPicture.Add method
"<%=%256%>", displays the event's start and end margins in a short format
SetDefaultEventExtraLabel
SetDefaultEventLongLabel(value)
The SetDefaultEventLongLabel() method sets event's default long-label. The Event.
LongLabel property defines the event's custom long-label. This property supports
ex-HTML as well as <%=formula%> tags, where each formula evaluates to a value based on event properties. Placeholders like %0, %1, %2, etc., correspond to specific event properties—for example, %1 refers to ExEventStartDateTime, %2 to ExEventEndDateTime, and so on. The event's long label is displayed only if it is not empty and fits within the event. If the long label is empty or does not fit, the short label is displayed instead. The event's caption and extra label are always shown. By default, the DefaultEventLongLabel property is set to "<%=%256%>", which displays 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.
Parameters:
| Name |
Type |
Description |
value |
string
|
A value that indicates the event's default long-label. |
Example
null {null} or undefined {undefined}, the default short-label is used ("<%=%256%>")
"" {string}, the short-label is hidden
"<img>image</img> and text" {string}, the event displays the image and text. The image can be added using the exontrol.HTMLPicture.Add method
"<%=%256%>", displays the event's start and end margins in a short format
SetDefaultEventLongLabel
SetDefaultEventShortLabel(value)
The SetDefaultEventShortLabel() method defines event's default short-label. The Event.
ShortLabel field specifies a custom short label for the event. This property supports
ex-HTML as well as <%=formula%> tags, where each formula evaluates to a value based on event properties. Placeholders like %0, %1, %2, etc., correspond to specific event properties—for example, %1 refers to ExEventStartDateTime, %2 to ExEventEndDateTime, and so on. The event's long label is displayed if it is not empty and fits within the event. The short label is displayed only when the long label is empty or does not fit. The event's caption and extra label are always displayed. By default, the DefaultEventShortLabel property is set to an empty string (""), meaning events have no short label unless explicitly defined.
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.
Parameters:
| Name |
Type |
Description |
value |
string
|
A value that indicates the event's default short-label. |
Example
null {null} or undefined {undefined}, the default short-label is used ("<%=%256%>")
"" {string}, the short-label is hidden
"<img>image</img> and text" {string}, the event displays the image and text. The image can be added using the exontrol.HTMLPicture.Add method
"<%=%256%>", displays the event's start and end margins in a short format
SetDefaultEventShortLabel
The SetDefaultEventToolTip() method sets the default tooltip for events, which is displayed when the mouse hovers over an event. This property allows you to set a tooltip for all events without defining it individually for each one. The Event.
ToolTip property defines the custom tooltip of the event, displayed when the cursor hovers over it. The DefaultEventToolTip property supports dynamic placeholders that are replaced with the corresponding values of the event when the tooltip is shown. 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, it 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)' : '')%>". This default setting ensures that each event's tooltip displays its start and end date/time, as well as its duration in days, hours, and minutes.
The following properties are supported in the DefaultEventToolTip property:
- %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.
Parameters:
| Name |
Type |
Description |
value |
string
|
A value that indicates the event's default tooltip. |
Example
null {null} or undefined {undefined}, the default-tooltip is used ("Start: <%=%1%><br>End: <%=%2%><br>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)' : '')%>")
"" {string}, no tooltip
"<img>image</img> 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
"<%=%256%>", displays the event's start and end margins in a short format
SetDefaultEventToolTip
The SetDisplayGroupingButton() method sets whether the grouping button is displayed in the date header, while the ShowGroupingEvents property specifies whether the schedule view displays grouped events. The grouping button allows users to toggle the visibility of grouped events within the schedule view. When clicked, it shows or hides event groups. The
DisplayGroupingButton property has effect only when the control includes groups. By default, the grouping button is not displayed in the date header (false).
The grouping button is displayed if:
- DisplayGroupingButton property is true
- ShowGroupingEvents property is true
The control displays groups if:
- ShowGroupingEvents property is true
- The Groups collection has visible elements. By default, the Groups collection contains no Group objects
Parameters:
| Name |
Type |
Description |
value |
boolean
|
Indicates whether the grouping button is displayed in the date header. |
Example
false {boolean}, the grouping button is not displayed in the date header (default)
true {boolean}, the grouping button is displayed in the date header
SetDisplayGroupingButton
SetEvents(oEventsDef)
The SetEvents() method sets the events within the control. Events are the core elements of the schedule control and represent scheduled items or appointments, each having properties such as start time, end time, caption, and more. The Events property allows you to define multiple events, each with specific settings that control how it is displayed and behaves. You can use the Events.
Add method to add new events to the control. By default, the Events property is set to null, meaning no events are defined. To create a valid event, the
Start and
End properties of the EventOptions type must be specified.
Parameters:
| Name |
Type |
Description |
oEventsDef |
object
|
Defines the events to add. The oEventsDef 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
|
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#"
},
]
SetEvents
SetFormatText(value)
The SetFormatText() method specifies how event (appointment) captions are displayed. It is a bitwise combination of flags that control alignment, word-breaking, tab expansion, and other aspects of text rendering within the control. For example, you can align text to the center, enable word-breaking for long captions, or display text on a single line. The exontrol.DrawTextFormatEnum type defines the flags that can be combined to achieve the desired formatting. By default, the
FormatText property is set to exTextAlignRight | exTextAlignBottom | exTextSingleLine | exTextWordEllipsis, meaning that captions are right-aligned, bottom-aligned, displayed on a single line, and truncated with ellipses if they exceed the available space.
The following properties and fields can be used to specify the format for different captions and labels within the control:
-
Event captions and labels
- The FormatText property 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
Parameters:
| Name |
Type |
Description |
value |
exontrol.DrawTextFormatEnum
|
Specifies a value of exontrol.DrawTextFormatEnum value that defines the format to show the event's caption.
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.
|
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
SetFormatText
SetGroups(oGroupsDef)
The SetGroups() method sets the groups within the control. Groups are used to categorize events, allowing each group to contain its own set of events and be visually distinguished using different colors, captions, or other styling options. The
Groups property allows you to define multiple groups, each having specific properties such as caption, identifier, and more. By default, it is set to null, meaning no groups are defined. You can use the
Groups.Add method to add new groups to the control.
Parameters:
| Name |
Type |
Description |
oGroupsDef |
object
|
Defines the groups to add. The oGroupsDef 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
|
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",
}
]
SetGroups
The SetHeaderAllDayEventHeight() method sets the height of events displayed within the all-day header, relative to the control's font size. The
ShowAllDayHeader property specifies whether the all-day header is visible. The all-day header is a dedicated section within the schedule control used to display events that span an entire day or more. By default, the HeaderAllDayEventHeight property is set to 1, meaning the height of events in the all-day header matches the control's font size.
Parameters:
| Name |
Type |
Description |
value |
number
|
A value that indicates the height of the events to display within the all-day header. |
Example
null {null}, the height of the events to display within the 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 events to display within the all-day header is 2 times the size of the control's font
SetHeaderAllDayEventHeight
The SetHeaderDayHeight() method sets the height of the day's header relative to the control's font size. It can be set to a specific value (for example, 2) to make the header height twice the font size, or set to null to use the default value of 1.5 times the font size (150%). Setting the
HeaderDayHeight property to 0 hides the day's header. The day's header is the area within the schedule view that displays the day's name or number, and adjusting its height can improve readability and visual clarity, making it easier to distinguish between days.
Parameters:
| Name |
Type |
Description |
value |
number
|
A value that indicates the height of the day's header. |
Example
0 {number}, hides the day's header
2 {number}, the day's header height is twice the font size of the control
SetHeaderDayHeight
The SetHeaderDayLongLabel() method sets the alternate HTML labels displayed in the day's header when the time scale is visible, while the
HeaderDayShortLabel property defines alternate HTML labels when the time scale is hidden. The format of the
HeaderDayLongLabel property is "ALT1[<|>ALT2<|>...][<=>EXPR]", where each ALT represents an HTML label that can include predefined built-in tags, and EXPR is an expression used to determine which label is displayed. 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 value | 1 - 31 |
| <%dd%> | Day of the month using exactly two numeric digits | 01 - 31 |
| <%d1%> | Weekday using its first letter | S - S |
| <%loc_d1%> | Weekday as a single-letter abbreviation based on the current user settings | S - S |
| <%d2%> | Weekday using its first two letters | Su - Sa |
| <%loc_d2%> | Weekday as a two-letter abbreviation based on the current user settings | Su - Sa |
| <%d3%> | Weekday using its first three letters | Sun - Sat |
| <%ddd%> | Weekday using its first three letters | Sun - 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 settings | Sun - Sat |
| <%dddd%> | Full name of the weekday | Sunday - Saturday |
| <%loc_dddd%> | Full weekday name based on the current user regional and language settings | Sunday - Saturday |
| <%w%> | Numeric day of the week | 1 - 7 |
| <%y%> | Numeric day of the year | 1 - 366 |
| (week-patterns) |
| <%ww%> | Week of the year | 1 - 53 |
| (month-patterns) |
| <%m%> | Month of the year using one or two numeric digits, as needed | 1 - 12 |
| <%mm%> | Month of the year using exactly two numeric digits | 01 - 12 |
| <%mr%> | Month of the year using Roman numerals, as needed | I - XII |
| <%m1%> | Month using its first letter | J - D |
| <%loc_m1%> | Month as a single-letter abbreviation based on the current user settings | J - D |
| <%m2%> | Month using its first two letters | Ja - De |
| <%loc_m2%> | Month as a two-letter abbreviation based on the current user settings | Ja - De |
| <%m3%> | Month using its first three letters | Jan - Dec |
| <%mmm%> | Month using its first three letters | Jan - 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 settings | Jan - Dec |
| <%mmmm%> | Full name of the month | January - December |
| <%loc_mmmm%> | Full month name based on the current user regional and language settings | January - December |
| (year-patterns) |
| <%q%> | Date shown as the quarter of the year | 1 - 4 |
| <%hy%> | Date shown as the half of the year | 1 - 2 |
| <%loc_y%> | Year represented by the last digit only, based on the current regional settings | 0 - 9 |
| <%yy%> | Last two digits of the year | 01 - 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 years | 01 - 99 |
| <%yyyy%> | Full year using four digits | 0100 - 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 applied | 0100 - 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 UTC | 1767085565940 |
| (localized era-patterns) |
| <%loc_g%> | Period/era based on the current user regional and language settings | A,B |
| <%loc_gg%> | Period/era based on the current user regional and language settings | AD,BC |
| (localized date-patterns) |
| <%loc_sdate%> | Date in short format based on the current user regional and language settings | 12/31/2000 |
| <%loc_ldate%> | Date in long format based on the current user regional and language settings | December 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 needed | 0 - 23 |
| <%hh%> | Hour in two digits | 00 - 23 |
| <%h12%> | Hour in 12-hour format, in one or two digits | 0/12 - 11 |
| <%hh12%> | Hour in 12-hour format, in two digits | 00/12 - 11 |
| <%n%> | Minute in one or two digits, as needed | 0 - 59 |
| <%nn%> | Minute in two digits | 00 - 59 |
| <%s%> | Second in one or two digits, as needed | 0 - 59 |
| <%ss%> | Second in two digits | 00 - 59 |
| <%AM/PM%> | 12-hour clock with uppercase "AM" or "PM" as appropriate | AM, PM |
| (localized time-patterns) |
| <%loc_AM/PM%> | Time marker such as AM or PM based on the current user regional and language settings | AM, PM |
| <%loc_A/P%> | Single-character time marker such as A or P based on the current user regional and language settings | A, P |
| <%loc_time%> | Time based on the current user regional and language settings | 1:30:15 PM |
| <%loc_time24%> | Time in 24-hour format without a time marker based on the current user regional and language settings | 13:30:15 |
| <%loc_tsep%> | Time separator based on the current user regional and language settings | : |
Parameters:
| Name |
Type |
Description |
value |
string
|
A value that specifies the alternate HTML labels being shown on date's header, when the time-scale is visible. |
Example
null {null}, the date's header displays the label using default alternate-labels (and expression)
"" {string}, the date's header displays no date
"<%loc_ldate%>" {string}, displays the date in the long format using the current user regional and language settings
"<%d3%>, <%d%><|><%d2%>, <%d%><|><%d1%>, <%d%><|><%d%>" {string}, the date's header displays one, two or three letters for the week day based on the best fit
"<fgcolor red><%d3%>, <%d%><|><%d3%>, <%d%><=>month(value) = 1 ? 0 : 1" {string}, displays the date's header in red for January, and in black for the rest
SetHeaderDayLongLabel
The SetHeaderDayShortLabel() method sets the alternate HTML labels displayed in the day's header when the time scale is hidden, while the
HeaderDayLongLabel property defines alternate HTML labels when the time scale is visible. The format of the
HeaderDayShortLabel property is "ALT1[<|>ALT2<|>...][<=>EXPR]", where each ALT represents an HTML label that supports predefined built-in tags, and EXPR is an expression used to determine which label is displayed. 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 value | 1 - 31 |
| <%dd%> | Day of the month using exactly two numeric digits | 01 - 31 |
| <%d1%> | Weekday using its first letter | S - S |
| <%loc_d1%> | Weekday as a single-letter abbreviation based on the current user settings | S - S |
| <%d2%> | Weekday using its first two letters | Su - Sa |
| <%loc_d2%> | Weekday as a two-letter abbreviation based on the current user settings | Su - Sa |
| <%d3%> | Weekday using its first three letters | Sun - Sat |
| <%ddd%> | Weekday using its first three letters | Sun - 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 settings | Sun - Sat |
| <%dddd%> | Full name of the weekday | Sunday - Saturday |
| <%loc_dddd%> | Full weekday name based on the current user regional and language settings | Sunday - Saturday |
| <%w%> | Numeric day of the week | 1 - 7 |
| <%y%> | Numeric day of the year | 1 - 366 |
| (week-patterns) |
| <%ww%> | Week of the year | 1 - 53 |
| (month-patterns) |
| <%m%> | Month of the year using one or two numeric digits, as needed | 1 - 12 |
| <%mm%> | Month of the year using exactly two numeric digits | 01 - 12 |
| <%mr%> | Month of the year using Roman numerals, as needed | I - XII |
| <%m1%> | Month using its first letter | J - D |
| <%loc_m1%> | Month as a single-letter abbreviation based on the current user settings | J - D |
| <%m2%> | Month using its first two letters | Ja - De |
| <%loc_m2%> | Month as a two-letter abbreviation based on the current user settings | Ja - De |
| <%m3%> | Month using its first three letters | Jan - Dec |
| <%mmm%> | Month using its first three letters | Jan - 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 settings | Jan - Dec |
| <%mmmm%> | Full name of the month | January - December |
| <%loc_mmmm%> | Full month name based on the current user regional and language settings | January - December |
| (year-patterns) |
| <%q%> | Date shown as the quarter of the year | 1 - 4 |
| <%hy%> | Date shown as the half of the year | 1 - 2 |
| <%loc_y%> | Year represented by the last digit only, based on the current regional settings | 0 - 9 |
| <%yy%> | Last two digits of the year | 01 - 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 years | 01 - 99 |
| <%yyyy%> | Full year using four digits | 0100 - 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 applied | 0100 - 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 UTC | 1767085565940 |
| (localized era-patterns) |
| <%loc_g%> | Period/era based on the current user regional and language settings | A,B |
| <%loc_gg%> | Period/era based on the current user regional and language settings | AD,BC |
| (localized date-patterns) |
| <%loc_sdate%> | Date in short format based on the current user regional and language settings | 12/31/2000 |
| <%loc_ldate%> | Date in long format based on the current user regional and language settings | December 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 needed | 0 - 23 |
| <%hh%> | Hour in two digits | 00 - 23 |
| <%h12%> | Hour in 12-hour format, in one or two digits | 0/12 - 11 |
| <%hh12%> | Hour in 12-hour format, in two digits | 00/12 - 11 |
| <%n%> | Minute in one or two digits, as needed | 0 - 59 |
| <%nn%> | Minute in two digits | 00 - 59 |
| <%s%> | Second in one or two digits, as needed | 0 - 59 |
| <%ss%> | Second in two digits | 00 - 59 |
| <%AM/PM%> | 12-hour clock with uppercase "AM" or "PM" as appropriate | AM, PM |
| (localized time-patterns) |
| <%loc_AM/PM%> | Time marker such as AM or PM based on the current user regional and language settings | AM, PM |
| <%loc_A/P%> | Single-character time marker such as A or P based on the current user regional and language settings | A, P |
| <%loc_time%> | Time based on the current user regional and language settings | 1:30:15 PM |
| <%loc_time24%> | Time in 24-hour format without a time marker based on the current user regional and language settings | 13:30:15 |
| <%loc_tsep%> | Time separator based on the current user regional and language settings | : |
Parameters:
| Name |
Type |
Description |
value |
string
|
A value that specifies the alternate HTML labels being shown on date's header, when the time-scale is not visible. |
Example
null {null}, the date's header displays the label using default alternate-labels (and expression)
"" {string}, the date's header displays no date
"<%loc_sdate%>" {string}, displays the date in the short format using the current user regional and language settings
"<%d3%>, <%d%><|><%d2%>, <%d%><|><%d1%>, <%d%><|><%d%>" {string}, the date's header displays one, two or three letters for the week day based on the best fit
"<fgcolor red><%d3%>, <%d%><|><%d3%>, <%d%><=>month(value) = 1 ? 0 : 1" {string}, displays the date's header in red for January, and in black for the rest
SetHeaderDayShortLabel
The SetHeaderGroupHeight() method sets the height of the group's header (relative to the font size of the control). The
HeaderGroupHeight property is used to calculate the height of the group's header when the control displays groups. If the HeaderGroupHeight property is set to 0, the control hides the group's header and does not display the name of the group. If the HeaderGroupHeight property 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 property to 2. By default, the HeaderGroupHeight property 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 property is true
- The Groups collection has visible elements. By default, the Groups collection contains no Group objects
Parameters:
| Name |
Type |
Description |
value |
number
|
A value that indicates the height of the group's header. |
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
SetHeaderGroupHeight
SetImageAlign(value)
The SetImageAlign() method sets the alignment of the image within the event, while the
ImageSize property defines its dimensions (reserved for future use only). Together, these properties control how the image is displayed within the event, with ImageSize specifying the image's size and ImageAlign determining its position relative to the caption.
Parameters:
| Name |
Type |
Description |
value |
number
|
Defines the alignment of the event's image as one 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
|
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
SetImageAlign
SetImageSize(value)
The SetImageSize() method sets the size of the event's image, and the
ImageAlign property defines its alignment within the event (reserved for future use only). Together, they control how the image is displayed relative to the caption. ImageSize sets the image dimensions, while ImageAlign determines its position in relation to the caption. For captions or labels that support
ex-HTML formatting, images can be included using the
![]()
ex-HTML tag; however, ImageSize does not affect these images. The
![]()
tag supports a size attribute to specify the image's dimensions, for example:
![]()
apple:182002 sets the image named "apple" to size 18.
Parameters:
| Name |
Type |
Description |
value |
any
|
Indicates the size of the event's image as explained:
- {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.
|
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
SetImageSize
SetLocked(value)
The SetLocked() method locks or unlocks the control. The locked mode completely prevents user interaction with the control, while read-only mode only prevents modifications to events.
- When Locked is set to True, the control is fully locked, and users cannot scroll, select, or interact with any events within it.
- When Locked is set to False, the control behaves normally, allowing users to scroll, select, and interact with events.
In contrast, when the control is in read-only mode, users cannot create, resize, or move events, but they can still scroll, select, and interact with existing events. Therefore, the locked mode completely prevents user interaction with the control, while read-only mode only prevents modifications to events. The ReadOnly property makes the control read-only, while the Locked property makes the control locked (protected).
Parameters:
| Name |
Type |
Description |
value |
boolean
|
A boolean value that indicates whether the control is locked(protected) or unlocked. |
Example
false {boolean}, unlocks the control (can select any event)
true {boolean}, locks the control (can't select any event)
SetLocked
The SetLongDateFormat() method defines how dates are displayed in long form (date only, without time). This property supports
ex-HTML 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 dates in long format according to the
LongDateFormat and
LongTimeFormat properties. For example, if LongDateFormat is set to "<%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 property 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 value | 1 - 31 |
| <%dd%> | Day of the month using exactly two numeric digits | 01 - 31 |
| <%d1%> | Weekday using its first letter | S - S |
| <%loc_d1%> | Weekday as a single-letter abbreviation based on the current user settings | S - S |
| <%d2%> | Weekday using its first two letters | Su - Sa |
| <%loc_d2%> | Weekday as a two-letter abbreviation based on the current user settings | Su - Sa |
| <%d3%> | Weekday using its first three letters | Sun - Sat |
| <%ddd%> | Weekday using its first three letters | Sun - 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 settings | Sun - Sat |
| <%dddd%> | Full name of the weekday | Sunday - Saturday |
| <%loc_dddd%> | Full weekday name based on the current user regional and language settings | Sunday - Saturday |
| <%w%> | Numeric day of the week | 1 - 7 |
| <%y%> | Numeric day of the year | 1 - 366 |
| (week-patterns) |
| <%ww%> | Week of the year | 1 - 53 |
| (month-patterns) |
| <%m%> | Month of the year using one or two numeric digits, as needed | 1 - 12 |
| <%mm%> | Month of the year using exactly two numeric digits | 01 - 12 |
| <%mr%> | Month of the year using Roman numerals, as needed | I - XII |
| <%m1%> | Month using its first letter | J - D |
| <%loc_m1%> | Month as a single-letter abbreviation based on the current user settings | J - D |
| <%m2%> | Month using its first two letters | Ja - De |
| <%loc_m2%> | Month as a two-letter abbreviation based on the current user settings | Ja - De |
| <%m3%> | Month using its first three letters | Jan - Dec |
| <%mmm%> | Month using its first three letters | Jan - 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 settings | Jan - Dec |
| <%mmmm%> | Full name of the month | January - December |
| <%loc_mmmm%> | Full month name based on the current user regional and language settings | January - December |
| (year-patterns) |
| <%q%> | Date shown as the quarter of the year | 1 - 4 |
| <%hy%> | Date shown as the half of the year | 1 - 2 |
| <%loc_y%> | Year represented by the last digit only, based on the current regional settings | 0 - 9 |
| <%yy%> | Last two digits of the year | 01 - 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 years | 01 - 99 |
| <%yyyy%> | Full year using four digits | 0100 - 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 applied | 0100 - 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 UTC | 1767085565940 |
| (localized era-patterns) |
| <%loc_g%> | Period/era based on the current user regional and language settings | A,B |
| <%loc_gg%> | Period/era based on the current user regional and language settings | AD,BC |
| (localized date-patterns) |
| <%loc_sdate%> | Date in short format based on the current user regional and language settings | 12/31/2000 |
| <%loc_ldate%> | Date in long format based on the current user regional and language settings | December 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 needed | 0 - 23 |
| <%hh%> | Hour in two digits | 00 - 23 |
| <%h12%> | Hour in 12-hour format, in one or two digits | 0/12 - 11 |
| <%hh12%> | Hour in 12-hour format, in two digits | 00/12 - 11 |
| <%n%> | Minute in one or two digits, as needed | 0 - 59 |
| <%nn%> | Minute in two digits | 00 - 59 |
| <%s%> | Second in one or two digits, as needed | 0 - 59 |
| <%ss%> | Second in two digits | 00 - 59 |
| <%AM/PM%> | 12-hour clock with uppercase "AM" or "PM" as appropriate | AM, PM |
| (localized time-patterns) |
| <%loc_AM/PM%> | Time marker such as AM or PM based on the current user regional and language settings | AM, PM |
| <%loc_A/P%> | Single-character time marker such as A or P based on the current user regional and language settings | A, P |
| <%loc_time%> | Time based on the current user regional and language settings | 1:30:15 PM |
| <%loc_time24%> | Time in 24-hour format without a time marker based on the current user regional and language settings | 13:30:15 |
| <%loc_tsep%> | Time separator based on the current user regional and language settings | : |
Parameters:
| Name |
Type |
Description |
value |
string
|
A value that indicates the long date format. |
Example
null {null}, "<%loc_ldate%>"
"" {string}, nothing is displayed
"<%loc_ldate%>" {string}, displays the date in the long format using the current user regional and language settings
"<%mm%>/<%dd%>/<%yyyy%>" {string}, displays the date in mm/dd/yyyy format
SetLongDateFormat
The SetLongTimeFormat() method defines how times are displayed in long form (time only, without date). This property supports
ex-HTML 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 times in long format according to the
LongDateFormat and
LongTimeFormat properties. For example, if LongTimeFormat is set to "<%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 property is set to "<%hh%>:<%nn%>:<%ss%> <%AM/PM%>", which displays 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 value | 1 - 31 |
| <%dd%> | Day of the month using exactly two numeric digits | 01 - 31 |
| <%d1%> | Weekday using its first letter | S - S |
| <%loc_d1%> | Weekday as a single-letter abbreviation based on the current user settings | S - S |
| <%d2%> | Weekday using its first two letters | Su - Sa |
| <%loc_d2%> | Weekday as a two-letter abbreviation based on the current user settings | Su - Sa |
| <%d3%> | Weekday using its first three letters | Sun - Sat |
| <%ddd%> | Weekday using its first three letters | Sun - 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 settings | Sun - Sat |
| <%dddd%> | Full name of the weekday | Sunday - Saturday |
| <%loc_dddd%> | Full weekday name based on the current user regional and language settings | Sunday - Saturday |
| <%w%> | Numeric day of the week | 1 - 7 |
| <%y%> | Numeric day of the year | 1 - 366 |
| (week-patterns) |
| <%ww%> | Week of the year | 1 - 53 |
| (month-patterns) |
| <%m%> | Month of the year using one or two numeric digits, as needed | 1 - 12 |
| <%mm%> | Month of the year using exactly two numeric digits | 01 - 12 |
| <%mr%> | Month of the year using Roman numerals, as needed | I - XII |
| <%m1%> | Month using its first letter | J - D |
| <%loc_m1%> | Month as a single-letter abbreviation based on the current user settings | J - D |
| <%m2%> | Month using its first two letters | Ja - De |
| <%loc_m2%> | Month as a two-letter abbreviation based on the current user settings | Ja - De |
| <%m3%> | Month using its first three letters | Jan - Dec |
| <%mmm%> | Month using its first three letters | Jan - 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 settings | Jan - Dec |
| <%mmmm%> | Full name of the month | January - December |
| <%loc_mmmm%> | Full month name based on the current user regional and language settings | January - December |
| (year-patterns) |
| <%q%> | Date shown as the quarter of the year | 1 - 4 |
| <%hy%> | Date shown as the half of the year | 1 - 2 |
| <%loc_y%> | Year represented by the last digit only, based on the current regional settings | 0 - 9 |
| <%yy%> | Last two digits of the year | 01 - 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 years | 01 - 99 |
| <%yyyy%> | Full year using four digits | 0100 - 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 applied | 0100 - 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 UTC | 1767085565940 |
| (localized era-patterns) |
| <%loc_g%> | Period/era based on the current user regional and language settings | A,B |
| <%loc_gg%> | Period/era based on the current user regional and language settings | AD,BC |
| (localized date-patterns) |
| <%loc_sdate%> | Date in short format based on the current user regional and language settings | 12/31/2000 |
| <%loc_ldate%> | Date in long format based on the current user regional and language settings | December 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 needed | 0 - 23 |
| <%hh%> | Hour in two digits | 00 - 23 |
| <%h12%> | Hour in 12-hour format, in one or two digits | 0/12 - 11 |
| <%hh12%> | Hour in 12-hour format, in two digits | 00/12 - 11 |
| <%n%> | Minute in one or two digits, as needed | 0 - 59 |
| <%nn%> | Minute in two digits | 00 - 59 |
| <%s%> | Second in one or two digits, as needed | 0 - 59 |
| <%ss%> | Second in two digits | 00 - 59 |
| <%AM/PM%> | 12-hour clock with uppercase "AM" or "PM" as appropriate | AM, PM |
| (localized time-patterns) |
| <%loc_AM/PM%> | Time marker such as AM or PM based on the current user regional and language settings | AM, PM |
| <%loc_A/P%> | Single-character time marker such as A or P based on the current user regional and language settings | A, P |
| <%loc_time%> | Time based on the current user regional and language settings | 1:30:15 PM |
| <%loc_time24%> | Time in 24-hour format without a time marker based on the current user regional and language settings | 13:30:15 |
| <%loc_tsep%> | Time separator based on the current user regional and language settings | : |
Parameters:
| Name |
Type |
Description |
value |
string
|
A value that indicates the long time format. |
Example
null {null}, "<%hh%>:<%nn%>:<%ss%> <%AM/PM%>"
"" {string}, nothing is displayed
"<%loc_time24%>" {string}, Indicates the time in 24 hours format without a time marker using the current user regional and language settings
"<%hh%>:<%nn%>:<%ss%>" {string}, displays the time in hh:nn:ss format (no time marker)
SetLongTimeFormat
SetMisc(value)
The SetMisc() method 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.
Parameters:
| Name |
Type |
Description |
value |
MiscellaneousOptions
|
A value that indicates the control's miscellaneous options. |
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
SetMisc
SetOnResizeControl(value)
The SetOnResizeControl() method defines which panel is resized when the entire control is resized. It can also 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 property is set to exResizePanelRight | exCalendarFit, meaning the right panel (the schedule view) is resized when the control is resized, and the calendar automatically fits its panel.
Parameters:
| Name |
Type |
Description |
value |
exontrol.Schedule.OnResizeControlEnum
|
A value that specifies the panel to resize once the entire control gets resized. |
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)
SetOnResizeControl
SetOnSelectDate(value)
The SetOnSelectDate() method specifies the action performed when the user selects new dates in the calendar panel. By default, the
OnSelectDate property is set to exFitSelToView, which adjusts the day size (
DayViewWidth and
DayViewHeight properties) and scrolls the view so the selected dates fit within the schedule view. Setting OnSelectDate to exNoViewChange prevents any scrolling or layout changes when new dates are selected. Setting it to exEnsureVisibleDate scrolls the view to ensure that the selected date is visible within the schedule view.
Parameters:
| Name |
Type |
Description |
value |
exontrol.Schedule.OnSelectDateEnum
|
A value that specifies the action that the control does once the user selects new dates in the calendar panel. |
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
SetOnSelectDate
SetOptions(nOptions, bIncludeAllopt) → {boolean}
The SetOptions() method defines a collection of configurable settings that can be applied to a control, allowing you to customize its behavior and appearance. You can assign these options either directly through the
Options property or programmatically, enabling you to update one or more settings at runtime. The
oSV member of the control contains an SV object that defines the default schedule view. All options exposed by oSV are also available as properties of the control, allowing you to get or set them directly through the control's interface.
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.SetOptions({allowActions: "scroll"}), so the control updates and applies the new value.
Parameters:
| Name |
Type |
Attributes |
Description |
nOptions |
object
|
|
Specifies an object of Schedule.Options type that indicates the new options to apply. |
bIncludeAll |
boolean
|
<optional>
|
Indicates whether all fields of nOptions are included in the event's oOptions object. |
Returns:
Returns true, if there were options applied to the event
-
Type
-
boolean
Example
{allowActions: "scroll"}, changes the actions the user can perform once the user clicks or touches the control to "scroll"
{imageAlign: 1, imageSize: 24}, changes the alignment and the size for all images within the control.
SetOptions
SetPad(value)
The SetPad() method can be used to increase the size of an event by adding extra space around its content, while the PadSelectEvent property creates a gap between the event and its selection border, enhancing the visual distinction of selected events. By default, the
Pad property is set to [2,2], meaning the event's width is increased by 4 pixels (2 pixels on each side) and its height is increased by 4 pixels (2 pixels on the top and bottom).
Parameters:
| Name |
Type |
Description |
value |
number
|
Array.<number>
|
string
|
Specifies a value that could be:
- {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
|
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
SetPad
SetPaneMinWidthLeft(value)
The SetPaneMinWidthLeft() method sets the minimum width of the left panel, while the
PaneWidthLeft property defines its actual width. Similarly, the
PaneMinWidthRight property defines the minimum width of the right panel. The
OnResizeControl property specifies which panel is resized when the entire control is resized. Setting PaneMinWidthLeft or PaneMinWidthRight to a specific value (for example, 196) enforces that minimum width in pixels, while setting it to null removes the constraint and allows the panel to be resized without a minimum width limit.
Parameters:
| Name |
Type |
Description |
value |
number
|
A value that defines the minimum size(width) of the left panel. |
Example
196 {number}, the left panel has a minimum width of 196 pixels
SetPaneMinWidthLeft
SetPaneMinWidthRight(value)
The SetPaneMinWidthRight() method sets the minimum width of the right panel, while the
PaneWidthRight property defines its actual width. Similarly, the
PaneMinWidthLeft property defines the minimum width of the left panel. The
OnResizeControl property specifies which panel is resized when the entire control is resized. Setting PaneMinWidthLeft or PaneMinWidthRight to a specific value (for example, 196) enforces that minimum width in pixels, while setting it to null removes the constraint and allows the panel to be resized without a minimum width limit.
Parameters:
| Name |
Type |
Description |
value |
number
|
A value that defines the minimum size(width) of the right panel. |
Example
196 {number}, the right panel has a minimum width of 196 pixels
SetPaneMinWidthRight
SetPaneWidthLeft(value)
The SetPaneWidthLeft() method defines the width of the left panel, while the
PaneWidthRight property defines the width of the right panel. The
PaneMinWidthLeft property defines the minimum size(width) of the left panel. The
OnResizeControl property specifies which panel is resized when the entire control is resized. Setting PaneWidthLeft or PaneWidthRight to 0 hides the corresponding panel, while setting it to a specific value (for example, 196) defines the panel's width in pixels.
Parameters:
| Name |
Type |
Description |
value |
number
|
A value that defines the size(width) of the left panel. |
Example
0 {number}, hides the left-panel (has no effect if OnResizeControl property does not include exCalendarFit flag)
196 {number}, the left panel has a width of 196 pixels
SetPaneWidthLeft
SetPaneWidthRight(value)
The SetPaneWidthRight() method defines the width of the right panel, while the
PaneWidthLeft property defines the width of the left panel. The
PaneMinWidthRight property defines the minimum size(width) of the right panel. The
OnResizeControl property specifies which panel is resized when the entire control is resized. Setting PaneWidthLeft or PaneWidthRight to 0 hides the corresponding panel, while setting it to a specific value (for example, 196) defines the panel's width in pixels.
Parameters:
| Name |
Type |
Description |
value |
number
|
A value that defines the size(width) of the right panel. |
Example
0 {number}, hides the right-panel
196 {number}, the right panel has a width of 196 pixels
SetPaneWidthRight
SetReadOnly(value)
The SetReadOnly() method sets the control in read-only mode. When ReadOnly is set, users cannot create, resize, or move events within the control, but they can still scroll, select, and interact with existing events. In contrast, when
Locked property is set, users cannot scroll, select, or interact with any events. Therefore, the read-only mode prevents modifications to events while still allowing interaction, whereas the locked mode completely disables all user interaction with the control. The
ReadOnly property makes the control read-only, while the Locked property makes the control locked (protected).
Parameters:
| Name |
Type |
Description |
value |
boolean
|
A boolean value that indicates whether the control is read-only. |
Example
false {boolean}, the user can edit or drag any event
true {boolean}, the user can not edit or drag the events
SetReadOnly
The SetScrollPos() method scrolls horizontally and/or vertically the control's default view. The value is an object of
type {x, y}, where the x value specifies the horizontal scroll position and the y value specifies the vertical scroll position. Adjusting the
ScrollPos property allows you to control which portion of the content is visible, enabling efficient navigation through the schedule. For example, setting ScrollPos to {x: 100} scrolls the view horizontally to position 100, while {x: 100, y: 50} scrolls horizontally to 100 and vertically to 50. The
ScrollBars property specifies whether horizontal and vertical scroll bars are displayed, and the onscroll event is triggered whenever the user scrolls the control's content.
Parameters:
| Name |
Type |
Description |
value |
object
|
Specifies an object of {x,y} type that defines the view's horizontal and vertical scroll-position.
Properties
| Name |
Type |
Description |
x |
number
|
indicates the horizontal scroll-position. |
y |
number
|
indicates the vertical scroll-position. |
|
Example
{x: 100} {object}, scrolls the view horizontally to position 100
{x: 100, y: 50} {object}, scrolls horizontally to 100 and vertically to 50
SetScrollPos
SetSelectEventStyle(value)
The SetSelectEventStyle() method specifies how a selected event is displayed. The "select" shape (defined in the
Shapes property) determines the shape and color used for the selected event. The
SingleSel property defines whether the control supports single, multiple, or toggle selection. By default, the SelectEventStyle property is set to 0, which combines the "select" shape with the event's own shape.
Parameters:
| Name |
Type |
Description |
value |
Schedule.SelectEventStyleEnum
|
A value that specifies how the selected-event gets displayed, as one of 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.
|
Example
null {null} or 0 {number}, the "select" shape is combined with the event's shape
1 {number}, the "select" shape is displayed on the event's background
SetSelectEventStyle
SetShapes(value)
The SetShapes() method sets the shapes that each part of the control can display and is used to customize its visual appearance. It allows you to apply different shapes and colors to various parts of the control, enhancing its overall look and feel. For example, the string "green(event),lime(calendar-uiHighlight)" applies a green color to events and a lime color to calendar dates that contain events.
Parameters:
| Name |
Type |
Description |
value |
string
|
A string expression that defines the shapes each part of the control can display.
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) |
|
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
SetShapes
The SetShortDateFormat() method specifies how dates are displayed in short form (date only, without time). This property 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 dates in short format according to the
ShortDateFormat and
ShortTimeFormat properties. For example, if ShortDateFormat is set to "<%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 property is set to "<%loc_sdate%>", meaning the short date format is determined 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 value | 1 - 31 |
| <%dd%> | Day of the month using exactly two numeric digits | 01 - 31 |
| <%d1%> | Weekday using its first letter | S - S |
| <%loc_d1%> | Weekday as a single-letter abbreviation based on the current user settings | S - S |
| <%d2%> | Weekday using its first two letters | Su - Sa |
| <%loc_d2%> | Weekday as a two-letter abbreviation based on the current user settings | Su - Sa |
| <%d3%> | Weekday using its first three letters | Sun - Sat |
| <%ddd%> | Weekday using its first three letters | Sun - 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 settings | Sun - Sat |
| <%dddd%> | Full name of the weekday | Sunday - Saturday |
| <%loc_dddd%> | Full weekday name based on the current user regional and language settings | Sunday - Saturday |
| <%w%> | Numeric day of the week | 1 - 7 |
| <%y%> | Numeric day of the year | 1 - 366 |
| (week-patterns) |
| <%ww%> | Week of the year | 1 - 53 |
| (month-patterns) |
| <%m%> | Month of the year using one or two numeric digits, as needed | 1 - 12 |
| <%mm%> | Month of the year using exactly two numeric digits | 01 - 12 |
| <%mr%> | Month of the year using Roman numerals, as needed | I - XII |
| <%m1%> | Month using its first letter | J - D |
| <%loc_m1%> | Month as a single-letter abbreviation based on the current user settings | J - D |
| <%m2%> | Month using its first two letters | Ja - De |
| <%loc_m2%> | Month as a two-letter abbreviation based on the current user settings | Ja - De |
| <%m3%> | Month using its first three letters | Jan - Dec |
| <%mmm%> | Month using its first three letters | Jan - 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 settings | Jan - Dec |
| <%mmmm%> | Full name of the month | January - December |
| <%loc_mmmm%> | Full month name based on the current user regional and language settings | January - December |
| (year-patterns) |
| <%q%> | Date shown as the quarter of the year | 1 - 4 |
| <%hy%> | Date shown as the half of the year | 1 - 2 |
| <%loc_y%> | Year represented by the last digit only, based on the current regional settings | 0 - 9 |
| <%yy%> | Last two digits of the year | 01 - 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 years | 01 - 99 |
| <%yyyy%> | Full year using four digits | 0100 - 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 applied | 0100 - 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 UTC | 1767085565940 |
| (localized era-patterns) |
| <%loc_g%> | Period/era based on the current user regional and language settings | A,B |
| <%loc_gg%> | Period/era based on the current user regional and language settings | AD,BC |
| (localized date-patterns) |
| <%loc_sdate%> | Date in short format based on the current user regional and language settings | 12/31/2000 |
| <%loc_ldate%> | Date in long format based on the current user regional and language settings | December 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 needed | 0 - 23 |
| <%hh%> | Hour in two digits | 00 - 23 |
| <%h12%> | Hour in 12-hour format, in one or two digits | 0/12 - 11 |
| <%hh12%> | Hour in 12-hour format, in two digits | 00/12 - 11 |
| <%n%> | Minute in one or two digits, as needed | 0 - 59 |
| <%nn%> | Minute in two digits | 00 - 59 |
| <%s%> | Second in one or two digits, as needed | 0 - 59 |
| <%ss%> | Second in two digits | 00 - 59 |
| <%AM/PM%> | 12-hour clock with uppercase "AM" or "PM" as appropriate | AM, PM |
| (localized time-patterns) |
| <%loc_AM/PM%> | Time marker such as AM or PM based on the current user regional and language settings | AM, PM |
| <%loc_A/P%> | Single-character time marker such as A or P based on the current user regional and language settings | A, P |
| <%loc_time%> | Time based on the current user regional and language settings | 1:30:15 PM |
| <%loc_time24%> | Time in 24-hour format without a time marker based on the current user regional and language settings | 13:30:15 |
| <%loc_tsep%> | Time separator based on the current user regional and language settings | : |
Parameters:
| Name |
Type |
Description |
value |
string
|
A value that indicates the short date format. |
Example
null {null}, "<%loc_sdate%>"
"" {string}, nothing is displayed
"<%loc_sdate%>" {string}, displays the date in the short format using the current user regional and language settings
"<%mm%>/<%dd%>/<%yyyy%>" {string}, displays the date in mm/dd/yyyy format
SetShortDateFormat
The SetShortTimeFormat() sets how time values are displayed in short form (time only, without date). This property 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 times in short format according to the
ShortDateFormat and
ShortTimeFormat properties. For example, if ShortTimeFormat is set to "<%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 property is set to "<%h%>:<%nn%> <%AM/PM%>", meaning the short time format is determined 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 value | 1 - 31 |
| <%dd%> | Day of the month using exactly two numeric digits | 01 - 31 |
| <%d1%> | Weekday using its first letter | S - S |
| <%loc_d1%> | Weekday as a single-letter abbreviation based on the current user settings | S - S |
| <%d2%> | Weekday using its first two letters | Su - Sa |
| <%loc_d2%> | Weekday as a two-letter abbreviation based on the current user settings | Su - Sa |
| <%d3%> | Weekday using its first three letters | Sun - Sat |
| <%ddd%> | Weekday using its first three letters | Sun - 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 settings | Sun - Sat |
| <%dddd%> | Full name of the weekday | Sunday - Saturday |
| <%loc_dddd%> | Full weekday name based on the current user regional and language settings | Sunday - Saturday |
| <%w%> | Numeric day of the week | 1 - 7 |
| <%y%> | Numeric day of the year | 1 - 366 |
| (week-patterns) |
| <%ww%> | Week of the year | 1 - 53 |
| (month-patterns) |
| <%m%> | Month of the year using one or two numeric digits, as needed | 1 - 12 |
| <%mm%> | Month of the year using exactly two numeric digits | 01 - 12 |
| <%mr%> | Month of the year using Roman numerals, as needed | I - XII |
| <%m1%> | Month using its first letter | J - D |
| <%loc_m1%> | Month as a single-letter abbreviation based on the current user settings | J - D |
| <%m2%> | Month using its first two letters | Ja - De |
| <%loc_m2%> | Month as a two-letter abbreviation based on the current user settings | Ja - De |
| <%m3%> | Month using its first three letters | Jan - Dec |
| <%mmm%> | Month using its first three letters | Jan - 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 settings | Jan - Dec |
| <%mmmm%> | Full name of the month | January - December |
| <%loc_mmmm%> | Full month name based on the current user regional and language settings | January - December |
| (year-patterns) |
| <%q%> | Date shown as the quarter of the year | 1 - 4 |
| <%hy%> | Date shown as the half of the year | 1 - 2 |
| <%loc_y%> | Year represented by the last digit only, based on the current regional settings | 0 - 9 |
| <%yy%> | Last two digits of the year | 01 - 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 years | 01 - 99 |
| <%yyyy%> | Full year using four digits | 0100 - 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 applied | 0100 - 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 UTC | 1767085565940 |
| (localized era-patterns) |
| <%loc_g%> | Period/era based on the current user regional and language settings | A,B |
| <%loc_gg%> | Period/era based on the current user regional and language settings | AD,BC |
| (localized date-patterns) |
| <%loc_sdate%> | Date in short format based on the current user regional and language settings | 12/31/2000 |
| <%loc_ldate%> | Date in long format based on the current user regional and language settings | December 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 needed | 0 - 23 |
| <%hh%> | Hour in two digits | 00 - 23 |
| <%h12%> | Hour in 12-hour format, in one or two digits | 0/12 - 11 |
| <%hh12%> | Hour in 12-hour format, in two digits | 00/12 - 11 |
| <%n%> | Minute in one or two digits, as needed | 0 - 59 |
| <%nn%> | Minute in two digits | 00 - 59 |
| <%s%> | Second in one or two digits, as needed | 0 - 59 |
| <%ss%> | Second in two digits | 00 - 59 |
| <%AM/PM%> | 12-hour clock with uppercase "AM" or "PM" as appropriate | AM, PM |
| (localized time-patterns) |
| <%loc_AM/PM%> | Time marker such as AM or PM based on the current user regional and language settings | AM, PM |
| <%loc_A/P%> | Single-character time marker such as A or P based on the current user regional and language settings | A, P |
| <%loc_time%> | Time based on the current user regional and language settings | 1:30:15 PM |
| <%loc_time24%> | Time in 24-hour format without a time marker based on the current user regional and language settings | 13:30:15 |
| <%loc_tsep%> | Time separator based on the current user regional and language settings | : |
Parameters:
| Name |
Type |
Description |
value |
string
|
A value that indicates the short time format. |
Example
null {null}, "<%h%>:<%nn%> <%AM/PM%>"
"" {string}, nothing is displayed
"<%loc_time%>" {string}, indicates the time using the current user regional and language settings
"<%hh%>:<%nn%>" {string}, displays the time in hh:nn format
SetShortTimeFormat
The SetShowAllDayHeader() method shows or hides the header for all-day events. The all-day header is a dedicated section within the schedule control used to display events that span an entire day or more. The HeaderAllDayEventHeight property defines the height of events displayed within the all-day header, relative to the control's font size. The AllowMultiDaysEvent property specifies whether users can create events that span multiple days. The Event.
AllDay property 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 property is set to False, meaning the all-day header is hidden. Setting it to True makes the all-day header visible, allowing all-day events to be displayed separately from regular timed events.
Parameters:
| Name |
Type |
Description |
value |
boolean
|
Specifies a boolean value that specifies whether the header for all-day events is visible or hidden. |
Example
false{boolean} or null {null}, hides the control's all-day header
true{boolean}, shows the control's all-day header
SetShowAllDayHeader
SetShowEventLabels(value)
The SetShowEventLabels() method specifies whether the short, long and extra labels of events are visible. The events caption remains visible (if defined) even when ShowEventLabels is set to False. The ShortLabel, LongLabel, and
ExtraLabel properties of the Event object define the content of its labels, while the DefaultEventShortLabel, DefaultEventLongLabel, and DefaultEventExtraLabel properties define their default values (applies to events that do not have their own labels defined). The Event.
Caption property defines the event's caption. By default, the ShowEventLabels property is True, meaning all labels are displayed.
Parameters:
| Name |
Type |
Description |
value |
boolean
|
A value that indicates whether the short, long and extra labels of the events are visible or hidden. |
Example
true {boolean}, the short, long and extra labels of the events are visible (default)
false {boolean}, the short, long and extra labels of the events are hidden
SetShowEventLabels
SetShowEvents(value)
The SetShowEvents() method specifies which types of events are displayed within the control. Events are the core elements of the schedule control and represent scheduled items or appointments, each having properties such as start time, end time, caption, and more. The ShowEvents property allows you to control the visibility of different types of events within the schedule. The Event.
Visible field indicates whether the event is visible or hidden. By default, it is set to -1 (exShowAllEvents), meaning that all events are displayed.
Parameters:
| Name |
Type |
Description |
value |
Schedule.ShowEventsEnum
|
Indicates the type of the events the control displays, as one of the following values:
- -1 (exShowAllEvents) {number}, shows all events
- 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)
|
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)
SetShowEvents
SetShowGroupingEvents(value)
The SetShowGroupingEvents() method specifies whether the schedule view displays grouped events, and it has effect only when the control includes groups. The
DisplayGroupingButton property gets or sets a value that indicates whether the grouping button is displayed in the date header. The
ApplyGroupingColors property specifies whether the schedule view shows the events using the colors of owner groups (group's eventShape field). When set to True, events are displayed grouped by their owner group. When set to False, all events are displayed in a single list without grouping. In grouped mode, each date is divided into sections for each group, and the group name is displayed in the header of each section. The AllowMoveEventToOtherGroup property indicates whether the event can be moved from a group to another by drag and drop. By default, the schedule view does not show grouped events (false).
The control displays groups if:
- ShowGroupingEvents property is true
- The Groups collection has visible elements. By default, the Groups collection contains no Group objects
Parameters:
| Name |
Type |
Description |
value |
boolean
|
Indicates whether the schedule view shows grouped events. |
Example
false {boolean}, the schedule view does not show grouped events (default)
true {boolean}, the schedule view shows grouped events
SetShowGroupingEvents
SetShowHighlightEvent(value)
The SetShowHighlightEvent() method defines whether the control highlights dates that contain events. When enabled, the "uiHighlight" or "calendar-uiHighlight" shape is applied to dates with events, making them easier to identify and navigate within the schedule view. The calendar panel can visually emphasize these dates to improve usability. Setting the ShowHighlightEvent property to True enables this feature, while setting it to False disables it.
Parameters:
| Name |
Type |
Description |
value |
boolean
|
A value that indicates whether the control highlights the dates that contain events. |
Example
true {boolean}, the control highlights the dates that contain events
false {boolean}, the control does not highlight the dates that contain events
SetShowHighlightEvent
SetShowMarkZone(value)
The SetShowMarkZone() method specifies how mark-zones are displayed within the control, while the
MarkZones property defines the mark-zones themselves. Mark-zones represent highlighted time intervals used to indicate special periods such as non-working hours, lunch breaks, or other significant ranges. The
ShowMarkZone property controls whether mark-zones are displayed in the background (behind events), in the foreground (in front of events), or not displayed at all. By default, the ShowMarkZone property is set to 2 (exShowMarkZonesFront), meaning mark-zones are displayed in the foreground.
Parameters:
| Name |
Type |
Description |
value |
Schedule.ShowMarkZoneEnum
|
Specifies any of the following values:
- 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
|
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)
SetShowMarkZone
SetShowViewCompact(value)
The SetShowViewCompact() method specifies how days are arranged within the schedule view. This option is useful for optimizing the display, such as showing more days in the view or aligning the days to match the calendar panel. By default, the
ShowViewCompact property is set to exViewCalendarCompact, which arranges the schedule view days to match the calendar panel, except that the first day of the month either continues immediately after the last day of the previous month or starts a new row.
Parameters:
| Name |
Type |
Description |
value |
exontrol.Schedule.ShowViewCompactEnum
|
A value that specifies how the days get arranged within the schedule-view. |
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.
SetShowViewCompact
SetSmooth(value)
The SetSmooth() method sets the time in ms the control goes from one layout to another. The
smooth field is a number that 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.
Parameters:
| Name |
Type |
Description |
value |
number
|
Indicates the time in ms the control goes from one layout to another. |
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.
SetSmooth
SetTfi(value)
The SetTfi() method sets the
font attributes for the control's captions, allowing precise customization of their appearance by specifying the text style (such as bold or italic), font family, and font size, either as a string (e.g., "b monospace 16") or as an object (e.g., {bold: true, italic: false, fontName: "monospace", fontSize: 16}), and immediately applies these settings to update the displayed captions.
Parameters:
| Name |
Type |
Description |
value |
string
|
object
|
Indicates a string representation such as "b monospace 16" or as an object such as {bold: true, fontName: "monospace", fontSize: 16}.
The value 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 string value 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 value 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.
|
Example
null {null}, the tfi field is ignored
"bold monospace 16 <fg blue>" {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
SetTfi
SetTimeScale(oTimeScaleOpts)
The SetTimeScale() method sets the 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 property 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 property specifies the time the day starts from, in "HH[:MM]" format. The
DayEndTime property specifies the time the day ends to, in "HH[:MM]" format. By default, the TimeScale property is set to null, which means that the control uses its default settings for the time-scale.
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.
Parameters:
Example
The following sample defines the time-scale to show hours without AM/PM designations
{
width: 36,
allowResize: false,
majorTimeLabel: "<%hh%>:<%nn%> ",
minorTimeLabel: ":<%nn%> ",
shape: "rgba(0,0,0,0.10)"
}
SetTimeScale
The SetToolTipDelay() method sets the time the mouse pointer must hover over an object before the tool tip appears. Setting it to 0 makes tool tips appear immediately, while a higher value (for example, 128) introduces a delay to prevent accidental pop-ups when moving the mouse quickly across the control. The
ToolTipPopDelay property determines how long the tool tip remains visible (in milliseconds) if the mouse pointer stays stationary, and the
ToolTipWidth property sets the maximum width of the control's tool tip in pixels.
Parameters:
| Name |
Type |
Description |
value |
number
|
A value that specifies how long the mouse pointer must point to an object before the tool tip appears. |
Example
0 {number}, the tooltip is shown "immediately"
128 {number}, the tooltip is displayed in 128 ms.
SetToolTipDelay
The SetToolTipPopDelay() method sets the duration, in milliseconds, that a tooltip remains visible when the mouse pointer is stationary over a control. The
ToolTipPopDelay property is expressed in milliseconds. The
ToolTipDelay property defines how long the mouse pointer must hover over an object before the tooltip appears. The
ToolTipWidth property specifies the width of the tooltip window in pixels. By default, the tooltip remains visible for 5000 milliseconds.
Parameters:
| Name |
Type |
Description |
value |
number
|
A value that specifies the period in ms of time the tool top remains visible if the mouse pointer is stationary within a control. |
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
SetToolTipPopDelay
The SetToolTipWidth() method changes the width of the tooltip window, in pixels. The
ToolTipWidth property gets or sets the width of the tooltip window, in pixels. The ToolTipWidth property accepts a number value that specifies the width of the tooltip window, in pixels. The
ToolTipDelay property gets or sets how long the mouse pointer must point to an object before the tool tip appears. The
ToolTipPopDelay property gets or sets the period in ms of time the tool top remains visible if the mouse pointer is stationary within a control.
Parameters:
| Name |
Type |
Description |
value |
number
|
A value that specifies the width of the tooltip window, in pixels. |
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
SetToolTipWidth
SetUpdateEventsLabel(value)
The SetUpdateEventsLabel() method specifies the label displayed while moving or resizing events, while the CreateEventLabel property defines the label shown when creating events. The FormatEventUpdateLabel option defines how the label is formatted. These properties support
ex-HTML tags (such as <b>, <i>, <fgcolor>, ...), as well as <%=formula%> tags. The <%=formula%> tag evaluates a
format expression that can include placeholders like %1, %2, and so on, where each placeholder corresponds to a specific event property (for example, %1 refers to ExEventStartDateTime, %2 to ExEventEndDateTime). By default, the UpdateEventsLabel property 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 event's short margins on the first line and its duration (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.
Parameters:
| Name |
Type |
Description |
value |
string
|
A value that indicates the event's label while it is resized or moved by drag and drop. |
Example
null {null}, the control's default label is shown while resizing or moving events ("<%=%256%><br><%=((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)' : '')%>")
"" {string}, no label is shown for the event to resize or move
"Start: <%=%1%><br>End: <%=%2%>" {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: <%=((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)' : '')%>" {string}, displays the duration of the event in days, hours and minutes
SetUpdateEventsLabel
SetWheelChange(value)
The SetWheelChange() method changes the amount the calendar scrolls when the user rolls 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.
Parameters:
| Name |
Type |
Description |
value |
number
|
A value that specifies the amount the control scrolls when the user rolls the mouse wheel. |
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)
SetWheelChange
SetZoom(value)
The SetZoom() method defines the zoom factor of the control's content. The zoom factor determines how much the control's content is magnified or reduced. Once the user adjusts the browser's zoom level, the control automatically recalculates its zoom factor to maintain the correct scaling of its content. The
ZoomLevels property defines the allowed zoom levels the user can select from.
Parameters:
| Name |
Type |
Description |
value |
number
|
A numeric value between 10 and 1000 that specifies the zoom factor of the control's content. |
Example
null {null}, Specifies normal-view (100%)
150 {number}, Indicates that the control's content is magnfied to 150%
SetZoom
SetZoomLevels(value)
The SetZoomLevels() method defines the allowed zoom levels for the control and can be specified as a comma-separated string of numeric values (e.g., "50,100,150,200"). These values represent the percentage levels at which users can zoom in or out of the control's content. The
ZoomLevels property works together with the
Zoom property to provide a range of zoom options. For example, if ZoomLevels is set to "50,100,150,200", users can choose from these predefined zoom levels to adjust their view of the content.
Parameters:
| Name |
Type |
Description |
value |
string
|
specifies a list of numbers separated by comma that indicates the zoom-levels/zoom-levels the control's content is allowed to zoom. |
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%
SetZoomLevels
Smooth(callback, thisArg, oSmoothOptsopt, thisArg)
The Smooth() method makes the control transition smoothly from the current layout to a new layout. In short, it applies a gradual, animated change to the layout generated by the callback, instead of switching instantly. The smooth-transition goes from the current layout to the new layout generated by the callback. The
smooth field defines the time in ms the control goes from one layout to another. The
BeginUpdate/
EndUpdate() methods are not required to be called when you use the Update() or Smooth() methods, because the methods already maintain performance while performing multiple changes to the control.
Parameters:
| Name |
Type |
Attributes |
Description |
callback |
callback
|
|
Indicates a callback function that generates the new layout for the control ( such as removing or adding new events to the control). The callback is provided with no arguments. |
thisArg |
any
|
|
Specifies the value of this keyword for callback functions. If missing, the SV object reference is used instead. |
oSmoothOpts |
object
|
<optional>
|
Indicates an object of {cbkR,cbkI,cbkT} type that defines callback to invoke when Smooth operation begins, progress and ends as explained below:
- cbkR {callback}, specifies a function of callback(oSmooth) type that's invoked while Smooth progressively runs
- cbkI {callback}, specifies a function of callback(oSmooth) type that's invoked once the Smooth operation begins
- cbkT {callback}, specifies a function of callback(oSmooth) type that's invoked once the Smooth operation ends
The oSmooth's parameter of cbkI, cbkR or cbkT callbacks is undefined while no animated-smooth, else it includes the following:
- oW {exontrol.W}, indicates the current window as an object of exontrol.W
- oZ {exontrol.WS}, holds the current visible-windows as an object of exontrol.WS([exontrol.W => [x,y,width,height]]) type (before apply the callback)
- oNewZ {exontrol.WS}, holds the new visible-windows as an object of exontrol.WS([exontrol.W => [x,y,width,height]]) type (after callback has been applied)
- rgWFT {object}, holds a collection of changes within windows as an object of exontrol.M1([exontrol.W => {from: [x,y,width,height], to: [x,y,width,height]}]) type
- oWRend {exontrol.W}, indicates the window being rendered during the "Smooth" animation. For instance, if no UI window has been affected, invalidates the current window only, else renders the entire-canvas
- progress {number}, specifies the state of the "Smooth" animation as a value between 0 and 1 (used by oSmooth.oNewZ.cbkget to define the ratio of window's UI rectange from/to)
Additionally, the oSmooth parameter includes the following:
- mV2FT {map}, specifies a map of [view => {"events":{from,to,stkFT},"scroll":{f(rom),t(o)},...}] type that holds the from/to visible-objects for each part of each view
- cbkHI {callback}, defines the rectangle a hidden-object should go to
|
thisArg |
any
|
|
defines the value of "this" keyword during cbkI, cbkR or cbkT callbacks. |
Example
The following sample demonstrates how to use the Smooth() method to perform a smooth transition, such as when adding or removing elements from the control:
oSchedule.Smooth(function()
{
...
});
Smooth
Soom(zoomTo, oPointAbsopt)
The Soom() method zooms or/and scrolls the control's content. The Soom() method can be used to smoothly zoom in or out of the control's content and scroll to a specific point within the content. This method is particularly useful for providing a better user experience when navigating through large or detailed content, allowing users to focus on specific areas while maintaining context. The zoomTo parameter specifies the target zoom factor, while the oPointAbs parameter determine the point to scroll into view. By using the Soom() method, developers can create interactive and dynamic interfaces that enhance user engagement with the control's content. The
Home() method can be used to reset the view to the default state, showing the entire content at its original size and position, while the
FitToClient() method ensures that the entire (null/undefined) or given layout fits the control's client area.
Parameters:
| Name |
Type |
Attributes |
Description |
zoomTo |
number
|
|
Indicates a numeric value that defines the target-zoom factor as a value between 10 and 1000 (no zoom if null or undefined). |
oPointAbs |
object
|
<optional>
|
Specifies an object of {x,y} or array as [x,y] type that specifies the absolute-coordinates of the point to scroll into the client. |
Example
oSchedule.Soom(100, [0,0]), zooms to 100% and brings the origin (0,0) at its original position (Home)
Soom
ToggleDate(date)
The ToggleDate() method resizes the date to full-fits the view, or restores back the view. The ToggleDate() method is typically used to fit a specific date into the view, while the
FitToClient() method is used to fit the entire schedule or a specific time interval into the control's view. The
EnsureVisibleClient() method is used to ensure that a specific client (event or time range) is visible within the schedule. The
EnsureVisibleSelection() method ensures that the current selection of events fits within the visible area. The
Home() method resets the view (zoom level, if applicable) and scrolls the schedule to its initial position.
Parameters:
| Name |
Type |
Description |
date |
Date
|
Indicates the date to fit, as an object of Date type. If the date is missing/null/undefined, the method restores back the view to the state before toggle. |
onCopy() → {object}
The onCopy() method generates the data that will be exported to the clipboard from the currently selected events. This data is structured as an {e(vents)} object, which contains a collection of {EventOptions} items representing the properties of the selected events. The purpose of onCopy() is to define what is copied to the clipboard when events are copied, and the resulting data can later be used by the
onPaste() method to restore or paste those events.
- Since:
Returns:
Returns an object of {e(vents)} type that defines the events to copy, as explained:
e(vents), {array} specifies a collection of [{EventOptions}] type that holds the selected-events
-
Type
-
object
onPaste(oData)
The onPaste() method adds events or links from an {e(vents)} object, allowing the format to be overridden for derived objects. It is used to insert events or links from data generated by the
onCopy() method. This copied data is structured as an {e(vents)} object containing a collection of {EventOptions} items, which represent the properties of the selected events.
Parameters:
| Name |
Type |
Description |
oData |
object
|
Indicates an object of {e(vents)} type as explained:
e(vents), {array} specifies a collection of [{EventOptions}] type that holds the events
|
- Since:
Events
onanchorclick
The onanchorclick event occurs once the user clicks an anchor element (the <a id;options>
ex-HTML part marks an anchor or hyperlink element). The Event.
Caption property can include any number of anchor elements, which are defined by the <a id;options> ex-HTML part. The onclick event occurs when the user clicks the view, an event, while the onanchorclick event occurs only when the user clicks an anchor element.
The onanchorclick event carries the following information:
- id: specifies null (no identifier has been specified for the anchor) or the anchor's identifier as defined in the anchor's id attribute of the <a id;options> ex-HTML part
- options: specifies null (no options has been specified for the anchor) or the anchor's options as defined in the anchor's options attribute of the <a id;options> ex-HTML part
Parameters:
| Name |
Type |
Description |
oEvent |
object
|
Holds information about anchor being clicked.
Properties
| Name |
Type |
Description |
id |
string
|
specifies null (no identifier has been specified for the anchor) or the anchor's identifier. |
options |
string
|
specifies null (no options has been specified for the anchor) or the anchor's options. |
|
- Since:
Example
The following samples display information about the element being clicked:
oSchedule.on("anchorclick", function (oEvent)
{
console.log(oEvent);
})
or
oSchedule.Listeners.Add("onanchorclick", function (oEvent)
{
console.log(oEvent);
})
or
oSchedule.oSV.onanchorclick = function (oEvent)
{
console.log(oEvent);
}
where oSchedule is an object of Schedule type, oSV is member of Schedule type, of TV type.
onanchorclick
onchange
The onchange event notifies your application that an event, or more has been changed (create, move/resize). The onchange event occurs once the user creates, moves or resizes an event by drag and drop (the drag and drop operation ended). Also the onchange event occurs when the user shows or hides one or more group of events. The event handler of onchange event receives an object of {object,action} type as parameter that specifies the action and the object being changed. The action parameter indicates the name of the action that occured ("create", "move", "resize", "group" or "groups"), while the object parameter specifies the event being changed for action like "create", "move" or "resize", group being changed for "group", or undefined for "groups".
Parameters:
| Name |
Type |
Description |
oEvent |
object
|
Holds information about the object / action that occured.
Properties
| Name |
Type |
Description |
object |
Event
|
specifies an object of Event type that indicates the event being changed. |
action |
string
|
Indicates the name of the action that occured ("create", "move", "resize" or "groups") as explained:
"create" {string}, occurs once the user creates a new event by drag and drop. The object parameter points to an object of Event type.
"move" {string}, notifies your application once the user moves one or more events. The object parameter points to an object of Event type.
"resize" {string}, notifies your application once the user resize one or more events. The object parameter points to an object of Event type.
"group" {string}, occurs once the user changes the group's width or position. The object parameter points to an object of Group type.
"groups" {string}, occurs once the user shows ot hides group of events. The object parameter is undefined. |
|
Example
The following samples display the change within the control that just occured:
oSchedule.on("change", function (oEvent)
{
console.log(oEvent);
})
or
oSchedule.Listeners.Add("onchange", function (oEvent)
{
console.log(oEvent);
})
or
oSchedule.oSV.onchange = function (oEvent)
{
console.log(oEvent);
}
where oSchedule is an object of Schedule type, oSV is member of Schedule type, of SV type.
onchange
onclick
The onclick event occurs once the user clicks or double-clicks the view. You can use the onclick event to perform any action once the user clicks or double-clicks an event, such as showing a custom context menu, or opening a custom popup with the event's details. The onanchorclick event occurs once the user clicks an anchor event (the <a id;options>
ex-HTML part marks an anchor or hyperlink element). The onclick event occurs when the user clicks the view, an event, while the onanchorclick event occurs only when the user clicks an anchor element.
The onclick event carries the following information:
- event: specifies an object of Event type that indicates the event being clicked, or undefined if no event is being clicked
- view: specifies an object of SV type that indicates the view being clicked
- dblClick: indicates whether the user clicks or double-clicks the event
- button: indicates which button is pressed while clicking the event as 1 (left), 2 (right) or 4 (middle)
- modifiers: specifies a combination of 1, 2, 4 and 16 according with modifier keys (ALT, CTRL, META and SHIFT), or 0 if no modifier keys
Parameters:
| Name |
Type |
Description |
oEvent |
object
|
specifies an object of {dblClick,button,modifiers,..} type, that holds information about the object being clicked.
Properties
| Name |
Type |
Description |
event |
Event
|
specifies undefined or an object of Event type that indicates the event being clicked. |
view |
object
|
indicates an object of exontrol.Schedule.SV, ... type that specifies the view/window where the click occurred. |
dblClick |
boolean
|
indicates whether the user clicks or double-clicks the event. |
button |
number
|
indicates which button is pressed while clicking the event as 1 (left), 2 (right) or 4 (middle). |
modifiers |
number
|
specifies a combination of 1, 2, 4 and 16 according with modifier keys (ALT, CTRL, META and SHIFT), or 0 if no modifier keys. |
|
Example
The following samples display information about the event being clicked:
oSchedule.on("click", function (oEvent)
{
console.log(oEvent);
})
or
oSchedule.Listeners.Add("onclick", function (oEvent)
{
console.log(oEvent);
})
or
oSchedule.oSV.onclick = function (oEvent)
{
console.log(oEvent);
}
where oSchedule is an object of Schedule type. The oSV is member of Schedule type, of SV type.
onclick
The onscroll event notifies your application once the view has been scrolled. The
ScrollBars property specifies which scroll bars the control displays. The
ScrollPos property specifies the scroll position of the control. The user can right-click on the scroll bars to automatically scroll the control's content. Similarly, the user can scroll the content by dragging the thumb along the scroll bars. The onscroll event is triggered whenever the view is scrolled by any of these methods, as well as by using the mouse wheel or touch gestures.
Parameters:
| Name |
Type |
Description |
oEvent |
object
|
Specifies an object of {view,type,value} that holds information about the view's scroll that has been changed.
Properties
| Name |
Type |
Description |
view |
SV
|
specifies the view, where the scroll occurs. |
type |
exontrol.SB.ModeEnum
|
specifies the view's scroll that has changed as 0(vertical), 1(horizontal). |
value |
number
|
specifies the scroll position of the view. |
|
Example
The following samples display the view's scroll position once it is changed:
oSchedule.on("scroll", function (oEvent)
{
console.log(oEvent);
})
or
oSchedule.Listeners.Add("onscroll", function (oEvent)
{
console.log(oEvent);
})
or
oSchedule.oSV.onscroll = function (oEvent)
{
console.log(oEvent);
}
where oSchedule is an object of Schedule type. The oSV is member of Schedule type, of SV type.
onscroll