React Scheduler - Getting Started

Overview

DevExtreme React Scheduler is a component that represents scheduled data and allows a user to manage it. Scheduler can display data on different views: day, week, and month. Support for controlled and uncontrolled state modes allows you to manage Scheduler state manually or using a state management library like Redux. The DevExtreme Scheduler component has a composable and extendable plugin-based architecture. Currently, the Scheduler is provided with Material-UI rendering and theming.

Installation

Install the dx-react-scheduler package and its dependencies using the following command:

npm i --save @devexpress/dx-react-core @devexpress/dx-react-scheduler

This package does not contain visual components. In the examples below, visual components are rendered using the Material-UI package.

• Material-UI

  npm i --save @devexpress/dx-react-scheduler-material-ui

  Make sure that the Material-UI dependencies are installed and properly configured. Check the Material-UI's Getting Started article for configuration details.

Supported Browsers

React Scheduler supports the latest stable releases of all major browsers: Google Chrome, Mozilla Firefox, Safari, Opera, and Microsoft Edge.

React Scheduler can work in other browsers if they use the latest version of WebKit, Blink, or Gecko, whether directly or via the platform's web view API. Some of these browsers may require adding polyfills. However, such browsers, including Internet Explorer, may not work correctly.

Polyfills

React Scheduler uses the latest web platform standards, and cannot support older browsers like IE11 and Android 4. Use the ES2015 (ES6) polyfill to support these browsers. We recommend BABEL Polyfill, but you can use an alternative.

Use the Scheduler Component

The Scheduler requires a view plugin and the Appointments plugin to display the specified data:

import * as React from 'react';

import Scheduler from 'devextreme-react/scheduler';

License

DevExtreme licensing.