All docs
V20.2
21.1 (CTP)
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.

Overview

The Calendar is a UI component that displays a calendar and allows an end user to select the required date within a specified date range.

View Demo

The following code adds a simple Calendar to your page.

jQuery
HTML
JavaScript
<div id="calendarContainer"></div>
$(function() {
    $("#calendarContainer").dxCalendar({
        value: new Date()
    });
});
Angular
HTML
TypeScript
<dx-calendar
    [(value)]="date">
</dx-calendar>
import { DxCalendarModule } from "devextreme-angular";
// ...
export class AppComponent {
    date: Date = new Date()
}
@NgModule({
    imports: [
        // ...
        DxCalendarModule
    ],
    // ...
})
Vue
App.vue
<template>
    <DxCalendar :value="date" />
</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 {
            date: new Date()
        }
    }
}
</script>
React
App.js
import React from 'react';

import 'devextreme/dist/css/dx.common.css';
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} />
        );
    }
}
export default App;

The Calendar accepts values of the following formats: dates, numeric values specifying the number of milliseconds since January 1, 1970, 00:00:00, and strings that match the following patterns: 'yyyy-MM-dd', 'yyyy-MM-ddTHH:mm:ss', 'yyyy-MM-ddTHH:mm:ssZ', or 'yyyy-MM-ddTHH:mm:ssx'. Note that in code, the format stays the same until a value of a different format is assigned to the value property. For example, numbers remain numbers until you pass a string to the value property.

To specify which day should be considered the beginning of the week, pass its index (0 - for Sunday, 1 - for Monday, and so on) to the firstDayOfWeek property.

jQuery
JavaScript
$(function() {
    $("#calendarContainer").dxCalendar({
        firstDayOfWeek: 1
    });
});
Angular
HTML
TypeScript
<dx-calendar ...
    [firstDayOfWeek]="1">
</dx-calendar>
import { DxCalendarModule } from "devextreme-angular";
// ...
export class AppComponent {
    // ...
}
@NgModule({
    imports: [
        // ...
        DxCalendarModule
    ],
    // ...
})
Vue
App.vue
<template>
    <DxCalendar :first-day-of-week="1" />
</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
    }
}
</script>
React
App.js
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 {
    render() {
        return (
            <Calendar firstDayOfWeek={1} />
        );
    }
}
export default App;
See Also