Getting Started with the React Scheduler

To create a new Vite project, refer to the Vite documentation. Once that Vite project is ready to run with default settings, let's add the React Scheduler component to the project.

Installing Syncfusion® React package

To use the Scheduler component, install the @syncfusion/react-scheduler package:

npm install @syncfusion/react-scheduler

npm install @syncfusion/react-scheduler

Adding CSS reference

Import the Scheduler component's required CSS references as follows in src/App.css.

@import '../node_modules/@syncfusion/react-base/styles/material.css';
@import "../node_modules/@syncfusion/react-buttons/styles/material.css";
@import "../node_modules/@syncfusion/react-splitbuttons/styles/material.css";
@import "../node_modules/@syncfusion/react-popups/styles/material.css";
@import "../node_modules/@syncfusion/react-inputs/styles/material.css";
@import "../node_modules/@syncfusion/react-navigations/styles/material.css";
@import "../node_modules/@syncfusion/react-calendars/styles/material.css";
@import "../node_modules/@syncfusion/react-scheduler/styles/material.css";

@import '../node_modules/@syncfusion/react-base/styles/material.css';
@import "../node_modules/@syncfusion/react-buttons/styles/material.css";
@import "../node_modules/@syncfusion/react-splitbuttons/styles/material.css";
@import "../node_modules/@syncfusion/react-popups/styles/material.css";
@import "../node_modules/@syncfusion/react-inputs/styles/material.css";
@import "../node_modules/@syncfusion/react-navigations/styles/material.css";
@import "../node_modules/@syncfusion/react-calendars/styles/material.css";
@import "../node_modules/@syncfusion/react-scheduler/styles/material.css";

Adding Scheduler component

To include the Scheduler component in your application, import the Scheduler from @syncfusion/react-scheduler package in App.tsx.

import { Scheduler } from "@syncfusion/react-scheduler";

import { Scheduler } from "@syncfusion/react-scheduler";

Add the Scheduler component to your application and include the required components as its children.

import { DayView, WeekView, WorkWeekView, MonthView, Scheduler } from '@syncfusion/react-scheduler';';
    
        export default function App() {
        return (
           <Scheduler>
                <DayView />
                <WeekView />
                <WorkWeekView />
                <MonthView />
            </Scheduler>
        );
    }

import { DayView, WeekView, WorkWeekView, MonthView, Scheduler } from '@syncfusion/react-scheduler';';
    
        export default function App() {
        return (
           <Scheduler>
                <DayView />
                <WeekView />
                <WorkWeekView />
                <MonthView />
            </Scheduler>
        );
    }

The Scheduler component allows displaying appointment data by binding it to the eventSettings property. Appointments can be defined with fields such as Subject, StartTime, EndTime, and Location. These entries are rendered within the appropriate time slots based on the selected view such as Day, Week, or Month.

import { DayView, WeekView, WorkWeekView, MonthView, Scheduler, EventSettings } from '@syncfusion/react-scheduler';
    
        export default function App() {
        const data = [
            {
                Id: 1,
                Subject: 'Weekly Team Status Meeting',
                StartTime: new Date(2025, 10, 17, 0, 30),
                EndTime: new Date(2025, 10, 17, 2, 0),
                Location: 'Conference Room A',
                Description: 'Regular team status meeting'
            }
        ];
        const eventSettings: EventSettings = { dataSource: data };
        return (
            <Scheduler eventSettings={eventSettings}>
                <DayView />
                <WeekView />
                <WorkWeekView />
                <MonthView />
            </Scheduler>
        );
    };

import { DayView, WeekView, WorkWeekView, MonthView, Scheduler, EventSettings } from '@syncfusion/react-scheduler';
    
        export default function App() {
        const data = [
            {
                Id: 1,
                Subject: 'Weekly Team Status Meeting',
                StartTime: new Date(2025, 10, 17, 0, 30),
                EndTime: new Date(2025, 10, 17, 2, 0),
                Location: 'Conference Room A',
                Description: 'Regular team status meeting'
            }
        ];
        const eventSettings: EventSettings = { dataSource: data };
        return (
            <Scheduler eventSettings={eventSettings}>
                <DayView />
                <WeekView />
                <WorkWeekView />
                <MonthView />
            </Scheduler>
        );
    };

Setting date

By default, the Scheduler displays the current system date. Scheduler supports both controlled and uncontrolled modes to set a selected date. For uncontrolled mode, to display a specific date instead, assign the desired value to the defaultSelectedDate property. This sets the initial visible date when the Scheduler is rendered. For controlled mode, use the selectedDate and onSelectedDateChange properties to control the selected date in Scheduler.

import { DayView, WeekView, WorkWeekView, MonthView, Scheduler, EventSettings } from '@syncfusion/react-scheduler';
    
        export default function App() {
        const data = [
            {
                Id: 1,
                Subject: 'Weekly Team Status Meeting',
                StartTime: new Date(2025, 10, 17, 0, 30),
                EndTime: new Date(2025, 10, 17, 2, 0),
                Location: 'Conference Room A',
                Description: 'Regular team status meeting'
            }
        ];
        const eventSettings: EventSettings = { dataSource: data };
        return (
            <Scheduler eventSettings={eventSettings} defaultSelectedDate={new Date(2025, 10, 18)}>
                <DayView />
                <WeekView />
                <WorkWeekView />
                <MonthView />
            </Scheduler>
        );
    };

import { DayView, WeekView, WorkWeekView, MonthView, Scheduler, EventSettings } from '@syncfusion/react-scheduler';
    
        export default function App() {
        const data = [
            {
                Id: 1,
                Subject: 'Weekly Team Status Meeting',
                StartTime: new Date(2025, 10, 17, 0, 30),
                EndTime: new Date(2025, 10, 17, 2, 0),
                Location: 'Conference Room A',
                Description: 'Regular team status meeting'
            }
        ];
        const eventSettings: EventSettings = { dataSource: data };
        return (
            <Scheduler eventSettings={eventSettings} defaultSelectedDate={new Date(2025, 10, 18)}>
                <DayView />
                <WeekView />
                <WorkWeekView />
                <MonthView />
            </Scheduler>
        );
    };

Setting view

The Scheduler component supports multiple view modes such as Day, Week, Workweek and Month. These views determine how appointments are displayed and navigated. The Scheduler supports both controlled and uncontrolled modes to set a view. For uncontrolled mode, assign the desired name to the defaultView property. For controlled mode, use the view and onViewChange properties. This helps tailor the Schedule layout based on the context or use case.

import { DayView, WeekView, WorkWeekView, MonthView, Scheduler, EventSettings } from '@syncfusion/react-scheduler';
    
        export default function App() {
        const data = [
            {
                Id: 1,
                Subject: 'Weekly Team Status Meeting',
                StartTime: new Date(2025, 10, 17, 0, 30),
                EndTime: new Date(2025, 10, 17, 2, 0),
                Location: 'Conference Room A',
                Description: 'Regular team status meeting'
            }
        ];
        const eventSettings: EventSettings = { dataSource: data };
        return (
            <Scheduler eventSettings={eventSettings} defaultSelectedDate={new Date(2025, 10, 18)} defaultView='Month'>
                <DayView />
                <WeekView />
                <WorkWeekView />
                <MonthView />
            </Scheduler>
        );
    };

import { DayView, WeekView, WorkWeekView, MonthView, Scheduler, EventSettings } from '@syncfusion/react-scheduler';
    
        export default function App() {
        const data = [
            {
                Id: 1,
                Subject: 'Weekly Team Status Meeting',
                StartTime: new Date(2025, 10, 17, 0, 30),
                EndTime: new Date(2025, 10, 17, 2, 0),
                Location: 'Conference Room A',
                Description: 'Regular team status meeting'
            }
        ];
        const eventSettings: EventSettings = { dataSource: data };
        return (
            <Scheduler eventSettings={eventSettings} defaultSelectedDate={new Date(2025, 10, 18)} defaultView='Month'>
                <DayView />
                <WeekView />
                <WorkWeekView />
                <MonthView />
            </Scheduler>
        );
    };

Run the project

To run the project, use the following command:

npm run dev

npm run dev