Calendar class

The Calendar.AutoSizeEnum type determines whether the size of the calendar's date is fixed, or relative to the current font or client area. The AutoSize property determines whether the size of the calendar's date is fixed, or relative to the current font or client area.

Each AutoSizeEnum property can be specified in one of the following ways:

• A numeric value.
• A single enumeration constant.
• A case-insensitive partial string containing the name that matches the enumeration constant.

For instance, the string "fitclient" is equivalent to the numeric value 1, or to the enumeration constant exFitClient.

The Calendar.CollectEnum type specifies how the Calendar.Collect() method collects dates between a current and a target date. The Collect() method specifies how the calendar collects dates between a current and a target date.

Each CollectEnum property can be specified in one of the following ways:

• A numeric value.
• A single enumeration constant.
• A case-insensitive partial string containing the name that matches the enumeration constant.

For instance, the string "weekday" is equivalent to the numeric value 4, or to the enumeration constant exWeekDay.

The Calendar.FlowEnum type determines whether the months gets arranged from left to right or top to bottom. The Flow property determines whether the months gets arranged from left to right or top to bottom.

Each FlowEnum property can be specified in one of the following ways:

• A numeric value.
• A single enumeration constant.
• A case-insensitive partial string containing the name that matches the enumeration constant.

For instance, the string "top" is equivalent to the numeric value 1, or to the enumeration constant exTopToBottom.

The Calendar.ModeEnum type defines the orientation the calendar displays the days of the weeks. The Mode property defines the orientation the calendar displays the days of the weeks.

Each ModeEnum property can be specified in one of the following ways:

• A numeric value.
• A single enumeration constant.
• A case-insensitive partial string containing the name that matches the enumeration constant.

For instance, the string "horizontal" is equivalent to the numeric value 1, or to the enumeration constant exHorizontal.

The Calendar.SingleSelEnum type defines flags the singleSel/SetSingleSel/GetSingleSel method uses. The SingleSel property defines whether the control supports single, multiple, or toggle selection.

Each SingleSelEnum property can be specified in one of the following ways:

• A numeric value.
• A single enumeration constant.
• A combination of one or more compatible enumeration constants, separated by the | operator.
• A case-insensitive partial string containing one or more comma-separated names that match the enumeration constants.

For instance, the string "single,toggle,drag" is equivalent to the numeric value 38, or to the combination of enumeration constants exSingleSel | exToggleSel | exDisableDrag.

The type field holds the full name of the object, since constructor.name can differ in minimized or obfuscated code. This field is never altered by the control itself, so it can be reliably used to verify the object's type. It is particularly useful when multiple versions of a control exist or when you need to check the type without depending on constructor.name, which may be inconsistent in some scenarios, such as minified code. The Calendar.type member always returns "Calendar"

console.log(exontrol.Calendar.type); // logs "Calendar"

The version field defines the version of the control. Each release of the control has a different version number, so you can use this field to check the control's version and ensure that it supports the features you want to use. The version field is especially useful when you have multiple versions of the control, or when you want to check the version of the control without relying on other properties or methods that may differ between versions. The current version is 5.2

console.log(exontrol.Calendar.version); // displays the version of the control, for instance "5.2"

The AlignCal property 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 property can be used to align the calendar's text content, while the AlignCal property 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

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

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

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)

The AllowSwitchView property specifies whether the user can switch the view (month or year). 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.

It indicates whether the user can switch the view (month or year):

• false {boolean}, disables month or year view
• true {boolean}, enables month or year view

false {boolean}, disables month or year view
true {boolean}, enables month or year view

The AutoSize property determines whether the size of the calendar's date is fixed, or relative to the current font or client area. 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

-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

The Cursors property specifies the mouse cursors assigned to the different parts of the control. These cursors determine how the pointer appears when hovering over specific areas, providing visual feedback and indicating interactive regions within the control. The Event.Cursor property defines the mouse-cursor for the 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

"" {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

The Date property specifies the calendar's browsing date as string in format "#MM/DD/YYYY#" (the month of the date defines the first visible month within the calendar). The Date property accepts string in format "#MM/DD/YYYY#", or a Date object, or integer values for year, month, and day. If the Date property is set to null, the calendar browses today's date. The SetSmoothDate() method smoothly changes the calendar's date to the specified value.

null {null}, browses today date
"#12/31/1971#" {string}, browses December 31, 1971

The DayAlign property 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 property). The DayAlign property 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.

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

The DayFixedHeight property defines the height of the calendar's date when autoSize is 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.

24 {number}, defines the date's height to 24-pixels

The DayFixedWidth property defines the width of the calendar's date when autoSize is 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.

24 {number}, defines the date's width to 24-pixels

The DayLabel property indicates a HTML string that can include expression fields (<%...%>) to display the date while the control shows days (day-view). The DayLabel property 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 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 value	1 - 31
<%dd%>	Day of the month using exactly two numeric digits	01 - 31
<%d1%>	Weekday using its first letter	S - S
<%loc_d1%>	Weekday as a single-letter abbreviation based on the current user settings	S - S
<%d2%>	Weekday using its first two letters	Su - Sa
<%loc_d2%>	Weekday as a two-letter abbreviation based on the current user settings	Su - Sa
<%d3%>	Weekday using its first three letters	Sun - Sat
<%ddd%>	Weekday using its first three letters	Sun - Sat
<%loc_d3%>	Weekday as a three-letter abbreviation based on the current user regional and language settings; equivalent to <%loc_ddd%>	Sun - Sat
<%loc_ddd%>	Weekday as a three-letter abbreviation based on the current user regional and language settings	Sun - Sat
<%dddd%>	Full name of the weekday	Sunday - Saturday
<%loc_dddd%>	Full weekday name based on the current user regional and language settings	Sunday - Saturday
<%w%>	Numeric day of the week	1 - 7
<%y%>	Numeric day of the year	1 - 366
(week-patterns)
<%ww%>	Week of the year	1 - 53
(month-patterns)
<%m%>	Month of the year using one or two numeric digits, as needed	1 - 12
<%mm%>	Month of the year using exactly two numeric digits	01 - 12
<%mr%>	Month of the year using Roman numerals, as needed	I - XII
<%m1%>	Month using its first letter	J - D
<%loc_m1%>	Month as a single-letter abbreviation based on the current user settings	J - D
<%m2%>	Month using its first two letters	Ja - De
<%loc_m2%>	Month as a two-letter abbreviation based on the current user settings	Ja - De
<%m3%>	Month using its first three letters	Jan - Dec
<%mmm%>	Month using its first three letters	Jan - Dec
<%loc_m3%>	Month as a three-letter abbreviation based on the current user regional and language settings; equivalent to <%loc_mmm%>	Jan - Dec
<%loc_mmm%>	Month as a three-letter abbreviation based on the current user regional and language settings	Jan - Dec
<%mmmm%>	Full name of the month	January - December
<%loc_mmmm%>	Full month name based on the current user regional and language settings	January - December
(year-patterns)
<%q%>	Date shown as the quarter of the year	1 - 4
<%hy%>	Date shown as the half of the year	1 - 2
<%loc_y%>	Year represented by the last digit only, based on the current regional settings	0 - 9
<%yy%>	Last two digits of the year	01 - 99
<%loc_yy%>	Year represented by the last two digits only, based on the current regional settings; a leading zero is added for single-digit years	01 - 99
<%yyyy%>	Full year using four digits	0100 - 9999
<%loc_yyyy%>	Year represented using four or five digits, depending on the calendar in use. Thai Buddhist and Korean calendars use five-digit years; the "yyyy" pattern displays five digits for these calendars and four digits for all other supported calendars. Calendars with single-digit or two-digit years, such as the Japanese Emperor era, are formatted differently: single-digit years include a leading zero (for example, "03"), two-digit years use two digits (for example, "13"), and no additional leading zeros are applied	0100 - 9999
<%i%>	Numeric value displayed instead of a date, representing the number of milliseconds elapsed since the Unix Epoch, January 1, 1970, 00:00:00 UTC	1767085565940
(localized era-patterns)
<%loc_g%>	Period/era based on the current user regional and language settings	A,B
<%loc_gg%>	Period/era based on the current user regional and language settings	AD,BC
(localized date-patterns)
<%loc_sdate%>	Date in short format based on the current user regional and language settings	12/31/2000
<%loc_ldate%>	Date in long format based on the current user regional and language settings	December 31, 2000
<%loc_dsep%>	Date separator based on the current user regional and language settings	/
(time-patterns)
<%h%>	Hour in one or two digits, as needed	0 - 23
<%hh%>	Hour in two digits	00 - 23
<%h12%>	Hour in 12-hour format, in one or two digits	0/12 - 11
<%hh12%>	Hour in 12-hour format, in two digits	00/12 - 11
<%n%>	Minute in one or two digits, as needed	0 - 59
<%nn%>	Minute in two digits	00 - 59
<%s%>	Second in one or two digits, as needed	0 - 59
<%ss%>	Second in two digits	00 - 59
<%AM/PM%>	12-hour clock with uppercase "AM" or "PM" as appropriate	AM, PM
(localized time-patterns)
<%loc_AM/PM%>	Time marker such as AM or PM based on the current user regional and language settings	AM, PM
<%loc_A/P%>	Single-character time marker such as A or P based on the current user regional and language settings	A, P
<%loc_time%>	Time based on the current user regional and language settings	1:30:15 PM
<%loc_time24%>	Time in 24-hour format without a time marker based on the current user regional and language settings	13:30:15
<%loc_tsep%>	Time separator based on the current user regional and language settings	:

Also, DayLabel 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

"<%d%>" {string}, displays the day of the month in one or two numeric digits, as needed (1 to 31),
"<%dd%>" {string}, displays day of the month in two numeric digits (01 to 31)
"<%d%>\n<font ;8><fgcolor gray><%y%></fgcolor>" {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

The DayMonthAlign property aligns the month's label, while the calendar is 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.

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

The DayMonthHeader property shows or hides the header to display the month-name (day-view only). Enabling this option adds a visual row that indicates the current month above the dates. The DayMonthLabel property defines the ex-HTML label to show the month-name into the calendar's header (day-view only).

false {boolean}, hides the calendar's header (month's name)
true {boolean}, shows the calendar's header (month's name)

The DayMonthLabel property defines the ex-HTML label to show the month-name into the calendar's header (day-view only). 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 month name. 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 property shows or hides the header to display the month-name (day-view only).

The DayMonthLabel 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 value	1 - 31
<%dd%>	Day of the month using exactly two numeric digits	01 - 31
<%d1%>	Weekday using its first letter	S - S
<%loc_d1%>	Weekday as a single-letter abbreviation based on the current user settings	S - S
<%d2%>	Weekday using its first two letters	Su - Sa
<%loc_d2%>	Weekday as a two-letter abbreviation based on the current user settings	Su - Sa
<%d3%>	Weekday using its first three letters	Sun - Sat
<%ddd%>	Weekday using its first three letters	Sun - Sat
<%loc_d3%>	Weekday as a three-letter abbreviation based on the current user regional and language settings; equivalent to <%loc_ddd%>	Sun - Sat
<%loc_ddd%>	Weekday as a three-letter abbreviation based on the current user regional and language settings	Sun - Sat
<%dddd%>	Full name of the weekday	Sunday - Saturday
<%loc_dddd%>	Full weekday name based on the current user regional and language settings	Sunday - Saturday
<%w%>	Numeric day of the week	1 - 7
<%y%>	Numeric day of the year	1 - 366
(week-patterns)
<%ww%>	Week of the year	1 - 53
(month-patterns)
<%m%>	Month of the year using one or two numeric digits, as needed	1 - 12
<%mm%>	Month of the year using exactly two numeric digits	01 - 12
<%mr%>	Month of the year using Roman numerals, as needed	I - XII
<%m1%>	Month using its first letter	J - D
<%loc_m1%>	Month as a single-letter abbreviation based on the current user settings	J - D
<%m2%>	Month using its first two letters	Ja - De
<%loc_m2%>	Month as a two-letter abbreviation based on the current user settings	Ja - De
<%m3%>	Month using its first three letters	Jan - Dec
<%mmm%>	Month using its first three letters	Jan - Dec
<%loc_m3%>	Month as a three-letter abbreviation based on the current user regional and language settings; equivalent to <%loc_mmm%>	Jan - Dec
<%loc_mmm%>	Month as a three-letter abbreviation based on the current user regional and language settings	Jan - Dec
<%mmmm%>	Full name of the month	January - December
<%loc_mmmm%>	Full month name based on the current user regional and language settings	January - December
(year-patterns)
<%q%>	Date shown as the quarter of the year	1 - 4
<%hy%>	Date shown as the half of the year	1 - 2
<%loc_y%>	Year represented by the last digit only, based on the current regional settings	0 - 9
<%yy%>	Last two digits of the year	01 - 99
<%loc_yy%>	Year represented by the last two digits only, based on the current regional settings; a leading zero is added for single-digit years	01 - 99
<%yyyy%>	Full year using four digits	0100 - 9999
<%loc_yyyy%>	Year represented using four or five digits, depending on the calendar in use. Thai Buddhist and Korean calendars use five-digit years; the "yyyy" pattern displays five digits for these calendars and four digits for all other supported calendars. Calendars with single-digit or two-digit years, such as the Japanese Emperor era, are formatted differently: single-digit years include a leading zero (for example, "03"), two-digit years use two digits (for example, "13"), and no additional leading zeros are applied	0100 - 9999
<%i%>	Numeric value displayed instead of a date, representing the number of milliseconds elapsed since the Unix Epoch, January 1, 1970, 00:00:00 UTC	1767085565940
(localized era-patterns)
<%loc_g%>	Period/era based on the current user regional and language settings	A,B
<%loc_gg%>	Period/era based on the current user regional and language settings	AD,BC
(localized date-patterns)
<%loc_sdate%>	Date in short format based on the current user regional and language settings	12/31/2000
<%loc_ldate%>	Date in long format based on the current user regional and language settings	December 31, 2000
<%loc_dsep%>	Date separator based on the current user regional and language settings	/
(time-patterns)
<%h%>	Hour in one or two digits, as needed	0 - 23
<%hh%>	Hour in two digits	00 - 23
<%h12%>	Hour in 12-hour format, in one or two digits	0/12 - 11
<%hh12%>	Hour in 12-hour format, in two digits	00/12 - 11
<%n%>	Minute in one or two digits, as needed	0 - 59
<%nn%>	Minute in two digits	00 - 59
<%s%>	Second in one or two digits, as needed	0 - 59
<%ss%>	Second in two digits	00 - 59
<%AM/PM%>	12-hour clock with uppercase "AM" or "PM" as appropriate	AM, PM
(localized time-patterns)
<%loc_AM/PM%>	Time marker such as AM or PM based on the current user regional and language settings	AM, PM
<%loc_A/P%>	Single-character time marker such as A or P based on the current user regional and language settings	A, P
<%loc_time%>	Time based on the current user regional and language settings	1:30:15 PM
<%loc_time24%>	Time in 24-hour format without a time marker based on the current user regional and language settings	13:30:15
<%loc_tsep%>	Time separator based on the current user regional and language settings	:

Also, DayMonthLabel 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

"" {string}, displays nothing
"<%mmm%>" {string}, displays three-letters of the month
"<%mmmm%> <%yyyy%>" {string}, displays the full month and year
"<b><%mmm%></b><r><fgcolor gray><font ;8><off 6><%yyyy%>" {string}, displays an combined ex-HTML format

The DayNonMonth property specifies whether the calendar displays the dates that are not part of the current month. When enabled, the calendar shows the dates from the previous and next months that fall within the weeks of the current month. When disabled, only the dates of the current month are shown, and the spaces for non-month dates are left blank.

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.

The DayNonMonthLabel property defines the ex-HTML label to show the dates that are not part of the current month (day-view only). This label can include expression fields (<%...%>) to dynamically show these extra dates, as well as ex-HTML tags to format the label's appearance.

The DayNonMonthLabel 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 value	1 - 31
<%dd%>	Day of the month using exactly two numeric digits	01 - 31
<%d1%>	Weekday using its first letter	S - S
<%loc_d1%>	Weekday as a single-letter abbreviation based on the current user settings	S - S
<%d2%>	Weekday using its first two letters	Su - Sa
<%loc_d2%>	Weekday as a two-letter abbreviation based on the current user settings	Su - Sa
<%d3%>	Weekday using its first three letters	Sun - Sat
<%ddd%>	Weekday using its first three letters	Sun - Sat
<%loc_d3%>	Weekday as a three-letter abbreviation based on the current user regional and language settings; equivalent to <%loc_ddd%>	Sun - Sat
<%loc_ddd%>	Weekday as a three-letter abbreviation based on the current user regional and language settings	Sun - Sat
<%dddd%>	Full name of the weekday	Sunday - Saturday
<%loc_dddd%>	Full weekday name based on the current user regional and language settings	Sunday - Saturday
<%w%>	Numeric day of the week	1 - 7
<%y%>	Numeric day of the year	1 - 366
(week-patterns)
<%ww%>	Week of the year	1 - 53
(month-patterns)
<%m%>	Month of the year using one or two numeric digits, as needed	1 - 12
<%mm%>	Month of the year using exactly two numeric digits	01 - 12
<%mr%>	Month of the year using Roman numerals, as needed	I - XII
<%m1%>	Month using its first letter	J - D
<%loc_m1%>	Month as a single-letter abbreviation based on the current user settings	J - D
<%m2%>	Month using its first two letters	Ja - De
<%loc_m2%>	Month as a two-letter abbreviation based on the current user settings	Ja - De
<%m3%>	Month using its first three letters	Jan - Dec
<%mmm%>	Month using its first three letters	Jan - Dec
<%loc_m3%>	Month as a three-letter abbreviation based on the current user regional and language settings; equivalent to <%loc_mmm%>	Jan - Dec
<%loc_mmm%>	Month as a three-letter abbreviation based on the current user regional and language settings	Jan - Dec
<%mmmm%>	Full name of the month	January - December
<%loc_mmmm%>	Full month name based on the current user regional and language settings	January - December
(year-patterns)
<%q%>	Date shown as the quarter of the year	1 - 4
<%hy%>	Date shown as the half of the year	1 - 2
<%loc_y%>	Year represented by the last digit only, based on the current regional settings	0 - 9
<%yy%>	Last two digits of the year	01 - 99
<%loc_yy%>	Year represented by the last two digits only, based on the current regional settings; a leading zero is added for single-digit years	01 - 99
<%yyyy%>	Full year using four digits	0100 - 9999
<%loc_yyyy%>	Year represented using four or five digits, depending on the calendar in use. Thai Buddhist and Korean calendars use five-digit years; the "yyyy" pattern displays five digits for these calendars and four digits for all other supported calendars. Calendars with single-digit or two-digit years, such as the Japanese Emperor era, are formatted differently: single-digit years include a leading zero (for example, "03"), two-digit years use two digits (for example, "13"), and no additional leading zeros are applied	0100 - 9999
<%i%>	Numeric value displayed instead of a date, representing the number of milliseconds elapsed since the Unix Epoch, January 1, 1970, 00:00:00 UTC	1767085565940
(localized era-patterns)
<%loc_g%>	Period/era based on the current user regional and language settings	A,B
<%loc_gg%>	Period/era based on the current user regional and language settings	AD,BC
(localized date-patterns)
<%loc_sdate%>	Date in short format based on the current user regional and language settings	12/31/2000
<%loc_ldate%>	Date in long format based on the current user regional and language settings	December 31, 2000
<%loc_dsep%>	Date separator based on the current user regional and language settings	/
(time-patterns)
<%h%>	Hour in one or two digits, as needed	0 - 23
<%hh%>	Hour in two digits	00 - 23
<%h12%>	Hour in 12-hour format, in one or two digits	0/12 - 11
<%hh12%>	Hour in 12-hour format, in two digits	00/12 - 11
<%n%>	Minute in one or two digits, as needed	0 - 59
<%nn%>	Minute in two digits	00 - 59
<%s%>	Second in one or two digits, as needed	0 - 59
<%ss%>	Second in two digits	00 - 59
<%AM/PM%>	12-hour clock with uppercase "AM" or "PM" as appropriate	AM, PM
(localized time-patterns)
<%loc_AM/PM%>	Time marker such as AM or PM based on the current user regional and language settings	AM, PM
<%loc_A/P%>	Single-character time marker such as A or P based on the current user regional and language settings	A, P
<%loc_time%>	Time based on the current user regional and language settings	1:30:15 PM
<%loc_time24%>	Time in 24-hour format without a time marker based on the current user regional and language settings	13:30:15
<%loc_tsep%>	Time separator based on the current user regional and language settings	:

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

"" {string}, displays nothing
"<%d%>" {string}, displays the day of the month in one or two numeric digits, as needed (1 to 31)
"<fgcolor lightgray><%d%></fgcolor>" {string}, displays the day of the month in one or two numeric digits, as needed (1 to 31) in gray

The DayWeekAllLabel property defines the ex-HTML label to show the first day of the month on the top-left corner of the calendar, when the week-number and week-days headers are present (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 value	1 - 31
<%dd%>	Day of the month using exactly two numeric digits	01 - 31
<%d1%>	Weekday using its first letter	S - S
<%loc_d1%>	Weekday as a single-letter abbreviation based on the current user settings	S - S
<%d2%>	Weekday using its first two letters	Su - Sa
<%loc_d2%>	Weekday as a two-letter abbreviation based on the current user settings	Su - Sa
<%d3%>	Weekday using its first three letters	Sun - Sat
<%ddd%>	Weekday using its first three letters	Sun - Sat
<%loc_d3%>	Weekday as a three-letter abbreviation based on the current user regional and language settings; equivalent to <%loc_ddd%>	Sun - Sat
<%loc_ddd%>	Weekday as a three-letter abbreviation based on the current user regional and language settings	Sun - Sat
<%dddd%>	Full name of the weekday	Sunday - Saturday
<%loc_dddd%>	Full weekday name based on the current user regional and language settings	Sunday - Saturday
<%w%>	Numeric day of the week	1 - 7
<%y%>	Numeric day of the year	1 - 366
(week-patterns)
<%ww%>	Week of the year	1 - 53
(month-patterns)
<%m%>	Month of the year using one or two numeric digits, as needed	1 - 12
<%mm%>	Month of the year using exactly two numeric digits	01 - 12
<%mr%>	Month of the year using Roman numerals, as needed	I - XII
<%m1%>	Month using its first letter	J - D
<%loc_m1%>	Month as a single-letter abbreviation based on the current user settings	J - D
<%m2%>	Month using its first two letters	Ja - De
<%loc_m2%>	Month as a two-letter abbreviation based on the current user settings	Ja - De
<%m3%>	Month using its first three letters	Jan - Dec
<%mmm%>	Month using its first three letters	Jan - Dec
<%loc_m3%>	Month as a three-letter abbreviation based on the current user regional and language settings; equivalent to <%loc_mmm%>	Jan - Dec
<%loc_mmm%>	Month as a three-letter abbreviation based on the current user regional and language settings	Jan - Dec
<%mmmm%>	Full name of the month	January - December
<%loc_mmmm%>	Full month name based on the current user regional and language settings	January - December
(year-patterns)
<%q%>	Date shown as the quarter of the year	1 - 4
<%hy%>	Date shown as the half of the year	1 - 2
<%loc_y%>	Year represented by the last digit only, based on the current regional settings	0 - 9
<%yy%>	Last two digits of the year	01 - 99
<%loc_yy%>	Year represented by the last two digits only, based on the current regional settings; a leading zero is added for single-digit years	01 - 99
<%yyyy%>	Full year using four digits	0100 - 9999
<%loc_yyyy%>	Year represented using four or five digits, depending on the calendar in use. Thai Buddhist and Korean calendars use five-digit years; the "yyyy" pattern displays five digits for these calendars and four digits for all other supported calendars. Calendars with single-digit or two-digit years, such as the Japanese Emperor era, are formatted differently: single-digit years include a leading zero (for example, "03"), two-digit years use two digits (for example, "13"), and no additional leading zeros are applied	0100 - 9999
<%i%>	Numeric value displayed instead of a date, representing the number of milliseconds elapsed since the Unix Epoch, January 1, 1970, 00:00:00 UTC	1767085565940
(localized era-patterns)
<%loc_g%>	Period/era based on the current user regional and language settings	A,B
<%loc_gg%>	Period/era based on the current user regional and language settings	AD,BC
(localized date-patterns)
<%loc_sdate%>	Date in short format based on the current user regional and language settings	12/31/2000
<%loc_ldate%>	Date in long format based on the current user regional and language settings	December 31, 2000
<%loc_dsep%>	Date separator based on the current user regional and language settings	/
(time-patterns)
<%h%>	Hour in one or two digits, as needed	0 - 23
<%hh%>	Hour in two digits	00 - 23
<%h12%>	Hour in 12-hour format, in one or two digits	0/12 - 11
<%hh12%>	Hour in 12-hour format, in two digits	00/12 - 11
<%n%>	Minute in one or two digits, as needed	0 - 59
<%nn%>	Minute in two digits	00 - 59
<%s%>	Second in one or two digits, as needed	0 - 59
<%ss%>	Second in two digits	00 - 59
<%AM/PM%>	12-hour clock with uppercase "AM" or "PM" as appropriate	AM, PM
(localized time-patterns)
<%loc_AM/PM%>	Time marker such as AM or PM based on the current user regional and language settings	AM, PM
<%loc_A/P%>	Single-character time marker such as A or P based on the current user regional and language settings	A, P
<%loc_time%>	Time based on the current user regional and language settings	1:30:15 PM
<%loc_time24%>	Time in 24-hour format without a time marker based on the current user regional and language settings	13:30:15
<%loc_tsep%>	Time separator based on the current user regional and language settings	:

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

"" {string}, displays nothing
"<b><%mr%>" {string}, displays month of the year in Roman numerals, as needed (I to XII) in bold

The DayWeekHeader property specifies whether the calendar shows the header to display the days of the week (day-view only). 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.

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

The DayWeekLabel property defines 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 value	1 - 31
<%dd%>	Day of the month using exactly two numeric digits	01 - 31
<%d1%>	Weekday using its first letter	S - S
<%loc_d1%>	Weekday as a single-letter abbreviation based on the current user settings	S - S
<%d2%>	Weekday using its first two letters	Su - Sa
<%loc_d2%>	Weekday as a two-letter abbreviation based on the current user settings	Su - Sa
<%d3%>	Weekday using its first three letters	Sun - Sat
<%ddd%>	Weekday using its first three letters	Sun - Sat
<%loc_d3%>	Weekday as a three-letter abbreviation based on the current user regional and language settings; equivalent to <%loc_ddd%>	Sun - Sat
<%loc_ddd%>	Weekday as a three-letter abbreviation based on the current user regional and language settings	Sun - Sat
<%dddd%>	Full name of the weekday	Sunday - Saturday
<%loc_dddd%>	Full weekday name based on the current user regional and language settings	Sunday - Saturday
<%w%>	Numeric day of the week	1 - 7
<%y%>	Numeric day of the year	1 - 366
(week-patterns)
<%ww%>	Week of the year	1 - 53
(month-patterns)
<%m%>	Month of the year using one or two numeric digits, as needed	1 - 12
<%mm%>	Month of the year using exactly two numeric digits	01 - 12
<%mr%>	Month of the year using Roman numerals, as needed	I - XII
<%m1%>	Month using its first letter	J - D
<%loc_m1%>	Month as a single-letter abbreviation based on the current user settings	J - D
<%m2%>	Month using its first two letters	Ja - De
<%loc_m2%>	Month as a two-letter abbreviation based on the current user settings	Ja - De
<%m3%>	Month using its first three letters	Jan - Dec
<%mmm%>	Month using its first three letters	Jan - Dec
<%loc_m3%>	Month as a three-letter abbreviation based on the current user regional and language settings; equivalent to <%loc_mmm%>	Jan - Dec
<%loc_mmm%>	Month as a three-letter abbreviation based on the current user regional and language settings	Jan - Dec
<%mmmm%>	Full name of the month	January - December
<%loc_mmmm%>	Full month name based on the current user regional and language settings	January - December
(year-patterns)
<%q%>	Date shown as the quarter of the year	1 - 4
<%hy%>	Date shown as the half of the year	1 - 2
<%loc_y%>	Year represented by the last digit only, based on the current regional settings	0 - 9
<%yy%>	Last two digits of the year	01 - 99
<%loc_yy%>	Year represented by the last two digits only, based on the current regional settings; a leading zero is added for single-digit years	01 - 99
<%yyyy%>	Full year using four digits	0100 - 9999
<%loc_yyyy%>	Year represented using four or five digits, depending on the calendar in use. Thai Buddhist and Korean calendars use five-digit years; the "yyyy" pattern displays five digits for these calendars and four digits for all other supported calendars. Calendars with single-digit or two-digit years, such as the Japanese Emperor era, are formatted differently: single-digit years include a leading zero (for example, "03"), two-digit years use two digits (for example, "13"), and no additional leading zeros are applied	0100 - 9999
<%i%>	Numeric value displayed instead of a date, representing the number of milliseconds elapsed since the Unix Epoch, January 1, 1970, 00:00:00 UTC	1767085565940
(localized era-patterns)
<%loc_g%>	Period/era based on the current user regional and language settings	A,B
<%loc_gg%>	Period/era based on the current user regional and language settings	AD,BC
(localized date-patterns)
<%loc_sdate%>	Date in short format based on the current user regional and language settings	12/31/2000
<%loc_ldate%>	Date in long format based on the current user regional and language settings	December 31, 2000
<%loc_dsep%>	Date separator based on the current user regional and language settings	/
(time-patterns)
<%h%>	Hour in one or two digits, as needed	0 - 23
<%hh%>	Hour in two digits	00 - 23
<%h12%>	Hour in 12-hour format, in one or two digits	0/12 - 11
<%hh12%>	Hour in 12-hour format, in two digits	00/12 - 11
<%n%>	Minute in one or two digits, as needed	0 - 59
<%nn%>	Minute in two digits	00 - 59
<%s%>	Second in one or two digits, as needed	0 - 59
<%ss%>	Second in two digits	00 - 59
<%AM/PM%>	12-hour clock with uppercase "AM" or "PM" as appropriate	AM, PM
(localized time-patterns)
<%loc_AM/PM%>	Time marker such as AM or PM based on the current user regional and language settings	AM, PM
<%loc_A/P%>	Single-character time marker such as A or P based on the current user regional and language settings	A, P
<%loc_time%>	Time based on the current user regional and language settings	1:30:15 PM
<%loc_time24%>	Time in 24-hour format without a time marker based on the current user regional and language settings	13:30:15
<%loc_tsep%>	Time separator based on the current user regional and language settings	:

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

"" {string}, displays nothing
"<%d2%>" {string}, displays first two letters of the weekday (Su to Sa)
"<b><%d3%></b>" {string}, displays first thee letters of the weekday (Sun to Sat) in bold

The DayWeekNoHeader property 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. This can be particularly useful for users who need to keep track of week numbers for scheduling or organizational purposes. When the DayWeekNoHeader property is set to true, the calendar will include this additional header row, providing a clear reference for the week numbers corresponding to each day displayed in the day view.

false {boolean}, hides the calendar's header that displays the week-number
true {boolean}, shows the calendar's header that displays the week-number

The DayWeekNoLabel property defines 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 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 value	1 - 31
<%dd%>	Day of the month using exactly two numeric digits	01 - 31
<%d1%>	Weekday using its first letter	S - S
<%loc_d1%>	Weekday as a single-letter abbreviation based on the current user settings	S - S
<%d2%>	Weekday using its first two letters	Su - Sa
<%loc_d2%>	Weekday as a two-letter abbreviation based on the current user settings	Su - Sa
<%d3%>	Weekday using its first three letters	Sun - Sat
<%ddd%>	Weekday using its first three letters	Sun - Sat
<%loc_d3%>	Weekday as a three-letter abbreviation based on the current user regional and language settings; equivalent to <%loc_ddd%>	Sun - Sat
<%loc_ddd%>	Weekday as a three-letter abbreviation based on the current user regional and language settings	Sun - Sat
<%dddd%>	Full name of the weekday	Sunday - Saturday
<%loc_dddd%>	Full weekday name based on the current user regional and language settings	Sunday - Saturday
<%w%>	Numeric day of the week	1 - 7
<%y%>	Numeric day of the year	1 - 366
(week-patterns)
<%ww%>	Week of the year	1 - 53
(month-patterns)
<%m%>	Month of the year using one or two numeric digits, as needed	1 - 12
<%mm%>	Month of the year using exactly two numeric digits	01 - 12
<%mr%>	Month of the year using Roman numerals, as needed	I - XII
<%m1%>	Month using its first letter	J - D
<%loc_m1%>	Month as a single-letter abbreviation based on the current user settings	J - D
<%m2%>	Month using its first two letters	Ja - De
<%loc_m2%>	Month as a two-letter abbreviation based on the current user settings	Ja - De
<%m3%>	Month using its first three letters	Jan - Dec
<%mmm%>	Month using its first three letters	Jan - Dec
<%loc_m3%>	Month as a three-letter abbreviation based on the current user regional and language settings; equivalent to <%loc_mmm%>	Jan - Dec
<%loc_mmm%>	Month as a three-letter abbreviation based on the current user regional and language settings	Jan - Dec
<%mmmm%>	Full name of the month	January - December
<%loc_mmmm%>	Full month name based on the current user regional and language settings	January - December
(year-patterns)
<%q%>	Date shown as the quarter of the year	1 - 4
<%hy%>	Date shown as the half of the year	1 - 2
<%loc_y%>	Year represented by the last digit only, based on the current regional settings	0 - 9
<%yy%>	Last two digits of the year	01 - 99
<%loc_yy%>	Year represented by the last two digits only, based on the current regional settings; a leading zero is added for single-digit years	01 - 99
<%yyyy%>	Full year using four digits	0100 - 9999
<%loc_yyyy%>	Year represented using four or five digits, depending on the calendar in use. Thai Buddhist and Korean calendars use five-digit years; the "yyyy" pattern displays five digits for these calendars and four digits for all other supported calendars. Calendars with single-digit or two-digit years, such as the Japanese Emperor era, are formatted differently: single-digit years include a leading zero (for example, "03"), two-digit years use two digits (for example, "13"), and no additional leading zeros are applied	0100 - 9999
<%i%>	Numeric value displayed instead of a date, representing the number of milliseconds elapsed since the Unix Epoch, January 1, 1970, 00:00:00 UTC	1767085565940
(localized era-patterns)
<%loc_g%>	Period/era based on the current user regional and language settings	A,B
<%loc_gg%>	Period/era based on the current user regional and language settings	AD,BC
(localized date-patterns)
<%loc_sdate%>	Date in short format based on the current user regional and language settings	12/31/2000
<%loc_ldate%>	Date in long format based on the current user regional and language settings	December 31, 2000
<%loc_dsep%>	Date separator based on the current user regional and language settings	/
(time-patterns)
<%h%>	Hour in one or two digits, as needed	0 - 23
<%hh%>	Hour in two digits	00 - 23
<%h12%>	Hour in 12-hour format, in one or two digits	0/12 - 11
<%hh12%>	Hour in 12-hour format, in two digits	00/12 - 11
<%n%>	Minute in one or two digits, as needed	0 - 59
<%nn%>	Minute in two digits	00 - 59
<%s%>	Second in one or two digits, as needed	0 - 59
<%ss%>	Second in two digits	00 - 59
<%AM/PM%>	12-hour clock with uppercase "AM" or "PM" as appropriate	AM, PM
(localized time-patterns)
<%loc_AM/PM%>	Time marker such as AM or PM based on the current user regional and language settings	AM, PM
<%loc_A/P%>	Single-character time marker such as A or P based on the current user regional and language settings	A, P
<%loc_time%>	Time based on the current user regional and language settings	1:30:15 PM
<%loc_time24%>	Time in 24-hour format without a time marker based on the current user regional and language settings	13:30:15
<%loc_tsep%>	Time separator based on the current user regional and language settings	:

Also, DayWeekNoLabel 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

"" {string}, displays nothing
"<%ww%>" {string}, displays the week of the year (1 to 53)
"<fgcolor red><%ww%></fgcolor>" {string}, displays the week of the year (1 to 53) in red

The Events property defines the events within the control. The Events property 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

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"
 

The Flow property determines whether the months gets arranged from left to right or top to bottom. 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

0 or Calendar.FlowEnum.exLeftToRight {number}, arranges months from left to right
1 or Calendar.FlowEnum.exTopToBottom {number}, arranges months from top to bottom

The HlShapes property defines the shape(s) to be applied on a part of the control, when it requires to be highlighted. The HlShapes property customizes the visual appearance of the control when it is highlighted. You can use this property to specify different shapes for the highlighted state of the control, allowing you to create a distinct visual effect when the control is active or selected.

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

"" {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

The Layout property gets or sets the user interface layout of the control as a string expression. This string fully describes the current visual configuration of the object. You can save the current layout by calling the GetLayout() method, which returns the layout definition as a string. To restore a previously saved layout, call the SetLayout() method and pass the saved string. This allows you to persist and later reapply the control's UI configuration.

The following statements are equivalents:

 oCalendar.Layout = sLayout, sets the control's layout
 oCalendar.SetLayout( sLayout ), sets the control's layout

 sLayout = oCalendar.Layout, gets the control's layout
 sLayout = oCalendar.GetLayout(), gets the control's layout

where oCalendar is an object of Calendar type

The Listeners field defines the events of the control, as an object of exontrol.Lts type. The exontrol.Lts type supports forEach(callback, thisArg) method that helps you to enumerate the events the control supports. The on() method adds an event listener to the specified event or defines a keyboard shortcut. The on() method enables you to listen for events and execute custom code when those events occur, or to define keyboard shortcuts that trigger specific actions within the component. You can use the on() method to enhance the interactivity and functionality of your application by responding to user actions or keyboard inputs. Use the off() method to remove previously bound event handlers or keyboard shortcuts. The Events section lists the events the component supports.

The following sample shows how you can get all events the component currently supports:

oCalendar.Listeners.forEach(function(name)
{
 console.log(name);
});

The following sample displays selected dates once the selection is changed:

oCalendar.Listeners.Add("onselchange", function (oEvent)
{
 console.log(oEvent);
});

where oCalendar is an object of Calendar type

The Locale property specifies the language (BCP 47 language tag) whose formatting conventions should be used to customize the calendar. The locale defines how dates and time units (such as month names, day names, and numeric formats) are displayed. If the Locale property is set to null, the control automatically uses the browser's UI language.

For example:

• When the Locale property is set to "de" (German), month names are displayed as "Januar", "Februar", and so on.
• When the Locale property is set to "en-US" (U.S. English), month names appear as "January", "February", etc.

By default, the Locale property is null, meaning the browser's UI language determines the calendar formatting.

null {null}, indicates that the browser's UI language is used.
"de" {string}, defines German locale
"ro" {string}, defines Romanian locale

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

false {boolean}, unlocks the control (can select any date)
true {boolean}, locks the control (can't select any date)

The MaxMonthX property specifies the maximum number of months horizontally displayed. Together MinMonthX and MaxMonthX properties 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.

6 {number}, indicates that the calendar displays maximum six months.

The MaxMonthY property specifies the maximum number of months vertically displayed. Together MinMonthY and MaxMonthY properties 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.

6 {number}, indicates that the calendar displays maximum six months.

The MinMonthX property specifies the minimum number of months horizontally displayed. Together MinMonthX and MaxMonthX properties 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.

2 {number}, indicates that the calendar displays minimum two months

The MinMonthY property specifies the minimum number of months vertically displayed. Together MinMonthY and MaxMonthY properties 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.

2 {number}, indicates that the calendar displays minimum two months

The Mode property 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 Calendar.ModeEnum type supports 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

0 or Calendar.ModeEnum.exVertical {number}, shows vertically the week days
1 or Calendar.ModeEnum.exHorizontal {number}, shows horizontally the week days

The MonthAlign property aligns the month's label, while the calendar is 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.

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

The MonthLabel property 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 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 value	1 - 31
<%dd%>	Day of the month using exactly two numeric digits	01 - 31
<%d1%>	Weekday using its first letter	S - S
<%loc_d1%>	Weekday as a single-letter abbreviation based on the current user settings	S - S
<%d2%>	Weekday using its first two letters	Su - Sa
<%loc_d2%>	Weekday as a two-letter abbreviation based on the current user settings	Su - Sa
<%d3%>	Weekday using its first three letters	Sun - Sat
<%ddd%>	Weekday using its first three letters	Sun - Sat
<%loc_d3%>	Weekday as a three-letter abbreviation based on the current user regional and language settings; equivalent to <%loc_ddd%>	Sun - Sat
<%loc_ddd%>	Weekday as a three-letter abbreviation based on the current user regional and language settings	Sun - Sat
<%dddd%>	Full name of the weekday	Sunday - Saturday
<%loc_dddd%>	Full weekday name based on the current user regional and language settings	Sunday - Saturday
<%w%>	Numeric day of the week	1 - 7
<%y%>	Numeric day of the year	1 - 366
(week-patterns)
<%ww%>	Week of the year	1 - 53
(month-patterns)
<%m%>	Month of the year using one or two numeric digits, as needed	1 - 12
<%mm%>	Month of the year using exactly two numeric digits	01 - 12
<%mr%>	Month of the year using Roman numerals, as needed	I - XII
<%m1%>	Month using its first letter	J - D
<%loc_m1%>	Month as a single-letter abbreviation based on the current user settings	J - D
<%m2%>	Month using its first two letters	Ja - De
<%loc_m2%>	Month as a two-letter abbreviation based on the current user settings	Ja - De
<%m3%>	Month using its first three letters	Jan - Dec
<%mmm%>	Month using its first three letters	Jan - Dec
<%loc_m3%>	Month as a three-letter abbreviation based on the current user regional and language settings; equivalent to <%loc_mmm%>	Jan - Dec
<%loc_mmm%>	Month as a three-letter abbreviation based on the current user regional and language settings	Jan - Dec
<%mmmm%>	Full name of the month	January - December
<%loc_mmmm%>	Full month name based on the current user regional and language settings	January - December
(year-patterns)
<%q%>	Date shown as the quarter of the year	1 - 4
<%hy%>	Date shown as the half of the year	1 - 2
<%loc_y%>	Year represented by the last digit only, based on the current regional settings	0 - 9
<%yy%>	Last two digits of the year	01 - 99
<%loc_yy%>	Year represented by the last two digits only, based on the current regional settings; a leading zero is added for single-digit years	01 - 99
<%yyyy%>	Full year using four digits	0100 - 9999
<%loc_yyyy%>	Year represented using four or five digits, depending on the calendar in use. Thai Buddhist and Korean calendars use five-digit years; the "yyyy" pattern displays five digits for these calendars and four digits for all other supported calendars. Calendars with single-digit or two-digit years, such as the Japanese Emperor era, are formatted differently: single-digit years include a leading zero (for example, "03"), two-digit years use two digits (for example, "13"), and no additional leading zeros are applied	0100 - 9999
<%i%>	Numeric value displayed instead of a date, representing the number of milliseconds elapsed since the Unix Epoch, January 1, 1970, 00:00:00 UTC	1767085565940
(localized era-patterns)
<%loc_g%>	Period/era based on the current user regional and language settings	A,B
<%loc_gg%>	Period/era based on the current user regional and language settings	AD,BC
(localized date-patterns)
<%loc_sdate%>	Date in short format based on the current user regional and language settings	12/31/2000
<%loc_ldate%>	Date in long format based on the current user regional and language settings	December 31, 2000
<%loc_dsep%>	Date separator based on the current user regional and language settings	/
(time-patterns)
<%h%>	Hour in one or two digits, as needed	0 - 23
<%hh%>	Hour in two digits	00 - 23
<%h12%>	Hour in 12-hour format, in one or two digits	0/12 - 11
<%hh12%>	Hour in 12-hour format, in two digits	00/12 - 11
<%n%>	Minute in one or two digits, as needed	0 - 59
<%nn%>	Minute in two digits	00 - 59
<%s%>	Second in one or two digits, as needed	0 - 59
<%ss%>	Second in two digits	00 - 59
<%AM/PM%>	12-hour clock with uppercase "AM" or "PM" as appropriate	AM, PM
(localized time-patterns)
<%loc_AM/PM%>	Time marker such as AM or PM based on the current user regional and language settings	AM, PM
<%loc_A/P%>	Single-character time marker such as A or P based on the current user regional and language settings	A, P
<%loc_time%>	Time based on the current user regional and language settings	1:30:15 PM
<%loc_time24%>	Time in 24-hour format without a time marker based on the current user regional and language settings	13:30:15
<%loc_tsep%>	Time separator based on the current user regional and language settings	:

Also, MonthLabel 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

"" {string}, displays nothing
"<%mmm%>" {string}, displays first three letters of the month (Jan to Dec)

The MonthYearAlign property aligns the year's label, while the calendar is 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.

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

The Options property specifies a Calendar.Options object that determines how the control is configured and displayed. You can modify the control's behavior and appearance either by assigning a new object to the Options property or by calling the SetOptions() method directly.

Each field within the options object is applied internally by invoking the corresponding Set... method of the control. For instance, updating the locale field automatically triggers the SetLocale() method, which updates the calendar's regional settings accordingly.

This ensures that any change made through the options object is immediately reflected in the control, keeping its configuration consistent and synchronized.

{locale: "de"}, {object} changes the calendar's locale to German
{selectable: "not(weekday(value) in (0,6))"}, {object} makes all dates selectable except Sundays and Saturdays

. The Pad property 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).

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

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

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

The ReadOnly property indicates whether the control is read-only (the user can't select new dates, but can browse for any date). 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 property differs from ReadOnly in that 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. When the control is read-only, the user can browse through dates but cannot select a new one.

false {boolean}, the user can select new dates
true {boolean}, the user can not select dates

The Selectable property 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 only affects dates selected after it is set; it does not apply to dates selected beforehand.

"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 >= #1/1/2020# and value <= #12/31/2020#" {string}, only dates within the year 2020 are selectable

The Selection property specifies the selected date(s). The SingleSel property determines whether the control allows single or multiple selection. If SingleSel is true, the value of the Selection property can be null, a string, a number or a Date type; otherwise, it should be an array of [Date] type. When you set the Selection property, the control converts the value to a Date type or an array of [Date] type and applies it as the control's selection. If the value is invalid or cannot be converted to a Date type or an array of [Date] type, setting the Selection property throws an exception.

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

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

The Shapes property specifies the shapes assigned to each part of the control. These shapes define the visual appearance of the control's elements, such as borders, fills, and other graphical components. By setting this property, you can fully customize how the control is drawn and displayed.

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

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

The SingleSel property specifies whether the control supports single, multiple, toggle selection. The selection behavior of the calendar is determined by the SingleSel property, 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 property 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 property 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.

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.

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

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.

The SmoothSel property defines the time in ms the calendar's selection goes 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.

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.

The Tfi property defines the font attributes that are applied to the control's captions and can be set to customize their appearance. The Tfi property can be set by a string such as "b monospace 16" or by an object such as {bold: true, fontName: "monospace", fontSize: 16}, and immediately applies these settings to update the displayed captions. By default, the Tfi property 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 property 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 property 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 property 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.

null {null}, the Tfi property is ignored
"bold monospace 16 <fg blue>" {string}, defines Monospace font of 16px height, bold and blue
{bold: true, fontName: "monospace", fontSize: 16, fgColor: "blue"} {object}, defines Monospace font of 16px height, bold and blue

The ToolTipDelay property gets or sets how long the mouse pointer must point to an object before the tool tip appears. The ToolTipDelay property accepts a number value that specifies how long the mouse pointer must point to an object before the tool tip appears. The ToolTipDelay property is measured in milliseconds. The ToolTipPopDelay property gets or sets the period in ms of time the tool top remains visible if the mouse pointer is stationary within a control. The ToolTipWidth property gets or sets the width of the tooltip window, in pixels. The default value is 500 ms.

0 {number}, the tooltip is shown "immediately"
128 {number}, the tooltip is displayed in 128 ms.

The ToolTipPopDelay property gets or sets the period in ms of time the tool top remains visible if the mouse pointer is stationary within a control. The ToolTipPopDelay property is expressed in milliseconds. The ToolTipDelay property defines how long the mouse pointer must hover over an object before the tooltip appears. The ToolTipWidth property specifies the width of the tooltip window in pixels.

The property supports the following values:

• 0 {number}, no tooltip is shown for any object (disabled)
• -1 {number}, the tooltip stays indefinitely (negative)
• positive {number}, the tooltip is visible for the specified number of milliseconds (for example, 1000 means that the tooltip is visible for 1 second)

By default, the tooltip remains visible for 5000 milliseconds.

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

The ToolTipWidth property gets or sets the width of the tooltip window, in pixels. The ToolTipWidth property accepts a number value that specifies the width of the tooltip window, in pixels. The ToolTipDelay property gets or sets how long the mouse pointer must point to an object before the tool tip appears. The ToolTipPopDelay property gets or sets the period in ms of time the tool top remains visible if the mouse pointer is stationary within a control. The following values are valid:

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

The default value is -1.

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

The WheelChange property specifies the amount the calendar scrolls when the user rolls the mouse wheel. This setting allows you to adjust the sensitivity of the mouse wheel interaction with the control.

• Setting wheelChange to 0 disables mouse wheel actions, preventing the control from changing when the wheel is scrolled
• Setting wheelChange to a positive number, such as 5, increases the control's value by that amount each time the wheel is rotated, enabling faster adjustments

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

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

The YearAlign property defines how the year's label is aligned and formatted when the control is in year view. It allows you to control alignment, text wrapping, clipping, and ellipsis behavior to adjust how the label appears in the header.

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.

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

The YearLabel property 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 current year.

The YearLabel 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 value	1 - 31
<%dd%>	Day of the month using exactly two numeric digits	01 - 31
<%d1%>	Weekday using its first letter	S - S
<%loc_d1%>	Weekday as a single-letter abbreviation based on the current user settings	S - S
<%d2%>	Weekday using its first two letters	Su - Sa
<%loc_d2%>	Weekday as a two-letter abbreviation based on the current user settings	Su - Sa
<%d3%>	Weekday using its first three letters	Sun - Sat
<%ddd%>	Weekday using its first three letters	Sun - Sat
<%loc_d3%>	Weekday as a three-letter abbreviation based on the current user regional and language settings; equivalent to <%loc_ddd%>	Sun - Sat
<%loc_ddd%>	Weekday as a three-letter abbreviation based on the current user regional and language settings	Sun - Sat
<%dddd%>	Full name of the weekday	Sunday - Saturday
<%loc_dddd%>	Full weekday name based on the current user regional and language settings	Sunday - Saturday
<%w%>	Numeric day of the week	1 - 7
<%y%>	Numeric day of the year	1 - 366
(week-patterns)
<%ww%>	Week of the year	1 - 53
(month-patterns)
<%m%>	Month of the year using one or two numeric digits, as needed	1 - 12
<%mm%>	Month of the year using exactly two numeric digits	01 - 12
<%mr%>	Month of the year using Roman numerals, as needed	I - XII
<%m1%>	Month using its first letter	J - D
<%loc_m1%>	Month as a single-letter abbreviation based on the current user settings	J - D
<%m2%>	Month using its first two letters	Ja - De
<%loc_m2%>	Month as a two-letter abbreviation based on the current user settings	Ja - De
<%m3%>	Month using its first three letters	Jan - Dec
<%mmm%>	Month using its first three letters	Jan - Dec
<%loc_m3%>	Month as a three-letter abbreviation based on the current user regional and language settings; equivalent to <%loc_mmm%>	Jan - Dec
<%loc_mmm%>	Month as a three-letter abbreviation based on the current user regional and language settings	Jan - Dec
<%mmmm%>	Full name of the month	January - December
<%loc_mmmm%>	Full month name based on the current user regional and language settings	January - December
(year-patterns)
<%q%>	Date shown as the quarter of the year	1 - 4
<%hy%>	Date shown as the half of the year	1 - 2
<%loc_y%>	Year represented by the last digit only, based on the current regional settings	0 - 9
<%yy%>	Last two digits of the year	01 - 99
<%loc_yy%>	Year represented by the last two digits only, based on the current regional settings; a leading zero is added for single-digit years	01 - 99
<%yyyy%>	Full year using four digits	0100 - 9999
<%loc_yyyy%>	Year represented using four or five digits, depending on the calendar in use. Thai Buddhist and Korean calendars use five-digit years; the "yyyy" pattern displays five digits for these calendars and four digits for all other supported calendars. Calendars with single-digit or two-digit years, such as the Japanese Emperor era, are formatted differently: single-digit years include a leading zero (for example, "03"), two-digit years use two digits (for example, "13"), and no additional leading zeros are applied	0100 - 9999
<%i%>	Numeric value displayed instead of a date, representing the number of milliseconds elapsed since the Unix Epoch, January 1, 1970, 00:00:00 UTC	1767085565940
(localized era-patterns)
<%loc_g%>	Period/era based on the current user regional and language settings	A,B
<%loc_gg%>	Period/era based on the current user regional and language settings	AD,BC
(localized date-patterns)
<%loc_sdate%>	Date in short format based on the current user regional and language settings	12/31/2000
<%loc_ldate%>	Date in long format based on the current user regional and language settings	December 31, 2000
<%loc_dsep%>	Date separator based on the current user regional and language settings	/
(time-patterns)
<%h%>	Hour in one or two digits, as needed	0 - 23
<%hh%>	Hour in two digits	00 - 23
<%h12%>	Hour in 12-hour format, in one or two digits	0/12 - 11
<%hh12%>	Hour in 12-hour format, in two digits	00/12 - 11
<%n%>	Minute in one or two digits, as needed	0 - 59
<%nn%>	Minute in two digits	00 - 59
<%s%>	Second in one or two digits, as needed	0 - 59
<%ss%>	Second in two digits	00 - 59
<%AM/PM%>	12-hour clock with uppercase "AM" or "PM" as appropriate	AM, PM
(localized time-patterns)
<%loc_AM/PM%>	Time marker such as AM or PM based on the current user regional and language settings	AM, PM
<%loc_A/P%>	Single-character time marker such as A or P based on the current user regional and language settings	A, P
<%loc_time%>	Time based on the current user regional and language settings	1:30:15 PM
<%loc_time24%>	Time in 24-hour format without a time marker based on the current user regional and language settings	13:30:15
<%loc_tsep%>	Time separator based on the current user regional and language settings	:

Also, YearLabel 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

"" {string}, displays nothing
"<%yyyy%>" {string}, displays the year with four digits

The YearRangeAlign property defines how the label that displays the range of years is aligned and formatted. This applies when the control is in year view, allowing you to control alignment, text wrapping, clipping, and ellipsis behavior for the label in the header.

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.

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

The BeginUpdate() method suspends the control's render until the EndUpdate() method is called. It maintains performance, while multiple changes occurs within the control. The BeginUpdate() method is mostly used when you want to perform multiple changes to the control without refreshing the control after each change, and once all changes are performed, you can call the EndUpdate() method to refresh the control. You can use the Update() method to perform multiple changes at once. The BeginUpdate/EndUpdate() methods are not required to be called when you use the Update(), because the method already maintain performance while performing multiple changes to the control.

oCalendar.BeginUpdate();
  // performs multiple changes to the control
oCalendar.EndUpdate();

The EndUpdate() method resumes the control's render, after it is suspended by the BeginUpdate() method. The EndUpdate() method is mostly used after calling the BeginUpdate() method, to refresh the control after performing multiple changes to the control. You can use the Update() method to perform multiple changes at once. The BeginUpdate/EndUpdate() methods are not required to be called when you use the Update(), because the method already maintain performance while performing multiple changes to the control.

oCalendar.BeginUpdate();
 // performs multiple changes to the control
oCalendar.EndUpdate();

The Event() method retrieves a specific event from the control, either by its numerical index or by its unique identifier (key). The Event(id) method is equivalent to the Events.Item(id) on the Events collection. This method allows you to access the event's properties, modify its settings, or invoke its associated actions programmatically. If the specified index or key does not exist, the method typically returns null or triggers an error, depending on the control's configuration.

The following statements are equivalent:

 oCalendar.Event(0), returns the first event within the control
 oCalendar.Event("E1"), returns the event with the identifier/key of "E1"
 oCalendar.Events.Item(0), returns the first event within the control
 oCalendar.Events..Item("E1"), returns the event with the identifier/key of "E1"

where oCalendar is an instance of the Calendar control, and oEvent is an object of Event type.

The Next() method advances the calendar's date with one or more month(s)/year(s). The Next() method advances the calendar's date by one month/year, depending on the current view of the calendar. If the step parameter is specified, the Next() method advances the calendar's date by the number of month(s)/year(s) specified by the step parameter. The number can be negative which specifies the number of month(s)/year(s) to move backward by.

oCalendar.Next(), advances the calendar's date by 1 month/year
 oCalendar.Next(3), advances the calendar's date by 3 month(s)/year(s)
 oCalendar.Next(-1), moves backward the calendar's date by 1 month/year
 oCalendar.Next(-3), moves backward the calendar's date by 3 month(s)/year(s)

The Prev() method moves backward the calendar's date by one or more month(s)/year(s). The Prev() method moves backward the calendar's date by one month/year, depending on the current view of the calendar. If the step parameter is specified, the Prev() method moves backward the calendar's date by the number of month(s)/year(s) specified by the step parameter. The number can be negative which specifies the number of month(s)/year(s) to advance by.

oCalendar.Prev(), moves backward the calendar's date by 1 month/year
 oCalendar.Prev(3), moves backward the calendar's date by 3 month(s)/year(s)
 oCalendar.Prev(-1), advances the calendar's date by 1 month/year
 oCalendar.Prev(-3), advances the calendar's date by 3 month(s)/year(s)

The Refresh() method forces the control to redraw and update its layout without modifying any of its properties or data. It is typically used when the visual appearance needs to be recalculated or repainted, even though no structural or state changes were made.

For example, call Refresh() when:

• The control's container has been resized and the layout must be recalculated.
• External CSS or styling changes affect the control's appearance.
• The control becomes visible after being hidden.
• You need to ensure the UI is visually synchronized with its current internal state.

The method does not alter the control's data, options, or configuration - it only updates the rendered output.

oCalendar.Refresh(), refreshes the control

The SetSmoothDate() method smoothly changes the calendar's date to the specified value. This transition occurs over a short period, providing a visual animation from the current date to the target date. The method can be used to update the calendar programmatically while maintaining a smooth user experience, and it ensures that any related events or callbacks tied to date changes are triggered appropriately during the transition. The Date property specifies the calendar's browsing date as string in format "#MM/DD/YYYY#" (the month of the date defines the first visible month within the calendar).

"#12/31/1971#" {string}, smoothly browses December 31, 1971

The Shuffle() method randomly rearranges all elements within the control, changing their current order without altering the elements themselves. The Unshuffle() method restores the control's elements to their original order after they have been shuffled, returning them to the state defined before the shuffle operation was applied.

oCalendar.Shuffle(), randomly rearranges all elements within the control, changing their current order without altering the elements themselves
 oCalendar.Shuffle(0.25), randomly rearranges all elements within the control, changing their current order without altering the elements themselves, where each element can randomize its position up to 0.25 of its width/height

The Unshuffle() method restores the control's elements to their original order after they have been shuffled, returning them to the state defined before the shuffle operation was applied. The Shuffle() method randomly rearranges all elements within the control, changing their current order without altering the elements themselves.

oCalendar.Unshuffle(), restores the control's elements to their original order after they have been shuffled

The Update() method locks the control's paint during the callback, and invalidates the control once the method ends. The BeginUpdate/EndUpdate() methods are not required to be called when you use the Update() or Smooth() methods, because the methods already maintain performance while performing multiple changes to the control. The BeginUpdate/EndUpdate() methods are not required to be called when you use the Update() or Smooth() methods, because the methods already maintain performance while performing multiple changes to the control.

oCalendar.Update(function()
{
 // performs multiple changes to the control
});

The off() method removes a previously bound handler from a specified event, allowing you to stop listening for that event and prevent the associated actions from being executed. Also removes keyboard shortcuts previously defined using the on() method. The event name is case-insensitive and may or may not include the 'on' prefix. For example, 'click' is equivalent to 'onclick' and vice versa. If the event parameter is missing/empty/undefined, all event handlers are removed from the control. If the listener parameter is missing/empty/undefined, all handlers of the specified event are removed. If the method parameter is missing/empty/undefined, the listener[type]() function is used to compare and remove the handler(s).

The following example removes the click event handler from the control:

oCalendar.off("click");

where oCalendar is an object of Calendar type.

This sample is equivalent to:

oCalendar.Listeners.Remove("onclick");

The following example removes all event handlers from the control:

oCalendar.off();

where oCalendar is an object of Calendar type.

This sample is equivalent to:

oCalendar.Listeners.Clear();

or

oCalendar.Listeners.Remove();

The on() method adds an event listener to the specified event or defines a keyboard shortcut. The on() method enables you to listen for events and execute custom code when those events occur, or to define keyboard shortcuts that trigger specific actions within the component. You can use the on() method to enhance the interactivity and functionality of your application by responding to user actions or keyboard inputs. Use the off() method to remove previously bound event handlers or keyboard shortcuts.

The following example logs event details when the control is clicked:

oCalendar.on("click", function(oEvent)
{
  console.log(oEvent);
});

where oCalendar is an object of Calendar type.

This sample is quivalent of 

oCalendar.Listeners.Add("onclick", function (oEvent)
{
  console.log(oEvent);
});

The Collect() method retrieves the dates within a specified interval, such as all days of a week, all weeks of a month, all months of a year, and so on. It returns an array of Date objects that contains the collected values. This method provides an easy way to obtain all dates that belong to a particular time range or calendar unit.

The following example shows how to use the Collect() method to get all week-days of the week that contains January 1, 2018:

   console.log(Calendar.Collect( Date.Create(2018,1,1), null, Calendar.CollectEnum.exWeek ));
    
 or

   console.log(Calendar.Collect( Date.Create(2018,1,1), null, "week" ));

  returns 5 week-days as: Array(5) [Mon, 01 Jan 2018 00:00:00 GMT, Tue, 02 Jan 2018 00:00:00 GMT, Wed, 03 Jan 2018 00:00:00 GMT, Thu, 04 Jan 2018 00:00:00 GMT, Fri, 05 Jan 2018 00:00:00 GMT]

  while:

   console.log(Calendar.Collect( Date.Create(2018,1,1), null, Calendar.CollectEnum.exWeekAll ))

 returns 7 week-days as: Array(7) [Sun, 31 Dec 2017 00:00:00 GMT, Mon, 01 Jan 2018 00:00:00 GMT, Tue, 02 Jan 2018 00:00:00 GMT, Wed, 03 Jan 2018 00:00:00 GMT, Thu, 04 Jan 2018 00:00:00 GMT, Fri, 05 Jan 2018 00:00:00 GMT, Sat, 06 Jan 2018 00:00:00 GMT]

The onanchorclick event occurs when the user clicks an anchor element defined using the ex-HTML part, which identifies a hyperlink element embedded within the control's content. This event is specifically designed to handle interactions with hyperlinks rendered inside the calendar, allowing you to intercept the click, prevent default behavior if necessary, and execute custom actions associated with the specified anchor identifier and its options.

The following samples display information about the element being clicked:

oCalendar.Listeners.Add("onanchorclick", function (oEvent)
{
 console.log(oEvent);
})

or

oCalendar.onanchorclick = function (oEvent)
{
 console.log(oEvent);
}

where oCalendar is an object of Calendar type.

The onclick event is triggered when the user clicks or double-clicks a date displayed within the calendar control. This event allows you to detect direct user interaction with a specific date cell and respond accordingly, such as selecting the date, updating related data, opening a dialog, or performing custom logic based on the clicked value. It provides the date information and related context so the application can determine exactly which calendar item was activated and how it should be handled.

The following samples display information about the event being clicked:

oCalendar.Listeners.Add("onclick", function (oEvent)
{
 console.log(oEvent);
})

or

oCalendar.onclick = function (oEvent)
{
 console.log(oEvent);
}

where oCalendar is an object of Calendar type.

The ondatechange() event notifies your application when the control's current date changes. This event is triggered whenever the displayed or selected date is modified, whether as a result of user interaction (such as clicking a different day, navigating to another month or year, or using keyboard input) or programmatic changes made through code. It allows your application to respond immediately to date updates, for example by refreshing related data, updating linked controls, recalculating values, or synchronizing the new date with other components.

The following samples display the control's date once it changes:

oCalendar.ondatechange = function (oEvent)
{
 console.log(oEvent);
}

or

oCalendar.Listeners.Add("ondatechange", function (oEvent)
{
 console.log(oEvent);
})

where oCalendar is an object of Calendar type

The onselchange event occurs when the control's selection changes. It is triggered whenever the user selects, deselects, or modifies the current selection, whether the control supports single or multiple selection. This event also fires if the selection is changed programmatically through code. It allows your application to respond immediately to selection updates, such as refreshing related data, enabling or disabling commands, updating status information, or synchronizing the selection with other components.

The following samples display the control's selection once it changed:

oCalendar.onselchange = function (oEvent)
{
 console.log(oEvent);
}

or

oCalendar.Listeners.Add("onselchange", function (oEvent)
{
 console.log(oEvent);
})

where oCalendar is an object of Calendar type

The onselchanging event occurs just before the control's selection changes. It is triggered when the user attempts to modify the current selection, but before the new selection is actually applied. This event gives your application the opportunity to validate, adjust, or even cancel the pending selection change. For example, you can use it to prevent certain dates from being selected, enforce custom selection rules, display confirmation messages, or maintain synchronization with other components before the selection is updated.

The following samples display the control's selection before it changes:

oCalendar.onselchanging = function (oEvent)
{
 console.log(oEvent);
}

or

oCalendar.Listeners.Add("onselchanging", function (oEvent)
{
 console.log(oEvent);
})

where oCalendar is an object of Calendar type