{"id":14153,"date":"2025-07-30T10:05:36","date_gmt":"2025-07-30T07:05:36","guid":{"rendered":"https:\/\/dhtmlx.com\/blog\/?p=14153"},"modified":"2025-11-05T13:44:48","modified_gmt":"2025-11-05T10:44:48","slug":"meet-new-dhtmlx-react-scheduler","status":"publish","type":"post","link":"https:\/\/dhtmlx.com\/blog\/meet-new-dhtmlx-react-scheduler\/","title":{"rendered":"New DHTMLX React Scheduler for Modern Stacks with Redux, TypeScript, and MUI Support"},"content":{"rendered":"

React developers, we heard you! Following the enthusiastic reception of our React Gantt chart, we are thrilled to announce the release of DHTMLX React Scheduler<\/a>! This novelty brings the full power of our time-proven JavaScript Scheduler to the React ecosystem. In this release article, we’ll introduce its core capabilities and show how it fits into your React stack.<\/p>\n\n\t\t

\n\t\t
\n\t\t
\n\t\t
Download DHTMLX React Scheduler<\/div>\n\t\t
Integrate a comprehensive scheduling calendar in React projects with ease<\/div>\n <\/div>\n\t\t \n \n
\n Get free trial<\/a>\n <\/div>\n \n <\/div>\n\t\t<\/div>\n\t\n
What to Expect from DHTMLX React Scheduler<\/h5>\n

The decision to release the new Scheduler solution comes in response to a strong demand for advanced scheduling functionalities that can be seamlessly integrated into modern React applications.
\n\"React<\/p>\n

Just like its React Gantt<\/a> counterpart, the new Scheduler is optimized for the latest React versions (starting from v18), thereby allowing you to benefit from the latest React features and performance optimizations. This approach will make it easier for your team to enhance and maintain the scheduling app as requirements evolve.<\/p>\n

Now, it is time to explore what exactly makes DHTMLX React Scheduler a valuable addition to a developer toolkit.<\/p>\n

Scheduler That Feels Native to React<\/h5>\n

The React Scheduler is designed with React developers in mind, meaning it works the React way. You can build powerful multi-view scheduling calendars using well-known React concepts like props and state. To be specific, props allow you to configure Scheduler elements and dynamically pass data into the component, while state handles real-time updates and user interaction tracking. This approach ensures a smooth and responsive scheduling experience in React apps.<\/p>\n

The React Scheduler is installed via npm. Here is an example of importing and rendering the Scheduler:<\/p>\n

import<\/span> {<\/span> useEffect,<\/span> useRef,<\/span> useState }<\/span> from 'react'<\/span>;<\/span>
\nimport<\/span> ReactScheduler,<\/span> {<\/span> SchedulerConfig }<\/span> from "@dhx\/react-scheduler"<\/span>;<\/span>
\nimport<\/span> "@dhx\/react-scheduler\/dist\/react-scheduler.css"<\/span>;<\/span>
\nimport<\/span> ".\/styles.css"<\/span>
\nimport<\/span> {<\/span> demoData }<\/span> from ".\/DemoData"<\/span>;<\/span>
\n
\nexport<\/span> default<\/span> function<\/span> BasicScheduler(<\/span>)<\/span> {<\/span>
\n  const<\/span> [<\/span>events,<\/span> setEvents]<\/span> =<\/span> useState(<\/span>demoData.events<\/span>)<\/span>;<\/span>
\n  const<\/span> config:<\/span> SchedulerConfig =<\/span> {<\/span>
\n    first_hour:<\/span> 8<\/span>,<\/span>
\n    last_hour:<\/span> 20<\/span>,<\/span>
\n    time_step:<\/span> 15<\/span>
\n  }<\/span>;<\/span>
\n
\n  return<\/span> (<\/span>
\n    <<\/span>div style=<\/span>{<\/span>{<\/span> height:<\/span> '100vh'<\/span> }<\/span>}<\/span>><\/span>
\n      <<\/span>ReactScheduler
\n        events=<\/span>{<\/span>events}<\/span>
\n        config=<\/span>{<\/span>config}<\/span>
\n        date=<\/span>{<\/span>new<\/span> Date<\/span>(<\/span>"2025-08-15T00:00:00Z"<\/span>)<\/span>}<\/span>
\n        view=<\/span>{<\/span>"month"<\/span>}<\/span>
\n      \/><\/span>
\n    <\/<\/span>div><\/span>
\n  )<\/span>;<\/span>
\n}<\/span>;<\/span><\/div><\/div>\n

The new Scheduler supports React Components, so you can personalize various parts of the scheduling solution by creating custom, reusable UI elements. Additionally, it adheres to React’s declarative approach, making data handling predictable and your code easier to maintain.<\/p>\n

Extensive Functional Capabilities<\/h5>\n

New UI components are often introduced with basic capabilities, leaving room for further development based on user feedback. But DHTMLX React Scheduler was designed to be a step ahead from the start. This novelty is already geared up for complex scheduling scenarios, featuring advanced views such as Timeline, Resource (Units), and the ability to block and highlight time slots. How is it possible? You simply adopt the extensive feature set of our JavaScript Scheduler<\/a> via its API.
\n\"Resource<\/p>\n

Simplified Customization and Multiple Styling Options<\/h5>\n

The new React Scheduler stands out with its strong customization and styling flexibility, giving ample opportunities to tailor every part of the scheduling UI to any project requirements. Using custom React components, you can easily modify the default look and feel settings of events, tooltips, editing form (Lightbox), and other Scheduler elements.
\n\"Dark<\/p>\n

For instance, you can use custom React components in Scheduler templates:<\/p>\n

const<\/span> templates:<\/span> SchedulerTemplates =<\/span> useMemo(<\/span>(<\/span>)<\/span> =><\/span> (<\/span>{<\/span>
\n  event_class:<\/span> (<\/span>start,<\/span> end,<\/span> event)<\/span> =><\/span> {<\/span>
\n    return<\/span> (<\/span>"templates-"<\/span> +<\/span> event.classname<\/span>)<\/span> ||<\/span> ''<\/span>;<\/span>
\n  }<\/span>,<\/span>
\n  event_text:<\/span> (<\/span>start,<\/span> end,<\/span> event)<\/span> =><\/span> {<\/span>
\n    return<\/span> <<\/span>EventTextBox event=<\/span>{<\/span>event}<\/span> \/>;<\/span>
\n  }<\/span>
\n}<\/span>)<\/span>,<\/span> [<\/span>]<\/span>)<\/span>;<\/span><\/div><\/div>\n

React components are also effective for fine-tuning editing capabilities in your scheduling calendar. The default editing form (Lightbox) can be replaced with a custom React-based modal or other component, as explained in the documentation<\/a>.<\/p>\n

In the example below, you can see a custom editor integrated in the React Scheduler:
\n\"React<\/p>\n

Most of the styling needs in React Scheduler can be covered with a set of built-in themes that can be activated via the skin<\/strong> prop and changed dynamically, as shown in the code sample below:<\/p>\n

export<\/span> default<\/span> function<\/span> BasicScheduler(<\/span>)<\/span> {<\/span>
\n  const<\/span> [<\/span>events,<\/span> setEvents]<\/span> =<\/span> useState(<\/span>demoData.events<\/span>)<\/span>;<\/span>
\n  const<\/span> [<\/span>theme,<\/span> setTheme]<\/span> =<\/span> useState<<\/span>string><\/span>(<\/span>"terrace"<\/span>)<\/span>;<\/span>
\n
\n  const<\/span> switchTheme =<\/span> (<\/span>)<\/span> =><\/span> {<\/span>
\n    setTheme(<\/span>(<\/span>prevTheme)<\/span> =><\/span> (<\/span>prevTheme ===<\/span> "terrace"<\/span> ?<\/span> "dark"<\/span> :<\/span> "terrace"<\/span>)<\/span>)<\/span>;<\/span>
\n  }<\/span>;<\/span>
\n
\n  return<\/span> (<\/span>
\n    <<\/span>div style=<\/span>{<\/span>{<\/span> height:<\/span> '100vh'<\/span> }<\/span>}<\/span>><\/span>
\n      <<\/span>Button variant=<\/span>"contained"<\/span> onClick=<\/span>{<\/span>(<\/span>)<\/span> =><\/span> switchTheme(<\/span>)<\/span>}<\/span>><\/span>Switch Theme<\/<\/span>Button><\/span>
\n      <<\/span>ReactScheduler
\n        theme=<\/span>{<\/span>theme}<\/span>
\n        events=<\/span>{<\/span>events}<\/span>
\n        date=<\/span>{<\/span>new<\/span> Date<\/span>(<\/span>"2025-08-15T00:00:00Z"<\/span>)<\/span>}<\/span>
\n        view=<\/span>{<\/span>"month"<\/span>}<\/span>
\n      \/><\/span>
\n    <\/<\/span>div><\/span>
\n  )<\/span>;<\/span>
\n}<\/span>;<\/span><\/div><\/div>\n

Any targeted styling changes in existing Scheduler themes can be easily introduced using CSS variables:<\/p>\n

:<\/span>root<\/span> {<\/span>
\n  --dhx-scheduler-base-colors-primary<\/span>:<\/span> #01579B<\/span>;<\/span>
\n  --dhx-scheduler-event-background<\/span>:<\/span> #33B579<\/span>;<\/span>
\n  --dhx-scheduler-event-color<\/span>:<\/span> #FFFFFF<\/span>;<\/span>
\n  --dhx-scheduler-base-colors-border<\/span>:<\/span> #B0B8CD<\/span>;<\/span>
\n  --dhx-scheduler-border-radius<\/span>:<\/span>2px<\/span>;<\/span>
\n}<\/span><\/div><\/div>\n

Many developers use the Material UI library to solve various styling issues in their React projects. If you are one of them, you don\u2019t need to change the habit since our new React Scheduler supports Material UI. <\/p>\n

With such a powerful styling toolkit, any design objective in your scheduling calendar becomes achievable.<\/p>\n

Designed to Work Smoothly with TypeScript, Redux, and SSR Frameworks<\/h5>\n

The new DHTMLX React Scheduler is designed to seamlessly integrate into the modern development environments used with React. It offers out-of-the-box compatibility with TypeScript, including full support for JSX and TSX, enabling static typing and better maintainability. You can also count on Redux for centralized state management of complex Scheduler data, providing better control over data flow and ensuring predictable updates within your React solutions.<\/p>\n

const<\/span> dataBridge =<\/span> {<\/span>
\n  save:<\/span> (<\/span>entity:<\/span> string,<\/span> action:<\/span> string,<\/span> payload:<\/span> any,<\/span> id:<\/span> any)<\/span> =><\/span> {<\/span>
\n    if<\/span> (<\/span>entity !==<\/span> "event"<\/span>)<\/span> return<\/span>;<\/span>
\n
\n    switch<\/span> (<\/span>action)<\/span> {<\/span>
\n      case<\/span> "update"<\/span>:<\/span>
\n        dispatch(<\/span>updateEvent(<\/span>payload)<\/span>)<\/span>;<\/span>
\n        break<\/span>;<\/span>
\n      case<\/span> "create"<\/span>:<\/span>
\n        dispatch(<\/span>createEvent(<\/span>payload)<\/span>)<\/span>;<\/span>
\n        break<\/span>;<\/span>
\n      case<\/span> "delete"<\/span>:<\/span>
\n        dispatch(<\/span>deleteEvent(<\/span>id)<\/span>)<\/span>;<\/span>
\n        break<\/span>;<\/span>
\n      default<\/span>:<\/span>
\n        console.warn<\/span>(<\/span>`Unknown action:<\/span> ${<\/span>action}<\/span>`)<\/span>;<\/span>
\n        return<\/span>;<\/span>
\n    }<\/span>
\n  }<\/span>,<\/span>
\n}<\/span>;<\/span>
\n
\n  return<\/span> (<\/span>
\n    <<\/span>div style=<\/span>{<\/span>{<\/span> height:<\/span> "100%"<\/span>,<\/span> display:<\/span> "flex"<\/span>,<\/span> flexDirection:<\/span> "column"<\/span> }<\/span>}<\/span>><\/span>
\n      {<\/span>Toolbar}<\/span>
\n
\n      <<\/span>ReactScheduler
\n        \u2026
\n        data=<\/span>{<\/span>dataBridge}<\/span>
\n      \/><\/span>
\n    <\/<\/span>div><\/span>
\n  )<\/span>;<\/span><\/div><\/div>\n

This in its turn paves the way to powerful features such as multi user synchronization or undo\/redo functionality.
\n\"React
\nIn addition, our React Scheduler plays well with popular SSR frameworks like Next.js and Remix without additional configuration. These frameworks will help significantly enhance performance, which is critical for business apps with comprehensive scheduling UIs, while also improving routing flexibility and supporting better scalability. <\/p>\n

These integrations will empower React teams to move fast and build advanced scheduling apps with confidence.<\/p>\n

One Price for JavaScript + React Scheduler Pack<\/h5>\n

There is one final point that we must address in the release article, namely, the way the new React Scheduler will be distributed on the market. If you purchase the React Scheduler under a Commercial, Enterprise, or Ultimate license, you’ll receive a package that includes both the JavaScript and React versions for the price of one<\/strong>.<\/p>\n

Already using our JavaScript Scheduler and have an active license? Great! Just send your license number to contact@dhtmlx.com, and we’ll give you access to the React version as well.<\/p>\n

These are the essential points about DHTMLX React Scheduler. Check out the documentation<\/a> for more details.<\/p>\n

If you want to explore the capabilities of DHTMLX React Scheduler before adding it to your project, a free 30-day trial version<\/a> is available for downloading.<\/p>\n

You are welcome to share your thoughts about DHTMLX React Scheduler in the comments section below.<\/p>\n

Related Materials<\/h5>\n