Gantt Auto Scheduling implementation in React JS

Gantt
#1

Heloo,

I’m new to using this component in react, i found in blog example and it working properly.
But i’m still not found working example for Auto Scheduling feature in react .

Please help.

Many Thanks’

#2

Hello Ferry,
First, you need to install the trial version. To do that, apply the following command:

npm install 'path to gantt folder with package.json file'

for example:

npm install /opt/gantt_trial

If you don’t have package.json file near the codebase folder, you can download the following one:
https://files.dhtmlx.com/30d/cb80c0faf513b1caab81d79fe9266c4e/package.json

Then you need to connect the extension. Open Gantt.js file and add the path to the extension after import 'dhtmlx-gantt';. For example:

import 'dhtmlx-gantt';
import 'dhtmlx-gantt/codebase/dhtmlxgantt.css';
import 'dhtmlx-gantt/codebase/ext/dhtmlxgantt_auto_scheduling.js'

Here is a demo with the implementation:
https://files.dhtmlx.com/30d/dcea4d5c76909316d5e722b8c781aa1e/react+autoscheduling.zip

#3

image
image1360×690 34.4 KB

there is no this js file in your demo

#4

Hello @dangxiaowei ,

The demo from the post above contains the GPL version of Gantt, when then “auto scheduling” is a PRO feature.

In order to make auto scheduling work you should:

  1. Download one of the PRO versions of Gantt(for example trial)
  2. Install this version to the demo with npm, for example:
npm install /opt/*gantt_trial*

// gantt_trial is the name of the downloaded folder

  1. Remove the following line from the Gantt.js file :
'dhtmlx_gantt/codebase/ext/dhtmlxgantt_auto_scheduling.js'

Because in the current Gantt version(after the 7.0), extensions are including through the “plugins” method:
https://docs.dhtmlx.com/gantt/api__gantt_plugins.html

The changed code in the Gantt.js file will look like follows:

/*global gantt*/
import React, { Component } from 'react';
import 'dhtmlx-gantt';
import 'dhtmlx-gantt/codebase/dhtmlxgantt.css';
// import 'dhtmlx_gantt/codebase/ext/dhtmlxgantt_auto_scheduling.js'

export default class Gantt extends Component {
  componentDidMount() {
    gantt.plugins({
      auto_scheduling: true
  });
...

After these steps, the problem should be solved.

1 Like