React Gantt Chart

The React Gantt Chart

DayPilot Pro React Package

The Gantt chart component is included in DayPilot Pro for JavaScript. There is a special React package of DayPilot Pro that is hosted at npm.daypilot.org. You can get the NPM installation command there.

NPM

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

Yarn

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

Please visit npm.daypilot.org to get a link to the latest DayPilot Pro release.

Using the Gantt Chart Component

The component can be used in JSX as <DayPilotGantt> element:

import React, {Component} from 'react';
import {DayPilotGantt} from "daypilot-pro-react";

class GanttChart extends Component {

  render() {
    return (
      <div>
        <DayPilotGantt
          startDate={"2019-10-01"}
          days={30}
          tasks={[
            {
              "id": 1,
              "text": "Task 1",
              "start": "2019-10-04T00:00:00",
              "end": "2019-10-16T00:00:00",
            }
          ]}
        />
      </div>
    );
  }
}

export default GanttChart;

You can configure the Gantt Chart using JSX element attributes. All DayPilot.Gantt properties and event handlers are accepted.

The following second-level properties can be accessed using a special shortcut:

1. The DayPilot.Gantt.tasks.list property can be accessed as tasks={}:

<DayPilotGantt
  tasks={[
    {
      "id": 1,
      "text": "Task 1",
      "start": "2019-10-04T00:00:00",
      "end": "2019-10-16T00:00:00",
    }
  ]}
/>

2. The DayPilot.Gantt.links.list property can be accessed as links={}:

<DayPilotGantt
  ...
  links={[
    {from: 2, to: 3, type: "FinishToStart"}
  ]}
/>

Accessing the DayPilot.Gantt Object

Under the hood, the <DayPilotGantt> React component uses DayPilot.Gantt class to represent the component in JavaScript.

This internal DayPilot.Gantt instance can be used to reach the full API. The properties and events can be defined using <DayPilotGantt> attributes (see above). If you want to reach the DayPilot.Gantt methods, you'll need to get the DayPilot.Gantt instance using ref={}:

<DayPilotGantt
  ref={component => {
    this.gantt = component && component.control;
  }}
/>

This ref handler will be fired when the component is mounted and the DayPilot.Gantt reference will be stored as gantt property of the component. You can reach it from the event handlers and other methods like this:

<DayPilotGantt
  
  ref={component => {
    this.gantt = component && component.control;
  }}
  
  onTaskMoved ={args => {
    this.gantt.message("Task moved");
  }}

/>

This example displays a message after the task has been moved using DayPilot.Gantt.message() method:

Tutorial

• React Gantt Chart Tutorial