JavaScript/jQuery Calendar Options
accessKey
The value of this option will be passed to the accesskey
attribute of the HTML element that underlies the widget.
dateSerializationFormat
Specifies the date-time value serialization format. Use it only if you do not specify the value at design time.
Without a value, the widget cannot detect its format. In this case, specify the dateSerializationFormat option that supports the following formats:
"yyyy-MM-dd"
- a local date"yyyy-MM-ddTHH:mm:ss"
- local date and time"yyyy-MM-ddTHH:mm:ssZ"
- the UTC date and time"yyyy-MM-ddTHH:mm:ssx"
- date and time with a timezone
This option applies only if the forceIsoDateParsing field is set to true in the global configuration object.
disabledDates
This option accepts an array of dates...
$(function () { $("#calendarContainer").dxCalendar({ // ... disabledDates: [ new Date("07/1/2017"), new Date("07/2/2017"), new Date("07/3/2017") ] }); });
... or a function that specifies whether the currently checked date is disabled.
$(function () { $("#calendarContainer").dxCalendar({ disabledDates: function (args) { var dayOfWeek = args.date.getDay(), month = args.date.getMonth(), isWeekend = args.view === "month" && (dayOfWeek === 0 || dayOfWeek === 6 ), isMarch = (args.view === "year" || args.view === "month") && month === 2; if(isWeekend || isMarch) { return true; } } }); });
See Also
elementAttr
Specifies the attributes to be attached to the widget's root element.
You can configure this option in an ASP.NET MVC Control as follows:
@(Html.DevExtreme().WidgetName() .ElementAttr("class", "class-name") // ===== or ===== .ElementAttr(new { @id = "elementId", @class = "class-name" }) // ===== or ===== .ElementAttr(new Dictionary<string, object>() { { "id", "elementId" }, { "class", "class-name" } }) )
@(Html.DevExtreme().WidgetName() _ .ElementAttr("class", "class-name") ' ===== or ===== .ElementAttr(New With { .id = "elementId", .class = "class-name" }) ' ===== or ===== .ElementAttr(New Dictionary(Of String, Object) From { { "id", "elementId" }, { "class", "class-name" } }) )
firstDayOfWeek
The option can take on a value from 0 to 6.
- 0 - Sunday
- 1 - Monday
- 2 - Tuesday
- 3 - Wednesday
- 4 - Thursday
- 5 - Friday
- 6 - Saturday
By default, the value provided by the culture settings is used.
When using the widget as an ASP.NET MVC Control, specify this option using the FirstDayOfWeek
enum. This enum accepts the following values: Sunday
, Monday
, Tuesday
, Wednesday
, Thursday
, Friday
and Saturday
.
height
This option accepts a value of one of the following types:
Number
The height in pixels.String
A CSS-accepted measurement of height. For example,"55px"
,"80%"
,"auto"
,"inherit"
.Function
A function returning either of the above. For example:JavaScriptheight: function() { return window.innerHeight / 1.5; }
The widget's minimum height depends on the current theme. If the height option value is less than the minimum height, the widget height is set to the minimum value, ignoring the specified value. Below is a list of minimum calendar sizes depending on the current theme.
- Generic - 280x270
- Android - 290x260
- iOS - 260x260
- Windows - 278x278
isValid
In Knockout apps, you may need to inform a user about an error that occurred during the validation of a view model field. For this purpose, set the editor's isValid option to the isValid value of the dxValidator that validates this field. To show an error message, set the editor's validationError option to the dxValidator's validationError value.
var editorValue = ko.observable("").extend({ dxValidator: { validationRules: [{ type: 'required', message: 'Specify this value' }] } }); var viewModel = { editorOptions: { value: editorValue, isValid: editorValue.dxValidator.isValid, validationError: editorValue.dxValidator.validationError } };
The editor's isValid and validationError options should also be specified when using a custom validation engine. In this instance, the validation result will be displayed for the editor by the means of the DevExtreme Validation UI.
See Also
maxZoomLevel
Specifies the maximum zoom level of the calendar.
When using the widget as an ASP.NET MVC Control, specify this option using the CalendarZoomLevel
enum. This enum accepts the following values: Month
, Year
, Decade
and Century
.
See Also
minZoomLevel
Specifies the minimum zoom level of the calendar.
When using the widget as an ASP.NET MVC Control, specify this option using the CalendarZoomLevel
enum. This enum accepts the following values: Month
, Year
, Decade
and Century
.
See Also
name
Specify this option if the widget lies within an HTML form that will be submitted.
If you configure the widget as an ASP.NET MVC Control, use this option to bind the widget to a model property. If this model property contains Data Annotation validation attributes, you get the client-side validation enabled by default.
onDisposing
A handler for the disposing event. Executed when the widget is removed from the DOM using the remove(), empty(), or html() jQuery methods only.
Name | Type | Description |
---|---|---|
component |
The widget's instance. |
|
element |
The widget's container. It is an HTML Element or a jQuery Element when you use jQuery. |
|
model |
The model data. Available only if you use Knockout. |
onInitialized
Name | Type | Description |
---|---|---|
component |
The widget's instance. |
|
element |
The widget's container. It is an HTML Element or a jQuery Element when you use jQuery. |
onOptionChanged
Name | Type | Description |
---|---|---|
name |
The option's short name. |
|
model |
The model data. Available only if you use Knockout. |
|
element |
The widget's container. It is an HTML Element or a jQuery Element when you use jQuery. |
|
component |
The widget's instance. |
|
fullName |
The option's full name. |
|
value | any |
The option's new value. |
onValueChanged
Name | Type | Description |
---|---|---|
component |
The widget's instance. |
|
element |
The widget's container. It is an HTML Element or a jQuery Element when you use jQuery. |
|
model |
The model data. Available only if Knockout is used. |
|
value |
The widget's new value. |
|
previousValue |
The widget's previous value. |
|
jQueryEvent |
Use 'event' instead. The jQuery event that caused the handler execution. Deprecated in favor of the event field. |
|
event | Event (jQuery or EventObject) |
The event that caused the handler execution. It is a dxEvent or a jQuery.Event when you use jQuery. |
rtlEnabled
When this option is set to true, the widget 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 });
See Also
- Right-to-Left Support Demo: DataGrid | Navigation Widgets | Editors
tabIndex
The value of this option will be passed to the tabindex
attribute of the HTML element that underlies the widget.
validationError
Specifies information on the validation error when using a custom validation engine. Should be changed at runtime along with the isValid option.
validationMessageMode
Specifies how the message about the validation rules that are not satisfied by this editor's value is displayed.
The following option values are possible:
- auto
The tooltip with the message is displayed when the editor is in focus. - always
The tooltip with the message is not hidden when the editor loses focus.
When using the widget as an ASP.NET MVC Control, specify this option using the ValidationMessageMode
enum. This enum accepts the following values: Auto
and Always
.
value
You can specify the current widget 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 widget 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 widget value is changed by an end-user, the new value is saved in the same format as the initial value.
width
This option accepts a value of one of the following types:
Number
The width in pixels.String
A CSS-accepted measurement of width. For example,"55px"
,"80%"
,"auto"
,"inherit"
.Function
A function returning either of the above. For example:JavaScriptwidth: function() { return window.innerWidth / 1.5; }
The widget has a minimum width that depends on the current theme. If the width option value is less than the minimum width, the widget width is set to the minimum value, ignoring the specified value. Below is a list of minimum calendar sizes depending on the current theme.
- Generic - 280x270
- Android - 290x260
- iOS - 260x260
- Windows - 278x278
zoomLevel
Zoom level determines the size of a date range displayed on a single calendar page.
When using the widget as an ASP.NET MVC Control, specify this option using the CalendarZoomLevel
enum. This enum accepts the following values: Month
, Year
, Decade
and Century
.
If you have technical questions, please create a support ticket in the DevExpress Support Center.