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.

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.

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