React Calendar - Specify the Value Range

Use the min and max properties to specify the range of available dates.

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:

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