As you may already know, DevExtreme ships with a native React Scheduler component – one that seamlessly integrates with Material-UI. 
If you’ve yet to explore the capabilities of our React Scheduler, please take a moment to visit our new React-specific Product website.
New Website, Documentation and Live Demos
Our new React-powered website includes detailed product descriptions, extensive documentation and various samples that help demonstrate product features/usage scenarios.
Among the most compelling items on the new website is our CodeSandbox button. This boots up a development experience at CodeSandbox for the code of the example under review. CodeSandbox also loads all necessary libraries and assets into the environment so you can start experimenting immediately.
Native React
Our React Scheduler is a native reactive component and it leverages all things React.
The component implements various reactive concepts like Controlled and Uncontrolled modes, Redux integration, Live updates and reactive properties. Because of its seamless integration with Material-UI, the component looks much like Google Calendar (which is also built according to the Material Design Style guide).
Though a highly advanced UI control - we’ve tried to keep things straightforward with our highly flexible customization features.
Appointment Editing UI
Our React Scheduler provides multiple ways to add, edit and delete appointments. Based on plugins you configure, the Scheduler can open a form and allow users to edit every single detail of an appointment, including resources and recurrence patterns.
To quickly modify event time, you can drag appointments within a schedule and resize appointments to adjust event duration. You can also enable a delete action inside the tooltip.
Appointment Resources UI
A very popular use case for a Scheduler component is resource management (employees, equipment, etc).
As you might expect, our React Scheduler fully supports resource display within its container. Event resources are displayed using different colors (we use Google Material Design Colors by default). You can easily customize resource colors via the component’s API. You can even use Material-UI colors colors as needed. Resource information will be displayed in the appointment form as well as the tooltip.
Grouping UI
Another powerful feature is the ability to group appointments. This is useful when dealing with lots of appointments and resources.
When using our Scheduler’s grouping UI, the component will group appointments by resource and date, providing vertical and horizontal groups.
Tooltip UI
The Scheduler can include a tooltip with additional information about individual appointments. This feature was inspired by Google Calendar and does not require additional code.
To help address a broad range of usage scenarios, our React Scheduler gives you several ways to customize tooltips.
View Switching UI
To help you build the best possible user experience, our Scheduler makes it easy to switch between the following calendar views:
- Day View
- Week View
- Workweek View (from Week View)
- Month View
- Timeline View (coming soon - track its progress)
Date Navigation UI
Our Scheduler component ships with a date navigator – one that allows you and your users to view a different time frame based upon the currently selected View. The Today button navigates you to the current date. This feature includes built-in
calendar and shortcut buttons.
Light, Dark and Custom Material Design Themes
All DevExtreme reactive controls ship with 2 Material Design themes - Light and Dark. Of course, you can always create your own themes should requirements dictate.
Additional Features
In addition to the features outlined above, our React Scheduler is able to visualize different appointment types including:
- All Day
- Recurring
- Zero-time (reminders without duration)
Our Current Time Indicator is a small visual element for current time.
And yes, the component supports Typescript and can be easily localized.
Let us know what you think
Please feel free to comment below, or follow this link to our GitHub repository. Your feedback is always appreciated.