React Calendar - 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