react-scheduler-component.png

DayPilot Pro Versions

The React module is included in DayPilot Pro for JavaScript. React is supported since version 2018.2.3297.

React NPM Package

The React package (daypilot-pro-react) is available at npm.daypilot.org

Example installation commands:

Yarn

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

NPM

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

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

Tutorials

React Scheduler Component Usage

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;

React Scheduler Configuration

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={"2018-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: "2018-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;

Direct DayPilot.Scheduler API Access

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 available as control property of 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 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;