JavaScript/jQuery Scheduler - View Switcher

View switcher is a scheduler element used for quick switching between views.

View Switcher

To specify what views are available within the switcher, use the views property.

App.js
  • import React from 'react';
  •  
  • import 'devextreme/dist/css/dx.light.css';
  •  
  • import Scheduler from 'devextreme-react/scheduler';
  •  
  • const views = ["day", "week", "agenda"];
  •  
  • class App extends React.Component {
  • render() {
  • return (
  • <Scheduler views={views} />
  • );
  • }
  • }
  • export default App;

On mobile devices, the view switcher is displayed as a drop-down menu.

Drop-down View Switcher

To use the drop-down menu on all types of devices, assign true to the useDropDownViewSwitcher property; to use tabs - assign false.

App.js
  • import React from 'react';
  •  
  • import 'devextreme/dist/css/dx.light.css';
  •  
  • import Scheduler from 'devextreme-react/scheduler';
  •  
  • class App extends React.Component {
  • render() {
  • return (
  • <Scheduler useDropDownViewSwitcher={true} />
  • );
  • }
  • }
  • export default App;
See Also