React Calendar - Specify Zoom Level

To specify which calendar view (month, year, decade or century) should be displayed at first, set the zoomLevel property.

App.js
  • import React from 'react';
  •  
  • import 'devextreme/dist/css/dx.light.css';
  •  
  • import Calendar from 'devextreme-react/calendar';
  •  
  • class App extends React.Component {
  • render() {
  • return (
  • <Calendar zoomLevel="year" />
  • );
  • }
  • }
  • export default App;

To make certain calendar views inaccessible, specify the maxZoomLevel and minZoomLevel properties. For example, the following code enables the month, year and decade calendar views leaving the century view behind.

App.js
  • import React from 'react';
  •  
  • import 'devextreme/dist/css/dx.light.css';
  •  
  • import Calendar from 'devextreme-react/calendar';
  •  
  • class App extends React.Component {
  • render() {
  • return (
  • <Calendar
  • minZoomLevel="decade"
  • maxZoomLevel="month" />
  • );
  • }
  • }
  • export default App;
See Also