How to Build a Scheduling Dashboard in React Scheduler?

This section explains how to build a scheduling dashboard in React Scheduler component.

Below are the general steps to build a scheduling dashboard using a popular solution like create-react-app

Steps to Build a Scheduling Dashboard in React:

1. Set up the React project
   If you don’t have a React app set up yet, create one using:

npx create-react-app my-app --template typescript
cd my-app
npm start 

2. Install the Scheduler library
   To add the Syncfusion React Scheduler package, run the following command:

npm install @syncfusion/ej2-react-schedule --save

3. Basic Scheduler Setup
   Now, open the src/App.tsx file and import the necessary components from Syncfusion’s Scheduler package:

import React from 'react';
import './App.css';
import { ScheduleComponent, Day, Week, WorkWeek, Month, Agenda, Inject } from '@syncfusion/ej2-react-schedule';

function App() {
 return (
   <div className="App">
    <ScheduleComponent height='550px'>
      <Inject services={[Day, Week, WorkWeek, Month, Agenda]} />
    </ScheduleComponent>
  </div>
 );
}

export default App;

4. Adding CSS reference
   Add scheduler component’s styles as given below in src/App.css.

@import "../node_modules/@syncfusion/ej2-base/styles/bootstrap5.css";
@import "../node_modules/@syncfusion/ej2-buttons/styles/bootstrap5.css";
@import "../node_modules/@syncfusion/ej2-calendars/styles/bootstrap5.css";
@import "../node_modules/@syncfusion/ej2-dropdowns/styles/bootstrap5.css";
@import "../node_modules/@syncfusion/ej2-inputs/styles/bootstrap5.css";
@import "../node_modules/@syncfusion/ej2-lists/styles/bootstrap5.css";
@import "../node_modules/@syncfusion/ej2-navigations/styles/bootstrap5.css";
@import "../node_modules/@syncfusion/ej2-popups/styles/bootstrap5.css";
@import "../node_modules/@syncfusion/ej2-splitbuttons/styles/bootstrap5.css";
@import "../node_modules/@syncfusion/ej2-react-schedule/styles/bootstrap5.css";

5. Load Events in Scheduler
   To add the predefined events for Scheduler, map the events data to dataSource property for eventSettings.

 const data = [
   {
   Id: 1,
   Subject: 'Paris',
   StartTime: new Date(2023, 1, 15, 10, 0),
   EndTime: new Date(2023, 1, 15, 12, 30),
 },
 {
   Id: 2,
   Subject: 'Germany',
   StartTime: new Date(2023, 1, 17, 12, 0),
   EndTime: new Date(2023, 1, 17, 13, 30),
 },
 {
   Id: 3,
   Subject: 'England',
   StartTime: new Date(2023, 1, 13, 9, 0),
   EndTime: new Date(2023, 1, 13, 11, 0),
 },
];

 const eventSettings = { dataSource: data }

 return (
   <div className="App">
    <ScheduleComponent height='550px' selectedDate={new Date(2023, 1, 15)} eventSettings={eventSettings}>
      <Inject services={[Day, Week, WorkWeek, Month, Agenda]} />
    </ScheduleComponent>
  </div>
 ); 

8. Run the Application
   Finally, run the application in the browser using the following command.

npm start 

Github sample: https://github.com/SyncfusionExamples/getting-started-with-the-react-scheduler-component

See also,

• Data binding: https://ej2.syncfusion.com/react/documentation/schedule/data-binding
• Views: https://ej2.syncfusion.com/react/documentation/schedule/views
• Cell customization: https://ej2.syncfusion.com/react/documentation/schedule/cell-customization
  

Conclusion

I hope you have enjoyed learning about how to build a scheduling dashboard in React Scheduler.

You can refer to our React Scheduler feature tour page to know about its other groundbreaking feature representations and documentation, and how to quickly get started for configuration specifications. You can also explore our React Scheduler example to understand how to create and manipulate data.

For current customers, you can check out our components from the License and Downloads page. If you are new to Syncfusion, you can try our 30-day free trial to check out our other controls.

If you have any queries or require clarifications, please let us know in the comments section below. You can also contact us through our support forums, Direct-Trac, or feedback portal. We are always happy to assist you!