<
Meet the Brand-New JavaScript Booking Widget for Making Appointments Online
React

Responsive React Scheduler

Multi-featured React JS scheduler component to integrate into your app. Comes with 10 views, clean UI, and drag-and-drop support.

Try DHTMLX Scheduler in React JS Live Demo

Open a demo on desktop
DHTMLX Scheduler is the top choice to build powerful scheduling web apps.
Capterra Shortlist 2024
GetApp Category Leaders 2024
Software Advice Front Runners 2024
Best Meets Requirements
High Performer EMEA
Users Most Likely To Recommend
Easiest to Use

How to Create React Scheduler Example

4 steps to start with DHTMLX Scheduler in React JS:
1.
Create a React component for Scheduler and import Scheduler and its CSS file.
2.
Create the Scheduler instance in the useEffect method and add the Scheduler configuration there.
3.
Destroy the Scheduler Instance in the same method in the return function to clean up when Scheduler is no longer needed.
4.
Return the container for the Scheduler.

Key Features of DHTMLX React JS Calendar Scheduler

PRO edition
Add-on
Standard edition
Timeline view
With the Timeline view, you can visualize events horizontally with separate timelines located from left to right. The vertical axis is easy to customize and display any resources, including people, rooms, or equipment.
Timeline view
Custom HTML content in all Timeline modes
The PRO version of the React JS appointment scheduler allows setting a custom template for cell content in all modes of the Timeline view. For example, you can set it to display a total of all the assigned tasks to each employee in the parent row of the Tree mode.
Custom HTML content in all Timeline modes
Units view (multiple resource view)
With the help of the Units view, you can display the timescale on the vertical Y-axis and arrange resources on the horizontal X-axis. It comes in handy while creating task planners for accurately managing daily staff timetables.
Units view (multiple resource view)
Timeline view
PDF/PNG export module
We suggest you download a standalone module to export schedulers to PDF, PNG, Excel, and iCal formats. Having installed it directly to your server or as a Docker image, you’ll secure your data from sending it to any external services.
PDF/PNG export module
PDF/PNG export module
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.
Recurring events
Day, Week, Month, and Year views
The default DHTMLX Scheduler comes with 6 calendar views. Day, Week, Month, and Year views are the most basic and widely used ones. The Agenda view allows working with a list of events and the Map view stores their location on Google Maps.
Day, Week, Month, and Year views
Theme customization
DHTMLX Scheduler includes a variety of built-in themes such as Terrace, Dark, Material, Flat, Contrast Black, and Contrast White. 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.
Theme customization
Recurring events

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 Scheduler and test its functionality accompanied by our professional technical support and multiple guides.

What Customers Say

I'm pretty happy with the software because it's very easy and quick to implement. I love to have fast results, it definitely helps. It was very useful to see the Scheduler demos on your website. These demos helped us to see how things are working in real-case scenarios. I think that your demos that looked and worked really well made me choose DHTMLX.
Jeroen van Lierop
Product manager at the Netherlands-based startup QN Projects
We use the Scheduler product and I see DHTMLX as an accelerator of our business to reduce the time to market to launch new features. With it, I can focus my team on the specific points and business rules. DHTMLX Scheduler meets all my needs. In addition, the components are beautiful, fast and reliable.
Mauricio F.
Small business
We found that the flexibility inherent in this product (dhtmlxScheduler) along with the incredibly responsive and helpful support team was key in successfully delivering what was requested.
WebAuthor Team
Government agency
We've been using DHTMLX libraries since 2005/06. It's pretty simple. You guys build controls we couldn't possibly do. Before that, we used straight HTML. Using DHTMLX lets us concentrate primarily on the functional aspects of the application and be able to deliver a modern sophisticated user interface without having to build those kinds of controls ourselves.
David Basri
President of the American software company Point Enterprises, Inc.
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
Work with 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.
Free trial
Get a 30-day free trial
We advise you to download a trial version of DHTMLX Scheduler and integrate it into your project to make sure it works properly. Our support team will answer your questions during the trial period.
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.
Official tech support
Learn about DHTMLX support
Being a DHTMLX client, trial user, and open-source developer, you can always rely on assistance from our team. Please, visit our tech support page to know about the different support levels we provide.
Integrations
Integrate Scheduler with anything
Apart from React, DHTMLX Scheduler can be integrated with Angular, Vue.js, Salesforce, ASP.Net, Node.js, and any other technology you’re working with.

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
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
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
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
Several scheduler instances on 1 page
Online export to PDF/PNG without watermark Free for 3 years
Free local PDF/PNG export module
Get a 70% Discount on DHTMLX Scheduler for Your Startup
One-year license for DHTMLX JavaScript Scheduler to help you cut your time-to-market and deliver top-notch software solutions.