SV class (Schedule)

SV(oSchedule)

new SV(oSchedule)

Defines the schedule view of the control, that displays the events. The oSV field defines the control's base schedule-view. Use the AddScheduleView() method to add a new view to the control. Use the RemoveScheduleView() method removes a schedule-view already created by AddScheduleView() method.
Parameters:
Name Type Description
oSchedule Schedule Specifies an object of Schedule type that defines the owner control of the view to be created
SV

Methods

Copy()

The Copy() method copies the selection to the Clipboard. The Cut/Copy/Paste methods work only if the control is visible.
Since:
  • 2.1
Example
The control requires focus, so CTRL + C, CTRL + X or CTRL + V to make it works. In the same manner, the tabIndex attribute must be present into the defintion of the canvas HTML event.

 addEventListener("copy", oSchedule.Copy), calls the control's Copy() method as soon as the 'copy' event occurs (CTRL + C). The copy event fires when the user initiates a copy action through the browser's user interface.
 oSchedule.Shortcuts.Add("CTRL + C", oSchedule.Copy, oSchedule), calls the control's Copy() method as soon as user presses CTRL + C key combination
Copy

Cut()

The Cut() method moves the selection to the Clipboard. The Cut/Copy/Paste methods work only if the control is visible.
Since:
  • 2.1
Example
The control requires focus, so CTRL + C, CTRL + X or CTRL + V to make it works. In the same manner, the tabIndex attribute must be present into the defintion of the canvas HTML event.

 addEventListener("cut", oSchedule.Cut), calls the control's Cut() method as soon as the 'cut' event occurs (CTRL + X). The cut event is fired when the user has initiated a "cut" action through the browser's user interface.
 oSchedule.Shortcuts.Add("CTRL + X", oSchedule.Cut, oSchedule), calls the control's Cut() method as soon as user presses CTRL + X key combination
Cut

EnsureVisibleClient(clientA, ensureOptsopt)

The EnsureVisibleClient() method ensures that the giving client fits the control'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
EnsureVisibleClient

EnsureVisibleDate(dateopt, flagsopt)

The EnsureVisibleDate() method scrolls the schedule view so the giving date(s) fit the view's client-rectangle
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. If missing the EnsureVisibleDate() method ensures that the first visible date of the layout fits the schedule view's client area
flags number <optional>
Specifies the flags to run the EnsureVisibleDate() method as explained: 1 {number}, allows horizontal scroll 2 {number}, allows vertical scroll
EnsureVisibleDate

EnsureVisibleSelection(ensureOptsopt)

The EnsureVisibleSelection() method scrolls the control's content to ensure that the control's selection fits the control's client area.
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
  • duration {number}, specifies the time in ms the control is smoothly performs the changes
EnsureVisibleSelection

FitToClient(rtLayoutopt)

The FitToClient() method ensures that the entire (null/undefined) or giving layout fits the control's client area
Parameters:
Name Type Attributes Description
rtLayout Array.<number> <optional>
Indicates null for entire layout or an array of [x,y,width,height] type that defines the absolute-coordinate to fit to client
FitToClient

GetAllowActions() → {string}

The GetAllowActions() method gets the actions the user can perform once the control is clicked or touched
Returns:
Returns the actions the user can perform once the control is clicked or touched. The format of allowActions field is:
"action(shortcut,shortcut,...),action(shortcut,shortcut,...)..."
where
  • "action", indicates the name of the action. The "action" can have any of the following values:
    • "scroll", scrolls the control's content by drag. The "scroll" action allows flags such as:
      • [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
    • "zoom", zooms the control's content at dragging-point.
    • "fit", fits the drag-area into the control's client area.
    • "select", selects events by drag
    • "drag-drop", carries out the 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 holds information about the mouse/touch event once the ui-event has been dropped. The data parameter holds information about the source-object that initiated the drag and drop operation, as an object of {object,source,client,shape} type.
    • "day-resize", resizes the day by drag and drop (not available if the control is read-only)
    • "group-resize", resizes the group by drag and drop (not available if the control is read-only)
    • "group-drag", changes the group's position by drag and drop (not available if the control is read-only)
    • "create", creates event by drag (not available if the control is read-only)
    • "move", moves or resizes events by drag (not available if the control is read-only)
  • "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
GetAllowActions

GetAllowAllDayEventScroll() → {null|number|Array.<number>}

The GetAllowAllDayEventScroll() method gets the number of events the all-day header can display one at the time
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
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
GetAllowAllDayEventScroll

GetAllowMoveEventToOtherGroup() → {boolean}

The GetAllowMoveEventToOtherGroup() method indicates whether the event can be moved from a group to another by drag and drop
Returns:
Returns true if the event can be moved from a group to another
Type
boolean
GetAllowMoveEventToOtherGroup

GetAllowMultiDaysEvent() → {boolean}

The GetAllowMultiDaysEvent() method specifies whether the user can create events that may start on a day and ends on other
Returns:
Returns a truly value if user can create or resizes multi-dates events
Type
boolean
GetAllowMultiDaysEvent

GetApplyGroupingColors() → {boolean}

The GetApplyGroupingColors() method specifies whether the schedule view shows the events using the colors of owner groups (group's eventShape option)
Returns:
Returns true if the grouping button is displayed in the date header.
Type
boolean
GetApplyGroupingColors

GetBackground() → {BackgroundOptions}

The GetBackground() method indicates the display options to show different parts of the control
Returns:
Returns the display options to show different parts of the control
Type
BackgroundOptions
GetBackground

GetCalendar() → {object}

The GetCalendar() method returns the options of the inside calendar control
Returns:
Returns the current options of the inside calendar control, as an object of {exontrol.Calendar.Options} type
Type
object
GetCalendar

GetCanvasRect() → {Array.<number>}

The GetCanvasRect() method returns the canvas's client rectangle.
Returns:
Returns an array of [x,y,width,height] type that specifies the canvas's client rectangle
Type
Array.<number>
GetCanvasRect

GetClientRect() → {Array.<number>}

The GetClientRect() method returns the control's client area.
Returns:
Returns an array of [x,y,width,height] type that specifies the control's client area
Type
Array.<number>
GetClientRect

GetCreateEventLabel() → {string}

The GetCreateEventLabel() method gets the event's label while it is created by drag and drop
Returns:
Returns the event's label while it is created by drag and drop
Type
string
GetCreateEventLabel

GetCursors() → {string}

The GetCursors() method defines the mouse cursor to display when pointing over different parts of the control.
Returns:
A string expression that defines the mouse cursor to display when pointing over different parts of the control. The format of cursors 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 cursors property supports any of the following parts:
  • "date", defines the mouse-cursor when the mouse pointer hovers the date (any part)
  • "date-header", defines the mouse-cursor when the mouse pointer hovers the header's date
  • "grouping-button", defines the mouse-cursor when the mouse pointer hovers the header's grouping-button
  • "date-grouping-header", defines the mouse-cursor when the mouse pointer hovers the date's grouping-header 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-timeScale", defines the mouse-cursor when the mouse pointer hovers the date's time-scale part
  • "resize-group", defines the mouse-cursor when the mouse pointer hovers the group's resize margin
  • "event", defines the mouse-cursor when the mouse pointer hovers any movable event
  • "create", defines the mouse-cursor to create new events by drag and drop
  • "drag-drop", defines the cursor while the event is being dragged using the "drag-drop" action
  • "timeScale", defines the mouse-cursor when the mouse pointer hovers the control's time-scale header
  • "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
  • "anchor" (hyperlink), defines the mouse-cursor when the mouse pointer hovers the anchor (the <a id;options> ex-HTML part marks an anchor or hyperlink element) (@since 2.2)
  • "long", specifies the mouse-cursor to be shown as soon as a "long" click or touch action begins (see allowActions field)
Type
string
GetCursors

GetDayEndTime() → {string}

The GetDayEndTime() method gets the time the day ends at, in "HH[:MM[:NN]]" format
Returns:
Returns the time the day ends at
Type
string
GetDayEndTime

GetDayStartTime() → {string}

The GetDayStartTime() method gets the time the day starts at, in "HH[:MM[:NN]]" format
Returns:
Returns the time the day starts at
Type
string
GetDayStartTime

GetDayViewHeight() → {number}

The GetDayViewHeight() method indicates the height of the day within the schedule panel
Returns:
Returns the height of the day within the schedule panel
Type
number
GetDayViewHeight

GetDayViewWidth() → {number}

The GetDayViewWidth() method indicates the width of the day within the schedule panel
Returns:
Returns the width of the day within the schedule panel
Type
number
GetDayViewWidth

GetDefaultEventExtraLabel() → {string}

The GetDefaultEventExtraLabel() method gets event's default extra-label
Returns:
Returns the event's default extra-label
Type
string
GetDefaultEventExtraLabel

GetDefaultEventLongLabel() → {string}

The GetDefaultEventLongLabel() method gets event's default long-label
Returns:
Returns the event's default long-label
Type
string
GetDefaultEventLongLabel

GetDefaultEventShortLabel() → {string}

The GetDefaultEventShortLabel() method gets event's default short-label
Returns:
Returns the event's default short-label
Type
string
GetDefaultEventShortLabel

GetDefaultEventToolTip() → {string}

The GetDefaultEventToolTip() method gets event's default tooltip
Returns:
Returns the event's default tooltip
Type
string
GetDefaultEventToolTip

GetDisplayGroupingButton() → {boolean}

The GetDisplayGroupingButton() method specifies whether the grouping button is displayed in the date header.
Returns:
Returns true if the grouping button is displayed in the date header.
Type
boolean
GetDisplayGroupingButton

GetFormatText() → {exontrol.DrawTextFormatEnum}

The GetFormatText() method specifies the format and alignment to display the event's caption.
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
GetFormatText

GetHeaderAllDayEventHeight() → {number}

The GetHeaderAllDayEventHeight() method indicates the height of the events to display within the all-day header
Returns:
Returns the height of the events to display within the all-day header (relative to the font-size of the control)
Type
number
GetHeaderAllDayEventHeight

GetHeaderDayHeight() → {number}

The GetHeaderDayHeight() method indicates the height of the day's header
Returns:
Returns the height of the day's header (relative to the font-size of the control)
Type
number
GetHeaderDayHeight

GetHeaderDayLongLabel() → {string}

The GetHeaderDayLongLabel() method gets the alternate HTML labels being shown on date's header, when the time-scale is visible. The format the "headerDayLongLabel" option is "ALT1[<|>ALT2<|>...][<=>EXPR]", where ALT defines a HTML label that supports a lot of predefined built-in tags, EXPR defines an expression to specify which HTML label to be shown when a condition is met.

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

  • <%d%> - Day of the month in one or two numeric digits, as needed (1 to 31)
  • <%dd%> - Day of the month in two numeric digits (01 to 31)
  • <%d1%> - First letter of the weekday (S to S)
  • <%loc_d1%> - Indicates day of week as a one-letter abbreviation using the current user settings
  • <%d2%> - First two letters of the weekday (Su to Sa)
  • <%loc_d2%> - Indicates day of week as a two-letters abbreviation using the current user settings
  • <%d3%> - First three letters of the weekday (Sun to Sat)
  • <%loc_d3%> equivalent with <%loc_ddd%>
  • <%ddd%> - First three letters of the weekday (Sun to Sat)
  • <%loc_ddd%> - Indicates the day of week as a three-letter abbreviation using the current user regional and language settings
  • <%dddd%> - Full name of the weekday (Sunday to Saturday)
  • <%loc_dddd%> - Indicates day of week as its full name using the current user regional and language settings
  • <%i%> - Displays the number instead the date
  • <%w%> - Day of the week (1 to 7)
  • <%ww%> - Week of the year (1 to 53)
  • <%m%> - Month of the year in one or two numeric digits, as needed (1 to 12)
  • <%mr%> - Month of the year in Roman numerals, as needed (I to XII)
  • <%mm%> - Month of the year in two numeric digits (01 to 12)
  • <%m1%> - First letter of the month (J to D)
  • <%loc_m1%> - Indicates month as a one-letter abbreviation using the current user settings
  • <%m2%> - First two letters of the month (Ja to De)
  • <%loc_m2%> - Indicates month as a two-letters abbreviation using the current user settings
  • <%m3%> - First three letters of the month (Jan to Dec)
  • <%loc_m3%> - equivalent with <%loc_mmm%>
  • <%mmm%> - First three letters of the month (Jan to Dec)
  • <%loc_mmm%> - Indicates month as a three-letter abbreviation using the current user regional and language settings
  • <%mmmm%> - Full name of the month (January to December)
  • <%loc_mmmm%> - Indicates month as its full name using the current user regional and language settings
  • <%q%> - Date displayed as the quarter of the year (1 to 4)
  • <%y%> - Number of the day of the year (1 to 366)
  • <%yy%> - Last two digits of the year (01 to 99)
  • <%yyyy%> - Full year (0100 to 9999)
  • <%hy%> - Date displayed as the half of the year (1 to 2)
  • <%loc_g%> - Indicates period/era using the current user regional and language settings
  • <%loc_gg%> - Indicates period/era using the current user regional and language settings
  • <%loc_sdate%> - Indicates the date in the short format using the current user regional and language settings
  • <%loc_ldate%> - Indicates the date in the long format using the current user regional and language settings
  • <%loc_dsep%> - Indicates the date separator using the current user regional and language settings (/)
  • <%h%> - Hour in one or two digits, as needed (0 to 23)
  • <%hh%> - Hour in two digits (00 to 23)
  • <%h12%> - Hour in 12-hour time format, in one or two digits - [0(12),11]
  • <%hh12%> - Hour in 12-hour time format, in two digits - [00(12),11]
  • <%n%> - Minute in one or two digits, as needed (0 to 59)
  • <%nn%> - Minute in two digits (00 to 59)
  • <%s%> - Second in one or two digits, as needed (0 to 59)
  • <%ss%> - Second in two digits (00 to 59)
  • <%AM/PM%> - Twelve-hour clock with the uppercase letters "AM" or "PM", as appropriate
  • <%loc_AM/PM%> - Indicates the time marker such as AM or PM using the current user regional and language settings
  • <%loc_A/P%> - Indicates the one character time marker such as A or P using the current user regional and language settings
  • <%loc_time%> - Indicates the time using the current user regional and language settings
  • <%loc_time24%> - Indicates the time in 24 hours format without a time marker using the current user regional and language settings
  • <%loc_tsep%> - indicates the time separator using the current user regional and language settings (:)
  • <%loc_y%> - Represents the Year only by the last digit, using current regional settings
  • <%loc_yy%> - Represents the Year only by the last two digits, using current regional settings. A leading zero is added for single-digit years
  • <%loc_yyyy%> - Represents the Year by a full four or five digits, depending on the calendar used. Thai Buddhist and Korean calendars have five-digit years. The "yyyy" pattern shows five digits for these two calendars, and four digits for all other supported calendars. Calendars that have single-digit or two-digit years, such as for the Japanese Emperor era, are represented differently. A single-digit year is represented with a leading zero, for example, "03". A two-digit year is represented with two digits, for example, "13". No additional leading zeros are displayed

The EXPR supports the value keyword that specifies the date being queried. The EXPR supports predefined constants, functions and operators such as day, month, year, +, -, and so on.

Returns:
Returns the alternate HTML labels being shown on date's header, when the time-scale is visible.
Type
string
GetHeaderDayLongLabel

GetHeaderDayShortLabel() → {string}

The GetHeaderDayShortLabel() method gets the alternate HTML labels being shown on date's header, when the time-scale is not visible. The format the "headerDayShortLabel" option is "ALT1[<|>ALT2<|>...][<=>EXPR]", where ALT defines a HTML label that supports a lot of predefined built-in tags, EXPR defines an expression to specify which HTML label to be shown when a condition is met.

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

  • <%d%> - Day of the month in one or two numeric digits, as needed (1 to 31)
  • <%dd%> - Day of the month in two numeric digits (01 to 31)
  • <%d1%> - First letter of the weekday (S to S)
  • <%loc_d1%> - Indicates day of week as a one-letter abbreviation using the current user settings
  • <%d2%> - First two letters of the weekday (Su to Sa)
  • <%loc_d2%> - Indicates day of week as a two-letters abbreviation using the current user settings
  • <%d3%> - First three letters of the weekday (Sun to Sat)
  • <%loc_d3%> equivalent with <%loc_ddd%>
  • <%ddd%> - First three letters of the weekday (Sun to Sat)
  • <%loc_ddd%> - Indicates the day of week as a three-letter abbreviation using the current user regional and language settings
  • <%dddd%> - Full name of the weekday (Sunday to Saturday)
  • <%loc_dddd%> - Indicates day of week as its full name using the current user regional and language settings
  • <%i%> - Displays the number instead the date
  • <%w%> - Day of the week (1 to 7)
  • <%ww%> - Week of the year (1 to 53)
  • <%m%> - Month of the year in one or two numeric digits, as needed (1 to 12)
  • <%mr%> - Month of the year in Roman numerals, as needed (I to XII)
  • <%mm%> - Month of the year in two numeric digits (01 to 12)
  • <%m1%> - First letter of the month (J to D)
  • <%loc_m1%> - Indicates month as a one-letter abbreviation using the current user settings
  • <%m2%> - First two letters of the month (Ja to De)
  • <%loc_m2%> - Indicates month as a two-letters abbreviation using the current user settings
  • <%m3%> - First three letters of the month (Jan to Dec)
  • <%loc_m3%> - equivalent with <%loc_mmm%>
  • <%mmm%> - First three letters of the month (Jan to Dec)
  • <%loc_mmm%> - Indicates month as a three-letter abbreviation using the current user regional and language settings
  • <%mmmm%> - Full name of the month (January to December)
  • <%loc_mmmm%> - Indicates month as its full name using the current user regional and language settings
  • <%q%> - Date displayed as the quarter of the year (1 to 4)
  • <%y%> - Number of the day of the year (1 to 366)
  • <%yy%> - Last two digits of the year (01 to 99)
  • <%yyyy%> - Full year (0100 to 9999)
  • <%hy%> - Date displayed as the half of the year (1 to 2)
  • <%loc_g%> - Indicates period/era using the current user regional and language settings
  • <%loc_gg%> - Indicates period/era using the current user regional and language settings
  • <%loc_sdate%> - Indicates the date in the short format using the current user regional and language settings
  • <%loc_ldate%> - Indicates the date in the long format using the current user regional and language settings
  • <%loc_dsep%> - Indicates the date separator using the current user regional and language settings (/)
  • <%h%> - Hour in one or two digits, as needed (0 to 23)
  • <%hh%> - Hour in two digits (00 to 23)
  • <%h12%> - Hour in 12-hour time format, in one or two digits - [0(12),11]
  • <%hh12%> - Hour in 12-hour time format, in two digits - [00(12),11]
  • <%n%> - Minute in one or two digits, as needed (0 to 59)
  • <%nn%> - Minute in two digits (00 to 59)
  • <%s%> - Second in one or two digits, as needed (0 to 59)
  • <%ss%> - Second in two digits (00 to 59)
  • <%AM/PM%> - Twelve-hour clock with the uppercase letters "AM" or "PM", as appropriate
  • <%loc_AM/PM%> - Indicates the time marker such as AM or PM using the current user regional and language settings
  • <%loc_A/P%> - Indicates the one character time marker such as A or P using the current user regional and language settings
  • <%loc_time%> - Indicates the time using the current user regional and language settings
  • <%loc_time24%> - Indicates the time in 24 hours format without a time marker using the current user regional and language settings
  • <%loc_tsep%> - indicates the time separator using the current user regional and language settings (:)
  • <%loc_y%> - Represents the Year only by the last digit, using current regional settings
  • <%loc_yy%> - Represents the Year only by the last two digits, using current regional settings. A leading zero is added for single-digit years
  • <%loc_yyyy%> - Represents the Year by a full four or five digits, depending on the calendar used. Thai Buddhist and Korean calendars have five-digit years. The "yyyy" pattern shows five digits for these two calendars, and four digits for all other supported calendars. Calendars that have single-digit or two-digit years, such as for the Japanese Emperor era, are represented differently. A single-digit year is represented with a leading zero, for example, "03". A two-digit year is represented with two digits, for example, "13". No additional leading zeros are displayed

The EXPR supports the value keyword that specifies the date being queried. The EXPR supports predefined constants, functions and operators such as day, month, year, +, -, and so on.

Returns:
Returns the alternate HTML labels being shown on date's header, when the time-scale is not visible.
Type
string
GetHeaderDayShortLabel

GetHeaderGroupHeight() → {number}

The GetHeaderGroupHeight() method indicates the height of the group's header
Returns:
Returns the height of the group's header (relative to the font-size of the control)
Type
number
GetHeaderGroupHeight

GetImageAlign() → {number}

The GetImageAlign() method specifies the alignment of the event's image (reserved for future use only).
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
GetImageAlign

GetImageSize() → {any}

The GetImageSize() method defines the size of the event's image (reserved for future use only).
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
GetImageSize

GetLocked() → {boolean}

The GetLocked() method specifies whether the control is locked(protected) or unlocked
Returns:
Returns true, if the control is locked(protected) or unlocked
Type
boolean
GetLocked

GetLongDateFormat() → {string}

The GetLongDateFormat() method gets the long date format
Returns:
Returns the long date format
Type
string
GetLongDateFormat

GetLongTimeFormat() → {string}

The GetLongTimeFormat() method gets the long time format
Returns:
Returns the long time format
Type
string
GetLongTimeFormat

GetMisc() → {MiscellaneousOptions}

The GetMisc() method indicates the control's miscellaneous options
Returns:
Returns the control's miscellaneous options
Type
MiscellaneousOptions
GetMisc

GetOnResizeControl() → {exontrol.Schedule.OnResizeControlEnum}

The GetOnResizeControl() method specifies the panel to resize once the entire control gets resized
Returns:
Returns the panel to resize once the entire control gets resized
Type
exontrol.Schedule.OnResizeControlEnum
GetOnResizeControl

GetOnSelectDate() → {exontrol.Schedule.OnSelectDateEnum}

The GetOnSelectDate() method specifies the action that the control does once the user selects new dates in the calendar panel
Returns:
Returns the action that the control does once the user selects new dates in the calendar panel
Type
exontrol.Schedule.OnSelectDateEnum
GetOnSelectDate

GetOptions() → {object}

The GetOptions() method returns the current options of the control.
Returns:
An object of Schedule.Options type that indicates the options to display the control.
Type
object
GetOptions

GetPad() → {number|Array.<number>|string}

The GetPad() method specifies the space between event's content and its borders.
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
GetPad

GetPaneMinWidthLeft() → {number}

The GetPaneMinWidthLeft() method defines the minimum size(width) of the left panel
Returns:
Returns the minimum size(width) of the left panel
Type
number
GetPaneMinWidthLeft

GetPaneMinWidthRight() → {number}

The GetPaneMinWidthRight() method defines the minimum size(width) of the right panel
Returns:
Returns the minimum size(width) of the right panel
Type
number
GetPaneMinWidthRight

GetPaneWidthLeft() → {number}

The GetPaneWidthLeft() method defines the size(width) of the left panel
Returns:
Returns the size(width) of the left panel
Type
number
GetPaneWidthLeft

GetPaneWidthRight() → {number}

The GetPaneWidthRight() method defines the size(width) of the right panel
Returns:
Returns the size(width) of the right panel
Type
number
GetPaneWidthRight

GetReadOnly() → {string}

The GetReadOnly() method specifies whether the control is read-only
Returns:
Returns true, if the control is read-only
Type
string
GetReadOnly

GetScrollPos() → {object}

The GetScrollPos() method retrieves the horizontal and vertical scroll-position of the view.
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
GetScrollPos

GetSelectEventStyle() → {number}

The GetSelectEventStyle() method specifies how the selected-event gets displayed
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 misc.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 misc.padSelectEvent field specifies the space between the event's content and its selection border.
Type
number
GetSelectEventStyle

GetShapes() → {string}

The GetShapes() method defines the shapes each part of the control can display. The shapes field customizes the control's visual appearance.
Returns:
A string expression that defines the shapes each part of the control can display. The format of shapes 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:
  • "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)
  • "dateAlt", defines the visual-appearance for alternate-date (schedule view only)
  • "date-header", defines the visual-appearance for the date's header (schedule view only)
  • "dateAlt-header", defines the visual-appearance for the alternate-date's header (schedule view only)
  • "grouping-button", defines the visual-appearance for the header's grouping-button (schedule view only)
  • "date-timeScale", defines the visual-appearance for the date's time-scale part (schedule view only)
  • "date-grouping-header", defines the visual-appearance for the date's grouping-header (schedule view only)
  • "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
  • "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)
  • "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)
  • "event", defines the visual-appearance for all events within the control
  • "event-drag", defines additional visual-appearance to apply on the event being dragged
  • "mark-zone", defines the visual-appearance for all mark-zones within the control
  • "select", defines the visual-appearance of selected-event
  • "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
  • "timeScale", defines the visual appearance for control's time-scale
Type
string
GetShapes

GetShortDateFormat() → {string}

The GetShortDateFormat() method gets the short date format
Returns:
Returns the short date format
Type
string
GetShortDateFormat

GetShortTimeFormat() → {string}

The GetShortTimeFormat() method gets the short time format
Returns:
Returns the short time format
Type
string
GetShortTimeFormat

GetShowAllDayHeader() → {boolean}

The GetShowAllDayHeader() method specifies whether the control's header for all-day events is visible or hidden
Returns:
Returns true if the control's header for all-day events is visible
Type
boolean
GetShowAllDayHeader

GetShowEventLabels() → {boolean}

The GetShowEventLabels() method specifies whether the short, long and extra labels of the events are visible or hidden
Returns:
Returns true if the short, long and extra labels of the events are visible or hidden
Type
boolean
GetShowEventLabels

GetShowEvents() → {number}

The GetShowEvents() method indicates the type of the events the control displays
Returns:
Returns a numeric value that specifies the type of the events the control displays, as epxlained: -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 Repetitive property indicates the expression that defines the dates where the event occurs)
Type
number
GetShowEvents

GetShowGroupingEvents() → {boolean}

The GetShowGroupingEvents() method specifies whether the schedule view shows grouped events.
Returns:
Returns true if the schedule view shows grouped events.
Type
boolean
GetShowGroupingEvents

GetShowHighlightEvent() → {boolean}

The GetShowHighlightEvent() method indicates whether the control highlights the dates that contain events. The "uiHighlight" shape is applied on dates with events.
Returns:
Returns truly value if the control highlights the dates that contain events (relative to the font-size of the control)
Type
boolean
GetShowHighlightEvent

GetShowMarkZone() → {number}

The GetShowMarkZone() method indicates how the control's mark-zones are shown
Returns:
Returns a numeric value that specifies how the control's mark-zones are shown as epxlained: 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
number
GetShowMarkZone

GetShowViewCompact() → {exontrol.Schedule.ShowViewCompactEnum}

The GetShowViewCompact() method specifies how the days get arranged within the schedule-view
Returns:
Returns a value that specifies how the days get arranged within the schedule-view
Type
exontrol.Schedule.ShowViewCompactEnum
GetShowViewCompact

GetSmooth() → {number}

The GetSmooth() method defines the time in ms the control goes from one layout to another.
Returns:
Returns the time in ms the control goes from one layout to another.
Type
number
GetSmooth

GetTfi() → {string|object}

The GetTfi() method gets the font attributes to apply on captions of the control.
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 mode as a value between 0 and 4
    • 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
GetTfi

GetTimeScale() → {object}

The GetTimeScale() method applies different options to the schedule-view's time scale
Returns:
Returns the options of the view's time-scale, as an object of TimeScaleOptions type
Type
object
GetTimeScale

GetToolTipDelay() → {number}

The GetToolTipDelay() method specifies how long the mouse pointer must point to an object before the tool tip appears
Returns:
Returns how long the mouse pointer must point to an object before the tool tip appears
Type
number
GetToolTipDelay

GetToolTipPopDelay() → {number}

The GetToolTipPopDelay() method specifies the period in ms of time the tool top remains visible if the mouse pointer is stationary within a control
Returns:
Returns the period in ms of time the tool top remains visible if the mouse pointer is stationary within a control
Type
number
GetToolTipPopDelay

GetToolTipWidth() → {number}

The GetToolTipWidth() method specifies the width of the tooltip window, in pixels
Returns:
Returns the width of the tooltip window, in pixels
Type
number
GetToolTipWidth

GetUpdateEventsLabel() → {string}

The GetUpdateEventsLabel() method gets the event's label while it is resized or moved by drag and drop
Returns:
Returns the event's label while it is resized or moved by drag and drop
Type
string
GetUpdateEventsLabel

GetVisibleRect() → {Array.<number>}

The GetVisibleRect() method indicates the control's visible rectangle
Returns:
Returns an array of [x,y,width,height] type that specifies the canvas's client rectangle
Type
Array.<number>
GetVisibleRect

GetWheelChange() → {number}

The GetWheelChange() method defines the amount the control scrolls when the user rolls the mouse wheel.
Returns:
Returns the amount the control scrolls when the user rolls the mouse wheel.
Type
number
GetWheelChange

GetWindowRect() → {Array.<number>}

The GetWindowRect() method returns the window's client area.
Returns:
Returns an array of [x,y,width,height] type that specifies the window's client area
Type
Array.<number>
GetWindowRect

GetZoom() → {number}

The GetZoom() method defines the zoom factor of the control's content.
Returns:
A numeric value between 10 and 1000 that specifies the zoom factor of the control's content.
Type
number
GetZoom

GetZoomLevels() → {string}

The GetZoomLevels() method defines the zoom-levels the user can magnify the control's 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
GetZoomLevels

Home()

The Home() method 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 onto the view. The Cut/Copy/Paste methods work only if the control is visible.
Since:
  • 2.1
Example
The control requires focus, so CTRL + C, CTRL + X or CTRL + V to make it works. In the same manner, the tabIndex attribute must be present into the defintion of the canvas HTML event.

 addEventListener("paste", oSchedule.Paste), calls the control's Paste() method as soon as the 'paste' event occurs (CTRL + V). The paste event is fired when the user has initiated a "paste" action through the browser's user interface.
 oSchedule.Shortcuts.Add("CTRL + V", oSchedule.Paste, oSchedule), calls the control's Paste() method as soon as user presses CTRL + V key combination (the "See text and images copied to the clipboard /Allow/Block" message may occur due security permissions)
Paste

Scroll(key, countopt)

The Scroll() method scrolls the window based on the giving key
Parameters:
Name Type Attributes 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
count object <optional>
indicates the number of lines to scroll if key is "Up", "Down", "Left" or "Right"
Scroll

SetAllowActions(value)

The SetAllowActions() method customizes the actions the user can perform once the control is clicked or touched
Parameters:
Name Type Description
value string Indicates the actions the user can perform once the control is clicked or touched. The format of allowActions field is:
"action(shortcut,shortcut,...),action(shortcut,shortcut,...)..."
where
  • "action", indicates the name of the action. The "action" can have any of the following values:
    • "scroll", scrolls the control's content by drag. The "scroll" action allows flags such as:
      • [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
    • "zoom", zooms the control's content at dragging-point.
    • "fit", fits the drag-area into the control's client area.
    • "select", selects events by drag
    • "drag-drop", carries out the 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 holds information about the mouse/touch event once the ui-event has been dropped. The data parameter holds information about the source-object that initiated the drag and drop operation, as an object of {object,source,client,shape} type.
    • "day-resize", resizes the day by drag and drop (not available if the control is read-only)
    • "group-resize", resizes the group by drag and drop (not available if the control is read-only)
    • "group-drag", changes the group's position by drag and drop (not available if the control is read-only)
    • "create", creates event by drag (not available if the control is read-only)
    • "move", moves or resizes events by drag (not available if the control is read-only)
  • "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

SetAllowAllDayEventScroll(value)

The SetAllowAllDayEventScroll() method defines the number of events the all-day header can display one at the time
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 changes whether the event can be moved from a group to another by drag and drop
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
0 {boolean}, the "select" shape is combined with the event's shape
 1 {boolean}, the "select" shape is displayed on the event's background. The misc.padSelectEvent field specifies the space between the event's content and its selection border. 
SetAllowMoveEventToOtherGroup

SetAllowMultiDaysEvent(value)

The SetAllowMultiDaysEvent() method specifies whether the user can create events that may start on a day and ends on other
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 specifies whether the schedule view shows the events using the colors of owner groups (group's eventShape option)
Parameters:
Name Type Description
value boolean Indicates the schedule view shows the events using the colors of owner groups
SetApplyGroupingColors

SetBackground(value)

The SetBackground() method defines the display options to show different parts of the control
Parameters:
Name Type Description
value BackgroundOptions A value that indicates the display options to show different parts of the control.
SetBackground

SetCalendar(oOptionsCal)

The SetCalendar() method applies options to the inside calendar control
Parameters:
Name Type Description
oOptionsCal object Indicates options to apply to the inside calendar control, as an object of exontrol.Calendar.Options type
SetCalendar

SetCreateEventLabel(value)

The SetCreateEventLabel() method defines event's label while it is created by drag and drop
Parameters:
Name Type Description
value string A value that indicates the event's label while it is created by drag and drop
SetCreateEventLabel

SetCursors(value)

The SetCursors() method changes the mouse cursor to display when pointing over different parts of the control.
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 cursors 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 cursors property supports any of the following parts:
  • "date", defines the mouse-cursor when the mouse pointer hovers the date (any part)
  • "date-header", defines the mouse-cursor when the mouse pointer hovers the header's date
  • "grouping-button", defines the mouse-cursor when the mouse pointer hovers the header's grouping-button
  • "date-grouping-header", defines the mouse-cursor when the mouse pointer hovers the date's grouping-header 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-timeScale", defines the mouse-cursor when the mouse pointer hovers the date's time-scale part
  • "resize-group", defines the mouse-cursor when the mouse pointer hovers the group's resize margin
  • "event", defines the mouse-cursor when the mouse pointer hovers any movable event
  • "create", defines the mouse-cursor to create new events by drag and drop
  • "drag-drop", defines the cursor while the event is being dragged using the "drag-drop" action
  • "timeScale", defines the mouse-cursor when the mouse pointer hovers the control's time-scale header
  • "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
  • "anchor" (hyperlink), defines the mouse-cursor when the mouse pointer hovers the anchor (the <a id;options> ex-HTML part marks an anchor or hyperlink element) (@since 2.2)
  • "long", specifies the mouse-cursor to be shown as soon as a "long" click or touch action begins (see allowActions field)
SetCursors

SetDayEndTime(value)

The SetDayEndTime() method defines the time the day ends at, in "HH[:MM[:NN]]" format
Parameters:
Name Type Description
value string A value that indicates the time the day ends at
SetDayEndTime

SetDayStartTime(value)

The SetDayStartTime() method defines the time the day starts at, in "HH[:MM[:NN]]" format
Parameters:
Name Type Description
value string A value that indicates the time the day starts at
SetDayStartTime

SetDayViewHeight(value)

The SetDayViewHeight() method defines the height of the day within the schedule panel
Parameters:
Name Type Description
value number A value that indicates the height of the day within the schedule panel.
SetDayViewHeight

SetDayViewWidth(value)

The SetDayViewWidth() method defines the width of the day within the schedule panel
Parameters:
Name Type Description
value number A value that indicates the width of the day within the schedule panel.
SetDayViewWidth

SetDefaultEventExtraLabel(value)

The SetDefaultEventExtraLabel() method defines event's default extra-label
Parameters:
Name Type Description
value string A value that indicates the event's default extra-label
SetDefaultEventExtraLabel

SetDefaultEventLongLabel(value)

The SetDefaultEventLongLabel() method defines event's default long-label
Parameters:
Name Type Description
value string A value that indicates the event's default long-label
SetDefaultEventLongLabel

SetDefaultEventShortLabel(value)

The SetDefaultEventShortLabel() method defines event's default short-label
Parameters:
Name Type Description
value string A value that indicates the event's default short-label
SetDefaultEventShortLabel

SetDefaultEventToolTip(value)

The SetDefaultEventToolTip() method defines event's default tooltip
Parameters:
Name Type Description
value string A value that indicates the event's default tooltip
SetDefaultEventToolTip

SetDisplayGroupingButton(value)

The SetDisplayGroupingButton() method specifies whether the grouping button is displayed in the date header.

The grouping button is displayed if:

  • displayGroupingButton option is true
  • showGroupingEvents option is true

The control displays groups if:

  • showGroupingEvents option 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
SetDisplayGroupingButton

SetEvents(oEventsDef)

The SetEvents() method defines the events of the control
Parameters:
Name Type Description
oEventsDef object Defines the events to add
SetEvents

SetFormatText(value)

The SetFormatText() method changes the format to display the event's caption.
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 defines the groups of the control
Parameters:
Name Type Description
oGroupsDef object Defines the groups to add
SetGroups

SetHeaderAllDayEventHeight(value)

The SetHeaderAllDayEventHeight() method defines the height of the events to display within the all-day header (relative to the font-size of the control)
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

SetHeaderDayHeight(value)

The SetHeaderDayHeight() method defines the height of the day's header (relative to the font-size of the control)
Parameters:
Name Type Description
value number A value that indicates the height of the day's header.
SetHeaderDayHeight

SetHeaderDayLongLabel(value)

The SetHeaderDayLongLabel() method sets the alternate HTML labels being shown on date's header, when the time-scale is visible. The format the "headerDayLongLabel" option is "ALT1[<|>ALT2<|>...][<=>EXPR]", where ALT defines a HTML label that supports a lot of predefined built-in tags, EXPR defines an expression to specify which HTML label to be shown when a condition is met.

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

  • <%d%> - Day of the month in one or two numeric digits, as needed (1 to 31)
  • <%dd%> - Day of the month in two numeric digits (01 to 31)
  • <%d1%> - First letter of the weekday (S to S)
  • <%loc_d1%> - Indicates day of week as a one-letter abbreviation using the current user settings
  • <%d2%> - First two letters of the weekday (Su to Sa)
  • <%loc_d2%> - Indicates day of week as a two-letters abbreviation using the current user settings
  • <%d3%> - First three letters of the weekday (Sun to Sat)
  • <%loc_d3%> equivalent with <%loc_ddd%>
  • <%ddd%> - First three letters of the weekday (Sun to Sat)
  • <%loc_ddd%> - Indicates the day of week as a three-letter abbreviation using the current user regional and language settings
  • <%dddd%> - Full name of the weekday (Sunday to Saturday)
  • <%loc_dddd%> - Indicates day of week as its full name using the current user regional and language settings
  • <%i%> - Displays the number instead the date
  • <%w%> - Day of the week (1 to 7)
  • <%ww%> - Week of the year (1 to 53)
  • <%m%> - Month of the year in one or two numeric digits, as needed (1 to 12)
  • <%mr%> - Month of the year in Roman numerals, as needed (I to XII)
  • <%mm%> - Month of the year in two numeric digits (01 to 12)
  • <%m1%> - First letter of the month (J to D)
  • <%loc_m1%> - Indicates month as a one-letter abbreviation using the current user settings
  • <%m2%> - First two letters of the month (Ja to De)
  • <%loc_m2%> - Indicates month as a two-letters abbreviation using the current user settings
  • <%m3%> - First three letters of the month (Jan to Dec)
  • <%loc_m3%> - equivalent with <%loc_mmm%>
  • <%mmm%> - First three letters of the month (Jan to Dec)
  • <%loc_mmm%> - Indicates month as a three-letter abbreviation using the current user regional and language settings
  • <%mmmm%> - Full name of the month (January to December)
  • <%loc_mmmm%> - Indicates month as its full name using the current user regional and language settings
  • <%q%> - Date displayed as the quarter of the year (1 to 4)
  • <%y%> - Number of the day of the year (1 to 366)
  • <%yy%> - Last two digits of the year (01 to 99)
  • <%yyyy%> - Full year (0100 to 9999)
  • <%hy%> - Date displayed as the half of the year (1 to 2)
  • <%loc_g%> - Indicates period/era using the current user regional and language settings
  • <%loc_gg%> - Indicates period/era using the current user regional and language settings
  • <%loc_sdate%> - Indicates the date in the short format using the current user regional and language settings
  • <%loc_ldate%> - Indicates the date in the long format using the current user regional and language settings
  • <%loc_dsep%> - Indicates the date separator using the current user regional and language settings (/)
  • <%h%> - Hour in one or two digits, as needed (0 to 23)
  • <%hh%> - Hour in two digits (00 to 23)
  • <%h12%> - Hour in 12-hour time format, in one or two digits - [0(12),11]
  • <%hh12%> - Hour in 12-hour time format, in two digits - [00(12),11]
  • <%n%> - Minute in one or two digits, as needed (0 to 59)
  • <%nn%> - Minute in two digits (00 to 59)
  • <%s%> - Second in one or two digits, as needed (0 to 59)
  • <%ss%> - Second in two digits (00 to 59)
  • <%AM/PM%> - Twelve-hour clock with the uppercase letters "AM" or "PM", as appropriate
  • <%loc_AM/PM%> - Indicates the time marker such as AM or PM using the current user regional and language settings
  • <%loc_A/P%> - Indicates the one character time marker such as A or P using the current user regional and language settings
  • <%loc_time%> - Indicates the time using the current user regional and language settings
  • <%loc_time24%> - Indicates the time in 24 hours format without a time marker using the current user regional and language settings
  • <%loc_tsep%> - indicates the time separator using the current user regional and language settings (:)
  • <%loc_y%> - Represents the Year only by the last digit, using current regional settings
  • <%loc_yy%> - Represents the Year only by the last two digits, using current regional settings. A leading zero is added for single-digit years
  • <%loc_yyyy%> - Represents the Year by a full four or five digits, depending on the calendar used. Thai Buddhist and Korean calendars have five-digit years. The "yyyy" pattern shows five digits for these two calendars, and four digits for all other supported calendars. Calendars that have single-digit or two-digit years, such as for the Japanese Emperor era, are represented differently. A single-digit year is represented with a leading zero, for example, "03". A two-digit year is represented with two digits, for example, "13". No additional leading zeros are displayed

The EXPR supports the value keyword that specifies the date being queried. The EXPR supports predefined constants, functions and operators such as day, month, year, +, -, and so on.

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.
SetHeaderDayLongLabel

SetHeaderDayShortLabel(value)

The SetHeaderDayShortLabel() method sets the alternate HTML labels being shown on date's header, when the time-scale is not visible. The format the "headerDayShortLabel" option is "ALT1[<|>ALT2<|>...][<=>EXPR]", where ALT defines a HTML label that supports a lot of predefined built-in tags, EXPR defines an expression to specify which HTML label to be shown when a condition is met.

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

  • <%d%> - Day of the month in one or two numeric digits, as needed (1 to 31)
  • <%dd%> - Day of the month in two numeric digits (01 to 31)
  • <%d1%> - First letter of the weekday (S to S)
  • <%loc_d1%> - Indicates day of week as a one-letter abbreviation using the current user settings
  • <%d2%> - First two letters of the weekday (Su to Sa)
  • <%loc_d2%> - Indicates day of week as a two-letters abbreviation using the current user settings
  • <%d3%> - First three letters of the weekday (Sun to Sat)
  • <%loc_d3%> equivalent with <%loc_ddd%>
  • <%ddd%> - First three letters of the weekday (Sun to Sat)
  • <%loc_ddd%> - Indicates the day of week as a three-letter abbreviation using the current user regional and language settings
  • <%dddd%> - Full name of the weekday (Sunday to Saturday)
  • <%loc_dddd%> - Indicates day of week as its full name using the current user regional and language settings
  • <%i%> - Displays the number instead the date
  • <%w%> - Day of the week (1 to 7)
  • <%ww%> - Week of the year (1 to 53)
  • <%m%> - Month of the year in one or two numeric digits, as needed (1 to 12)
  • <%mr%> - Month of the year in Roman numerals, as needed (I to XII)
  • <%mm%> - Month of the year in two numeric digits (01 to 12)
  • <%m1%> - First letter of the month (J to D)
  • <%loc_m1%> - Indicates month as a one-letter abbreviation using the current user settings
  • <%m2%> - First two letters of the month (Ja to De)
  • <%loc_m2%> - Indicates month as a two-letters abbreviation using the current user settings
  • <%m3%> - First three letters of the month (Jan to Dec)
  • <%loc_m3%> - equivalent with <%loc_mmm%>
  • <%mmm%> - First three letters of the month (Jan to Dec)
  • <%loc_mmm%> - Indicates month as a three-letter abbreviation using the current user regional and language settings
  • <%mmmm%> - Full name of the month (January to December)
  • <%loc_mmmm%> - Indicates month as its full name using the current user regional and language settings
  • <%q%> - Date displayed as the quarter of the year (1 to 4)
  • <%y%> - Number of the day of the year (1 to 366)
  • <%yy%> - Last two digits of the year (01 to 99)
  • <%yyyy%> - Full year (0100 to 9999)
  • <%hy%> - Date displayed as the half of the year (1 to 2)
  • <%loc_g%> - Indicates period/era using the current user regional and language settings
  • <%loc_gg%> - Indicates period/era using the current user regional and language settings
  • <%loc_sdate%> - Indicates the date in the short format using the current user regional and language settings
  • <%loc_ldate%> - Indicates the date in the long format using the current user regional and language settings
  • <%loc_dsep%> - Indicates the date separator using the current user regional and language settings (/)
  • <%h%> - Hour in one or two digits, as needed (0 to 23)
  • <%hh%> - Hour in two digits (00 to 23)
  • <%h12%> - Hour in 12-hour time format, in one or two digits - [0(12),11]
  • <%hh12%> - Hour in 12-hour time format, in two digits - [00(12),11]
  • <%n%> - Minute in one or two digits, as needed (0 to 59)
  • <%nn%> - Minute in two digits (00 to 59)
  • <%s%> - Second in one or two digits, as needed (0 to 59)
  • <%ss%> - Second in two digits (00 to 59)
  • <%AM/PM%> - Twelve-hour clock with the uppercase letters "AM" or "PM", as appropriate
  • <%loc_AM/PM%> - Indicates the time marker such as AM or PM using the current user regional and language settings
  • <%loc_A/P%> - Indicates the one character time marker such as A or P using the current user regional and language settings
  • <%loc_time%> - Indicates the time using the current user regional and language settings
  • <%loc_time24%> - Indicates the time in 24 hours format without a time marker using the current user regional and language settings
  • <%loc_tsep%> - indicates the time separator using the current user regional and language settings (:)
  • <%loc_y%> - Represents the Year only by the last digit, using current regional settings
  • <%loc_yy%> - Represents the Year only by the last two digits, using current regional settings. A leading zero is added for single-digit years
  • <%loc_yyyy%> - Represents the Year by a full four or five digits, depending on the calendar used. Thai Buddhist and Korean calendars have five-digit years. The "yyyy" pattern shows five digits for these two calendars, and four digits for all other supported calendars. Calendars that have single-digit or two-digit years, such as for the Japanese Emperor era, are represented differently. A single-digit year is represented with a leading zero, for example, "03". A two-digit year is represented with two digits, for example, "13". No additional leading zeros are displayed

The EXPR supports the value keyword that specifies the date being queried. The EXPR supports predefined constants, functions and operators such as day, month, year, +, -, and so on.

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.
SetHeaderDayShortLabel

SetHeaderGroupHeight(value)

The SetHeaderGroupHeight() method defines the height of the group's header (relative to the font-size of the control)
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 changes the alignment of the event's image (reserved for future use only).
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 changes the size of the event's image (reserved for future use only).
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.
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

SetLongDateFormat(value)

The SetLongDateFormat() method defines the long date format
Parameters:
Name Type Description
value string A value that indicates the long date format
SetLongDateFormat

SetLongTimeFormat(value)

The SetLongTimeFormat() method defines the long time format
Parameters:
Name Type Description
value string A value that indicates the long time format
SetLongTimeFormat

SetMisc(value)

The SetMisc() method defines the control's miscellaneous options
Parameters:
Name Type Description
value MiscellaneousOptions A value that indicates the control's miscellaneous options.
SetMisc

SetOnResizeControl(value)

The SetOnResizeControl() method changes the panel to resize once the entire control gets resized
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 changes the action that the control does once the user selects new dates in the calendar panel
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 applies new options to the view.
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
oSchedule.Options = {imageAlign: 1, imageSize: 24}, changes the alignment and the size for all images within the control.

The oSchedule.Options = value statement is equivalent with oSchedule.SetOptions(value) or oSchedule.oSV.SetOptions(value)
SetOptions

SetPad(value)

The SetPad() method changes the event's padding or the space between event's content and its borders.
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 field is used ([4,4])
  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 defines the minimum size(width) of the left panel
Parameters:
Name Type Description
value number A value that defines the minimum size(width) of the left panel.
SetPaneMinWidthLeft

SetPaneMinWidthRight(value)

The SetPaneMinWidthRight() method defines the minimum size(width) of the right panel
Parameters:
Name Type Description
value number A value that defines the minimum size(width) of the right panel.
SetPaneMinWidthRight

SetPaneWidthLeft(value)

The SetPaneWidthLeft() method defines the size(width) of the left panel
Parameters:
Name Type Description
value number A value that defines the size(width) of the left panel.
SetPaneWidthLeft

SetPaneWidthRight(value)

The SetPaneWidthRight() method defines the size(width) of the right panel
Parameters:
Name Type Description
value number A value that defines the size(width) of the right panel.
SetPaneWidthRight

SetReadOnly(value)

The SetReadOnly() method sets the control in read-only mode
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

SetScrollPos(value)

The SetScrollPos() method scrolls horizontally and/or vertically the control's default view.
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
SetScrollPos

SetSelectEventStyle(value)

The SetSelectEventStyle() method changes how the selected-event gets displayed
Parameters:
Name Type Description
value number A value that specifies how the selected-event gets displayed.
Example
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 misc.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 misc.padSelectEvent field specifies the space between the event's content and its selection border.
SetSelectEventStyle

SetShapes(value)

The SetShapes() method changes the shapes each part of the control can display.
Parameters:
Name Type Description
value string A string expression that defines the shapes each part of the control can display. The format of shapes 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:
  • "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)
  • "dateAlt", defines the visual-appearance for alternate-date (schedule view only)
  • "date-header", defines the visual-appearance for the date's header (schedule view only)
  • "dateAlt-header", defines the visual-appearance for the alternate-date's header (schedule view only)
  • "grouping-button", defines the visual-appearance for the header's grouping-button (schedule view only)
  • "date-timeScale", defines the visual-appearance for the date's time-scale part (schedule view only)
  • "date-grouping-header", defines the visual-appearance for the date's grouping-header (schedule view only)
  • "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
  • "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)
  • "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)
  • "event", defines the visual-appearance for all events within the control
  • "event-drag", defines additional visual-appearance to apply on the event being dragged
  • "mark-zone", defines the visual-appearance for all mark-zones within the control
  • "select", defines the visual-appearance of selected-event
  • "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
  • "timeScale", defines the visual appearance for control's time-scale
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

SetShortDateFormat(value)

The SetShortDateFormat() method defines the short date format
Parameters:
Name Type Description
value string A value that indicates the short date format
SetShortDateFormat

SetShortTimeFormat(value)

The SetShortTimeFormat() method defines the short time format
Parameters:
Name Type Description
value string A value that indicates the short time format
SetShortTimeFormat

SetShowAllDayHeader(value)

The SetShowAllDayHeader() method shows or hides the header for all-day events
Parameters:
Name Type Description
value boolean Specifies any of the following values: 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 the events are visible or hidden
Parameters:
Name Type Description
value boolean A value that indicates whether the short, long and extra labels of the events are visible or hidden
SetShowEventLabels

SetShowEvents(value)

The SetShowEvents() method indicates the type of the events the control displays
Parameters:
Name Type Description
value number Specifies any 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 Repetitive property indicates the expression that defines the dates where the event occurs)
SetShowEvents

SetShowGroupingEvents(value)

The SetShowGroupingEvents() method specifies whether the schedule view shows grouped events.

The control displays groups if:

  • showGroupingEvents option 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
SetShowGroupingEvents

SetShowHighlightEvent(value)

The SetShowHighlightEvent() method defines whether the control highlights the dates that contain events (relative to the font-size of the control)
Parameters:
Name Type Description
value boolean A value that indicates whether the control highlights the dates that contain events.
SetShowHighlightEvent

SetShowMarkZone(value)

The SetShowMarkZone() method indicates how the control's mark-zones are shown
Parameters:
Name Type Description
value number 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
SetShowMarkZone

SetShowViewCompact(value)

The SetShowViewCompact() method changes how the days get arranged within the schedule-view
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 changes the time in ms the control goes from one layout to another (0 indicates no smooth-transition is performed).
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 to apply on captions of the control.
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 mode as a value between 0 and 4
    • 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 &lt;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 applies different options to the schedule-view's time scale
Parameters:
Name Type Description
oTimeScaleOpts object Specifies the options to apply on the schedule-view's time scale, as an object of TimeScaleOptions type
SetTimeScale

SetToolTipDelay(value)

The SetToolTipDelay() method changes how long the mouse pointer must point to an object before the tool tip appears
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

SetToolTipPopDelay(value)

The SetToolTipPopDelay() method changes 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 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

SetToolTipWidth(value)

The SetToolTipWidth() method changes the width of the tooltip window, in pixels
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 defines event's label while it is resized or moved by drag and drop
Parameters:
Name Type Description
value string A value that indicates the event's label while it is resized or moved by drag and drop
SetUpdateEventsLabel

SetWheelChange(value)

The SetWheelChange() method changes the amount the control scrolls when the user rolls the mouse wheel.
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.
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 zoomLevels factor of the control's 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 performs a smooth-transition from a layout to another. The smooth-transition goes from the current layout to the new layout generated by the callback.
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.
Smooth

Soom(zoomTo, oPointAbsopt)

The Soom() method zooms or/and scrolls the control's content.
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
Parameters:
Name Type Description
date Date Indicates the date to fit
ToggleDate

slADS(oTypeopt)

slADS/setLastAllDayScroll() method stores or resets the last scroll-button of all-day header being clicked, to prevent double-clicking the view once the scroll-button is not required anymore
Parameters:
Name Type Attributes Description
oType object <optional>
Indicates null to reste, or an object of {s(croll)} type
slADS

toDSE(date) → {number|Date}

The toDSE/toDayStartEnd() method changes the date to fit the day's start-end margins (dayStartTime and dayEndTime).
Parameters:
Name Type Description
date number | Date Specifies the date to fit within the control's start-end margins, as a number or a Date
Returns:
Returns the date itself (as provided)
Type
number | Date
Example
oSchedule.oSV.toDSE(Date.Create("#1/1/2001#")), returns "Mon, 01 Jan 2001 08:00:00 GMT", while the dayStartTime is "08:00" or "Mon, 01 Jan 2001 06:30:00 GMT", while the dayStartTime is "6:30"
toDSE

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)
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:
  • 2.2
Example
The following samples display information about the element being clicked:

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)
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 field points to an object of Event type. "move" {string}, notifies your application once the user moves one or more events. The object field points to an object of Event type. "resize" {string}, notifies your application once the user resize one or more events. The object field points to an object of Event type. "group" {string}, occurs once the user changes the group's width or position. The object field points to an object of Group type. "groups" {string}, occurs once the user shows ot hides group of events. The object field is undefined.
Example
The following samples display the change within the control that just occured:

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() method occurs once the user clicks or double-clicks the view.
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.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

onscroll

The onscroll() method notifies your application once the view has been scrolled.
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's value
Example
The following samples display the view's scroll position once it is changed:

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