Options class (Calendar)

Calendar.Options()

new Options()

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

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

cursors {string}, specifies the mouse cursor to be displayed when pointing over a part of the control
is associated with the property:
Cursors {string}, specifies the mouse cursor to be displayed when pointing over a part of the control
which means that the following statements are equivalent:
oCalendar.Options = {cursors: "pointer(d,p,n)"}
oCalendar.SetOptions({cursors: "pointer(d,p,n)"})
oCalendar.Cursors = "pointer(d,p,n)"
oCalendar.SetCursors("pointer(d,p,n)")
where oCalendar is an object of Calendar type

Members

(static) alignCal :exontrol.AlignEnum

The alignCal field aligns the calendar relative to the canvas. It determines the calendar's position within the canvas area, such as left, right, center, top, or bottom alignment. This setting affects only the visual placement of the calendar, not its size or content. The dayAlign field can be used to align the calendar's text content, while the alignCal field specifically controls the overall alignment of the calendar within its container.

The exontrol.AlignEnum type supports the following values:

  • exAlignTop (0x00), justifies the object to the top of the rectangle
  • exAlignLeft (0x00), aligns object to the left
  • exAlignCenter (0x01), centers object horizontally in the rectangle
  • exAlignRight (0x02), aligns object to the right
  • exAlignVCenter (0x04), centers object vertically
  • exAlignBottom (0x08), justifies the object to the bottom of the rectangle

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

oCalendar.Options = {alignCal: "center"}
oCalendar.SetOptions({alignCal: "center"})
AlignCal = "center"
AlignCal.SetAlignCal("center")
Type:
  • exontrol.AlignEnum
Example
0 or exontrol.AlignEnum.exAlignTop | exontrol.AlignEnum.exAlignLeft {number}, aligns the calendar to the top-left corner
5 or exontrol.AlignEnum.exAlignCenter | exontrol.AlignEnum.exAlignVCenter {number}, centers the calendar
alignCal

(static) allowScrollByDrag :boolean

The allowScrollByDrag field specifies whether the user can scroll the control by drag. When enabled, the user can click (or touch) and drag the control's content to scroll it. When disabled, scrolling by drag is not permitted, and the user must use other navigation controls (such as scrollbars, buttons, or mouse wheel), if available.

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

oCalendar.Options = {allowScrollByDrag: true}
oCalendar.SetOptions({allowScrollByDrag: true})
oCalendar.AllowScrollByDrag = true
oCalendar.SetAllowScrollByDrag(true)
Type:
  • boolean
Example
false {boolean}, disables scrolling the control by drag
true {boolean}, the user can scrolls the control by drag (click a month area where no dates is displayed and drag in any direction to get control scrolled)
allowScrollByDrag

(static) allowSwitchView :boolean

The allowSwitchView field specifies whether the user is allowed to switch between calendar views. When enabled, the user can toggle between different views, such as the month view and the year view. When disabled, the calendar remains fixed in the current view and the user cannot change it.

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

oCalendar.Options = {allowSwitchView: true}
oCalendar.SetOptions({allowSwitchView: true})
oCalendar.AllowSwitchView = true
oCalendar.SetAllowSwitchView(true)
Type:
  • boolean
Example
false {boolean}, disables month or year view
true {boolean}, enables month or year view
allowSwitchView

(static) autoSize :Calendar.AutoSizeEnum

The autoSize field determines how the calendar's date cells are sized. It specifies whether the size of the date cells is fixed (explicit dimensions) or automatically adjusted relative to the current font size or the available client area. When enabled, the calendar dynamically resizes its date cells to better fit the layout and font settings; otherwise, the cell size remains constant.

The Calendar.AutoSizeEnum type defines the following values:

  • exFontSize(-1), indicates that the size of the calendar's date is automatically computed based on the current font
  • exFixedSize(0), specifies that the size of the calendar's date is fixed. The dayFixedWidth / dayFixedHeight specifies the size of the calendar's date while autoSize property is Calendar.AutoSizeEnum.exFixedSize
  • exFitClient(1), indicates that the size of the calendar's date is computed so entire calendar fits the control's client area

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

oCalendar.Options = {autoSize: "fitclient"}
oCalendar.SetOptions({autoSize: "fitclient"})
oCalendar.AutoSize = "fitclient"
oCalendar.SetAutoSize("fitclient")
Type:
Example
-1 or Calendar.AutoSizeEnum.exFontSize {number}, defines the size of the calendar's date based on the current font.
1 or Calendar.AutoSizeEnum.exFitClient {number}, resizes the calendar's date to ensure all months fit the control's client area
autoSize

(static) cursors :string

The cursors field specifies the mouse cursor to be displayed when pointing over a part of the control. The Event.Cursor property defines the cursor to display when the mouse pointer is over a specific event.

The format of the property is:

"cursor(part),cursor(part),..."
where:
  • "cursor", defines the CSS mouse cursor to display while cursor hovers the part
  • "part", defines the name of the part the cursor is applied on (as defined bellow)
The "cursor" can be any of the following:
Cursor Description
"alias"indicates a shortcut or alias will be created
"all-scroll"indicates scrolling in any direction
"auto"lets the browser decide the cursor based on context
"cell"indicates a table cell
"col-resize"indicates a column can be resized horizontally
"context-menu"indicates a context menu is available
"copy"indicates something will be copied
"crosshair"a precise crosshair cursor
"default"the default arrow cursor
"e-resize"resize east (right edge)
"ew-resize"resize horizontally
"grab"indicates an item can be grabbed
"grabbing"indicates an item is being grabbed
"help"indicates help information is available
"move"indicates something can be moved
"n-resize"resize north (top edge)
"ne-resize"resize northeast (top-right corner)
"nesw-resize"resize along the northeast–southwest axis
"no-drop"indicates dropping is not permitted
"not-allowed"indicates the action is not allowed
"ns-resize"resize vertically
"nw-resize"resize northwest (top-left corner)
"nwse-resize"resize along the northwest–southeast axis
"pointer"the pointer cursor (a hand with a pointing finger)
"progress"indicates background processing
"row-resize"indicates a row can be resized vertically
"s-resize"resize south (bottom edge)
"se-resize"resize southeast (bottom-right corner)
"sw-resize"resize southwest (bottom-left corner)
"text"the text selection cursor (I-beam)
"url(...)"uses a custom cursor image (with optional fallback)
"vertical-text"the vertical text selection cursor
"w-resize"resize west (left edge)
"wait"indicates the program is busy
"zoom-in"indicates zooming in
"zoom-out"indicates zooming out
The "part" can be any of the following:
Part Description
"p" (prev)defines the prev button (available for any view)
"n" (next)defines the next button (available for any view)
"anchor" (hyperlink)defines the mouse-cursor when the mouse pointer hovers the anchor (the <a> ex-HTML part marks an anchor or hyperlink element) (@since 2.2)
The following parts are available while the control displays the day-view:
Part Description
"da" (day-all)indicates all objects of the month
"dmh" (day-month-header)object that indicates the header that displays the month
"dm" (days-month)specifies all days displayed in the current month (it can include also non-month days as well)
"d" (day)specifies a day of the current month
"dnm" (day-non-month)specifies a day that is not part of the current month, but it is still displayed
"dt" (today)specifies today in the current month
"ds" (day-select)indicates a selected date
"de" (week-end)specifies a day of weekend
"dwa" (day-weeks-all)indicates the top-left corner object, when the week-header and week-number headers are visible
"dwh" (day-week-header)indicates the header that shows the days of the week
"dw" (day-week)specifies a day into the week-header
"dwnh" (day-week-number-header)indicates the header that displays the week-numbers
"dwn" (day-week-number)specifies the week-number
"dwnn" (day-week-number-non-month)specifies the week-number that is not part of the current month
The following parts are available while the control displays the month-view:
Part Description
"ma" (month-all)specifies the area to display the entire year
"mh" (month-header)indicates the header for month-view (it displays the year)
"mm" (month-month)indicates the portion of the layout that displays the months of the year (excludes its header)
"m" (month)specifies a single month within the month-view
"mt" (month-today)indicates the current month (the month that contains today)
"ms" (month-select)indicates a month that contains a selected date
The following parts are available while the control displays the year-view:
Part Description
"ya" (year-all)specifies the area to display the entire layout
"yh" (year-header)indicates the header for year-view (it displays the range of years)
"yy" (year-years)indicates the portion of the layout that displays the years (excludes its header)
"y" (year)specifies a single year within the year-view
"yt" (year-today)specifies the year of today
"ys" (year-select)indicates a year that contains a selected date

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

oCalendar.Options = {cursors: "pointer(d,p,n)"}
oCalendar.SetOptions({cursors: "pointer(d,p,n)"})
oCalendar.Cursors = "pointer(d,p,n)"
oCalendar.SetCursors("pointer(d,p,n)")
Type:
  • string
Example
"" {string}, no mouse cursor support
"pointer(d,p,n)" {string}, indicates that the "pointer" mouse cursor is shown once the cursor hovers the "d", "p" or "n" parts of the control
cursors

(static) date :string

The date field specifies the calendar's browsing date as a string in the format "#MM/DD/YYYY#". The month portion of the specified date determines the first visible month displayed in the calendar. In other words, the calendar view is positioned so that the month of the provided date appears first.

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

oCalendar.Options = {date: "#12/31/1971#"}
oCalendar.SetOptions({date: "#12/31/1971#"})
oCalendar.Date = "#12/31/1971#"
oCalendar.SetDate("#12/31/1971#")
Type:
  • string
Example
null {null}, browses today date
"#12/31/1971#" {string}, browses December 31, 1971
date

(static) dayAlign :exontrol.DrawTextFormatEnum

The dayAlign field aligns the date's label, while the calendar is in day-view. The dayAlign field defines the alignment of the date's label within its cell when the calendar is in day-view. It determines how the date's label is positioned relative to the boundaries of its cell, such as left, right, center, top, or bottom alignment. This setting affects only the visual placement of the date's label within its cell, not the overall alignment of the calendar itself (which is controlled by the alignCal field). The dayAlign field is a combination of one or more exontrol.DrawTextFormatEnum flags that defines the way the date's label is being displayed.

The exontrol.DrawTextFormatEnum type support the following flags:

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

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

oCalendar.Options = {dayAlign: 32}
oCalendar.SetOptions({dayAlign: 32})
oCalendar.DayAlign = 32
oCalendar.SetDayAlign(32)
Type:
  • exontrol.DrawTextFormatEnum
Example
null {null}, centers the label
32 or exontrol.DrawTextFormatEnum.exTextSingleLine {number}, defines a single-line label
0x2A or exontrol.DrawTextFormatEnum.exTextSingleLine | exontrol.DrawTextFormatEnum.exTextAlignRight | exontrol.DrawTextFormatEnum.exTextAlignBottom {number}, defines a single-line label right/bottom-aligned
dayAlign

(static) dayFixedHeight :number

The dayFixedHeight field specifies the fixed height of each date in the calendar when autoSize is set to Calendar.AutoSizeEnum.exFixedSize. This height determines how much vertical space each date occupies. Note that dayFixedHeight does not include any padding around the date; padding is applied separately. Adjusting this property allows precise control over the calendar's layout when a consistent date height is required, regardless of the date content.

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

oCalendar.Options = {dayFixedHeight: 24}
oCalendar.SetOptions({dayFixedHeight: 24})
DayFixedHeight = 24
oCalendar.SetDayFixedHeight(24)
Type:
  • number
Example
24 {number}, defines the date's height to 24-pixels
dayFixedHeight

(static) dayFixedWidth :number

The dayFixedWidth field specifies the fixed width of each date in the calendar when autoSize is set to Calendar.AutoSizeEnum.exFixedSize. This width determines how much horizontal space each date occupies. Note that dayFixedWidth does not include any padding around the date; padding is applied separately. Adjusting this property allows precise control over the calendar's layout when a consistent date width is required, regardless of the date content.

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

oCalendar.Options = {dayFixedWidth: 24}
oCalendar.SetOptions({dayFixedWidth: 24})
oCalendar.DayFixedWidth = 24
oCalendar.SetDayFixedWidth(24)
Type:
  • number
Example
24 {number}, defines the date's width to 24-pixels
dayFixedWidth

(static) dayLabel :string

The dayLabel field specifies an ex-HTML string used to display the date when the calendar is in day view. This string can include expression fields (<%...%>) to dynamically show date values. The dayLabel field allows you to customize the format and content of the date display in the calendar's day view by using various placeholders that represent different date components. By including these expression fields in the dayLabel string, you can create a personalized and informative display of the date according to your preferences or regional settings.

The dayLabel field can include any of the following fields:

Name Description Sample
(day-patterns)
<%d%>Day of the month using one or two numeric digits, depending on the value1 - 31
<%dd%>Day of the month using exactly two numeric digits01 - 31
<%d1%>Weekday using its first letterS - S
<%loc_d1%>Weekday as a single-letter abbreviation based on the current user settingsS - S
<%d2%>Weekday using its first two lettersSu - Sa
<%loc_d2%>Weekday as a two-letter abbreviation based on the current user settingsSu - Sa
<%d3%>Weekday using its first three lettersSun - Sat
<%ddd%>Weekday using its first three lettersSun - Sat
<%loc_d3%>Weekday as a three-letter abbreviation based on the current user regional and language settings; equivalent to <%loc_ddd%>Sun - Sat
<%loc_ddd%>Weekday as a three-letter abbreviation based on the current user regional and language settingsSun - Sat
<%dddd%>Full name of the weekdaySunday - Saturday
<%loc_dddd%>Full weekday name based on the current user regional and language settingsSunday - Saturday
<%w%>Numeric day of the week1 - 7
<%y%>Numeric day of the year1 - 366
(week-patterns)
<%ww%>Week of the year1 - 53
(month-patterns)
<%m%>Month of the year using one or two numeric digits, as needed1 - 12
<%mm%>Month of the year using exactly two numeric digits01 - 12
<%mr%>Month of the year using Roman numerals, as neededI - XII
<%m1%>Month using its first letterJ - D
<%loc_m1%>Month as a single-letter abbreviation based on the current user settingsJ - D
<%m2%>Month using its first two lettersJa - De
<%loc_m2%>Month as a two-letter abbreviation based on the current user settingsJa - De
<%m3%>Month using its first three lettersJan - Dec
<%mmm%>Month using its first three lettersJan - Dec
<%loc_m3%>Month as a three-letter abbreviation based on the current user regional and language settings; equivalent to <%loc_mmm%>Jan - Dec
<%loc_mmm%>Month as a three-letter abbreviation based on the current user regional and language settingsJan - Dec
<%mmmm%>Full name of the monthJanuary - December
<%loc_mmmm%>Full month name based on the current user regional and language settingsJanuary - December
(year-patterns)
<%q%>Date shown as the quarter of the year1 - 4
<%hy%>Date shown as the half of the year1 - 2
<%loc_y%>Year represented by the last digit only, based on the current regional settings0 - 9
<%yy%>Last two digits of the year01 - 99
<%loc_yy%>Year represented by the last two digits only, based on the current regional settings; a leading zero is added for single-digit years01 - 99
<%yyyy%>Full year using four digits0100 - 9999
<%loc_yyyy%>Year represented using four or five digits, depending on the calendar in use. Thai Buddhist and Korean calendars use five-digit years; the "yyyy" pattern displays five digits for these calendars and four digits for all other supported calendars. Calendars with single-digit or two-digit years, such as the Japanese Emperor era, are formatted differently: single-digit years include a leading zero (for example, "03"), two-digit years use two digits (for example, "13"), and no additional leading zeros are applied0100 - 9999
<%i%>Numeric value displayed instead of a date, representing the number of milliseconds elapsed since the Unix Epoch, January 1, 1970, 00:00:00 UTC1767085565940
(localized era-patterns)
<%loc_g%>Period/era based on the current user regional and language settingsA,B
<%loc_gg%>Period/era based on the current user regional and language settingsAD,BC
(localized date-patterns)
<%loc_sdate%>Date in short format based on the current user regional and language settings12/31/2000
<%loc_ldate%>Date in long format based on the current user regional and language settingsDecember 31, 2000
<%loc_dsep%>Date separator based on the current user regional and language settings/
(time-patterns)
<%h%>Hour in one or two digits, as needed0 - 23
<%hh%>Hour in two digits00 - 23
<%h12%>Hour in 12-hour format, in one or two digits0/12 - 11
<%hh12%>Hour in 12-hour format, in two digits00/12 - 11
<%n%>Minute in one or two digits, as needed0 - 59
<%nn%>Minute in two digits00 - 59
<%s%>Second in one or two digits, as needed0 - 59
<%ss%>Second in two digits00 - 59
<%AM/PM%>12-hour clock with uppercase "AM" or "PM" as appropriateAM, PM
(localized time-patterns)
<%loc_AM/PM%>Time marker such as AM or PM based on the current user regional and language settingsAM, PM
<%loc_A/P%>Single-character time marker such as A or P based on the current user regional and language settingsA, P
<%loc_time%>Time based on the current user regional and language settings1:30:15 PM
<%loc_time24%>Time in 24-hour format without a time marker based on the current user regional and language settings13:30:15
<%loc_tsep%>Time separator based on the current user regional and language settings:
Also, dayLabel field supports ex-HTML tags as follows:
  • "<b>text</b>", displays the text in bold.
  • "<li>text</li>", displays the text in italics.
  • "<u>text</u>", underlines the text.
  • "<s>text</s>", strike-through text
  • "<a [id][;options]>text</a>", displays an anchor element that can be clicked
  • "<font [family][;size]>text</font>", displays portions of text with a different font and/or different size.
  • "<fgcolor color>text</fgcolor>", displays text with a specified foreground color.
  • "<bgcolor color>text</bgcolor>", displays text with a specified background color.
  • "<br>", defines a forced line-break
  • "<r>", right aligns the text
  • "<c>", centers the text
  • "<img>key[:width]</img>", displays a custom-sized picture into the text. The key defines the name of the picture/image to be shown. The image can be added using the exontrol.HTMLPicture.Add method.
  • & glyph characters as "&amp;" ( & ), "&lt;" ( < ), "&gt;" ( > ), "&qout;" ( quote character ) and "&#number;" ( the character with specified code ). For instance, "&#8364;" displays the EURO sign
  • "<off offset>text</off>", defines the vertical offset to display the text.
  • "<gra color[;mode[;blend]]>text</gra>", shows the text in gradient
  • "<out color[;width]>text</out>", shows the text with outlined characters
  • "<sha color[;width[;offset]]>text</sha>", shows the text with a shadow

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

oCalendar.Options = {dayLabel: "<%d%>"}
oCalendar.SetOptions({dayLabel: "<%d%>"})
oCalendar.DayLabel = "<%d%>"
oCalendar.SetDayLabel("<%d%>")
Type:
  • string
Example
"&lt;%d%&gt;" {string}, displays the day of the month in one or two numeric digits, as needed (1 to 31),
"&lt;%dd%&gt;" {string}, displays day of the month in two numeric digits (01 to 31)
"&lt;%d%&gt;\n&lt;font ;8&gt;&lt;fgcolor gray&gt;&lt;%y%&gt;&lt;/fgcolor&gt;" {string}, displays the day of the month in one or two numeric digits, as needed (1 to 31) on the first line, and on the second line displays the number of the day of the year (1 to 366) in gray
dayLabel

(static) dayMonthAlign :exontrol.DrawTextFormatEnum

The dayMonthAlign field specifies how the month's label is aligned and formatted in the calendar's header when in day view. It controls alignment, text wrapping, clipping, and ellipsis behavior, allowing you to adjust how the label appears within its header area.

The exontrol.DrawTextFormatEnum type support the following flags:

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

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

oCalendar.Options = {dayMonthAlign: "single,right,vcenter"}
oCalendar.SetOptions({dayMonthAlign: "single,right,vcenter"})
oCalendar.DayMonthAlign = "single,right,vcenter"
oCalendar.SetDayMonthAlign("single,right,vcenter")
Type:
  • exontrol.DrawTextFormatEnum
Example
null {null}, centers the label
32 or exontrol.DrawTextFormatEnum.exTextSingleLine {number}, defines a single-line label
0x2A or exontrol.DrawTextFormatEnum.exTextSingleLine | exontrol.DrawTextFormatEnum.exTextAlignRight | exontrol.DrawTextFormatEnum.exTextAlignBottom {number}, defines a single-line label right/bottom-aligned
dayMonthAlign

(static) dayMonthHeader :boolean

The dayMonthHeader field specifies whether the calendar displays a header showing the month's name when in day view. Enabling this option adds a visual row that indicates the current month above the dates. The dayMonthLabel field specifies an ex-HTML string used to display the month's name in the calendar's header when in day view.

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

oCalendar.Options = {dayMonthHeader: true}
oCalendar.SetOptions({dayMonthHeader: true})
oCalendar.DayMonthHeader = true
oCalendar.SetDayMonthHeader(true)
Type:
  • boolean
Example
false {boolean}, hides the calendar's header (month's name)
true {boolean}, shows the calendar's header (month's name)
dayMonthHeader

(static) dayMonthLabel :string

The dayMonthLabel field specifies an ex-HTML string used to display the month's name in the calendar's header when in day view. This string can include expression fields (<%...%>) to dynamically show the month name. The dayMonthLabel field allows you to customize the format and content of the month name display in the calendar's header by using various placeholders that represent different components of the date. By including these expression fields in the dayMonthLabel string, you can create a personalized and informative display of the month name according to your preferences or regional settings. The dayMonthHeader field specifies whether the calendar displays a header showing the month's name when in day view.

The dayMonthLabel field can include any of the following fields:

Name Description Sample
(day-patterns)
<%d%>Day of the month using one or two numeric digits, depending on the value1 - 31
<%dd%>Day of the month using exactly two numeric digits01 - 31
<%d1%>Weekday using its first letterS - S
<%loc_d1%>Weekday as a single-letter abbreviation based on the current user settingsS - S
<%d2%>Weekday using its first two lettersSu - Sa
<%loc_d2%>Weekday as a two-letter abbreviation based on the current user settingsSu - Sa
<%d3%>Weekday using its first three lettersSun - Sat
<%ddd%>Weekday using its first three lettersSun - Sat
<%loc_d3%>Weekday as a three-letter abbreviation based on the current user regional and language settings; equivalent to <%loc_ddd%>Sun - Sat
<%loc_ddd%>Weekday as a three-letter abbreviation based on the current user regional and language settingsSun - Sat
<%dddd%>Full name of the weekdaySunday - Saturday
<%loc_dddd%>Full weekday name based on the current user regional and language settingsSunday - Saturday
<%w%>Numeric day of the week1 - 7
<%y%>Numeric day of the year1 - 366
(week-patterns)
<%ww%>Week of the year1 - 53
(month-patterns)
<%m%>Month of the year using one or two numeric digits, as needed1 - 12
<%mm%>Month of the year using exactly two numeric digits01 - 12
<%mr%>Month of the year using Roman numerals, as neededI - XII
<%m1%>Month using its first letterJ - D
<%loc_m1%>Month as a single-letter abbreviation based on the current user settingsJ - D
<%m2%>Month using its first two lettersJa - De
<%loc_m2%>Month as a two-letter abbreviation based on the current user settingsJa - De
<%m3%>Month using its first three lettersJan - Dec
<%mmm%>Month using its first three lettersJan - Dec
<%loc_m3%>Month as a three-letter abbreviation based on the current user regional and language settings; equivalent to <%loc_mmm%>Jan - Dec
<%loc_mmm%>Month as a three-letter abbreviation based on the current user regional and language settingsJan - Dec
<%mmmm%>Full name of the monthJanuary - December
<%loc_mmmm%>Full month name based on the current user regional and language settingsJanuary - December
(year-patterns)
<%q%>Date shown as the quarter of the year1 - 4
<%hy%>Date shown as the half of the year1 - 2
<%loc_y%>Year represented by the last digit only, based on the current regional settings0 - 9
<%yy%>Last two digits of the year01 - 99
<%loc_yy%>Year represented by the last two digits only, based on the current regional settings; a leading zero is added for single-digit years01 - 99
<%yyyy%>Full year using four digits0100 - 9999
<%loc_yyyy%>Year represented using four or five digits, depending on the calendar in use. Thai Buddhist and Korean calendars use five-digit years; the "yyyy" pattern displays five digits for these calendars and four digits for all other supported calendars. Calendars with single-digit or two-digit years, such as the Japanese Emperor era, are formatted differently: single-digit years include a leading zero (for example, "03"), two-digit years use two digits (for example, "13"), and no additional leading zeros are applied0100 - 9999
<%i%>Numeric value displayed instead of a date, representing the number of milliseconds elapsed since the Unix Epoch, January 1, 1970, 00:00:00 UTC1767085565940
(localized era-patterns)
<%loc_g%>Period/era based on the current user regional and language settingsA,B
<%loc_gg%>Period/era based on the current user regional and language settingsAD,BC
(localized date-patterns)
<%loc_sdate%>Date in short format based on the current user regional and language settings12/31/2000
<%loc_ldate%>Date in long format based on the current user regional and language settingsDecember 31, 2000
<%loc_dsep%>Date separator based on the current user regional and language settings/
(time-patterns)
<%h%>Hour in one or two digits, as needed0 - 23
<%hh%>Hour in two digits00 - 23
<%h12%>Hour in 12-hour format, in one or two digits0/12 - 11
<%hh12%>Hour in 12-hour format, in two digits00/12 - 11
<%n%>Minute in one or two digits, as needed0 - 59
<%nn%>Minute in two digits00 - 59
<%s%>Second in one or two digits, as needed0 - 59
<%ss%>Second in two digits00 - 59
<%AM/PM%>12-hour clock with uppercase "AM" or "PM" as appropriateAM, PM
(localized time-patterns)
<%loc_AM/PM%>Time marker such as AM or PM based on the current user regional and language settingsAM, PM
<%loc_A/P%>Single-character time marker such as A or P based on the current user regional and language settingsA, P
<%loc_time%>Time based on the current user regional and language settings1:30:15 PM
<%loc_time24%>Time in 24-hour format without a time marker based on the current user regional and language settings13:30:15
<%loc_tsep%>Time separator based on the current user regional and language settings:
Also, dayMonthLabel field supports ex-HTML tags as follows:
  • "<b>text</b>", displays the text in bold.
  • "<li>text</li>", displays the text in italics.
  • "<u>text</u>", underlines the text.
  • "<s>text</s>", strike-through text
  • "<a [id][;options]>text</a>", displays an anchor element that can be clicked
  • "<font [family][;size]>text</font>", displays portions of text with a different font and/or different size.
  • "<fgcolor color>text</fgcolor>", displays text with a specified foreground color.
  • "<bgcolor color>text</bgcolor>", displays text with a specified background color.
  • "<br>", defines a forced line-break
  • "<r>", right aligns the text
  • "<c>", centers the text
  • "<img>key[:width]</img>", displays a custom-sized picture into the text. The key defines the name of the picture/image to be shown. The image can be added using the exontrol.HTMLPicture.Add method.
  • & glyph characters as "&amp;" ( & ), "&lt;" ( < ), "&gt;" ( > ), "&qout;" ( quote character ) and "&#number;" ( the character with specified code ). For instance, "&#8364;" displays the EURO sign
  • "<off offset>text</off>", defines the vertical offset to display the text.
  • "<gra color[;mode[;blend]]>text</gra>", shows the text in gradient
  • "<out color[;width]>text</out>", shows the text with outlined characters
  • "<sha color[;width[;offset]]>text</sha>", shows the text with a shadow

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

oCalendar.Options = {dayMonthLabel: "<%mmmm%>"}
oCalendar.SetOptions({dayMonthLabel: "<%mmmm%>"})
oCalendar.DayMonthLabel = "<%mmmm%>"
oCalendar.SetDayMonthLabel("<%mmmm%>")
Type:
  • string
Example
"" {string}, displays nothing
"&lt;%mmm%&gt;" {string}, displays three-letters of the month
"&lt;%mmmm%&gt; &lt;%yyyy%&gt;" {string}, displays the full month and year
"&lt;b&gt;&lt;%mmm%&gt;&lt;/b&gt;&lt;r&gt;&lt;fgcolor gray&gt;&lt;font ;8&gt;&lt;off 6&gt;&lt;%yyyy%&gt;" {string}, displays an combined ex-HTML format
dayMonthLabel

(static) dayNonMonth :number

The dayNonMonth field determines whether the calendar shows dates that do not belong to the current month, also called "non-month" dates. These are dates from the previous or next month that appear in the current month's calendar grid to fill out the full weeks. When dayNonMonth is enabled, these extra dates are visible; when disabled, only the dates of the current month are shown.

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

oCalendar.Options = {dayNonMonth: true}
oCalendar.SetOptions({dayNonMonth: true})
oCalendar.DayNonMonth = true
oCalendar.SetDayNonMonth(true)
Type:
  • number
Example
false {boolean}, hides the dates that are not part of the current month.
true {boolean}, shows the dates that are not part of the current month.
dayNonMonth

(static) dayNonMonthLabel :string

The dayNonMonthLabel field specifies an ex-HTML string used to display the dates that do not belong to the current month (so-called “non-month” dates) when the calendar is in day view. This string can include expression fields (<%...%>) to dynamically show these extra dates.

The dayNonMonthLabel field can include any of the following fields:

Name Description Sample
(day-patterns)
<%d%>Day of the month using one or two numeric digits, depending on the value1 - 31
<%dd%>Day of the month using exactly two numeric digits01 - 31
<%d1%>Weekday using its first letterS - S
<%loc_d1%>Weekday as a single-letter abbreviation based on the current user settingsS - S
<%d2%>Weekday using its first two lettersSu - Sa
<%loc_d2%>Weekday as a two-letter abbreviation based on the current user settingsSu - Sa
<%d3%>Weekday using its first three lettersSun - Sat
<%ddd%>Weekday using its first three lettersSun - Sat
<%loc_d3%>Weekday as a three-letter abbreviation based on the current user regional and language settings; equivalent to <%loc_ddd%>Sun - Sat
<%loc_ddd%>Weekday as a three-letter abbreviation based on the current user regional and language settingsSun - Sat
<%dddd%>Full name of the weekdaySunday - Saturday
<%loc_dddd%>Full weekday name based on the current user regional and language settingsSunday - Saturday
<%w%>Numeric day of the week1 - 7
<%y%>Numeric day of the year1 - 366
(week-patterns)
<%ww%>Week of the year1 - 53
(month-patterns)
<%m%>Month of the year using one or two numeric digits, as needed1 - 12
<%mm%>Month of the year using exactly two numeric digits01 - 12
<%mr%>Month of the year using Roman numerals, as neededI - XII
<%m1%>Month using its first letterJ - D
<%loc_m1%>Month as a single-letter abbreviation based on the current user settingsJ - D
<%m2%>Month using its first two lettersJa - De
<%loc_m2%>Month as a two-letter abbreviation based on the current user settingsJa - De
<%m3%>Month using its first three lettersJan - Dec
<%mmm%>Month using its first three lettersJan - Dec
<%loc_m3%>Month as a three-letter abbreviation based on the current user regional and language settings; equivalent to <%loc_mmm%>Jan - Dec
<%loc_mmm%>Month as a three-letter abbreviation based on the current user regional and language settingsJan - Dec
<%mmmm%>Full name of the monthJanuary - December
<%loc_mmmm%>Full month name based on the current user regional and language settingsJanuary - December
(year-patterns)
<%q%>Date shown as the quarter of the year1 - 4
<%hy%>Date shown as the half of the year1 - 2
<%loc_y%>Year represented by the last digit only, based on the current regional settings0 - 9
<%yy%>Last two digits of the year01 - 99
<%loc_yy%>Year represented by the last two digits only, based on the current regional settings; a leading zero is added for single-digit years01 - 99
<%yyyy%>Full year using four digits0100 - 9999
<%loc_yyyy%>Year represented using four or five digits, depending on the calendar in use. Thai Buddhist and Korean calendars use five-digit years; the "yyyy" pattern displays five digits for these calendars and four digits for all other supported calendars. Calendars with single-digit or two-digit years, such as the Japanese Emperor era, are formatted differently: single-digit years include a leading zero (for example, "03"), two-digit years use two digits (for example, "13"), and no additional leading zeros are applied0100 - 9999
<%i%>Numeric value displayed instead of a date, representing the number of milliseconds elapsed since the Unix Epoch, January 1, 1970, 00:00:00 UTC1767085565940
(localized era-patterns)
<%loc_g%>Period/era based on the current user regional and language settingsA,B
<%loc_gg%>Period/era based on the current user regional and language settingsAD,BC
(localized date-patterns)
<%loc_sdate%>Date in short format based on the current user regional and language settings12/31/2000
<%loc_ldate%>Date in long format based on the current user regional and language settingsDecember 31, 2000
<%loc_dsep%>Date separator based on the current user regional and language settings/
(time-patterns)
<%h%>Hour in one or two digits, as needed0 - 23
<%hh%>Hour in two digits00 - 23
<%h12%>Hour in 12-hour format, in one or two digits0/12 - 11
<%hh12%>Hour in 12-hour format, in two digits00/12 - 11
<%n%>Minute in one or two digits, as needed0 - 59
<%nn%>Minute in two digits00 - 59
<%s%>Second in one or two digits, as needed0 - 59
<%ss%>Second in two digits00 - 59
<%AM/PM%>12-hour clock with uppercase "AM" or "PM" as appropriateAM, PM
(localized time-patterns)
<%loc_AM/PM%>Time marker such as AM or PM based on the current user regional and language settingsAM, PM
<%loc_A/P%>Single-character time marker such as A or P based on the current user regional and language settingsA, P
<%loc_time%>Time based on the current user regional and language settings1:30:15 PM
<%loc_time24%>Time in 24-hour format without a time marker based on the current user regional and language settings13:30:15
<%loc_tsep%>Time separator based on the current user regional and language settings:
Also, dayNonMonthLabel property supports ex-HTML tags as follows:
  • "<b>text</b>", displays the text in bold.
  • "<li>text</li>", displays the text in italics.
  • "<u>text</u>", underlines the text.
  • "<s>text</s>", strike-through text
  • "<a [id][;options]>text</a>", displays an anchor element that can be clicked
  • "<font [family][;size]>text</font>", displays portions of text with a different font and/or different size.
  • "<fgcolor color>text</fgcolor>", displays text with a specified foreground color.
  • "<bgcolor color>text</bgcolor>", displays text with a specified background color.
  • "<br>", defines a forced line-break
  • "<r>", right aligns the text
  • "<c>", centers the text
  • "<img>key[:width]</img>", displays a custom-sized picture into the text. The key defines the name of the picture/image to be shown. The image can be added using the exontrol.HTMLPicture.Add method.
  • & glyph characters as "&amp;" ( & ), "&lt;" ( < ), "&gt;" ( > ), "&qout;" ( quote character ) and "&#number;" ( the character with specified code ). For instance, "&#8364;" displays the EURO sign
  • "<off offset>text</off>", defines the vertical offset to display the text.
  • "<gra color[;mode[;blend]]>text</gra>", shows the text in gradient
  • "<out color[;width]>text</out>", shows the text with outlined characters
  • "<sha color[;width[;offset]]>text</sha>", shows the text with a shadow

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

oCalendar.Options = {dayNonMonthLabel: "<fgcolor lightgray><%d%></fgcolor>"}
oCalendar.SetOptions({dayNonMonthLabel: "<fgcolor lightgray><%d%></fgcolor>"})
oCalendar.DayNonMonthLabel = "<fgcolor lightgray><%d%></fgcolor>"
oCalendar.SetDayNonMonthLabel("<fgcolor lightgray><%d%></fgcolor>")
Type:
  • string
Example
"" {string}, displays nothing
"&lt;%d%&gt;" {string}, displays the day of the month in one or two numeric digits, as needed (1 to 31)
"&lt;fgcolor lightgray&gt;&lt;%d%&gt;&lt;/fgcolor&gt;" {string}, displays the day of the month in one or two numeric digits, as needed (1 to 31) in gray
dayNonMonthLabel

(static) dayWeekAllLabel :string

The dayWeekAllLabel field specifies an ex-HTML string used to display the first day of the month in the top-left corner of the calendar when both the week-number and weekday headers are shown (day view only). This string can include expression fields (<%...%>) to dynamically show the date.

The dayWeekAllLabel property can include any of the following fields:

Name Description Sample
(day-patterns)
<%d%>Day of the month using one or two numeric digits, depending on the value1 - 31
<%dd%>Day of the month using exactly two numeric digits01 - 31
<%d1%>Weekday using its first letterS - S
<%loc_d1%>Weekday as a single-letter abbreviation based on the current user settingsS - S
<%d2%>Weekday using its first two lettersSu - Sa
<%loc_d2%>Weekday as a two-letter abbreviation based on the current user settingsSu - Sa
<%d3%>Weekday using its first three lettersSun - Sat
<%ddd%>Weekday using its first three lettersSun - Sat
<%loc_d3%>Weekday as a three-letter abbreviation based on the current user regional and language settings; equivalent to <%loc_ddd%>Sun - Sat
<%loc_ddd%>Weekday as a three-letter abbreviation based on the current user regional and language settingsSun - Sat
<%dddd%>Full name of the weekdaySunday - Saturday
<%loc_dddd%>Full weekday name based on the current user regional and language settingsSunday - Saturday
<%w%>Numeric day of the week1 - 7
<%y%>Numeric day of the year1 - 366
(week-patterns)
<%ww%>Week of the year1 - 53
(month-patterns)
<%m%>Month of the year using one or two numeric digits, as needed1 - 12
<%mm%>Month of the year using exactly two numeric digits01 - 12
<%mr%>Month of the year using Roman numerals, as neededI - XII
<%m1%>Month using its first letterJ - D
<%loc_m1%>Month as a single-letter abbreviation based on the current user settingsJ - D
<%m2%>Month using its first two lettersJa - De
<%loc_m2%>Month as a two-letter abbreviation based on the current user settingsJa - De
<%m3%>Month using its first three lettersJan - Dec
<%mmm%>Month using its first three lettersJan - Dec
<%loc_m3%>Month as a three-letter abbreviation based on the current user regional and language settings; equivalent to <%loc_mmm%>Jan - Dec
<%loc_mmm%>Month as a three-letter abbreviation based on the current user regional and language settingsJan - Dec
<%mmmm%>Full name of the monthJanuary - December
<%loc_mmmm%>Full month name based on the current user regional and language settingsJanuary - December
(year-patterns)
<%q%>Date shown as the quarter of the year1 - 4
<%hy%>Date shown as the half of the year1 - 2
<%loc_y%>Year represented by the last digit only, based on the current regional settings0 - 9
<%yy%>Last two digits of the year01 - 99
<%loc_yy%>Year represented by the last two digits only, based on the current regional settings; a leading zero is added for single-digit years01 - 99
<%yyyy%>Full year using four digits0100 - 9999
<%loc_yyyy%>Year represented using four or five digits, depending on the calendar in use. Thai Buddhist and Korean calendars use five-digit years; the "yyyy" pattern displays five digits for these calendars and four digits for all other supported calendars. Calendars with single-digit or two-digit years, such as the Japanese Emperor era, are formatted differently: single-digit years include a leading zero (for example, "03"), two-digit years use two digits (for example, "13"), and no additional leading zeros are applied0100 - 9999
<%i%>Numeric value displayed instead of a date, representing the number of milliseconds elapsed since the Unix Epoch, January 1, 1970, 00:00:00 UTC1767085565940
(localized era-patterns)
<%loc_g%>Period/era based on the current user regional and language settingsA,B
<%loc_gg%>Period/era based on the current user regional and language settingsAD,BC
(localized date-patterns)
<%loc_sdate%>Date in short format based on the current user regional and language settings12/31/2000
<%loc_ldate%>Date in long format based on the current user regional and language settingsDecember 31, 2000
<%loc_dsep%>Date separator based on the current user regional and language settings/
(time-patterns)
<%h%>Hour in one or two digits, as needed0 - 23
<%hh%>Hour in two digits00 - 23
<%h12%>Hour in 12-hour format, in one or two digits0/12 - 11
<%hh12%>Hour in 12-hour format, in two digits00/12 - 11
<%n%>Minute in one or two digits, as needed0 - 59
<%nn%>Minute in two digits00 - 59
<%s%>Second in one or two digits, as needed0 - 59
<%ss%>Second in two digits00 - 59
<%AM/PM%>12-hour clock with uppercase "AM" or "PM" as appropriateAM, PM
(localized time-patterns)
<%loc_AM/PM%>Time marker such as AM or PM based on the current user regional and language settingsAM, PM
<%loc_A/P%>Single-character time marker such as A or P based on the current user regional and language settingsA, P
<%loc_time%>Time based on the current user regional and language settings1:30:15 PM
<%loc_time24%>Time in 24-hour format without a time marker based on the current user regional and language settings13:30:15
<%loc_tsep%>Time separator based on the current user regional and language settings:
Also, dayWeekAllLabel property supports ex-HTML tags as follows:
  • "<b>text</b>", displays the text in bold.
  • "<li>text</li>", displays the text in italics.
  • "<u>text</u>", underlines the text.
  • "<s>text</s>", strike-through text
  • "<a [id][;options]>text</a>", displays an anchor element that can be clicked
  • "<font [family][;size]>text</font>", displays portions of text with a different font and/or different size.
  • "<fgcolor color>text</fgcolor>", displays text with a specified foreground color.
  • "<bgcolor color>text</bgcolor>", displays text with a specified background color.
  • "<br>", defines a forced line-break
  • "<r>", right aligns the text
  • "<c>", centers the text
  • "<img>key[:width]</img>", displays a custom-sized picture into the text. The key defines the name of the picture/image to be shown. The image can be added using the exontrol.HTMLPicture.Add method.
  • & glyph characters as "&amp;" ( & ), "&lt;" ( < ), "&gt;" ( > ), "&qout;" ( quote character ) and "&#number;" ( the character with specified code ). For instance, "&#8364;" displays the EURO sign
  • "<off offset>text</off>", defines the vertical offset to display the text.
  • "<gra color[;mode[;blend]]>text</gra>", shows the text in gradient
  • "<out color[;width]>text</out>", shows the text with outlined characters
  • "<sha color[;width[;offset]]>text</sha>", shows the text with a shadow

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

oCalendar.Options = {dayWeekAllLabel: "<%mr%>"}
oCalendar.SetOptions({dayWeekAllLabel: "<%mr%>"})
oCalendar.DayWeekAllLabel = "<%mr%>"
oCalendar.SetDayWeekAllLabel("<%mr%>")
Type:
  • string
Example
"" {string}, displays nothing
"&lt;b&gt;&lt;%mr%&gt;" {string}, displays month of the year in Roman numerals, as needed (I to XII) in bold
dayWeekAllLabel

(static) dayWeekHeader :boolean

The dayWeekHeader field determines whether the calendar displays a header showing the days of the week when in day view. Enabling this option adds a visual row at the top of the calendar with the names or abbreviations of the weekdays, helping users quickly identify the day corresponding to each date.

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

oCalendar.Options = {dayWeekHeader: true}
oCalendar.SetOptions({dayWeekHeader: true})
oCalendar.DayWeekHeader = true
oCalendar.SetDayWeekHeader(true)
Type:
  • boolean
Example
false {boolean}, hides the header that displays the days of the week (day-view only).
true {boolean}, shows the header that displays the days of the week (day-view only).
dayWeekHeader

(static) dayWeekLabel :string

The dayWeekLabel field specifies an ex-HTML string used to display the days of the week in the calendar's header when in day view. This string can include expression fields (<%...%>) to dynamically show the weekday names. The dayWeekLabel field allows you to customize the format and content of the weekday display in the calendar's header by using various placeholders that represent different components of the weekday names. By including these expression fields in the dayWeekLabel string, you can create a personalized and informative display of the weekdays according to your preferences or regional settings.

The dayWeekLabel property can include any of the following fields:

Name Description Sample
(day-patterns)
<%d%>Day of the month using one or two numeric digits, depending on the value1 - 31
<%dd%>Day of the month using exactly two numeric digits01 - 31
<%d1%>Weekday using its first letterS - S
<%loc_d1%>Weekday as a single-letter abbreviation based on the current user settingsS - S
<%d2%>Weekday using its first two lettersSu - Sa
<%loc_d2%>Weekday as a two-letter abbreviation based on the current user settingsSu - Sa
<%d3%>Weekday using its first three lettersSun - Sat
<%ddd%>Weekday using its first three lettersSun - Sat
<%loc_d3%>Weekday as a three-letter abbreviation based on the current user regional and language settings; equivalent to <%loc_ddd%>Sun - Sat
<%loc_ddd%>Weekday as a three-letter abbreviation based on the current user regional and language settingsSun - Sat
<%dddd%>Full name of the weekdaySunday - Saturday
<%loc_dddd%>Full weekday name based on the current user regional and language settingsSunday - Saturday
<%w%>Numeric day of the week1 - 7
<%y%>Numeric day of the year1 - 366
(week-patterns)
<%ww%>Week of the year1 - 53
(month-patterns)
<%m%>Month of the year using one or two numeric digits, as needed1 - 12
<%mm%>Month of the year using exactly two numeric digits01 - 12
<%mr%>Month of the year using Roman numerals, as neededI - XII
<%m1%>Month using its first letterJ - D
<%loc_m1%>Month as a single-letter abbreviation based on the current user settingsJ - D
<%m2%>Month using its first two lettersJa - De
<%loc_m2%>Month as a two-letter abbreviation based on the current user settingsJa - De
<%m3%>Month using its first three lettersJan - Dec
<%mmm%>Month using its first three lettersJan - Dec
<%loc_m3%>Month as a three-letter abbreviation based on the current user regional and language settings; equivalent to <%loc_mmm%>Jan - Dec
<%loc_mmm%>Month as a three-letter abbreviation based on the current user regional and language settingsJan - Dec
<%mmmm%>Full name of the monthJanuary - December
<%loc_mmmm%>Full month name based on the current user regional and language settingsJanuary - December
(year-patterns)
<%q%>Date shown as the quarter of the year1 - 4
<%hy%>Date shown as the half of the year1 - 2
<%loc_y%>Year represented by the last digit only, based on the current regional settings0 - 9
<%yy%>Last two digits of the year01 - 99
<%loc_yy%>Year represented by the last two digits only, based on the current regional settings; a leading zero is added for single-digit years01 - 99
<%yyyy%>Full year using four digits0100 - 9999
<%loc_yyyy%>Year represented using four or five digits, depending on the calendar in use. Thai Buddhist and Korean calendars use five-digit years; the "yyyy" pattern displays five digits for these calendars and four digits for all other supported calendars. Calendars with single-digit or two-digit years, such as the Japanese Emperor era, are formatted differently: single-digit years include a leading zero (for example, "03"), two-digit years use two digits (for example, "13"), and no additional leading zeros are applied0100 - 9999
<%i%>Numeric value displayed instead of a date, representing the number of milliseconds elapsed since the Unix Epoch, January 1, 1970, 00:00:00 UTC1767085565940
(localized era-patterns)
<%loc_g%>Period/era based on the current user regional and language settingsA,B
<%loc_gg%>Period/era based on the current user regional and language settingsAD,BC
(localized date-patterns)
<%loc_sdate%>Date in short format based on the current user regional and language settings12/31/2000
<%loc_ldate%>Date in long format based on the current user regional and language settingsDecember 31, 2000
<%loc_dsep%>Date separator based on the current user regional and language settings/
(time-patterns)
<%h%>Hour in one or two digits, as needed0 - 23
<%hh%>Hour in two digits00 - 23
<%h12%>Hour in 12-hour format, in one or two digits0/12 - 11
<%hh12%>Hour in 12-hour format, in two digits00/12 - 11
<%n%>Minute in one or two digits, as needed0 - 59
<%nn%>Minute in two digits00 - 59
<%s%>Second in one or two digits, as needed0 - 59
<%ss%>Second in two digits00 - 59
<%AM/PM%>12-hour clock with uppercase "AM" or "PM" as appropriateAM, PM
(localized time-patterns)
<%loc_AM/PM%>Time marker such as AM or PM based on the current user regional and language settingsAM, PM
<%loc_A/P%>Single-character time marker such as A or P based on the current user regional and language settingsA, P
<%loc_time%>Time based on the current user regional and language settings1:30:15 PM
<%loc_time24%>Time in 24-hour format without a time marker based on the current user regional and language settings13:30:15
<%loc_tsep%>Time separator based on the current user regional and language settings:
Also, dayWeekLabel property supports ex-HTML tags as follows:
  • "<b>text</b>", displays the text in bold.
  • "<li>text</li>", displays the text in italics.
  • "<u>text</u>", underlines the text.
  • "<s>text</s>", strike-through text
  • "<a [id][;options]>text</a>", displays an anchor element that can be clicked
  • "<font [family][;size]>text</font>", displays portions of text with a different font and/or different size.
  • "<fgcolor color>text</fgcolor>", displays text with a specified foreground color.
  • "<bgcolor color>text</bgcolor>", displays text with a specified background color.
  • "<br>", defines a forced line-break
  • "<r>", right aligns the text
  • "<c>", centers the text
  • "<img>key[:width]</img>", displays a custom-sized picture into the text. The key defines the name of the picture/image to be shown. The image can be added using the exontrol.HTMLPicture.Add method.
  • & glyph characters as "&amp;" ( & ), "&lt;" ( < ), "&gt;" ( > ), "&qout;" ( quote character ) and "&#number;" ( the character with specified code ). For instance, "&#8364;" displays the EURO sign
  • "<off offset>text</off>", defines the vertical offset to display the text.
  • "<gra color[;mode[;blend]]>text</gra>", shows the text in gradient
  • "<out color[;width]>text</out>", shows the text with outlined characters
  • "<sha color[;width[;offset]]>text</sha>", shows the text with a shadow

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

oCalendar.Options = {dayWeekLabel: "<%d2%>"}
oCalendar.SetOptions({dayWeekLabel: "<%d2%>"})
oCalendar.DayWeekLabel = "<%d2%>"
oCalendar.SetDayWeekLabel("<%d2%>")
Type:
  • string
Example
"" {string}, displays nothing
"&lt;%d2%&gt;" {string}, displays first two letters of the weekday (Su to Sa)
"&lt;b&gt;&lt;%d3%&gt;&lt;/b&gt;" {string}, displays first thee letters of the weekday (Sun to Sat) in bold
dayWeekLabel

(static) dayWeekNoHeader :boolean

The dayWeekNoHeader field specifies whether the calendar displays a header showing the week numbers when in day view. Enabling this option adds a visual row that indicates the number of each week.

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

oCalendar.Options = {dayWeekNoHeader: true}
oCalendar.SetOptions({dayWeekNoHeader: true})
oCalendar.DayWeekNoHeader = true
oCalendar.SetDayWeekNoHeader(true)
Type:
  • boolean
Example
false {boolean}, hides the calendar's header that displays the week-number
true {boolean}, shows the calendar's header that displays the week-number
dayWeekNoHeader

(static) dayWeekNoLabel :string

The dayWeekNoLabel field specifies an ex-HTML string used to display the week numbers in the calendar's header when in day view. This string can include expression fields (<%...%>) to dynamically show each week number. The dayWeekNoLabel field allows you to customize the format and content of the week number display in the calendar's header by using various placeholders that represent different components of the week numbers. By including these expression fields in the dayWeekNoLabel string, you can create a personalized and informative display of the week numbers according to your preferences or regional settings.

The dayWeekNoLabel field can include any of the following fields:

Name Description Sample
(day-patterns)
<%d%>Day of the month using one or two numeric digits, depending on the value1 - 31
<%dd%>Day of the month using exactly two numeric digits01 - 31
<%d1%>Weekday using its first letterS - S
<%loc_d1%>Weekday as a single-letter abbreviation based on the current user settingsS - S
<%d2%>Weekday using its first two lettersSu - Sa
<%loc_d2%>Weekday as a two-letter abbreviation based on the current user settingsSu - Sa
<%d3%>Weekday using its first three lettersSun - Sat
<%ddd%>Weekday using its first three lettersSun - Sat
<%loc_d3%>Weekday as a three-letter abbreviation based on the current user regional and language settings; equivalent to <%loc_ddd%>Sun - Sat
<%loc_ddd%>Weekday as a three-letter abbreviation based on the current user regional and language settingsSun - Sat
<%dddd%>Full name of the weekdaySunday - Saturday
<%loc_dddd%>Full weekday name based on the current user regional and language settingsSunday - Saturday
<%w%>Numeric day of the week1 - 7
<%y%>Numeric day of the year1 - 366
(week-patterns)
<%ww%>Week of the year1 - 53
(month-patterns)
<%m%>Month of the year using one or two numeric digits, as needed1 - 12
<%mm%>Month of the year using exactly two numeric digits01 - 12
<%mr%>Month of the year using Roman numerals, as neededI - XII
<%m1%>Month using its first letterJ - D
<%loc_m1%>Month as a single-letter abbreviation based on the current user settingsJ - D
<%m2%>Month using its first two lettersJa - De
<%loc_m2%>Month as a two-letter abbreviation based on the current user settingsJa - De
<%m3%>Month using its first three lettersJan - Dec
<%mmm%>Month using its first three lettersJan - Dec
<%loc_m3%>Month as a three-letter abbreviation based on the current user regional and language settings; equivalent to <%loc_mmm%>Jan - Dec
<%loc_mmm%>Month as a three-letter abbreviation based on the current user regional and language settingsJan - Dec
<%mmmm%>Full name of the monthJanuary - December
<%loc_mmmm%>Full month name based on the current user regional and language settingsJanuary - December
(year-patterns)
<%q%>Date shown as the quarter of the year1 - 4
<%hy%>Date shown as the half of the year1 - 2
<%loc_y%>Year represented by the last digit only, based on the current regional settings0 - 9
<%yy%>Last two digits of the year01 - 99
<%loc_yy%>Year represented by the last two digits only, based on the current regional settings; a leading zero is added for single-digit years01 - 99
<%yyyy%>Full year using four digits0100 - 9999
<%loc_yyyy%>Year represented using four or five digits, depending on the calendar in use. Thai Buddhist and Korean calendars use five-digit years; the "yyyy" pattern displays five digits for these calendars and four digits for all other supported calendars. Calendars with single-digit or two-digit years, such as the Japanese Emperor era, are formatted differently: single-digit years include a leading zero (for example, "03"), two-digit years use two digits (for example, "13"), and no additional leading zeros are applied0100 - 9999
<%i%>Numeric value displayed instead of a date, representing the number of milliseconds elapsed since the Unix Epoch, January 1, 1970, 00:00:00 UTC1767085565940
(localized era-patterns)
<%loc_g%>Period/era based on the current user regional and language settingsA,B
<%loc_gg%>Period/era based on the current user regional and language settingsAD,BC
(localized date-patterns)
<%loc_sdate%>Date in short format based on the current user regional and language settings12/31/2000
<%loc_ldate%>Date in long format based on the current user regional and language settingsDecember 31, 2000
<%loc_dsep%>Date separator based on the current user regional and language settings/
(time-patterns)
<%h%>Hour in one or two digits, as needed0 - 23
<%hh%>Hour in two digits00 - 23
<%h12%>Hour in 12-hour format, in one or two digits0/12 - 11
<%hh12%>Hour in 12-hour format, in two digits00/12 - 11
<%n%>Minute in one or two digits, as needed0 - 59
<%nn%>Minute in two digits00 - 59
<%s%>Second in one or two digits, as needed0 - 59
<%ss%>Second in two digits00 - 59
<%AM/PM%>12-hour clock with uppercase "AM" or "PM" as appropriateAM, PM
(localized time-patterns)
<%loc_AM/PM%>Time marker such as AM or PM based on the current user regional and language settingsAM, PM
<%loc_A/P%>Single-character time marker such as A or P based on the current user regional and language settingsA, P
<%loc_time%>Time based on the current user regional and language settings1:30:15 PM
<%loc_time24%>Time in 24-hour format without a time marker based on the current user regional and language settings13:30:15
<%loc_tsep%>Time separator based on the current user regional and language settings:
Also, dayWeekNoLabel field supports ex-HTML tags as follows:
  • "<b>text</b>", displays the text in bold.
  • "<li>text</li>", displays the text in italics.
  • "<u>text</u>", underlines the text.
  • "<s>text</s>", strike-through text
  • "<a [id][;options]>text</a>", displays an anchor element that can be clicked
  • "<font [family][;size]>text</font>", displays portions of text with a different font and/or different size.
  • "<fgcolor color>text</fgcolor>", displays text with a specified foreground color.
  • "<bgcolor color>text</bgcolor>", displays text with a specified background color.
  • "<br>", defines a forced line-break
  • "<r>", right aligns the text
  • "<c>", centers the text
  • "<img>key[:width]</img>", displays a custom-sized picture into the text. The key defines the name of the picture/image to be shown. The image can be added using the exontrol.HTMLPicture.Add method.
  • & glyph characters as "&amp;" ( & ), "&lt;" ( < ), "&gt;" ( > ), "&qout;" ( quote character ) and "&#number;" ( the character with specified code ). For instance, "&#8364;" displays the EURO sign
  • "<off offset>text</off>", defines the vertical offset to display the text.
  • "<gra color[;mode[;blend]]>text</gra>", shows the text in gradient
  • "<out color[;width]>text</out>", shows the text with outlined characters
  • "<sha color[;width[;offset]]>text</sha>", shows the text with a shadow

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

oCalendar.Options = {dayWeekNoLabel: "<%ww%>"}
oCalendar.SetOptions({dayWeekNoLabel: "<%ww%>"})
oCalendar.DayWeekNoLabel = "<%ww%>"
oCalendar.SetDayWeekNoLabel("<%ww%>")
Type:
  • string
Example
"" {string}, displays nothing
"&lt;%ww%&gt;" {string}, displays the week of the year (1 to 53)
"&lt;fgcolor red&gt;&lt;%ww%&gt;&lt;/fgcolor&gt;" {string}, displays the week of the year (1 to 53) in red
dayWeekNoLabel

(static) events :array|object

The events field defines the events within the control. The events field can be any of the following:
  • {array(any)}, defines multiple events, with specified options, as an array of [{EventOptions}] type
  • {object}, defines multiple events, where each property(key) of the object defines the event with its options, of EventOptions type
The events field is mapped to the Events property, which means that the following statements are equivalent:
oCalendar.Options = {events: [{date: "#1/1/2001#", shape: "red"}]}
oCalendar.SetOptions({events: [{date: "#1/1/2001#", shape: "red"}]})
oCalendar.Events = [{date: "#1/1/2001#", shape: "red"}]
oCalendar.SetEvents([{date: "#1/1/2001#", shape: "red"}])
Type:
  • array | object
Example
Events = [{date: "#1/1/2001#", shape: "red"}], {array} defines a single event
 Events = 
 {
   "E1":
   {
     date: "#1/1/2001#",
     shape: "rgba(255,0,0,0.5)"
   },
   "E2":
   {
     date: "#1/1/2001#",
     shape: "rgba(255,255,0,0.5)"
   }
 }, {object} defines two events "E1" and "E2"
 
events

(static) flow :Calendar.FlowEnum

The flow field determines how the months are arranged within the calendar. It specifies whether the months are displayed horizontally (from left to right) or vertically (from top to bottom). This setting controls only the layout direction of the months and does not affect the way dates are calculated or formatted.

The Calendar.FlowEnum type supports the following values:

  • exLeftToRight(0), indicates that the next month gets arranged to the right of the current month
  • exTopToBottom(1), indicates that the next month gets arranged to the bottom of the current month

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

oCalendar.Options = {flow: "top"}
oCalendar.SetOptions({flow: "top"})
oCalendar.Flow = "top"
oCalendar.SetFlow("top")
Type:
Example
0 or Calendar.FlowEnum.exLeftToRight {number}, arranges months from left to right
1 or Calendar.FlowEnum.exTopToBottom {number}, arranges months from top to bottom
flow

(static) hlShapes :string

The hlShapes field specifies the shape(s) to apply to a part of the control when it is highlighted, allowing you to customize its appearance during user interaction. The shapes field defines the shapes each part of the control can display.

The format of the property is:

"shape(part),shape(part),..."
where:
  • "shape", indicates the name of the sub-object within the exontrol.Shapes.Calendar or exontrol.Shapes namespace to be applied on the part (also it can be a CSS color or a JSON string-representation of a {normal,disabled,hover,click} or exontrol.Def.Shape object),
  • "part", defines the name of the part the shape is applied on (as defined bellow)
The hlShapes property supports any of the following parts:
Part Description
"n" (next)defines the next button (available for any view)
"p" (prev)defines the prev button (available for any view)
The following parts are available while the control displays the day-view:
Part Description
"d" (day)specifies a day of the current month
"da" (day-all)indicates all objects of the month
"de" (week-end)specifies a day of weekend
"dm" (days-month)specifies all days displayed in the current month (it can include also non-month days as well)
"dmh" (day-month-header)object that indicates the header that displays the month
"dnm" (day-non-month)specifies a day that is not part of the current month, but it is still displayed
"ds" (day-select)indicates a selected date
"dt" (today)specifies today in the current month
"dw" (day-week)specifies a day into the week-header
"dwa" (day-weeks-all)indicates the top-left corner object, when the week-header and week-number headers are visible
"dwh" (day-week-header)indicates the header that shows the days of the week
"dwn" (day-week-number)specifies the week-number
"dwnh" (day-week-number-header)indicates the header that displays the week-numbers
"dwnn" (day-week-number-non-month)specifies the week-number that is not part of the current month
The following parts are available while the control displays the month-view:
Part Description
"m" (month)specifies a single month within the month-view
"ma" (month-all)specifies the area to display the entire year
"mh" (month-header)indicates the header for month-view (it displays the year)
"mm" (month-month)indicates the portion of the layout that displays the months of the year (excludes its header)
"ms" (month-select)indicates a month that contains a selected date
"mt" (month-today)indicates the current month (the month that contains today)
The following parts are available while the control displays the year-view:
Part Description
"y" (year)that specifies a single year within the year-view
"ya" (year-all)that specifies the area to display the entire layout
"yh" (year-header)that indicates the header for year-view (it displays the range of years)
"yy" (year-years)that indicates the portion of the layout that displays the years (excludes its header)
"ys" (year-select)indicates a year that contains a selected date
"yt" (year-today)specifies the year of today

The hlShapes property is mapped to the HlShapes property, which means that the following statements are equivalent:

oCalendar.Options = {hlShapes: "red(dt)"}
oCalendar.SetOptions({hlShapes: "red(dt)"})
oCalendar.HlShapes = "red(dt)"
oCalendar.SetHlShapes("red(dt)")
Type:
  • string
Example
"" {string}, no shape (no visual appearance is applied to any part of the control)
"star(d,dnm,dwa)" {string}, indicates that a exontrol.Shapes.Calendar.star object is applied on "d", "dnm" and "dwa" parts of the control.
"xxx(d),yyy(d,m),zzz(y)" {string}, specifies that the exontrol.Shapes.Calendar.xxx combined with exontrol.Shapes.Calendar.yyy object defines the visual appearance of "d" part of the control, exontrol.Shapes.RadialMenu.yyy object defines the visual appearance of "m" part of the control and exontrol.Shapes.RadialMenu.zzz object defines the visual appearance of "y" part of the control
hlShapes

(static) locale :string

The locale field specifies the language to format the control. The locale is used to format dates. The locale string must be a valid BCP 47 language tag. If the locale is null, the browser's UI language is used. The locale determines how date and time units are displayed. For example, when the locale is set to "de" (German), month names appear as "Januar", "Februar", etc., whereas with the "en-US" (U.S. English) locale, they are displayed as "January", "February", and so on. By default, the locale field is null, which indicates that the browser's UI language is used.

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

oCalendar.Options = {locale: "de"}
oCalendar.SetOptions({locale: "de"})
oCalendar.Locale = "de"
oCalendar.SetLocale("de")
Type:
  • string
Example
null {null}, indicates that the browser's UI language is used.
"de" {string}, defines German locale
"ro" {string}, defines Romanian locale
locale

(static) locked :boolean

The locked field indicates whether the control is locked(protected) or unlocked. When the control is locked, the user cannot select a date, scroll, or browse to another date, and any attempt to change the selection or browsing view is ignored. When the control is unlocked, the user can select any date, scroll, and browse freely, and the control responds normally to all interactions. The readOnly property differs from locked in that when the control is read-only, the user can browse through dates but cannot select a new one, whereas when the control is locked, both selection and browsing are disabled.

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

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

(static) maxMonthX :number

The maxMonthX field specifies the maximum number of months horizontally displayed. Together, minMonthX and maxMonthX fiels determine how many months are shown across the width of the control. The actual number of months displayed also depends on each month's size and the size of the canvas. If minMonthX and maxMonthX are equal, the control will display exactly that number of months horizontally.

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

oCalendar.Options = {maxMonthX: 6}
oCalendar.SetOptions({maxMonthX: 6})
oCalendar.MaxMonthX = 6
oCalendar.SetMaxMonthX(6)
Type:
  • number
Example
6 {number}, indicates that the calendar displays maximum six months.
maxMonthX

(static) maxMonthY :number

The maxMonthY field specifies the maximum number of months vertically displayed. Together, minMonthY and maxMonthY fiels determine how many months are shown across the height of the control. The actual number of months displayed also depends on each month's size and the size of the canvas. If minMonthY and maxMonthY are equal, the control will display exactly that number of months vertically.

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

oCalendar.Options = {maxMonthY: 6}
oCalendar.SetOptions({maxMonthY: 6})
oCalendar.MaxMonthY = 6
oCalendar.SetMaxMonthY(6)
Type:
  • number
Example
6 {number}, indicates that the calendar displays maximum six months.
maxMonthY

(static) minMonthX :number

The minMonthX field specifies the minimum number of months displayed horizontally. Together, minMonthX and maxMonthX fiels determine how many months are shown across the width of the control. The actual number of months displayed also depends on each month's size and the size of the canvas. If minMonthX and maxMonthX are equal, the control will display exactly that number of months horizontally.

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

oCalendar.Options = {minMonthX: 2}
oCalendar.SetOptions({minMonthX: 2})
oCalendar.MinMonthX = 2
oCalendar.SetMinMonthX(2)
Type:
  • number
Example
2 {number}, indicates that the calendar displays minimum two months
minMonthX

(static) minMonthY :number

The minMonthY field specifies the minimum number of months vertically displayed. Together, minMonthY and maxMonthY fiels determine how many months are shown across the height of the control. The actual number of months displayed also depends on each month's size and the size of the canvas. If minMonthY and maxMonthY are equal, the control will display exactly that number of months vertically.

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

oCalendar.Options = {minMonthY: 2}
oCalendar.SetOptions({minMonthY: 2})
oCalendar.MinMonthY = 2
oCalendar.SetMinMonthY(2)
Type:
  • number
Example
2 {number}, indicates that the calendar displays minimum two months
minMonthY

(static) mode :Calendar.ModeEnum

The mode field specifies the orientation the calendar displays the days of the weeks. It determines how the days are arranged within the calendar grid (for example, whether the days are displayed horizontally from left to right or vertically from top to bottom). This setting affects only the visual layout of the calendar and does not change the actual date values.

The mode field can be set to one of the following values:

  • exVertical(0), specifies that the days of the week are vertically arranged
  • exHorizontal(1), specifies that the days of the week are horizontally arranged

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

oCalendar.Options = {mode: "horizontal"}
oCalendar.SetOptions({mode: "horizontal"})
oCalendar.Mode = "horizontal"
oCalendar.SetMode("horizontal")
Type:
Example
0 or Calendar.ModeEnum.exVertical {number}, shows vertically the week days
1 or Calendar.ModeEnum.exHorizontal {number}, shows horizontally the week days
mode

(static) monthAlign :exontrol.DrawTextFormatEnum

The monthAlign field specifies how the month's label is aligned and formatted in the calendar's header when in month view. It controls alignment, text wrapping, clipping, and ellipsis behavior, allowing you to adjust how the label appears within its header area.

The exontrol.DrawTextFormatEnum type support the following flags:

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

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

oCalendar.Options = {monthAlign: 32}
oCalendar.SetOptions({monthAlign: 32})
oCalendar.MonthAlign = 32
oCalendar.SetMonthAlign(32)
Type:
  • exontrol.DrawTextFormatEnum
Example
null {null}, centers the label
32 or exontrol.DrawTextFormatEnum.exTextSingleLine {number}, defines a single-line label
0x2A or exontrol.DrawTextFormatEnum.exTextSingleLine | exontrol.DrawTextFormatEnum.exTextAlignRight | exontrol.DrawTextFormatEnum.exTextAlignBottom {number}, defines a single-line label right/bottom-aligned
monthAlign

(static) monthLabel :string

The monthLabel field specifies an ex-HTML string used to display the month when the calendar is in month view. This string can include expression fields (<%...%>) to dynamically show the month name.

The monthLabel field can include any of the following fields:

Name Description Sample
(day-patterns)
<%d%>Day of the month using one or two numeric digits, depending on the value1 - 31
<%dd%>Day of the month using exactly two numeric digits01 - 31
<%d1%>Weekday using its first letterS - S
<%loc_d1%>Weekday as a single-letter abbreviation based on the current user settingsS - S
<%d2%>Weekday using its first two lettersSu - Sa
<%loc_d2%>Weekday as a two-letter abbreviation based on the current user settingsSu - Sa
<%d3%>Weekday using its first three lettersSun - Sat
<%ddd%>Weekday using its first three lettersSun - Sat
<%loc_d3%>Weekday as a three-letter abbreviation based on the current user regional and language settings; equivalent to <%loc_ddd%>Sun - Sat
<%loc_ddd%>Weekday as a three-letter abbreviation based on the current user regional and language settingsSun - Sat
<%dddd%>Full name of the weekdaySunday - Saturday
<%loc_dddd%>Full weekday name based on the current user regional and language settingsSunday - Saturday
<%w%>Numeric day of the week1 - 7
<%y%>Numeric day of the year1 - 366
(week-patterns)
<%ww%>Week of the year1 - 53
(month-patterns)
<%m%>Month of the year using one or two numeric digits, as needed1 - 12
<%mm%>Month of the year using exactly two numeric digits01 - 12
<%mr%>Month of the year using Roman numerals, as neededI - XII
<%m1%>Month using its first letterJ - D
<%loc_m1%>Month as a single-letter abbreviation based on the current user settingsJ - D
<%m2%>Month using its first two lettersJa - De
<%loc_m2%>Month as a two-letter abbreviation based on the current user settingsJa - De
<%m3%>Month using its first three lettersJan - Dec
<%mmm%>Month using its first three lettersJan - Dec
<%loc_m3%>Month as a three-letter abbreviation based on the current user regional and language settings; equivalent to <%loc_mmm%>Jan - Dec
<%loc_mmm%>Month as a three-letter abbreviation based on the current user regional and language settingsJan - Dec
<%mmmm%>Full name of the monthJanuary - December
<%loc_mmmm%>Full month name based on the current user regional and language settingsJanuary - December
(year-patterns)
<%q%>Date shown as the quarter of the year1 - 4
<%hy%>Date shown as the half of the year1 - 2
<%loc_y%>Year represented by the last digit only, based on the current regional settings0 - 9
<%yy%>Last two digits of the year01 - 99
<%loc_yy%>Year represented by the last two digits only, based on the current regional settings; a leading zero is added for single-digit years01 - 99
<%yyyy%>Full year using four digits0100 - 9999
<%loc_yyyy%>Year represented using four or five digits, depending on the calendar in use. Thai Buddhist and Korean calendars use five-digit years; the "yyyy" pattern displays five digits for these calendars and four digits for all other supported calendars. Calendars with single-digit or two-digit years, such as the Japanese Emperor era, are formatted differently: single-digit years include a leading zero (for example, "03"), two-digit years use two digits (for example, "13"), and no additional leading zeros are applied0100 - 9999
<%i%>Numeric value displayed instead of a date, representing the number of milliseconds elapsed since the Unix Epoch, January 1, 1970, 00:00:00 UTC1767085565940
(localized era-patterns)
<%loc_g%>Period/era based on the current user regional and language settingsA,B
<%loc_gg%>Period/era based on the current user regional and language settingsAD,BC
(localized date-patterns)
<%loc_sdate%>Date in short format based on the current user regional and language settings12/31/2000
<%loc_ldate%>Date in long format based on the current user regional and language settingsDecember 31, 2000
<%loc_dsep%>Date separator based on the current user regional and language settings/
(time-patterns)
<%h%>Hour in one or two digits, as needed0 - 23
<%hh%>Hour in two digits00 - 23
<%h12%>Hour in 12-hour format, in one or two digits0/12 - 11
<%hh12%>Hour in 12-hour format, in two digits00/12 - 11
<%n%>Minute in one or two digits, as needed0 - 59
<%nn%>Minute in two digits00 - 59
<%s%>Second in one or two digits, as needed0 - 59
<%ss%>Second in two digits00 - 59
<%AM/PM%>12-hour clock with uppercase "AM" or "PM" as appropriateAM, PM
(localized time-patterns)
<%loc_AM/PM%>Time marker such as AM or PM based on the current user regional and language settingsAM, PM
<%loc_A/P%>Single-character time marker such as A or P based on the current user regional and language settingsA, P
<%loc_time%>Time based on the current user regional and language settings1:30:15 PM
<%loc_time24%>Time in 24-hour format without a time marker based on the current user regional and language settings13:30:15
<%loc_tsep%>Time separator based on the current user regional and language settings:
Also, monthLabel field supports ex-HTML tags as follows:
  • "<b>text</b>", displays the text in bold.
  • "<li>text</li>", displays the text in italics.
  • "<u>text</u>", underlines the text.
  • "<s>text</s>", strike-through text
  • "<a [id][;options]>text</a>", displays an anchor element that can be clicked
  • "<font [family][;size]>text</font>", displays portions of text with a different font and/or different size.
  • "<fgcolor color>text</fgcolor>", displays text with a specified foreground color.
  • "<bgcolor color>text</bgcolor>", displays text with a specified background color.
  • "<br>", defines a forced line-break
  • "<r>", right aligns the text
  • "<c>", centers the text
  • "<img>key[:width]</img>", displays a custom-sized picture into the text. The key defines the name of the picture/image to be shown. The image can be added using the exontrol.HTMLPicture.Add method.
  • & glyph characters as "&amp;" ( & ), "&lt;" ( < ), "&gt;" ( > ), "&qout;" ( quote character ) and "&#number;" ( the character with specified code ). For instance, "&#8364;" displays the EURO sign
  • "<off offset>text</off>", defines the vertical offset to display the text.
  • "<gra color[;mode[;blend]]>text</gra>", shows the text in gradient
  • "<out color[;width]>text</out>", shows the text with outlined characters
  • "<sha color[;width[;offset]]>text</sha>", shows the text with a shadow

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

oCalendar.Options = {monthLabel: "<%mmm%>"}
oCalendar.SetOptions({monthLabel: "<%mmm%>"})
oCalendar.MonthLabel = "<%mmm%>"
oCalendar.SetMonthLabel("<%mmm%>")
Type:
  • string
Example
"" {string}, displays nothing
"&lt;%mmm%&gt;" {string}, displays first three letters of the month (Jan to Dec)
monthLabel

(static) monthYearAlign :exontrol.DrawTextFormatEnum

The monthYearAlign field specifies how the year's label is aligned and formatted in the calendar's header when in month view. It controls alignment, text wrapping, clipping, and ellipsis behavior, allowing you to adjust how the label appears within its header area.

The exontrol.DrawTextFormatEnum type support the following flags:

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

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

oCalendar.Options = {monthYearAlign: 32}
oCalendar.SetOptions({monthYearAlign: 32})
oCalendar.MonthYearAlign = 32
oCalendar.SetMonthYearAlign(32)
Type:
  • exontrol.DrawTextFormatEnum
Example
null {null}, centers the label
32 or exontrol.DrawTextFormatEnum.exTextSingleLine {number}, defines a single-line label
0x2A or exontrol.DrawTextFormatEnum.exTextSingleLine | exontrol.DrawTextFormatEnum.exTextAlignRight | exontrol.DrawTextFormatEnum.exTextAlignBottom {number}, defines a single-line label right/bottom-aligned
monthYearAlign

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

The pad field specifies the padding to be applied on dates of the calendar, while the padCal property specifies the padding to be applied on the calendar itself. It defines the spacing between the calendar's date cells and their content. By adjusting this value, you can increase or decrease the empty space around the date numbers to improve readability and visual appearance. The pad field can be set to a single number (which applies uniform padding to all sides) or an array of two numbers (which specifies horizontal and vertical padding separately).

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

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

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

The padCal field specifies the padding to display the calendar. It defines the spacing between the calendar's content and its outer boundaries (client area). By adjusting this value, you can increase or decrease the empty space around the calendar to improve layout and visual appearance. The pad field specifies the padding to be applied on dates of the calendar, while the padCal property specifies the padding to be applied on the calendar itself.

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

oCalendar.Options = {padCal: "8,4"}
oCalendar.SetOptions({padCal: "8,4"})
oCalendar.PadCal = "8,4"
oCalendar.SetPadCal("8,4")
Type:
  • number | string | Array.<number>
Example
null {null}, indicates that the default-padding field is used (4)
0 {number}, indicates no padding
"8,4" {string}, increases the object's width with 2 * 8-pixels and object's height with 2 * 4-pixels
[8,4] {array}, increases the object's width with 2 * 8-pixels and object's height with 2 * 4-pixels
padCal

(static) readOnly :boolean

The readOnly field indicates whether the control is read-only (the user can't select new dates, but can browse for any date). The readOnly field is different from the locked field in that when the control is read-only, the user can browse for any date, but cannot select new dates, while when the control is locked, the user cannot select any date and cannot browse for another date.

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

oCalendar.Options = {readOnly: true}
oCalendar.SetOptions({readOnly: true})
oCalendar.ReadOnly = true
oCalendar.SetReadOnly(true)
Type:
  • boolean
Since:
  • 1.8
Example
false {boolean}, the user can select new dates
true {boolean}, the user can not select dates
readOnly

(static) selectable :string

The selectable field specifies a general-expression that controls which dates can be selected. The expression supports the following predefined keywords:
  • value {Date}, defines the date being checked
  • eventuserdata {any}, defines the UserData property of events added through Events.Add
  • isevent {boolean}, indicates if the date being checked has an event added through Events.Add
allowing restrictions by date or by event user-data. A date is not selectable if:
  • the selectable expression is invalid or returns false
  • the date has an event added through Events.Add and the Event.Selectable event returns false

The selectable property is mapped to the Selectable property, which means that the following statements are equivalent:

oCalendar.Options = {selectable: "not(weekday(value) in (0,6))"}
oCalendar.SetOptions({selectable: "not(weekday(value) in (0,6))"})
oCalendar.Selectable = "not(weekday(value) in (0,6))"
oCalendar.SetSelectable("not(weekday(value) in (0,6))")
The Selectable property only affects dates selected after it is set; it does not apply to dates selected beforehand.
Type:
  • string
Since:
  • 4.8
Example
"0" {string}, no dates is selectable
"not(weekday(value) in (0,6))" {string}, all dates are selectable except Sundays and Saturdays
"not(isevent)" {string}, all dates are selectable except those that have an event added through Events.Add
"eventuserdata = `holiday`" {string}, only dates that have an event added through Events.Add, with UserData equal to "holiday", are selectable
"year(value) = 2020" or "value &gt;= #1/1/2020# and value &lt;= #12/31/2020#" {string}, only dates within the year 2020 are selectable

selectable

(static) selection :any

The selection field specifies the selected date(s). The singleSel field determines whether the selection is single or multiple.

It indicates the control's selection, as one of the following:

  • {null}, clears the control's selection
  • {string}, defines the date to select in string-format as "#MM/DD/YYYY[ HH:mm:ss]#" or string-format as "YYYY-MM-DDTHH:mm:ss.sssZ" (ISO 8601), such as "2011-10-10" (date-only format), "2011-10-10T14:48:00" (local date-time format), "2011-10-10T14:48:00Z" (UTC date-time format), or "2011-10-10T14:48:00.000+09:00" (date-time format with milliseconds and time zone offset) (since 1.3)
  • {number}, integer value representing the year of the date to be selected. For instance, 2022 goes for "Jan 1st, 2022"
  • {Date}, indicates a JavaScript date to be selected
  • {array}, indicates a collection of dates to be selected, as an array of [date] type, where date could be null, string, number or a Date expression

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

oCalendar.Options = {selection: "#1/15/2022#"}
oCalendar.SetOptions({selection: "#1/15/2022#"})
oCalendar.Selection = "#1/15/2022#"
oCalendar.SetSelection("#1/15/2022#")
Type:
  • any
Example
null {null}, clears the control's selection
[null] {array}, selects today
"#1/15/2022#" or "2022-1-15" {string}, selects the specified date
2022 {number}, selects "Jan 1st, 2022"
Date.Today().NextDay(1) {Date}, selects tomorrow
Calendar.Collect(Date.Today(), null, Calendar.CollectEnum.exWeek) {Date}, selects the current week (in case the control allows multiple selection, else it selects the first day of the current week)
[null,Date.Today().NextDay(1)] {array}, selects today and tommorow date
["#1/13/2022#","#1/15/2022#"] {array}, selects Jan 13 and 15 of 2022
selection

(static) shapes :string

The shapes field defines the shapes each part of the control can display, while the hlShapes field specifies the shape(s) to apply to a part of the control when it is highlighted, allowing you to customize its appearance during user interaction.

The format of the property is:

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

    ◦ any of 140 color names any browser supports (such as red, blue, green, ...)
    ◦ hexadecimal colors, is specified with: #RRGGBB, where the RR (red), GG (green) and BB (blue) hexadecimal integers specify the components of the color. All values must be between 00 and FF (such as #0000ff which defines a blue background)
    ◦ hexadecimal colors with transparency, is specified with: #RRGGBBAA, where AA (alpha) value must be between 00 and FF (such as #0000ff80 which defines a semi-transparent blue background)
    ◦ RGB colors, is specified with the RGB(red, green, blue) function. Each parameter (red, green, and blue) defines the intensity of the color and can be an integer between 0 and 255( such as rgb(0,0,255) that defines a blue background)
    ◦ RGBA colors, are an extension of RGB color values with an alpha channel as RGBA(red, green, blue, alpha) function, where the alpha parameter is a number between 0.0 (fully transparent) and 1.0 (fully opaque) ( such as rgba(0,0,255,0.5) which defines a semi-transparent blue background)
    ◦ HSL colors, is specified with the HSL(hue, saturation, lightness) function, where hue is a degree on the color wheel (from 0 to 360) - 0 (or 360) is red, 120 is green, 240 is blue. saturation is a percentage value; 0% means a shade of gray and 100% is the full color. lightness is also a percentage; 0% is black, 100% is white. HSL stands for hue, saturation, and lightness - and represents a cylindrical-coordinate representation of colors (such as hsl(240, 100%, 50%) that defines a blue background)
    ◦ HSLA colors, are an extension of HSL color values with an alpha channel - which specifies the opacity of the object as HSLA(hue, saturation, lightness, alpha) function, where alpha parameter is a number between 0.0 (fully transparent) and 1.0 (fully opaque) (such as hsla(240, 100%, 50%,0.5) that defines a semi-transparent blue background)
    ◦ a JSON representation of the shape object to apply (while it starts with { character, such as '{"normal": {"primitive": "RoundRect","fillColor":"black","tfi": {"fgColor": "white"}}}')
    ◦ specifies the name of the field within the exontrol.Shapes.Calendar object (while it starts with a lowercase letter, such as today which refers to exontrol.Shapes.Calendar.today 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 bellow)
The shapes property supports any of the following parts:
Part Description
"n" (next)defines the next button (available for any view)
"p" (prev)defines the prev button (available for any view)
The following parts are available while the control displays the day-view:
Part Description
"d" (day)specifies a day of the current month
"da" (day-all)indicates all objects of the month
"de" (week-end)specifies a day of weekend
"dm" (days-month)specifies all days displayed in the current month (it can include also non-month days as well)
"dmh" (day-month-header)object that indicates the header that displays the month
"dnm" (day-non-month)specifies a day that is not part of the current month, but it is still displayed
"ds" (day-select)indicates a selected date
"dt" (today)specifies today in the current month
"dw" (day-week)specifies a day into the week-header
"dwa" (day-weeks-all)indicates the top-left corner object, when the week-header and week-number headers are visible
"dwh" (day-week-header)indicates the header that shows the days of the week
"dwn" (day-week-number)specifies the week-number
"dwnh" (day-week-number-header)indicates the header that displays the week-numbers
"dwnn" (day-week-number-non-month)specifies the week-number that is not part of the current month
The following parts are available while the control displays the month-view:
Part Description
"m" (month)specifies a single month within the month-view
"ma" (month-all)specifies the area to display the entire year
"mh" (month-header)indicates the header for month-view (it displays the year)
"mm" (month-month)indicates the portion of the layout that displays the months of the year (excludes its header)
"ms" (month-select)indicates a month that contains a selected date
"mt" (month-today)indicates the current month (the month that contains today)
The following parts are available while the control displays the year-view:
Part Description
"y" (year)that specifies a single year within the year-view
"ya" (year-all)that specifies the area to display the entire layout
"yh" (year-header)that indicates the header for year-view (it displays the range of years)
"yy" (year-years)that indicates the portion of the layout that displays the years (excludes its header)
"ys" (year-select)indicates a year that contains a selected date
"yt" (year-today)specifies the year of today

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

oCalendar.Options = {shapes: "red(dt)"}
oCalendar.SetOptions({shapes: "red(dt)"})
oCalendar.Shapes = "red(dt)"
oCalendar.SetShapes("red(dt)")
Type:
  • string
Example
null {null}, specifies the default visual appearance
"" {string}, no shape (no visual appearance is applied to any part of the control)
"red(dt)", "#FF0000(dt)", "rgb(255,0,0)(dt)", "rgba(255,0,0,1)(dt)" {string}, shows "today" in red
'{"normal":{"fillColor":"lightgray","primitive":"Circle"},"hover":{"frameColor":"black"}}(d)' {string}, shows all-days within a circle, and draws a black-frame when hovers it
"xxx(d),yyy(d,m),zzz(y)"  {string}, specifies that the exontrol.Shapes.Calendar.xxx combined with exontrol.Shapes.Calendar.yyy object defines the visual appearance of "d" part of the control, exontrol.Shapes.Calendar.yyy object defines the visual appearance of "m" part of the control and exontrol.Shapes.Calendar.zzz object defines the visual appearance of "y" part of the control
shapes

(static) singleSel :Calendar.SingleSelEnum

The singleSel field specifies whether the control supports single, multiple, toggle selection. The selection behavior of the calendar is determined by the singleSel field, which defines whether the user can select only a single date, multiple dates, or if the selection state of a date is toggled when clicked. The singleSel field can be configured using a combination of flags that enable or disable specific selection features, allowing for flexible control over how users interact with the calendar's date selection functionality. The selection field specifies the selected date(s), while the singleSel field determines how the selection behaves (single, multiple, toggle, etc.).

The Calendar.SingleSelEnum type supports the following flags:

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

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

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

(static) smoothScroll :number

The smoothScroll field defines the time in ms the calendar's date scrolls to another (250, by default). It specifies the duration of the animation effect when the calendar view scrolls to a different date. A value of 0 means that the calendar will jump instantly to the new date without any animation, while a positive value indicates that the calendar will smoothly scroll to the new date over the specified duration in milliseconds.

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

oCalendar.Options = {smoothScroll: 250}
oCalendar.SetOptions({smoothScroll: 250})
oCalendar.SmoothScroll = 250
oCalendar.SetSmoothScroll(250)
Type:
  • number
Example
0 {number}, no smooth changes once the control goes from a layout to another
250 {number}, specifies that a smooth-transition is performed from a layout to another for 250 ms.
smoothScroll

(static) smoothSel :number

The smoothSel field specifies the duration (in milliseconds) of the animation applied when the calendar selection transitions from one state to another. It defines how long the selection highlight takes to smoothly move or update between dates. A higher value results in a slower, smoother transition, while a lower value produces a faster effect. If set to 0, the selection changes instantly without animation.

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

oCalendar.Options = {smoothSel: 125}
oCalendar.SetOptions({smoothSel: 125})
oCalendar.SmoothSel = 125
oCalendar.SetSmoothSel(125)
Type:
  • number
Example
0 {number}, no smooth changes once the control goes from a layout to another
125 {number}, specifies that a smooth-transition is performed from a layout to another for 125 ms.
smoothSel

(static) tfi :string|object

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

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

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

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

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

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

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

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

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

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

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

(static) toolTipDelay :number

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

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

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

(static) toolTipPopDelay :number

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

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

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

(static) toolTipWidth :number

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

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

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

(static) wheelChange :number

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

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

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

oCalendar.Options = {wheelChange: 5}
oCalendar.SetOptions({wheelChange: 5})
oCalendar.WheelChange = 5
oCalendar.SetWheelChange(5)
Type:
  • number
Example
0 {number}, locks any action the mouse's wheel performs
1 {number}, advances one month back or forward once the user rotates the mouse wheel
wheelChange

(static) yearAlign :exontrol.DrawTextFormatEnum

The yearAlign field specifies how the year's label is aligned and formatted in the calendar's header when in year view. It controls alignment, text wrapping, clipping, and ellipsis behavior, allowing you to adjust how the label appears within its header area.

The exontrol.DrawTextFormatEnum type support the following flags:

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

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

oCalendar.Options = {yearAlign: 32}
oCalendar.SetOptions({yearAlign: 32})
oCalendar.YearAlign = 32
oCalendar.SetYearAlign(32)
Type:
  • exontrol.DrawTextFormatEnum
Example
null {null}, centers the label
32 or exontrol.DrawTextFormatEnum.exTextSingleLine {number}, defines a single-line label
0x2A or exontrol.DrawTextFormatEnum.exTextSingleLine | exontrol.DrawTextFormatEnum.exTextAlignRight | exontrol.DrawTextFormatEnum.exTextAlignBottom {number}, defines a single-line label right/bottom-aligned
yearAlign

(static) yearLabel :string

The yearLabel field specifies an ex-HTML string used to display the year when the calendar is in year view. This string can include expression fields (<%...%>) to dynamically show the year.

The yearLabel field can include any of the following fields:

Name Description Sample
(day-patterns)
<%d%>Day of the month using one or two numeric digits, depending on the value1 - 31
<%dd%>Day of the month using exactly two numeric digits01 - 31
<%d1%>Weekday using its first letterS - S
<%loc_d1%>Weekday as a single-letter abbreviation based on the current user settingsS - S
<%d2%>Weekday using its first two lettersSu - Sa
<%loc_d2%>Weekday as a two-letter abbreviation based on the current user settingsSu - Sa
<%d3%>Weekday using its first three lettersSun - Sat
<%ddd%>Weekday using its first three lettersSun - Sat
<%loc_d3%>Weekday as a three-letter abbreviation based on the current user regional and language settings; equivalent to <%loc_ddd%>Sun - Sat
<%loc_ddd%>Weekday as a three-letter abbreviation based on the current user regional and language settingsSun - Sat
<%dddd%>Full name of the weekdaySunday - Saturday
<%loc_dddd%>Full weekday name based on the current user regional and language settingsSunday - Saturday
<%w%>Numeric day of the week1 - 7
<%y%>Numeric day of the year1 - 366
(week-patterns)
<%ww%>Week of the year1 - 53
(month-patterns)
<%m%>Month of the year using one or two numeric digits, as needed1 - 12
<%mm%>Month of the year using exactly two numeric digits01 - 12
<%mr%>Month of the year using Roman numerals, as neededI - XII
<%m1%>Month using its first letterJ - D
<%loc_m1%>Month as a single-letter abbreviation based on the current user settingsJ - D
<%m2%>Month using its first two lettersJa - De
<%loc_m2%>Month as a two-letter abbreviation based on the current user settingsJa - De
<%m3%>Month using its first three lettersJan - Dec
<%mmm%>Month using its first three lettersJan - Dec
<%loc_m3%>Month as a three-letter abbreviation based on the current user regional and language settings; equivalent to <%loc_mmm%>Jan - Dec
<%loc_mmm%>Month as a three-letter abbreviation based on the current user regional and language settingsJan - Dec
<%mmmm%>Full name of the monthJanuary - December
<%loc_mmmm%>Full month name based on the current user regional and language settingsJanuary - December
(year-patterns)
<%q%>Date shown as the quarter of the year1 - 4
<%hy%>Date shown as the half of the year1 - 2
<%loc_y%>Year represented by the last digit only, based on the current regional settings0 - 9
<%yy%>Last two digits of the year01 - 99
<%loc_yy%>Year represented by the last two digits only, based on the current regional settings; a leading zero is added for single-digit years01 - 99
<%yyyy%>Full year using four digits0100 - 9999
<%loc_yyyy%>Year represented using four or five digits, depending on the calendar in use. Thai Buddhist and Korean calendars use five-digit years; the "yyyy" pattern displays five digits for these calendars and four digits for all other supported calendars. Calendars with single-digit or two-digit years, such as the Japanese Emperor era, are formatted differently: single-digit years include a leading zero (for example, "03"), two-digit years use two digits (for example, "13"), and no additional leading zeros are applied0100 - 9999
<%i%>Numeric value displayed instead of a date, representing the number of milliseconds elapsed since the Unix Epoch, January 1, 1970, 00:00:00 UTC1767085565940
(localized era-patterns)
<%loc_g%>Period/era based on the current user regional and language settingsA,B
<%loc_gg%>Period/era based on the current user regional and language settingsAD,BC
(localized date-patterns)
<%loc_sdate%>Date in short format based on the current user regional and language settings12/31/2000
<%loc_ldate%>Date in long format based on the current user regional and language settingsDecember 31, 2000
<%loc_dsep%>Date separator based on the current user regional and language settings/
(time-patterns)
<%h%>Hour in one or two digits, as needed0 - 23
<%hh%>Hour in two digits00 - 23
<%h12%>Hour in 12-hour format, in one or two digits0/12 - 11
<%hh12%>Hour in 12-hour format, in two digits00/12 - 11
<%n%>Minute in one or two digits, as needed0 - 59
<%nn%>Minute in two digits00 - 59
<%s%>Second in one or two digits, as needed0 - 59
<%ss%>Second in two digits00 - 59
<%AM/PM%>12-hour clock with uppercase "AM" or "PM" as appropriateAM, PM
(localized time-patterns)
<%loc_AM/PM%>Time marker such as AM or PM based on the current user regional and language settingsAM, PM
<%loc_A/P%>Single-character time marker such as A or P based on the current user regional and language settingsA, P
<%loc_time%>Time based on the current user regional and language settings1:30:15 PM
<%loc_time24%>Time in 24-hour format without a time marker based on the current user regional and language settings13:30:15
<%loc_tsep%>Time separator based on the current user regional and language settings:
Also, yearLabel field supports ex-HTML tags as follows:
  • "<b>text</b>", displays the text in bold.
  • "<li>text</li>", displays the text in italics.
  • "<u>text</u>", underlines the text.
  • "<s>text</s>", strike-through text
  • "<a [id][;options]>text</a>", displays an anchor element that can be clicked
  • "<font [family][;size]>text</font>", displays portions of text with a different font and/or different size.
  • "<fgcolor color>text</fgcolor>", displays text with a specified foreground color.
  • "<bgcolor color>text</bgcolor>", displays text with a specified background color.
  • "<br>", defines a forced line-break
  • "<r>", right aligns the text
  • "<c>", centers the text
  • "<img>key[:width]</img>", displays a custom-sized picture into the text. The key defines the name of the picture/image to be shown. The image can be added using the exontrol.HTMLPicture.Add method.
  • & glyph characters as "&amp;" ( & ), "&lt;" ( < ), "&gt;" ( > ), "&qout;" ( quote character ) and "&#number;" ( the character with specified code ). For instance, "&#8364;" displays the EURO sign
  • "<off offset>text</off>", defines the vertical offset to display the text.
  • "<gra color[;mode[;blend]]>text</gra>", shows the text in gradient
  • "<out color[;width]>text</out>", shows the text with outlined characters
  • "<sha color[;width[;offset]]>text</sha>", shows the text with a shadow

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

oCalendar.Options = {yearLabel: "<%yyyy%>"}
oCalendar.SetOptions({yearLabel: "<%yyyy%>"})
oCalendar.YearLabel = "<%yyyy%>"
oCalendar.SetYearLabel("<%yyyy%>")
Type:
  • string
Example
"" {string}, displays nothing
"&lt;%yyyy%&gt;" {string}, displays the year with four digits
yearLabel

(static) yearRangeAlign :exontrol.DrawTextFormatEnum

The yearRangeAlign field specifies how the label showing the range of years is aligned and formatted when the calendar is in year view. It controls alignment, text wrapping, clipping, and ellipsis behavior, allowing you to adjust how the label appears within its header area.

The exontrol.DrawTextFormatEnum type support the following flags:

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

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

oCalendar.Options = {yearRangeAlign: 32}
oCalendar.SetOptions({yearRangeAlign: 32})
oCalendar.YearRangeAlign = 32
oCalendar.SetYearRangeAlign(32)
Type:
  • exontrol.DrawTextFormatEnum
Example
null {null}, centers the label
32 or exontrol.DrawTextFormatEnum.exTextSingleLine {number}, defines a single-line label
0x2A or exontrol.DrawTextFormatEnum.exTextSingleLine | exontrol.DrawTextFormatEnum.exTextAlignRight | exontrol.DrawTextFormatEnum.exTextAlignBottom {number}, defines a single-line label right/bottom-aligned
yearRangeAlign

Documentation generated by JSDoc 4.0.5 on Sun Mar 01 2026 15:40:58 GMT+0200 (Eastern European Standard Time)