Local Data in the React Scheduler

The Syncfusion® React Scheduler component supports binding local datasets directly to display predefined data without server requests. This method enhances performance and enables offline functionality.

Assigning local JSON data

Bind a JSON array of appointment objects directly to eventSettings.dataSource. This method displays predefined events without network requests, making it suitable for static datasets and offline applications.

import { DayView, WeekView, WorkWeekView, MonthView, Scheduler, EventSettings } from '@syncfusion/react-scheduler';
import { ScheduleJsonData } from './scheduleJsonData';
    
export default function App() {
        const eventSettings: EventSettings = { dataSource: ScheduleJsonData };
        return (
            <Scheduler defaultSelectedDate={new Date(2025, 6, 15)} eventSettings={eventSettings}>
                <DayView />
                <WeekView />
                <WorkWeekView />
                <MonthView />
            </Scheduler>
        );
    };

import { DayView, WeekView, WorkWeekView, MonthView, Scheduler, EventSettings } from '@syncfusion/react-scheduler';
import { ScheduleJsonData } from './scheduleJsonData';
    
export default function App() {
        const eventSettings: EventSettings = { dataSource: ScheduleJsonData };
        return (
            <Scheduler defaultSelectedDate={new Date(2025, 6, 15)} eventSettings={eventSettings}>
                <DayView />
                <WeekView />
                <WorkWeekView />
                <MonthView />
            </Scheduler>
        );
    };

Loading data with useEffect

Use the useEffect hook to prepare or fetch data after the component mounts, then assign it to eventSettings.dataSource. This approach provides clean separation between data fetching and rendering logic.

import { useEffect, useState } from 'react';
import { DayView, WeekView, WorkWeekView, MonthView, Scheduler, EventSettings } from '@syncfusion/react-scheduler';
        
export default function App() {
        const [scheduleData, setScheduleData] = useState([]);
        useEffect(() => {
            const processedData = [
            {
                Id: 1,
                Subject: 'Meeting - 1',
                StartTime: new Date(2025, 9, 30, 10, 0),
                EndTime: new Date(2025, 9, 30, 12, 30)
            }, {
                Id: 2,
                Subject: 'Meeting - 2',
                StartTime: new Date(2025, 9, 30, 11, 0),
                EndTime: new Date(2025, 9, 30, 14, 30)
            }
            ];
            setScheduleData(processedData);
        }, []);
        const eventSettings: EventSettings = { dataSource: scheduleData };
        return (
            <Scheduler defaultSelectedDate={new Date(2025, 9, 28)} eventSettings={eventSettings} >
                <DayView />
                <WeekView />
                <WorkWeekView />
                <MonthView />
            </Scheduler>
        );
    };

import { useEffect, useState } from 'react';
import { DayView, WeekView, WorkWeekView, MonthView, Scheduler, EventSettings } from '@syncfusion/react-scheduler';
        
export default function App() {
        const [scheduleData, setScheduleData] = useState([]);
        useEffect(() => {
            const processedData = [
            {
                Id: 1,
                Subject: 'Meeting - 1',
                StartTime: new Date(2025, 9, 30, 10, 0),
                EndTime: new Date(2025, 9, 30, 12, 30)
            }, {
                Id: 2,
                Subject: 'Meeting - 2',
                StartTime: new Date(2025, 9, 30, 11, 0),
                EndTime: new Date(2025, 9, 30, 14, 30)
            }
            ];
            setScheduleData(processedData);
        }, []);
        const eventSettings: EventSettings = { dataSource: scheduleData };
        return (
            <Scheduler defaultSelectedDate={new Date(2025, 9, 28)} eventSettings={eventSettings} >
                <DayView />
                <WeekView />
                <WorkWeekView />
                <MonthView />
            </Scheduler>
        );
    };

Binding with React state

Connect the Scheduler's eventSettings.dataSource to a React state variable to enable real-time data synchronization. State changes automatically reflect in the Scheduler, making this ideal for dynamic applications with real-time editing, filtering, or data updates.

Local Data in the React Scheduler

Assigning local JSON data

Loading data with useEffect

Binding with React state

Enhance your React apps with Syncfusion components today