When you develop an application with dhtmlxGantt, the first thing you need is to initialize or, simply speaking, to display the Gantt chart on the page.
To display a basic Gantt on the page, follow 3 steps:
<!DOCTYPE html>
<html>
<head>
<script src="codebase/dhtmlxgantt.js"></script>
<link href="codebase/dhtmlxgantt.css" rel="stylesheet">
</head>
<body>
<div id="gantt_here" style='width:1000px; height:400px;'></div>
<script type="text/javascript"> gantt.init("gantt_here");
</script>
</body>
</html>
Related sample: Basic initialization
You can add Gantt code file into your project in several ways, depending on the type of an application you create:
The dhtmlxGantt requires including 2 code files on the page:
<script src="codebase/dhtmlxgantt.js"></script>
<link href="codebase/dhtmlxgantt.css" rel="stylesheet">
Let's quickly explore the structure of the dhtmlxGantt package to find out where to look for the files.
Main folders and files that make up the dhtmlxGantt package are:
Use the following command to import files:
import { gantt } from 'dhtmlx-gantt';
For the Commercial, Enterprise or Ultimate version the command look like this:
import { gantt, Gantt } from 'dhtmlx-gantt';
While DHTMLX Gantt can be used with React, there is a native React solution - React Gantt
An example of importing dhtmlxGantt files into a React-based app:
import React, { Component } from 'react';
import { gantt } from 'dhtmlx-gantt';
import 'dhtmlx-gantt/codebase/dhtmlxgantt.css';
export default class Gantt extends Component {
componentDidUpdate() {
gantt.render();
}
componentDidMount() {
gantt.init(this.ganttContainer);
gantt.parse(this.props.tasks);
}
render() {
return (
<div
ref={(input) => { this.ganttContainer = input }}
style=width: '100%', height: '100%'
></div>
);
}
}
An example of importing dhtmlxGantt files into an Angular-based app:
import {Component,ElementRef,OnInit,ViewChild,ViewEncapsulation} from '@angular/core';
import {TaskService} from '../services/task.service';
import {LinkService} from '../services/link.service';
import {Task} from '../models/task';
import {Link} from '../models/link';
import { gantt, Gantt } from 'dhtmlx-gantt';
@Component({
encapsulation: ViewEncapsulation.None,
selector: 'gantt',
styleUrls: ['./gantt.component.css'],
providers: [TaskService, LinkService],
template: `<div #gantt_here class='gantt-chart'></div>`,
})
export class GanttComponent implements OnInit {
@ViewChild('gantt_here') ganttContainer: ElementRef;
constructor(private taskService:TaskService, private linkService:LinkService){ }
ngOnInit() {
gantt.config.xml_date = '%Y-%m-%d %H:%i';
gantt.init(this.ganttContainer.nativeElement);
Promise.all([this.taskService.get(), this.linkService.get()])
.then(([data, links]) => {
gantt.parse({ data, links });
});
}
}
While DHTMLX Gantt can be used with React, there is a native React solution - Vue Gantt
While DHTMLX Gantt can be used with React, there is a native React solution - Svelte Gantt
To include dhtmlxGantt files into a RequireJS-based app, you need to follow the logic shown in the example below:
requirejs(["codebase/dhtmlxgantt"], function(dhx){
var gantt = dhx.gantt;
var Gantt = dhx.Gantt;// for Enterprise builds
gantt.init("gantt_here");
gantt.parse({
data: [
{ id:1, text:"Project #2", start_date:"01-04-2018",
duration:18, progress:0.4, open:true },
{ id:2, text:"Task #1", start_date:"02-04-2018",
duration:8, progress:0.6, parent:1 },
{ id:3, text:"Task #2", start_date:"11-04-2018",
duration:8, progress:0.6, parent:1 }
],
links: [
{ id:1, source:1, target:2, type:"1" },
{ id:2, source:2, target:3, type:"0" }
]
});
});
The dhtmlxGantt library will return an object with fields gantt
and Gantt
(in Commercial, Enterprise or Ultimate versions) - the gantt and Gantt objects described here.
When using Gantt with custom extensions in RequireJS, you should specify the shim
config for RequireJS and directly set the dependency of extensions from Gantt in it.
The example below demonstrates how a custom extension file custom_tooltip_plugin.js can be set in the correct way:
requirejs.config({
paths: {
"dhtmlxgantt": "../../codebase/dhtmlxgantt",
"ext/dhtmlxgantt_custom_tooltip": "../custom_tooltip_plugin"
},
shim: {
"ext/dhtmlxgantt_custom_tooltip": ["dhtmlxgantt"]
}
});
requirejs(["dhtmlxgantt"],
function (dhx) {
var gantt = dhx.gantt;
var date_to_str = gantt.date.date_to_str(gantt.config.task_date);
var today = new Date(2018, 3, 5);
gantt.addMarker({
start_date: today,
css: "today",
text: "Today",
title: "Today: " + date_to_str(today)
});
gantt.init("gantt_here");
gantt.parse({
data: [
{ id:1, text:"Project #2", start_date:"01-04-2018",
duration:18, progress:0.4, open:true },
{ id:2, text:"Task #1", start_date:"02-04-2018",
duration:8, progress:0.6, parent:1 },
{ id:3, text:"Task #2", start_date:"11-04-2018",
duration:8, progress:0.6, parent:1 }
],
links: [
{ id:1, source:1, target:2, type:"1" },
{ id:2, source:2, target:3, type:"0" }
]
});
});
Check that the module name for any file inside the package is specified as a relative path inside the 'codebase' folder of the package plus the filename, for instance:
core library:
To correctly display a Gantt chart in the full-screen mode in different browsers, define the following style on the page:
<style type="text/css" media="screen"> html, body{
margin:0px;
padding:0px;
height:100%;
overflow:hidden;
}
</style>
Back to top