react-scheduler-component-jsx.png

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.

Example installation commands:

Yarn

yarn add https://npm.daypilot.org/daypilot-pro-react/trial/2021.2.5000.tar.gz

NPM

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

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, {Component} from 'react';
import {DayPilotScheduler} from "daypilot-pro-react";

class Scheduler extends Component {
    render() {
        return (
            <DayPilotScheduler />
        );
    }
}

export default Scheduler;

How to configure the React Scheduler?

react-scheduler-component-configuration-resources.png

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, {Component} from 'react';
import {DayPilotScheduler} from "daypilot-pro-react";

class Scheduler extends Component {
    render() {
        return (
            <div>
                <DayPilotScheduler
                    startDate={"2021-06-01"}
                    days={30}
                    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, {Component} from 'react';
import {DayPilotScheduler} from "daypilot-pro-react";

class Scheduler extends Component {

    constructor(props) {
        super(props);

        this.state = {
            startDate: "2021-06-01",
            days: 30,
            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"},
            ]
        };
    }


    render() {
        var {...config} = this.state;
        return (
            <div>
                <DayPilotScheduler
                    {...config}
                />
            </div>
        );
    }
}

export default Scheduler;

How to access the DayPilot.Scheduler API?

react-scheduler-component-message.png

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, {Component} from 'react';
import {DayPilot, DayPilotScheduler} from "daypilot-pro-react";

class Scheduler extends Component {

    constructor(props) {
        super(props);
    }

    render() {
        var {...config} = this.state;
        return (
            <div>
                <DayPilotScheduler
                    ref={component => { this.scheduler = component && component.control; }}
                />
            </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, {Component} from 'react';
import {DayPilot, DayPilotScheduler} from "daypilot-pro-react";

class Scheduler extends Component {

    constructor(props) {
        super(props);
    }

    render() {
        var {...config} = this.state;
        return (
            <div>
                <button onClick={e => this.scheduler.message('Welcome!')}>Welcome</button>
                
                <DayPilotScheduler
                    ref={component => { this.scheduler = component && component.control; }}
                />
            </div>
        );
    }
}

export default Scheduler;