I am using the DHTMLX Gantt chart, Here I need to get the starting plotted date and ending plotted date from the Gantt. For example here start date is 31 Mar 2019 and the end Date is 7 Apr 2019 in the chart, I want this date without taking it from the JSON. Actually, I want to add some more days to the start date and end date that’s why I need it. Here is the code below.
HTML
JavaScript
x
114
114
1
<!DOCTYPE html>2
<html>3
4
<head>5
<link rel='stylesheet' type='text/css' href='http://cdn.dhtmlx.com/gantt/edge/dhtmlxgantt.css'>6
<script src='http://cdn.dhtmlx.com/gantt/edge/dhtmlxgantt.js'></script>7
<style>8
.gantt_custom_button {9
background-color: rgb(206, 206, 206);10
position: absolute;11
right: -10px;12
top: 5px;13
width: 20px;14
height: 26px;15
border-radius: 0;16
}17
</style>18
19
20
</head>21
<div id='gantt_here' style='width:100%; height:500px;'></div>22
23
<body>24
<script>25
var task1 = {26
'data': [{27
'id': 1,28
'text': 'Project #1',29
'start_date': '01-04-2019',30
'duration': 2,31
'order': 10,32
'progress': 0.4,33
'open': true34
},35
{36
'id': 2,37
'text': 'Task #1',38
'start_date': '02-04-2019',39
'duration': 1,40
'order': 10,41
'progress': 0.6,42
'parent': 143
},44
{45
'id': 3,46
'text': 'Task #2',47
'start_date': '03-04-2019',48
'duration': 2,49
'order': 20,50
'progress': 0.6,51
'parent': 152
},53
{54
'id': 4,55
'text': 'Task #3',56
'start_date': '05-04-2019',57
'duration': 1,58
'order': 10,59
'progress': 0.6,60
'parent': 161
}62
63
],64
'links': [{65
'id': 1,66
'source': 1,67
'target': 2,68
'type': '1'69
},70
{71
'id': 2,72
'source': 2,73
'target': 3,74
'type': '0'75
},76
{77
'id': 3,78
'source': 3,79
'target': 4,80
'type': '0'81
},82
{83
'id': 4,84
'source': 2,85
'target': 5,86
'type': '2'87
}88
]89
};90
//console.log(task1.data)91
task1.data.forEach(function (val, index) {92
console.log(val.start_date);93
//gantt.config.start_date = gantt.date.add(new Date(val.start_date), -2, 'month');94
// gantt.config.end_date = gantt.date.add(new Date(val.start_date), 2, 'month');95
})96
// gantt.config.start_date = gantt.date.add(new Date(2019, 02, 31), -1, 'month');97
// gantt.config.end_date = gantt.date.add(new Date(2019, 03, 8), 1, 'month');;98
gantt.config['scales'] = [{99
unit: 'day',100
step: 1,101
format: '%d %M'102
},103
{ unit: "year", step: 1, format: "%Y" },104
{ unit: "month", step: 1, format: "%M" }105
];106
gantt.config.scale_height = 100;107
108
109
gantt.init('gantt_here');110
gantt.parse(task1);111
</script>112
113
</html>114
Advertisement
Answer
There is an API called getState() for that if you want the starting date and ending date from the Gantt chart.
gantt.getState().min_date will give you the date that tasks are displayed in the chart from and gantt.getState().max_date will give you the date that tasks are displayed in the chart till. If you want a date before or after the starting date or ending date, you can add/subtract the number of days according to your need by this gantt.date.add(new Date(gantt.getState().max_date), -1, 'day'). Here is the working example:
JavaScript
1
121
121
1
<!DOCTYPE html>2
<html>3
4
<head>5
<link rel='stylesheet' type='text/css' href='http://cdn.dhtmlx.com/gantt/edge/dhtmlxgantt.css'>6
<script src='http://cdn.dhtmlx.com/gantt/edge/dhtmlxgantt.js'></script>7
<style>8
.gantt_custom_button {9
background-color: rgb(206, 206, 206);10
position: absolute;11
right: -10px;12
top: 5px;13
width: 20px;14
height: 26px;15
border-radius: 0;16
}17
</style>18
19
20
</head>21
<div id='gantt_here' style='width:100%; height:500px;'></div>22
23
<body>24
<script>25
var task1 = {26
'data': [{27
'id': 1,28
'text': 'Project #1',29
'start_date': '01-04-2019',30
'duration': 2,31
'order': 10,32
'progress': 0.4,33
'open': true34
},35
{36
'id': 2,37
'text': 'Task #1',38
'start_date': '02-04-2019',39
'duration': 1,40
'order': 10,41
'progress': 0.6,42
'parent': 143
},44
{45
'id': 3,46
'text': 'Task #2',47
'start_date': '03-04-2019',48
'duration': 2,49
'order': 20,50
'progress': 0.6,51
'parent': 152
},53
{54
'id': 4,55
'text': 'Task #3',56
'start_date': '05-04-2019',57
'duration': 1,58
'order': 10,59
'progress': 0.6,60
'parent': 161
}62
63
],64
'links': [{65
'id': 1,66
'source': 1,67
'target': 2,68
'type': '1'69
},70
{71
'id': 2,72
'source': 2,73
'target': 3,74
'type': '0'75
},76
{77
'id': 3,78
'source': 3,79
'target': 4,80
'type': '0'81
},82
{83
'id': 4,84
'source': 2,85
'target': 5,86
'type': '2'87
}88
]89
};90
//console.log(task1.data)91
task1.data.forEach(function (val, index) {92
// console.log(val.start_date);93
//gantt.config.start_date = gantt.date.add(new Date(val.start_date), -2, 'month');94
// gantt.config.end_date = gantt.date.add(new Date(val.start_date), 2, 'month');95
})96
// gantt.config.start_date = gantt.date.add(new Date(2019, 02, 31), -1, 'month');97
// gantt.config.end_date = gantt.date.add(new Date(2019, 03, 8), 1, 'month');;98
gantt.config['scales'] = [{99
unit: 'day',100
step: 1,101
format: '%d %M'102
},103
{ unit: "year", step: 1, format: "%Y" },104
{ unit: "month", step: 1, format: "%M" }105
];106
gantt.config.scale_height = 100;107
108
109
gantt.init('gantt_here');110
gantt.parse(task1);111
112
console.log(gantt.getState().min_date);113
console.log(gantt.getState().max_date);114
115
console.log("Your custom date");116
console.log(gantt.date.add(new Date(gantt.getState().min_date), 1, 'day'));117
console.log(gantt.date.add(new Date(gantt.getState().max_date), -1, 'day'));118
119
</script>120
121
</html>