React Scheduler - Getting Started

NOTE
DevExtreme Reactive Components - Maintenance Support Mode
DevExtreme Reactive component libraries are in maintenance support mode . No new features/capabilities will be added to DevExtreme Reactive component libraries in the future (end-of-life: December 2025).

Developing a React App? Check out our updated React UI Suite instead.
If you are considering React for an upcoming software project or have used DevExtreme Reactive components in the past, please visit  js.devexpress.com/react  and download a free trial version of DevExtreme React UI - over 70+ components designed to help you build your best, without limits or compromise.

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:

License

DevExtreme licensing.