DevExtreme React - Specify the Value Range

Use the min and max options to specify the range of available dates.

jQuery
JavaScript
$(function() {
    $("#calendarContainer").dxCalendar({
        value: new Date(),
        min: new Date(2000, 1, 1),
        max: new Date(2020, 12, 31)
    });
});
Angular
HTML
TypeScript
<dx-calendar
    [(value)]="date"
    [min]="minDate"
    [max]="maxDate">
</dx-calendar>
import { DxCalendarModule } from 'devextreme-angular';
// ...
export class AppComponent {
    date: Date = new Date();
    minDate: Date = new Date(2000, 1, 1);
    maxDate: Date = new Date(2020, 12, 31);
}
@NgModule({
    imports: [
        // ...
        DxCalendarModule
    ],
    // ...
})

If you need to disable specific dates, use the disabledDates option. You can specify either an array of predefined dates or a function that determines whether a date is available. For example, the following code disables weekends:

jQuery
JavaScript
$(function() {
    $("#calendarContainer").dxCalendar({
        value: new Date(),
        disabledDates: function (data) {
            var day = data.date.getDay();
            var isWeekend = (day === 0 || day === 6);
            return data.view === "month" && isWeekend;
        })
    });
});
Angular
HTML
TypeScript
<dx-calendar
    [(value)]="date"
    [disabledDates]="disabledDates">
</dx-calendar>
import { DxCalendarModule } from 'devextreme-angular';
// ...
export class AppComponent {
    date: Date = new Date();
    disabledDates (data) {
        let day = data.date.getDay();
        let isWeekend = (day === 0 || day === 6);
        return data.view === "month" && isWeekend;
    };
}
@NgModule({
    imports: [
        // ...
        DxCalendarModule
    ],
    // ...
})

View Demo

See Also