The React Scheduler, a.k.a. event calendar, facilitates almost all calendar features, thus allowing users to manage their time efficiently. It features easy resource scheduling, appointments rescheduling through editor pop-ups, drag and drop, and a resizing action. It includes wide variety of view modes with unique configuration options for each view.
The React Scheduler offers wide variety of view modes such as day, week, work week, month, agenda, month-agenda, and timeline views. It allows you to easily configure each individual view with different, view-specific options. Options also exist to display multiple days, weeks, and months by extending each view mode based on the interval count.
Data binds seamlessly with various local and remote data sources such as: JSON, RESTful services, OData services, and WCF services.
There is built-in support for better event handling, such as easier appointment creation and editing using the default event editor or through intuitive drag-and-resize actions. Easily configurable recurring events to repeat on a daily, weekly, monthly, or yearly basis. Change the look and feel of events by customizing their default appearance and style using templates.
Reschedule events and appointments easily by dragging them onto the required time slots. You can also see the live time updates over the dragged appointments.
Easily extend a Scheduler event’s time by resizing either its start or end handlers. You can also see the live time updates over the resized appointments.
Built-in support is available for assigning resources to events as well as scheduling resources. Group events and appointments based on resources or dates. Grouping resources by date provides a quick overview of each resource’s availability. You can also set different working days for each resource. A new compact layout for displaying resources on a mobile screen, brings clear visibility of events of each individual resource.
Timeline scheduling plays a major role in the React Scheduler, as it displays resources in rows in a hierarchical tree-like structure with expand and collapse options. Its feature-rich calendar options, compact resource scheduling, and clear event representation allows you to employ it in various real-time applications. You can also display the year, month, and week number text labels on each individual header row of timeline views with out-of-the-box templates.
The React Scheduler (event calendar) has a highly responsive layout and a finely optimized design for desktops, touch screens, and smart phones. It works well on all mobile phones that use iOS, Android, or Windows 8 OS.
The React Scheduler inherits almost all the calendar-specific features, such as first day of the week and timescale. Also, it allows you to customize the appearance of any part of the Scheduler interface using HTML and CSS styles.
The modern and trendy UI design of the react Scheduler makes the user interactions simpler and more efficient. It includes quick overview of event information, smooth date navigation, view navigation and easier selection of cells and events.
Real-time appointment data of Outlook and Google Calendar accurately synchronizes with our HTML5 react Scheduler. It also supports bidirectional data communication through SignalR.
As a pure JavaScript component, the event scheduler integrates easily with any web framework:
Learn More about React Scheduler
Download Free Trial
Pricing
Documentation
View Demos
Community Forums
Knowledge base
Suggest a feature
A quick start React project that helps you to create a React Scheduler that loads its appointment data from a local JSON file.
Make sure that you have the compatible versions of React and NPM in your machine before starting to work on this project.
- React versions greater than 15.5.4
- NPM or Yarn package manager
To run this application, you need to first clone the getting-started-with-the-react-scheduler repository and then navigate to its appropriate path where it has been located in your system.
To do so, open the command prompt and run the below commands one after the other.
git clone https://github.com/SyncfusionSamples/getting-started-with-the-react-scheduler scheduler-example
cd scheduler-example
Once done with downloading, next you need to install the necessary packages required to run this application locally. The npm install command will install all the needed react packages and Syncfusion packages mentioned in the package.json file into your current project. To do so, run the below command.
npm install
Run npm start command and navigate to http://localhost:3000/. The app will automatically reload if you change any of the source files.
Syncfusion's React Components library is the only suite that you will ever need to build an application since it contains over 70 high-performance, lightweight, modular, and responsive UI components in a single package. In addition to Scheduler, we provide popular React Components such as DataGrid, Charts, Diagram, and Word Processor.
Founded in 2001 and headquartered in Research Triangle Park, N.C., Syncfusion has more than 23,000 customers and more than 1 million users, including large financial institutions, Fortune 500 companies, and global IT consultancies.
Today we provide 1600+ controls and frameworks for web (Blazor, ASP.NET Core, ASP.NET MVC, ASP.NET Web Forms, JavaScript, Angular, React, Vue, and Flutter), mobile (Xamarin, Flutter, UWP and JavaScript), and desktop development (Windows Forms, WPF, WinUI(Preview), and UWP, and Flutter). We provide ready-to-deploy enterprise software for dashboards, reports, data integration, and big data processing. Many customers have saved millions in licensing fees by deploying our software.
sales@syncfusion.com | Toll Free: 1-888-9 DOTNET