React Scheduler Component (DayPilot)

Tutorials

What features are available?

To see all the features please see:

  • Scheduler documentation: The documentation includes detailed description of all the features.

  • Live demos: The demos are built using the pure JavaScript version of the Scheduler but all the features are also available in the React version.

How to start using the React Scheduler component?

Install DayPilot React NPM package. The React package (daypilot-pro-react) is available at npm.daypilot.org. This package is a part DayPilot Pro for JavaScript, a library of advanced scheduling components for web applications.

NPM installation command:

npm install https://npm.daypilot.org/daypilot-pro-react/trial/2024.1.5890.tar.gz

Make sure that you are using the latest version from npm.daypilot.org.

How to add the React Scheduler component to your application?

You can use the Scheduler component by simply including <DayPilotScheduler> tag in your JSX:

import React from 'react';
import {DayPilotScheduler} from "daypilot-pro-react";

const Scheduler = () => {
    return (
        <DayPilotScheduler />
    );
}

export default Scheduler;

How to configure the React Scheduler?

react scheduler component configuration resources

The React Scheduler allows you to customize the appearance and behavior using configuration properties. All properties that are mentioned in the Scheduler JavaScript API reference are available in React as well.

You can specify the properties directly using <DayPilotScheduler> attributes:

import React from 'react';
import {DayPilotScheduler} from "daypilot-pro-react";

const Scheduler = () => {
    return (
        <div>
            <DayPilotScheduler
                startDate={"2024-12-01"}
                days={31}
                scale={"Day"}
                timeHeaders={[{groupBy: "Month"}, {groupBy: "Day", format: "d"}]}
                resources={[
                    {name: "Resource 1", id: "R1"},
                    {name: "Resource 2", id: "R2"},
                    {name: "Resource 3", id: "R3"},
                ]}
            />
        </div>
    );
}

export default Scheduler;

You can also load the properties from the state object using destructuring assignment:

import React, { useState } from 'react';
import {DayPilotScheduler} from "daypilot-pro-react";

const Scheduler = () => {
    const [config, setConfig] = useState({
        startDate: "2024-12-01",
        days: 31,
        scale: "Day",
        timeHeaders: [
            { groupBy: "Month" },
            { groupBy: "Day", format: "d" }
        ],
        resources: [
            { name: "Resource 1", id: "R1" },
            { name: "Resource 2", id: "R2" },
            { name: "Resource 3", id: "R3" },
        ]
    });

    return (
        <div>
            <DayPilotScheduler {...config} />
        </div>
    );
}

export default Scheduler;

How to access the DayPilot.Scheduler API?

react scheduler component message

In addition to automatic change detection available in React you can also use the direct API methods to control the React Scheduler behavior.

In order to get access to the methods, you need a reference to DayPilot.Scheduler object. The Scheduler object is accessible using control property of the DayPilotScheduler React component class.

The following example stores the DayPilot.Scheduler object as this.scheduler property of the Scheduler component:

import React, { useState } from 'react';
import { DayPilotScheduler } from "daypilot-pro-react";

const Scheduler = () => {
    const [scheduler, setScheduler] = useState();

    return (
        <div>
            <DayPilotScheduler
                controlRef={setScheduler}
            />
        </div>
    );
}

export default Scheduler;

Now you can invoke the Scheduler methods directly. This example displays a "Welcome!" message using the message() method of the Scheduler when you click the button:

import React, { useState } from 'react';
import { DayPilotScheduler } from "daypilot-pro-react";

const Scheduler = () => {
    const [scheduler, setScheduler] = useState();

    return (
        <div>
            <button onClick={e => scheduler?.message('Welcome!')}>Welcome</button>
            <DayPilotScheduler
                controlRef={setScheduler}
            />
        </div>
    );
}

export default Scheduler;