JavaScript/jQuery Calendar Options
accessKey
The value of this property will be passed to the accesskey
attribute of the HTML element that underlies the UI component.
activeStateEnabled
The UI component switches to the active state when users press down the primary mouse button. When this property is set to true, the CSS rules for the active state apply. You can change these rules to customize the component.
Use this property when you display the component on a platform whose guidelines include the active state change for UI components.
cellTemplate
If a cell is a week number, the date
field value is undefined
.
See Also
dateSerializationFormat
Date-time serialization involves date-time value conversion into a string format for storage or transmission. To ensure proper format detection, specify this property.
Use LDML patterns to pass custom format strings to this property.
For instance, you can specify the following patterns:
"yyyy-MM-dd"
A date."yyyy-MM-ddTHH:mm:ss"
Local date and time."yyyy-MM-ddTHH:mm:ssZ"
Date and time in UTC."yyyy-MM-ddTHH:mm:ssx"
,"yyyy-MM-ddTHH:mm:ssxx"
,"yyyy-MM-ddTHH:mm:ssxxx"
Date and time with a timezone.
You can use this property only if you do not specify the initial value. dateSerializationFormat is calculated automatically if you pass a value in the initial configuration.
If you specify this property, the value will be a string, not a Date object.
If you use API to change the value, make sure that the value has the same format that you specified in this property.
This property takes effect only if the forceIsoDateParsing field is set to true in the global configuration object.
See Also
disabledDates
This property accepts an array of dates:
- $(function() {
- $("#calendarContainer").dxCalendar({
- // ...
- disabledDates: [
- new Date("07/1/2017"),
- new Date("07/2/2017"),
- new Date("07/3/2017")
- ]
- });
- });
Alternatively, pass a function to disabledDates. This function should define the rules that determine whether the checked date is disabled. A separate set of rules should target every view individually.
- $(function() {
- $("#calendarContainer").dxCalendar({
- // ...
- disabledDates: function(args) {
- const dayOfWeek = args.date.getDay();
- const month = args.date.getMonth();
- const isWeekend = args.view === "month" && (dayOfWeek === 0 || dayOfWeek === 6 );
- const isMarch = (args.view === "year" || args.view === "month") && month === 2;
- return isWeekend || isMarch;
- }
- });
- });
See Also
elementAttr
Specifies the global attributes to be attached to the UI component's container element.
height
This property accepts a value of one of the following types:
Number
The height in pixels.String
A CSS-accepted measurement of height. For example,"55px"
,"20vh"
,"80%"
,"inherit"
.Function (deprecated since v21.2)
Refer to the W0017 warning description for information on how you can migrate to viewport units.
isValid
See Also
onDisposing
A function that is executed before the UI component is disposed of.
Name | Type | Description |
---|---|---|
model | any |
The model data. Available only if you use Knockout. |
element |
The UI component's container. It is an HTML Element or a jQuery Element when you use jQuery. |
|
component |
The UI component's instance. |
onInitialized
Name | Type | Description |
---|---|---|
element |
The UI component's container. It is an HTML Element or a jQuery Element when you use jQuery. |
|
component |
The UI component's instance. |
onOptionChanged
Name | Type | Description |
---|---|---|
value | any |
The modified property's new value. |
previousValue | any |
The UI component's previous value. |
name |
The modified property if it belongs to the first level. Otherwise, the first-level property it is nested into. |
|
model | any |
Model data. Available only if you use Knockout. |
fullName |
The path to the modified property that includes all parent properties. |
|
element |
The UI component's container. It is an HTML Element or a jQuery Element when you use jQuery. |
|
component |
The UI component's instance. |
onValueChanged
A function that is executed after the UI component's value is changed.
Name | Type | Description |
---|---|---|
value |
The UI component's new value. |
|
previousValue |
The UI component's previous value. |
|
model | any |
Model data. Available only if Knockout is used. |
event | Event (jQuery or EventObject) |
The event that caused the function to execute. It is an EventObject or a jQuery.Event when you use jQuery. This field is undefined if the value is changed programmatically. |
element |
The UI component's container. It is an HTML Element or a jQuery Element when you use jQuery. |
|
component |
The UI component's instance. |
rtlEnabled
When this property is set to true, the UI component text flows from right to left, and the layout of elements is reversed. To switch the entire application/site to the right-to-left representation, assign true to the rtlEnabled field of the object passed to the DevExpress.config(config) method.
- DevExpress.config({
- rtlEnabled: true
- });
tabIndex
The value of this property will be passed to the tabindex
attribute of the HTML element that underlies the UI component.
validationError
Information on the broken validation rule. Contains the first item from the validationErrors array.
validationMessageMode
Specifies how the message about the validation rules that are not satisfied by this editor's value is displayed.
validationMessagePosition
Specifies the position of a validation message relative to the component. The validation message describes the validation rules that this component's value does not satisfy.
validationStatus
The following table illustrates the validation status indicators:
validationStatus | Indicator |
---|---|
"pending" |
![]() |
"valid" |
![]() |
"invalid" |
![]() |
When you assign "invalid" to validationStatus, you can also use the validationErrors array to set an error message as shown below:
- $(function() {
- const calendar = $("#calendarContainer").dxCalendar({
- // ...
- }).dxCalendar("instance");
- function setInvalidStatus(message) {
- calendar.option({
- validationStatus: "invalid",
- validationErrors: [{ message: message }]
- });
- }
- });
value
You can specify the current UI component value using any of the following formats.
Date
Specifies the date directly.Number
Specifies the date using a timestamp (total milliseconds since 1970/01/01).String
Specifies the date using a string value. The UI component supports the following formats of a date string.- "yyyy-MM-dd" (for example, "2017-03-06")
- "yyyy-MM-ddTHH:mm:ss" (for example, "2017-03-27T16:54:48")
- "yyyy-MM-ddTHH:mm:ssZ" (for example, "2017-03-27T13:55:41Z")
- "yyyy-MM-ddTHH:mm:ssx" (for example, "2017-03-27T16:54:10+03")
If the UI component value is changed by an end user, the new value is saved in the same format as the initial value.
weekNumberRule
Specifies a week number calculation rule.
This property can take on one of the following values:
firstDay
The first week of a year is the week that contains January 1.firstFourDays
The first week of a year is the week that starts on one of the first four weekdays: Monday, Tuesday, Wednesday, or Thursday. This rule is defined by the ISO 8601 standard. If the first week of the year begins on a Friday, Saturday, or Sunday, this week is considered the last week of the previous year.fullWeek
The first week of a year is the week that begins with a day that matches the firstDayOfWeek option value.auto
(default)
The week calculation rule depends on the locale. If a week starts on Monday, thefirstFourDays
rule is applied. Otherwise, thefirstDay
rule is in effect.
If you want to implement your own week number calculation rule, use the cellTemplate function:
- $(function() {
- let lastDateOfWeek;
- function getWeekNumber(date, firstDayOfWeek) {
- // Implement your own week calculation logic
- }
- function getCellTemplate(data) {
- if (data.view === 'month') {
- if (!data.date) {
- cssClass = 'week-number';
- data.text = getWeekNumber(lastDateOfWeek, 0).toString();
- }
- else {
- lastDateOfWeek = data.date;
- }
- }
- return `<span>${data.text}</span>`;
- }
- $('#calendar-container').dxCalendar({
- value: new Date(2000, 0, 1),
- showWeekNumbers: true,
- cellTemplate: getCellTemplate
- });
- });
width
This property accepts a value of one of the following types:
Number
The width in pixels.String
A CSS-accepted measurement of width. For example,"55px"
,"20vw"
,"80%"
,"auto"
,"inherit"
.Function (deprecated since v21.2)
Refer to the W0017 warning description for information on how you can migrate to viewport units.
If you have technical questions, please create a support ticket in the DevExpress Support Center.