All docs
V21.1
21.2
21.1
20.2
20.1
19.2
The page you are viewing does not exist in version 19.2. This link will take you to the root page.
19.1
The page you are viewing does not exist in version 19.1. This link will take you to the root page.
18.2
The page you are viewing does not exist in version 18.2. This link will take you to the root page.
18.1
The page you are viewing does not exist in version 18.1. This link will take you to the root page.
17.2
The page you are viewing does not exist in version 17.2. This link will take you to the root page.

Specify the Value Range

Use the min and max properties 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
    ],
    // ...
})
Vue
App.vue
<template>
    <DxCalendar
        :value="date"
        :min-date="minDate"
        :max-date="maxDate"
    />
</template>

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

import DxCalendar from 'devextreme-vue/calendar';

export default {
    components: {
        DxCalendar
    },
    data() {
        return {
            date: new Date(),
            minDate: new Date(2000, 1, 1),
            maxDate: new Date(2020, 12, 31)
        }
    }
}
</script>
React
App.js
import React from 'react';

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

import Calendar from 'devextreme-react/calendar';

const date = new Date();
const minDate = new Date(2000, 1, 1);
const maxDate = new Date(2020, 12, 31);

class App extends React.Component {
    render() {
        return (
            <Calendar
                defaultValue={date}
                minDate={minDate}
                maxDate={maxDate} />
        );
    }
}
export default App;

If you need to disable specific dates, use the disabledDates property. 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) {
            const day = data.date.getDay();
            const isWeekend = (day === 0 || day === 6);
            return data.view === "month" && isWeekend;
        })
    });
});
Angular
HTML
TypeScript
<dx-calendar
    [(value)]="date"
    [disabledDates]="isDateDisabled">
</dx-calendar>
import { DxCalendarModule } from "devextreme-angular";
// ...
export class AppComponent {
    date: Date = new Date();
    isDateDisabled({ date, view }) {
        const day = date.getDay();
        const isWeekend = (day === 0 || day === 6);
        return view === "month" && isWeekend;
    };
}
@NgModule({
    imports: [
        // ...
        DxCalendarModule
    ],
    // ...
})
Vue
App.vue
<template>
    <DxCalendar
        :value="date"
        :min-date="minDate"
        :max-date="maxDate"
    />
</template>

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

import DxCalendar from 'devextreme-vue/calendar';

export default {
    components: {
        DxCalendar
    },
    data() {
        return {
            date: new Date()
        }
    },
    methods: {
        isDateDisabled({ date, view }) {
            const day = date.getDay();
            const isWeekend = (day === 0 || day === 6);
            return view === "month" && isWeekend;
        }
    }
}
</script>
React
App.js
import React from 'react';

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

import Calendar from 'devextreme-react/calendar';

const date = new Date();

class App extends React.Component {
    render() {
        return (
            <Calendar
                defaultValue={date}
                disabledDates={this.isDateDisabled} />
        );
    }

    isDateDisabled({ date, view }) {
        const day = date.getDay();
        const isWeekend = (day === 0 || day === 6);
        return view === "month" && isWeekend;
    }
}
export default App;

View Demo

See Also