dhtmlx / gantt

GPL version of Javascript Gantt Chart

dhtmlxGantt

Getting started | Features | License | Useful links | Follow us

DHTMLX Gantt is an open source JavaScript Gantt chart library that helps you illustrate and manage a project schedule in a nice-looking diagram.

It can show the dependencies between tasks as lines and allows you to set up different relationships between tasks (finish-to-start, start-to-start, finish-to-finish, start-to-finish). The Standard edition also inludes intuituve drag-n-drop interface and smart rendering which considerably boost performance while working with a large amount of tasks.

DHTMLX Gantt provides a flexible API and a large number of event handlers, which gives you the freedom to customize it for your needs. Moreover, the library comes with a comprehensive documentation and step-by-step video tutorials thus simplifying learning.

Getting started

Add files:

<script src="dhtmlxgantt.js" ></script>
<link rel="stylesheet" href="dhtmlxgantt.css" type="text/css">

Add markup:

<div id="gantt_here" style='width:100%; height:100vh;'></div>

And initialize:

gantt.config.date_format = "%Y-%m-%d %H:%i";
gantt.init("gantt_here");
gantt.parse({
  data: [
    {id: 1, text: "Project #1", start_date: null, duration: null, parent:0, progress: 0, open: true},
    {id: 2, text: "Task #1", start_date: "2019-08-01 00:00", duration:5, parent:1, progress: 1},
    {id: 3, text: "Task #2", start_date: "2019-08-06 00:00", duration:2, parent:1, progress: 0.5},
    {id: 4, text: "Task #3", start_date: null, duration: null, parent:1, progress: 0.8, open: true},
    {id: 5, text: "Task #3.1", start_date: "2019-08-09 00:00", duration:2, parent:4, progress: 0.2},
    {id: 6, text: "Task #3.2", start_date: "2019-08-11 00:00", duration:1, parent:4, progress: 0}
  ],
  links:[
    {id:1, source:2, target:3, type:"0"},
    {id:2, source:3, target:4, type:"0"},
    {id:3, source:5, target:6, type:"0"}
  ]
});

==> Check the live demo

Complete guides

• Vue.js
• Angular
• React
• Node
• ASP.NET
  • ASP.NET MVC 5
  • ASP.NET Core
• PHP
  • Laravel
  • Slim framework
• Ruby on Rails
• Python
• Meteor

All tutorials

https://docs.dhtmlx.com/gantt/desktop__howtostart_guides.html

Video guides

https://www.youtube.com/user/dhtmlx/videos

Features of the Standard Edition

• 4 types of tasks linking: finish-to-start, start-to-start, finish-to-finish, start-to-finish
• dragging and dropping multiple tasks horizontally
• multi-task selection

• backward planning
• tasks filtering
• smart rendering
• inline editing

• managing editability/readonly modes of individual tasks
• tooltips
• undo/redo functionality
• configurable columns in the grid
• customizable time scale and task edit form
• progress percent coloring for tasks
• 7 different skins

• online export to PDF, PNG, Excel, iCal, and MS Project
• cross-browser compatibility
• 32 locales
• keyboard navigation
• accessibility

Resource management, critical path calculation, auto scheduling, and other enhanced features are available with the PRO edition. You can see the full list of features and compare the two DHTMLX Gantt editions in the documentation.

License

dhtmlxGantt v.8.0.6 Standard

This version of dhtmlxGantt is distributed under GPL 2.0 license and can be legally used in GPL projects.

To use dhtmlxGantt in non-GPL projects (and get Pro version of the product), please obtain Individual, Commercial, Enterprise or Ultimate license on our site https://dhtmlx.com/docs/products/dhtmlxGantt/#licensing or contact us at [email protected]

(c) XB Software

Useful links

• DHTMLX Gantt product page
• Official documentation
• Online samples
• Video tutorials
• Export services
• List of available integrations
• Support forum

Follow us

Star our GitHub repo ⭐

Check our roadmap for future updates 🔧

Read us on Medium 📰

Follow us on Twitter 🐦

Like our page on Facebook 👍

gantt's Issues

Smart rendering in response area

Smart rendering in response area

MongodB support?

Using Python Flask and Pymongo to talk to MongodB, so I like to know is there support for MongodB? I would like to see demo connecting, loading, editing and making changes from the user interactively, but I don't see my examples.

Missing extension at version 7.0.0

Lost extension at lasted version

gantt can't edit when reinit

gantt can't edit when reinit

 gantt.config.columns =[
					{
						label: 'name',
						name: "text",
						tree: true,
						resize: true,
						width: 250,
						editor: {
							type: "text",
							map_to: "text"
						}
					},
					
				];
    	
    gantt.init("gantt_here");
	gantt.parse(tasks);

function reinit() {
	gantt.init("gantt_here2");
}

</script> '

Milestone does not render as expected

Hi guys,

I'm using "dhtmlx-gantt": "^6.3.1"
Just following https://docs.dhtmlx.com/gantt/desktop__milestones.html#specifyingmilestonesinadataset to support milestone but it does not work

Also, I saw the task $rendered_type: "task" while type is milestone
Results:

Expect: https://docs.dhtmlx.com/gantt/samples/01_initialization/16_projects_and_milestones.html

Ability to Import as a Module

I see there's an npm module published, and when installing it to my project I attempted to import it via Webpack with import gantt from 'dhtmlx-gantt';. After this didn't work I took a look at the source code and saw that nothing's being exported as a module.

Since this is an npm module after all, wouldn't it make sense to make this a module to be used by module bundlers / loaders?

Grouping extension

I see the grouping extension in the examples on the website but it is strangely missing from the codebase. How can I import the grouping extension in my React project?

Method columnIndexByDate is marked as returning void when it actually returns a number.

dhtmlx gantt version 7.0.0

Dhtmlx-gantt upgrade to 6.2 or more gantt rendering is incomplete

I also encountered the problem of incomplete rendering of the Gantt chart. I tried it. The smart rendering of version 6.2 or above does have problems. If the version 6.2.7 does not set gantt.config.smart_rendering = false, then some data cannot be fully rendered.The following data cannot be rendered normally under the set timescale:
"data":[
{"id":"10", "text":"Project #1",
"render": "split", "start_date":"02-04-2019", "duration":3, "order":10,"progress":0, "open": true},
{"id":"1", "text":"Task #1", "start_date":"02-04-2019", "duration":1, "order":10,"progress":1, "parent":"10"},
{"id":"2", "text":"Task #2", "start_date":"06-04-2019", "duration":1, "order":20,"progress":1, "parent":"10"}
],

gantt.config.scales = [
{ unit: 'day', step: 1, format: '%Y-%m-%d' },
{ unit: 'hour', step: 1, date: '%H' }
]

Throwing error 0x800a138f - JavaScript runtime error: Unable to get property '-1' of undefined or null reference

I am using dhtmlxGantt v.4.0.0 Stardard

When add this config

gantt.config.show_chart = false;

This error is throwing in the library file

• 0x800a138f - JavaScript runtime error: Unable to get property '-1' of undefined or null reference

At this moment i am working by adding this line in the library

    if (!gantt.config.show_chart)
        return;

In this method

gantt.showDate = function (date) {
    if (!gantt.config.show_chart)
        return;
    var date_x = this.posFromDate(date);
    var scroll_to = Math.max(date_x - this.config.task_scroll_offset, 0);
    this.scrollTo(scroll_to);
};

Any fix for this ?

Is there any Python module for interfacing with the library ?

Hello

In order to use DHTMLX/Gantt javascript library in python, is there any python module ?

Best regards

Duplicated taskUpdate when using multiselect module

When dragging a regular task while "multiselect" module is on, task update request is fired twice.
I think updateTask is invoked from _finalize_mouse_up. As you can see below, _finalize_mouse_up invoked first time if multiselect is enabled (isMultiselect), and second time after the loop.

  on_mouse_up: function(e) {
  	var drag = this.drag;
  	if (drag.mode && drag.id) {
  		var config = timeline.$getConfig();
  		//drop
  		var task = gantt.getTask(drag.id);
  		var dragMultiple = this.dragMultiple;

  		if (drag.mode === config.drag_mode.move) {
  			if ((gantt.isSummaryTask(task) && config.drag_project) || (this._isMultiselect())) {
  				for (var i in dragMultiple) {
  					this._finalize_mouse_up(dragMultiple[i].id, config, dragMultiple[i], e);
  				}
  			}
  		}
  		this._finalize_mouse_up(drag.id, config, drag, e);
  	}
  	this.clear_drag_state();
  }

red alert "Invalid day index" only in safari...

red alert "Invalid day index" only in safari:

conf:

xml_date:"%Y-%m-%d %H:%i:%s",

my date:

It works normally in Google and Firefox

show_tooltip and _tooltip_pos are not part of library and throwing an error at 4.1.19 version

Property '_tooltip_pos' does not exist on type 'GanttStatic'.
Property  '_show_tooltip' does not exist on type 'GanttStatic'.

This is the code

  this.events.push(
      gantt.attachEvent('onMouseMove', (event_id, ev) => {
        let linkageDetails;
        let linkId;

        // @ TODO, un commented the due to resolve the build issue
        //linkId = gantt.locate(ev, 'link_id');
        linkId = gantt.locate(ev);
        console.log('LINK ID', gantt.getLink('link_id'));

        if (linkId) {
          linkageDetails = ganttChartService.constructLinkageDetailsMarkUp(linkId);
          gantt._show_tooltip(linkageDetails, gantt._tooltip_pos(ev));
        }
      })
    );

Strange behavior of template.date_scale

I've reproduced it here: http://jsfiddle.net/fmnabkac/

When I first render the component the template is functional and 'icecream' appears instead of 'Apr' for the top scale.

When I click for the first time and modify the scales I get 'Apr' instead of 'icecream', yet I set the template.date_scale before, (and after, for good measure).

When I click again I get 'icecream' and it will stay 'icecream'. This doesn't match the behaviour of the first event. Am I missing something?

Angular 9 problems - Gantt is not defined

We're using DHTMLXGantt pro version within Angular application. It used to work fine for some time, but after updating angular from 8 to 9 (Ivy is disabled) I'm getting the following error in runtime:

Uncaught ReferenceError: Gantt is not defined
    at Object../node_modules/@pdtec/dhtmlx-gantt-pro/codebase/locale/locale_de.js (index.ts:132)

It displays no errors with Angular8.

The DHTMLXGantt library is called @pdtec/dhtmlx-gantt-pro because we pack downloaded sources into our private repository under @pdtec/dhtmlx-gantt-pro name.

The gantt sources are imported into main app component:

import { Component, ElementRef, Inject, Input, OnDestroy, OnInit, Optional, ViewChild, ViewEncapsulation } from '@angular/core';
import '@pdtec/dhtmlx-gantt-pro';
import '@pdtec/dhtmlx-gantt-pro/codebase/ext/dhtmlxgantt_auto_scheduling';
import '@pdtec/dhtmlx-gantt-pro/codebase/ext/dhtmlxgantt_grouping';
import '@pdtec/dhtmlx-gantt-pro/codebase/ext/dhtmlxgantt_marker';
import '@pdtec/dhtmlx-gantt-pro/codebase/ext/dhtmlxgantt_undo';
(...)
@Component({
    encapsulation: ViewEncapsulation.None, // to be able to style the diagram
    selector: 'marble-gantt-diagram',
    styleUrls: ['./ng-gantt-diagram.component.scss'],
    templateUrl: './ng-gantt-diagram.component.html'
})
export class MarbleGanttDiagramComponent implements OnInit, OnDestroy {
    (...)
}

I already tried importing it into main app .module file, but it does not fix the error.

This does not seems to be related to any specific DHTMLXGantt version.

Could you please help us out solving the issue?

401 UnAuthorized

I'm getting a 401 Not Authorized on Chrome when I try to update a task, and a "Object doesn't support property or method 'selectNodes'" on statement return c.selectNodes(b) on Internet Explorer, all related to gantt.min.js. I don't know if there is an issue with my JavaScript file, or what could have happened.

Gantt chart not rendering tasks on Chrome.

Hello,

We have a React application that uses the gantt chart, and recently encountered an issue with the gantt chart not showing tasks when using Google Chrome. The tasks themselves do get rendered to the DOM though, and the only way they seem to appear again is if we go to the inspector and disable any of the css properties.

Although, Firefox and Safari work perfectly fine.

OT: are the other products available on GitHub?

I would love to see DHTMLX Suite available on GitHub, since it's GPLv2-licensed. Is there a repo somewhere?

We're evaluating DHTMLX for use in a Google project, and GitHub presence plays an important role. So far, Webix and Kendo UI Core have an advantage.

add css file link to main-property in bower.json

...so that it automatically get's included when using wiredep or something.

Missing component function

Recently, using this component, we found that there is no toolip and no Chinese package. How can I download these packages.

update 6.0 error getResourceAssignments is not defined

Just import dhtmlxgantt.js and init

common.js.js:789 ReferenceError: getResourceAssignments is not defined
    at r (dhtmlxgantt.js?a6f4:4213)
    at Array.t.exports (dhtmlxgantt.js?a6f4:4266)
    at t.exports (dhtmlxgantt.js?a6f4:4470)
    at t.exports (dhtmlxgantt.js?a6f4:8629)
    at Object.getGanttInstance (dhtmlxgantt.js?a6f4:8636)
    at Object.eval (dhtmlxgantt.js?a6f4:8645)
    at i (dhtmlxgantt.js?a6f4:16)
    at eval (dhtmlxgantt.js?a6f4:43)
    at eval (dhtmlxgantt.js?a6f4:44)
    at Object.3843 (1.js:1329)

[Question] Is there a way to replace adding/editing task form

Hi,

I want to replace the standard adding/editing form by a new one with new styling. Is this possible?

Thanks

Grouping extension

Library appears to be missing the dhtmlxgantt_grouping.js extension.

https://docs.dhtmlx.com/gantt/desktop__grouping.html

set working hours as minutes

We can't set our real working hours correctly. Our working periods are

1. 07:30-12:00
2. (lunch break for 30 minutes)
3. 12:30-17:30

Your API takes hours only as

gantt.setWorkTime({day : 5, hours : [8,12]})

If you replace integer hours with hour and minutes array we set our hours like below

gantt.setWorkTime({day : 5, hours : [ [7,30] , [12,00], [12,30], [17,30]  ]})

or

gantt.setWorkTime({day : 5, hours : [ [7,30] , 12, [12,30], [17,30]  ]})

to backward compatibility with checking item is array.

can't config gantt.config.show_chart = false;

when i config show_chart = false ,
timeline.js:107 Uncaught TypeError: Cannot read property 'full_width' of undefined
at o.getSize (timeline.js:107)
at Object.getViewPort (smart_rendering.js:8)
at Object.getRange (smart_rendering.js:55)
at Object._getVisibleTasks (smart_rendering.js:97)
at Object.updateRender (smart_rendering.js:136)
at Object. (smart_rendering.js:275)
at Object.i (eventable.js:21)
at Object.t.callEvent (eventable.js:62)
at Object.refreshData (datastore.js:63)
at e. (gantt_core.js:80)
getSize @ timeline.js:107
getViewPort @ smart_rendering.js:8
getRange @ smart_rendering.js:55
_getVisibleTasks @ smart_rendering.js:97
updateRender @ smart_rendering.js:136
(anonymous) @ smart_rendering.js:275
i @ eventable.js:21
t.callEvent @ eventable.js:62
refreshData @ datastore.js:63
(anonymous) @ gantt_core.js:80
i @ eventable.js:21
t.callEvent @ eventable.js:62
e.resize @ layout.js:187
e.render @ layout.js:313
t._reinit @ gantt_core.js:84
t.init @ gantt_core.js:41
(anonymous) @ (index):54
utils.js:62 Uncaught TypeError: Cannot read property 'removeEventListener' of undefined
at eventRemove (utils.js:62)
at Object.detach [as eventRemove] (dom_event_scope.js:15)
at Object. (keyboard_navigation.js:100)
at Object.i (eventable.js:21)
at Object.t.callEvent (eventable.js:62)
at Object.t.render (gantt_core.js:165)
at gantt_core.js:24

[Dhtmlx Gantt pro version].

In the pro version since the Gantt 6.1.1 version Pacakge.json in gantt is totally different and is now
fom backend stuff , this is dangeurous because an upgrade of the lib might broke all the project because of this changement.

How to to show tooltip for the linkage links in 4.1.19 version

I have a working example with 6.. versions
https://snippet.dhtmlx.com/05f48085c

Drag timeline clashes with readonly

Reproduction:

• open https://docs.dhtmlx.com/gantt/samples/02_extensions/27_drag_timeline.html
• set gantt.config.readonly = true;
• try to drag and drop tasks, links, change duration of tasks

Those modifications should be impossible since the Gantt is read only. But we can still do it if dhtmlxgantt_drag_timeline.js is imported.

Drag n drop semantics with order_branch are different than the sample

Hi guys,

I have a gantt chart with small data of the following prototype:

{
  "data": [
    {
      "id": 840,
      "duration": 1,
      "open": true,
      "parent": 0,
      "progress": 0,
      "start_date": "23-02-2017",
      "text": "1. Acquire Bagel2"
    },
    {
      "id": 841,
      "duration": 1,
      "open": true,
      "parent": 839,
      "progress": 0,
      "start_date": "28-02-2017",
      "text": "3. Become the bagel"
    },
    {
      "id": 839,
      "duration": 1,
      "open": true,
      "parent": 840,
      "progress": 0,
      "start_date": "25-02-2017",
      "text": "2. Consume Bagel"
    }
  ],
  "links": [
    {
      "id": 118,
      "source": 840,
      "target": 839,
      "type": 0
    },
    {
      "id": 119,
      "source": 839,
      "target": 841,
      "type": 0
    }
  ]
}

And the drag and drop experience is considerably different in the GPL version vs the sample on the website. I draw your attention to the sample here. The drag experience on the sample places the dragged task in an overlay which follows the mouse and orders tasks on the drop surface out from underneath it, but I cannot replicate this functionality on the GPL version.

• 
• 

Have I missed something, or is this a pro-only feature?

Once again, thank you for your assistance. :)

Cheers,
T.

Gantt chart click listener event issue or bug

When used in reactjs gantt chart add button fires multiple time when component updates or router changes, I have only one instance of gantt but it fires multiple time anywhere, older version of gantt chart doesn't do that

range of year

The earliest year is 2013~2023? How to add earlier time, and later

Upadte executed only once for task when using custom router object in createDataProcessor method

I also posted on forms here: https://forum.dhtmlx.com/t/upadte-executed-only-once-for-task-when-using-custom-router-object-in-createdataprocessor-method/68510

Hi! I'd like to report a buggy behavior in data processor.

According to the docs, you can pass an object or a function to createDataProcessor() method. I choosed to use an object as follows:

And I noticed strange behavior of data processor - the update() function is executed only once per task! It means that first update invokes the update() function, but any other update does not invoke update() function anymore for this particular task.

I managed to fix the issue by passing function parameter in createDataProcessor() as below:

I believe this is a bug in your library. It hapens for update function only (create and delete works fine). Could you please take a look?

Buggy code: https://pastebin.com/QJV8TDwP
Working code: https://pastebin.com/MYwxszS1

I'm using pro 6.2.3 version.

Regards,
MP

in the version 4.1, when set gantt.config.show_chart = false there has some issue?

I am using dhtmlxGantt v.4.1.0 Stardard

When add this config
gantt.config.show_chart = false

here has some issue like
Uncaught TypeError: Cannot read property 'length' of undefined.
Any fix for this ?

Trying to show a new variable in JS

Hello,

I´m currently trying to implement your gannt in my Laravel project, but when I try to show a multiple select of an array I cant seem to show the data from another table besides task.

for example, if I do this:
gantt.templates.leftside_text = function(start, end, users){ return users.name + " dia"; };

It is going to return undifined.

What can it be? I tried everything now...

Disable auto save

How to disable auto save activities and save only after button click?

How to add a responsible person when adding an activity?

While one tasks has more souces,the links can't display

@AlexKlimenkov
scene: data.json

{
     "data":....,
     "links":[
                ...
		{"id":"5","source":"1","target":"5","type":"1"},
		{"id":"6","source":"1","target":"6","type":"1"},
		{"id":"7","source":"5,6","target":"7","type":"0"},
                ...
	]
}

In this case,the links will not show

However,I check code,maybe function this._task_area_renderers[id].render_item (near line 3207) should think multi-sources.
Now,my code like:

container = container || node;

if(filter){
	if(!filter(item)){
		this.remove_item(item.id);
		return;
	}
}

var link_sources = [];
if(item.source){
	link_sources = item.source.split(",");
}
if(link_sources.length>1){
	for(var sIdx=0;sIdx<link_sources.length;sIdx++){
		var splitItem = item;
		splitItem.source = link_sources[sIdx];
		var dom = render_one.call(gantt, item);
		this.append(splitItem,dom, container);
	}
}else{
	var dom = render_one.call(gantt, item);
	this.append(item, dom, container);
}

Moreover,the function this._task_area_renderers[id].append (near line 3255 after above-mentioned modified) should also think about multi-sources

if(!node){
	if(this.rendered[item.id]){
		this.remove_item(item.id);
	}
	return;
}
if(item.source){
	if(this.rendered[item.id+"."+item.source] && this.rendered[item.id+"."+item.source].parentNode){
		this.replace_item(item.id, node);
	}else{
		container.appendChild(node);
	}
	this.rendered[item.id+"."+item.source] = node;
}else{
	if(this.rendered[item.id] && this.rendered[item.id].parentNode){
		this.replace_item(item.id, node);
	}else{
		container.appendChild(node);
	}
	this.rendered[item.id] = node;
}

Moreover,the function gantt._filter_link (near line 3462 after above-mentioned modified) should also think about multi-sources

if(!this.config.show_links){
	return false;
}
var link_sources = link.source.split(",");
if(link_sources.length>1){
	var cando = true;
	for(var sIdx=0;sIdx<link_sources.length;sIdx++){			
		if(!gantt.isTaskVisible(link_sources[sIdx])){
			cando = false;
			return false;
		}
	}
	if(!cando){
		return false;
	}
	if(!gantt.isTaskVisible(link.target)){
		return false;
	}
}else{
	if(!(gantt.isTaskVisible(link.source) && gantt.isTaskVisible(link.target)) ||
	gantt._isAllowedUnscheduledTask(gantt.getTask(link.source)) || 
	gantt._isAllowedUnscheduledTask(gantt.getTask(link.target)))
	return false;
}
return this.callEvent("onBeforeLinkDisplay", [id, link]);

At Last,this picture is the result of my modify code,wish you will refer it

onAfterTaskMove called many times when dragging a task

Hi guys,

I have a dhtmlx gantt control in use in an AngularJS directive (using the slightly modified ajs samples) with data that contains the following prototype:

{
  "data": [
    {
      "id": 840,
      "duration": 1,
      "open": true,
      "parent": 0,
      "progress": 0,
      "start_date": "23-02-2017",
      "text": "1. Acquire Bagel2"
    },
    {
      "id": 841,
      "duration": 1,
      "open": true,
      "parent": 839,
      "progress": 0,
      "start_date": "28-02-2017",
      "text": "3. Become the bagel"
    },
    {
      "id": 839,
      "duration": 1,
      "open": true,
      "parent": 840,
      "progress": 0,
      "start_date": "25-02-2017",
      "text": "2. Consume Bagel"
    }
  ],
  "links": [
    {
      "id": 118,
      "source": 840,
      "target": 839,
      "type": 0
    },
    {
      "id": 119,
      "source": 839,
      "target": 841,
      "type": 0
    }
  ]
}

This gantt instance has order_branch turned on, and this particular gantt has the onAfterTaskMove event attached, pointing to a simple console.log. The event can be called up to a hundred times for a simple move, without letting the mouse button go. Attached is a simple picture of the handler for onAfterTaskMove.

Is this expected behavior, or have I stumbled across something sinister?

Cheers,
T.

Api methods missing

According to the documentation, there is a toggleTaskSelection method and a isSelectedTask method and neither are marked as pro only. Both appear to be missing from the actual code for the most recent release.

isTaskSelected
toggleTaskSelection

Getting error in console

I am getting this error in console

TypeScript declarations prevent `dhtmlx-gantt` from being imported as a module

Hi,

The declare module statements in the TypeScript declaration files prevent it from being imported as an ES module, as gantt and Gantt are not installable modules from npm.

The declaration statements should be updated to reflect the names of the packages from where they are installed. I can submit a PR with these changes.

declare module "gantt" {
    export = gantt;
}

should read

declare module "dhtmlx-gantt" {
    export = gantt;
}

as dhtmlx-gantt is the name of the installable module.

If Gantt Enterprise is an installable module, then perhaps it should be distributed under its own dhtmlx-gantt-enterprise module. Typing declarations for modules should not have more than one ambient module declaration in it.

Cheers! 👍

【求助】关于 dhtmlx-gantt （Vue.js版本封装），有什么优化配置？

我二次封装的dhtmlx-gantt 的组件如下：

<template>
  <div class="custom-gantt" ref="gantt" />
</template>

<script>
// 配置参考： https://blog.csdn.net/qq_18209125/article/details/100552720
// 官方文档： https://dhtmlx.com/docs/products/dhtmlxGantt/

import { gantt } from 'dhtmlx-gantt'
import { format, diffDay } from '@common/utils/moment'

export default {
  name: 'Custom_Gantt',

  props: {
    dataSource: {
      type: Array,
      default: () => []
    },
    replaceFields: {
      type: Object,
      default: () => {}
    }
  },
  computed: {
    fields() {
      const defaultFields = {
        'id': 'id',
        'text': 'text',
        'start_date': 'start_date',
        'end_date': 'end_date',
        'user': 'user'
      }
      return { ...defaultFields, ...this.replaceFields }
    },
    tasks() {
      const { fields, dataSource } = this
      const source = dataSource.map(item => {
        return {
          ...item,
          id: item[fields.id],
          text: item[fields.text],
          start_date: format(item[fields.start_date], 'DD-MM-YYYY'),
          duration: diffDay(item[fields.start_date], item[fields.end_date]) + 1
        }
      })
      return {
        data: source,
        links: []
      }
    }
  },
  mounted() {
    this.init()
  },
  methods: {
    init() {
      const { fields } = this

      gantt.i18n.setLocale('cn') // 国际化

      gantt.config.autofit = true // 表格列宽自适应
      gantt.config.autoscroll = true// 自动滚动
      gantt.config.autoscroll_speed = 50 // 定义将任务或链接拖出当前浏览器屏幕时自动滚动的速度（以毫秒为单位）
      gantt.config.autosize = true // 自适应甘特图的尺寸大小, 使得在不出现滚动条的情况下, 显示全部任务
      gantt.config.readonly = true // 只读模式
      gantt.config.fit_tasks = true // 当task的长度改变时，自动调整图表坐标轴区间用于适配task的长度
      gantt.config.round_dnd_dates = true // 将任务开始时间和结束时间自动“四舍五入”, 从而对齐坐标轴刻度
      gantt.config.select_task = false // 任务是否可以点击选中
      gantt.config.smart_scales = true // 仅仅渲染在屏幕可见的那部分时间轴。在处理时间轴非常长的时候，可以提升性能
      gantt.config.smart_rendering = true // 按需渲染, 仅仅渲染在屏幕可见的那部分任务和依赖线。这个在显示大量的任务时，性能比较高。

      gantt.config.date_scale = '%Y-%m-%d' // 设置x轴的日期格式
      gantt.config.duration_unit = 'day' // 工期计算的基本单位
      gantt.config.scale_unit = 'day' // 设置时间坐标轴单位

      // gantt.config.start_date = new Date(2020, 9, 1);
      // gantt.config.end_date = new Date(2020, 9, 31);
      gantt.config.show_tasks_outside_timescale = true

      gantt.plugins({
        tooltip: true// 启用 tooltip 插件
      })
      gantt.config.columns = [ // 配置左边的表格项
        {
          name: 'text',
          label: '任务名',
          width: 120
        }
      ]
      gantt.templates.tooltip_text = (start, end, task) => {
        return `<span>${task[fields.user]}</span><br><span>${task[fields.text]}</span><br><span>计划开始时间 ${format(task[fields.start_date], 'YYYY-MM-DD')}</span><br><span>计划结束时间 ${format(task[fields.end_date], 'YYYY-MM-DD')}</span>`
      }

      gantt.init(this.$refs.gantt)
      gantt.parse(this.tasks)
    }
  }
}
</script>

<style>
@import "~dhtmlx-gantt/codebase/dhtmlxgantt.css";
</style>

由于对dhtmlx-gantt 的配置不太熟悉，以及官方文档又是英文的，找起来比较吃力，所以想来问问有没有改善的方法

需要改进的地方，

1. 支持时间戳，就是 start_date 和 end_date 如果是时间戳的话，要怎么配置（后端返回的时间戳，总不能在前端这边遍历修改吧）
2. 支持结束时间 end_date，end_date好像默认是不支持的，得用 duration 这个字段，（后端返回的是 start_date 和 end_date 两个字段，总不能手动计算吧）
3. 不想要下图中多出来的时间点，要怎么配置
   

Dynamic Loading (on demand) Support custom request

Server-side customization is required in the example: desktop__dynamic_loading
How to implement dynamic loading child-tasks in a custom way, only client-side.

axios({
  url: 'query/gantt?parent=12',
}).then(res => {
  gantt.addTask(res.data)
})

Initial_scroll fix

In the dhtmlxgantt.js in gantt._process_loading string "var id = (this._order[0] || this.config.root_id);" should be replaced by "var id = (this.config.root_id || this._order[0]);", otherwise config.root_id is not used.

mysqli-support

Is it right that the connector only supports mysql but not mysqli? On my webserver, there is only the php mysqli module installed and I don't have the possibility to install the old mysql module (which is deprecated as far as I know). Is there a way to use mysqli?

there is no dhtmlxgantt_grouping.js file in extensions

But it is in the demo
http://docs.dhtmlx.com/gantt/samples/02_extensions/08_tasks_grouping.html

Publish to NPM

The most recent version on npm is currently 6.2.7

Can you publish the 6.3.0 please ?

Dhtmlx-gantt upgrade to 6.1.8 or more gantt rendering is incomplete

version：6.1.8

question

I use dhtmlx-gantt for initial rendering. When the number of tasks exceeds 15, the image rendered by gantt is only fixed at 15, after the 15th is all blank, nothing is displayed, but the position is still retained, check the element found. Not rendered

Click to view image

DataProcessor doesn't handle rejected promise

v6.2.7 _sendData only handles success: actionPromise.then(_onResolvedCreateUpdate);
That is why the task row doesn't get "gantt_error" style applied when promise is rejected.