<
New: React Scheduler from DHTMLX with Redux, TypeScript & MUI Support
DHTMLX Scheduler
React

High-Performance React Scheduler
for Building Advanced Scheduling Apps

Our multi-featured React JS scheduler delivers an extensible architecture, clean UI,
and dynamic loading - all optimized for performing in enterprise-grade React apps.

Multiple calendar views
Supports several built-in calendar views, including Day, Week, Month, and Year. The Agenda view allows working with a list of events and the Map view stores their location on Google Maps.
Recurring events
React JS Scheduler makes it possible to display recurring events, which can be duplicated daily, weekly, monthly, or yearly. You can also attach a popup editor to provide detailed parameters to set up recurrence options.
Configurable lightbox
Provides a configurable edit form (lightbox) for event details, where you can specify custom controls. The lightbox also supports validation rules, dynamic field values, and read-only mode.
Drag-and-Drop support
Users can reschedule events by simply dragging and dropping them within the calendar interface, including resizing events to adjust duration.
Real-Time collaboration
You can implement server-side support for the real-time updates module of DHTMLX Scheduler. This feature enables multiple users to view and edit the scheduler simultaneously, with all changes instantly synchronized across connected clients.

React Scheduler Key Features

Intuitive customization with React components

DHTMLX Scheduler enables you to leverage the power of React components for in-depth customization. Thus, you can modify event templates, tooltips, and lightbox forms using custom React components. By changing a single property, you replace standard elements with tailored interfaces with no direct DOM manipulations. This approach is ideal for building feature-rich scheduling interfaces adapted to your business requirements.

Advanced scheduling logic and configurable calendar views

The Scheduler component supports recurring and multisection events, dynamic loading, and intuitive drag-and-drop behavior. Whether you're managing team workflow or planning appointments, DHTMLX Scheduler handles automatic adjustments and conflict detection. You can set default calendar views, including Day, Week, Month, Map, and Resource (Units), and configure their appearance. The Timeline view, for example, allows specifying custom HTML templates for the content of cells in all modes.

Dynamic and configurable React Scheduler

Every element of your React Scheduler can be configured via dedicated props, including view modes, date formats, event rendering, and behavior options. You can dynamically pass new props to update the scheduler without reloading or re-initializing the component. This makes it easy to respond to user interactions or context changes while keeping your code modular and React-friendly.

Flexible theming and MUI compatibility

DHTMLX Scheduler offers multiple built-in themes out of the box and supports runtime theming via the skin prop. These themes facilitate easy and time-saving customization through CSS variables, allowing you to adjust colors, fonts, and other stylistic elements across the entire application with minimal modifications to the source code. Seamless integration of React Scheduler with MUI components ensures your scheduling calendar matches the rest of your UI.

Deployment covered
with every license.
100+ awards
No fees on the number
of Scheduler end-users in React
cloud-based apps.
NCI
Deutsche Bank
Siemens
Apple
Airbus
Embraer
Hilton
Tele2
Aprika
FedEx
GanttPro
Oracle
Amazon
Accenture
IBM
Cisco
Intel
Nasa
ABB
Capgemini
BBC News
NCI
Deutsche Bank
Siemens
Apple
Airbus
Embraer
Hilton
Tele2
Aprika
FedEx
GanttPro
Oracle
Amazon
Accenture
IBM
Cisco
Intel
Nasa
ABB
Capgemini
BBC News

How to Create and Use React Scheduler

Set up a powerful React Scheduler

The dedicated DHTMLX React Scheduler NPM package simplifies installation and ensures a smooth integration process. Created to work seamlessly with React 18 and higher, the Scheduler component uses native React props and state to manage configurations and data. Under the hood, the React wrapper connects with a standard DHTMLX Scheduler instance, automatically mapping props like events and settings into the proper Scheduler structures.

Integrate React Scheduler with Redux

Using Redux with DHTMLX React Scheduler helps centralize your app’s state management, ensuring clear data flow and smooth UI behavior. When event data is modified, you simply dispatch an action to update Redux, and the Scheduler re-renders accordingly. This setup simplifies the management of complex interactions and data dependencies, which is especially useful when multiple parts of your app need to respond to the same data.

Benefit from full support for JSX & TSX

React Scheduler includes comprehensive type definitions, making it a solid choice for TypeScript-based projects. Thanks to JSX and TSX support, you can leverage TypeScript's strong typing alongside React’s declarative syntax to build robust, maintainable Scheduler interfaces. This enhances both development efficiency and code quality, ensuring that your event data and Scheduler props are always correctly aligned.

Why Choose DHTMLX React Scheduler?

Simple API
Our library provides an extensive well-documented API with multiple methods, properties, and events putting you in complete control over the Scheduler's appearance and behavior. You can easily modify the date format, localization, and other configuration options you need.
Fully customizable
While working with DHTMLX React JS Scheduler, you can change virtually each of its elements, e.g. colors, text content, and scales. It’s also possible to configure a task editing popup form to include custom fields. Plus, you can apply custom styles to specific dates or date ranges.
Accessibility standards support
DHTMLX supports WAI-ARIA, high-contrast themes, and intuitive keyboard navigation. The Scheduler component is mobile-friendly and responds to touch gestures on various modern and widely used devices.
Smooth server-side integration
You can use DHTMLX Scheduler with any back-end technology thanks to the simple and efficient implementation of REST API on the server side and our DHTMLX DataProcessor library on the client side.
Get started for free
Download a free 30-day trial version of DHTMLX React Scheduler and test its functionality accompanied by our professional technical support and multiple guides.

DHTMLX Scheduler Licensing

Commercial
Total: $1299
Enterprise
Total: $2899
Ultimate
Total: $5799
License Terms Read License Agreement Read License Agreement Read License Agreement
Developers 5 20
Projects 1 5
Use in SaaS (unlimited end-users) Upon request for a fee
Use in Salesforce
Source code
Perpetual distribution rights
Support Plan
Premium Premium Ultimate
Time Period 1 year 1 year 1 year
Updates Major, minor, and maintenance updates Major, minor, and maintenance updates
Major, minor, and maintenance updates
Priority queue for bug fixing
Support requests 30 50
Response time 48h 48h 24h
Personal Account Manager
Functionality
PRO + 2 add-ons PRO + 2 add-ons PRO + 3 add-ons
9 PRO features
React Scheduler
Several scheduler instances on 1 page
Online export to PDF/PNG without watermark Free for 1 year Free for 1 year Free for 3 years
Free local PDF/PNG export module
Commercial
$1299
License Terms Read License Agreement
Developers 5
Projects 1
Use in SaaS (unlimited end-users) Upon request for a fee
Use in Salesforce
Source code
Perpetual distribution rights
Support Plan
Premium
Time Period 1 year
Updates Major, minor, and maintenance updates
Support requests 30
Response time 48h
Personal Account Manager
Functionality
PRO + 2 add-ons
9 PRO features
React Scheduler
Several scheduler instances on 1 page
Online export to PDF/PNG without watermark Free for 1 year
Free local PDF/PNG export module
Enterprise
$2899
License Terms Read License Agreement
Developers 20
Projects 5
Use in SaaS (unlimited end-users)
Use in Salesforce
Source code
Perpetual distribution rights
Support Plan
Premium
Time Period 1 year
Updates Major, minor, and maintenance updates
Support requests 50
Response time 48h
Personal Account Manager
Functionality
PRO + 2 add-ons
9 PRO features
React Scheduler
Several scheduler instances on 1 page
Online export to PDF/PNG without watermark Free for 1 year
Free local PDF/PNG export module
Ultimate
$5799
License Terms Read License Agreement
Developers
Projects
Use in SaaS (unlimited end-users)
Use in Salesforce
Source code
Perpetual distribution rights
Support Plan
Ultimate
Time Period 1 year
Updates
Major, minor, and maintenance updates
Priority queue for bug fixing
Support requests
Response time 24h
Personal Account Manager
Functionality
PRO + 3 add-ons
9 PRO features
React Scheduler
Several scheduler instances on 1 page
Online export to PDF/PNG without watermark Free for 3 years
Free local PDF/PNG export module
About
Explore DHTMLX Scheduler
DHTMLX Scheduler is a powerful JavaScript component you can integrate smoothly with React applications. The PRO edition allows creating React scheduling interfaces with a rich set of features for managing events.
Documentation
Work with documentation
To streamline your learning curve, you may access our comprehensive documentation with API references, guides, and video tutorials clearly describing the steps of working with DHTMLX Scheduler.
Samples
Use code snippets
We're constantly upgrading DHTMLX Scheduler online examples where you can explore its features, play around with the code, preview, and share your results with your team or our tech support.
GitHub
Join project on GitHub
You can explore the GitHub starter project that demonstrates how to integrate DHTMLX Scheduler natively into React applications.
Forum
Browse our community forum
In addition to providing official technical support, we moderate the forum, where you and other developers can freely discuss different component-related issues and search for a proper answer.
Demos
Try out Scheduler demo apps
We regularly update a collection of templates that demonstrate real-world scenarios for initializing and configuring DHTMLX Scheduler along with other DHTMLX UI components.
Build advanced React scheduling apps with DHTMLX
Try DHTMLX Scheduler free for 30 days and explore its full feature set to create a professional React-based scheduling solution with minimum time and effort.
NO credit card required

Latest Blog Posts

How to Achieve CSS Styling Goals in Web App Development with DHTMLX
Creating a Group of Identical Events in JS Scheduling Calendar with Drag-and-Drop
Accelerating Startup Development: Benefits and Examples of Using DHTMLX JavaScript Components
What's new
Discover the recently launched DHTMLX Scheduler versions, fresh developer guides, and tutorials with code snippets and practical tips from our tech team.