A newer version of this page is available. Switch to the current version.

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