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.
Tutorial
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: