React Calendar Props

See Also

• Configure a Widget: Angular | Vue | React | jQuery | AngularJS | Knockout | ASP.NET MVC 5 | ASP.NET Core

The value of this option will be passed to the accesskey attribute of the HTML element that underlies the widget.

This option is used when the widget is displayed on a platform whose guidelines include the active state change for widgets.

See Also

• Customize Cell Appearance
• Custom Templates

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.

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") 
        ]
    });
});

<dx-calendar ...
    [disabledDates]="disabledDates">
</dx-calendar>

import { Component } from '@angular/core';

@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css']
})
export class AppComponent {
    disabledDates: Date[] = [ 
        new Date("07/1/2017"),  
        new Date("07/2/2017"), 
        new Date("07/3/2017") 
    ];
}

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';

import { DxCalendarModule } from 'devextreme-angular';

@NgModule({
    declarations: [
        AppComponent
    ],
    imports: [
        BrowserModule,
        DxCalendarModule
    ],
    providers: [ ],
    bootstrap: [AppComponent]
})
export class AppModule { }

<template>
    <DxCalendar ...
        :disabled-dates="disabledDates"
    />
</template>

<script>
import 'devextreme/dist/css/dx.common.css';
import 'devextreme/dist/css/dx.light.css';

import DxCalendar from 'devextreme-vue/calendar';

export default {
    components: {
        DxCalendar
    },
    data() {
        return {
            disabledDates: [ 
                new Date("07/1/2017"),  
                new Date("07/2/2017"), 
                new Date("07/3/2017") 
            ]
        }
    }
}
</script>

import React from 'react';

import 'devextreme/dist/css/dx.common.css';
import 'devextreme/dist/css/dx.light.css';

import Calendar from 'devextreme-react/calendar';

class App extends React.Component {
    constructor() {
        this.disabledDates = [ 
            new Date("07/1/2017"),  
            new Date("07/2/2017"), 
            new Date("07/3/2017") 
        ];
    }
    render() {
        return (
            <Calendar ...
                disabledDates={this.disabledDates} 
            />
        );
    }
}
export default App;

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

            return isWeekend || isMarch;
        }
    });
});

<dx-calendar ...
    [disabledDates]="disableDates">
</dx-calendar>

import { Component } from '@angular/core';

@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css']
})
export class AppComponent {
    disableDates(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;

        return isWeekend || isMarch;
    }
}

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';

import { DxCalendarModule } from 'devextreme-angular';

@NgModule({
    declarations: [
        AppComponent
    ],
    imports: [
        BrowserModule,
        DxCalendarModule
    ],
    providers: [ ],
    bootstrap: [AppComponent]
})
export class AppModule { }

<template>
    <DxCalendar ...
        :disabled-dates="disableDates"
    />
</template>

<script>
import 'devextreme/dist/css/dx.common.css';
import 'devextreme/dist/css/dx.light.css';

import DxCalendar from 'devextreme-vue/calendar';

export default {
    components: {
        DxCalendar
    },
    methods: {
        disableDates(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;

            return isWeekend || isMarch;
        }
    }
}
</script>

import React from 'react';

import 'devextreme/dist/css/dx.common.css';
import 'devextreme/dist/css/dx.light.css';

import Calendar from 'devextreme-react/calendar';

class App extends React.Component {
    disableDates(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;

        return isWeekend || isMarch;
    }
    render() {
        return (
            <Calendar ...
                disabledDates={this.disableDates} 
            />
        );
    }
}
export default App;

View Demo

See Also

• Specify the Value Range

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.

Use the FirstDayOfWeek enum to specify this option when the widget is used as an ASP.NET MVC 5 Control or a DevExtreme-Based ASP.NET Core Control. This enum accepts the following values: Sunday, Monday, Tuesday, Wednesday, Thursday, Friday, and Saturday.

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%", "inherit".

• Function
  A function returning either of the above. For example:

  JavaScript

  height: function() {
      return window.innerHeight / 1.5;
  }

See Also

• Knockout Only - Validate a View Model
• Use a Custom Validation Engine

View Demo

See Also

• Specify the Value Range

Use the CalendarZoomLevel enum to specify this option when the widget is used as an ASP.NET MVC 5 Control or a DevExtreme-Based ASP.NET Core Control. This enum accepts the following values: Month, Year, Decade, and Century.

See Also

• Specify Zoom Level

View Demo

See Also

• Specify the Value Range

Use the CalendarZoomLevel enum to specify this option when the widget is used as an ASP.NET MVC 5 Control or a DevExtreme-Based ASP.NET Core Control. This enum accepts the following values: Month, Year, Decade, and Century.

See Also

• Specify Zoom Level

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 5 Control or a DevExtreme-Based ASP.NET Core 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.

See Also

• Get a Widget Instance in Angular | AngularJS | Knockout | Vue | React

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

The value of this option will be passed to the tabindex attribute of the HTML element that underlies the widget.

See Also

• Use a Custom Validation Engine

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.

Use the ValidationMessageMode enum to specify this option when the widget is used as an ASP.NET MVC 5 Control or a DevExtreme-Based ASP.NET Core Control. This enum accepts the following values: Auto and Always.

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.

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:

  JavaScript

  width: function() {
      return window.innerWidth / 1.5;
  }

Zoom level determines the size of a date range displayed on a single calendar page.

Use the CalendarZoomLevel enum to specify this option when the widget is used as an ASP.NET MVC 5 Control or a DevExtreme-Based ASP.NET Core Control. This enum accepts the following values: Month, Year, Decade, and Century.

View Demo