Syncfusion AI Assistant

How can I help you?

Getting Started with React Schedule Component

20 May 20268 minutes to read

This section briefly explains how to create React Scheduler component and configure its available functionalities in React environment.

Ready to streamline your Syncfusion® React development? Discover the full potential of Syncfusion® React components with Syncfusion® AI Coding Assistant. Effortlessly integrate, configure, and enhance your projects with intelligent, context-aware code suggestions, streamlined setups, and real-time insights—all seamlessly integrated into your preferred AI-powered IDEs like VS Code, Cursor, Syncfusion® CodeStudio and more. Explore Syncfusion® AI Coding Assistant

To get start quickly with React Scheduler using the Create React App, you can check on this video:

Prerequisites

System requirements for Syncfusion® React UI components

Installation and configuration

To build a high-performance React application with a smooth development workflow, Vite is the recommended tool. Unlike traditional setups such as Create React App, Vite is designed for speed and simplicity, providing near-instant startup and lightning-fast updates during development. For detailed steps, refer to the Vite installation instructions

Run the following command to set up a React application:

For TypeScript environment:

npm create vite@latest my-app -- --template react-ts

For JavaScript environment:

npm create vite@latest my-app -- --template react

After running the above commands, the project will be created and all required dependencies will be installed automatically.

Adding Syncfusion® Schedule package

All the available Essential® JS 2 packages are published in npmjs.com public registry.
To install Scheduler component, use the following command

cd my-app
npm install @syncfusion/ej2-react-schedule --save

Adding CSS reference

Add scheduler component’s styles as given below in src/App.css.

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

To refer App.css in the application then import it in the src/App.tsx file.

Initialize the Schedule and configure module injection

Import the Scheduler component into your app.tsx file and inject the required modules. Since each view in the Scheduler is maintained as a separate module, you need to inject the modules required for the desired views.

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

function App () {
  return (
    <ScheduleComponent>
      <Inject services={[Day, Week, WorkWeek, Month, Agenda]} />
    </ScheduleComponent>
  );
};

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

function App () {
  return (
    <ScheduleComponent>
      <Inject services={[Day, Week, WorkWeek, Month, Agenda]} />
    </ScheduleComponent>
  );
};

export default App;

Run the following command in the terminal to start the development server. This compiles the project, launches a local server, and allowing you to view changes in real time during development.

npm run dev

Above demo will display the empty scheduler.

Populating appointments

To populate the Schedule with appointments, you can use either a local JSON array or a remote data service. Assign the data to the dataSource property, which is part of the eventSettings configuration.

The StartTime and EndTime fields are mandatory for each appointment. The following example uses default fields like Id, Subject, StartTime, and EndTime.

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

function App () {
  const data = [
    {
      Id: 1,
      Subject: 'Meeting - 1',
      StartTime: new Date(new Date().setHours(9,0,0)),
      EndTime: new Date(new Date().setHours(10,0,0)),
    }
  ];

  const eventSettings: EventSettingsModel = { dataSource: data };

  return (
    <ScheduleComponent eventSettings={eventSettings}>
      <Inject services={[Day, Week, WorkWeek, Month, Agenda]} />
    </ScheduleComponent>
  );
};

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

function App () {
  const data = [
    {
      Id: 1,
      Subject: 'Meeting - 1',
      StartTime: new Date(new Date().setHours(9,0,0)),
      EndTime: new Date(new Date().setHours(10,0,0)),
    }
  ];

  const eventSettings = { dataSource: data };

  return (
    <ScheduleComponent eventSettings={eventSettings}>
      <Inject services={[Day, Week, WorkWeek, Month, Agenda]} />
    </ScheduleComponent>
  );
};

export default App;

Setting date

Scheduler usually displays the system date as its current date. To change the current date of Scheduler with specific date, define the selectedDate property.

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

function App () {
  return (
    <ScheduleComponent selectedDate={new Date(2026, 4, 18)}>
      <Inject services={[Day, Week, WorkWeek, Agenda, Month]} />
    </ScheduleComponent>
  )
};

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

function App () {
  return (
    <ScheduleComponent selectedDate={new Date(2026, 4, 18)}>
      <Inject services={[Day, Week, WorkWeek, Agenda, Month]} />
    </ScheduleComponent>
  )
};

export default App;

Setting view

Scheduler displays week view by default. To change the current view, define the applicable view name to the currentView property. The default applicable view names are,

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

function App () {
  return (
    <ScheduleComponent currentView='Day'>
      <Inject services={[Day, Week, WorkWeek, Agenda, Month]} />
    </ScheduleComponent>
  )
};

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

function App () {
  return (
    <ScheduleComponent currentView='Day'>
      <Inject services={[Day, Week, WorkWeek, Agenda, Month]} />
    </ScheduleComponent>
  )
};

export default App;

See also