React Gantt Chart Component (DayPilot)

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/2024.4.6270.tar.gz --save

Yarn

yarn add https://npm.daypilot.org/daypilot-pro-react/trial/2024.4.6270.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={"2025-10-01"}
          days={30}
          tasks={[
            {
              "id": 1,
              "text": "Task 1",
              "start": "2025-10-04T00:00:00",
              "end": "2025-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": "2025-10-04T00:00:00",
      "end": "2025-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={} attribute:

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

class GanttChart extends Component {

  constructor(props) {
    super(props);
    this.ganttRef = React.createRef();
  }

  get gantt() {
    return this.ganttRef.current.control;
  }

  render() {
    return (
      <div>
        <DayPilotGantt
          ref={this.ganttRef}
        />
      </div>
    );
  }
}

export default GanttChart;

This ref handler will be fired when the component is mounted and the DayPilot.Gantt reference will be stored as ganttRef property of the component. You can reach the DayPilot.Gantt object in event handlers and other methods using a shortcut gantt() getter.

This example shows how to call the message() method using this.gantt getter:

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

class GanttChart extends Component {

  constructor(props) {
    super(props);
    this.ganttRef = React.createRef();
  }

  get gantt() {
    return this.ganttRef.current.control;
  }

  render() {
    return (
      <div>
        <DayPilotGantt
          ref={this.ganttRef}

         onTaskMoved ={args => {
           this.gantt.message("Task moved");
         }}

        />
      </div>
    );
  }
}

export default GanttChart;

It displays a message after a Gantt chart task has been moved:

react gantt chart component message method