UNPKG

suivi-dhx-trial-gantt

Version:

An open source JavaScript Gantt chart that helps you illustrate a project schedule in a nice-looking chart.

github.com/DHTMLX/gantt

DHTMLX/gantt

100 lines (78 loc) • 3.63 kB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
<!DOCTYPE html> <head> <meta http-equiv="Content-type" content="text/html; charset=utf-8"> <title>Manually Scheduled Projects</title> <script src="../../codebase/dhtmlxgantt.js?v=9.0.5"></script> <link rel="stylesheet" href="../../codebase/dhtmlxgantt.css?v=9.0.5"> <script src="../common/testdata.js?v=9.0.5"></script> <style> html, body { height: 100%; padding: 0px; margin: 0px; overflow: hidden; } </style> </head> <body> <div id="gantt_here" style='width:100%; height:100%;'></div> <script> gantt.plugins({ auto_scheduling: true }); gantt.config.scale_height = 50; gantt.config.auto_scheduling = true; gantt.config.auto_scheduling_strict = true; gantt.config.auto_scheduling_compatibility = true; gantt.config.scales = [ { unit: "month", step: 1, format: "%F, %Y" }, { unit: "day", step: 1, format: "%j, %D" } ]; gantt.templates.rightside_text = function (start, end, task) { if (task.type == gantt.config.types.milestone) { return task.text; } return ""; }; gantt.config.lightbox.sections = [ { name: "description", height: 70, map_to: "text", type: "textarea", focus: true }, { name: "type", type: "typeselect", map_to: "type" }, { name: "time", type: "duration", map_to: "auto" } ]; gantt.locale.labels.section_auto_scheduling = "Auto Scheduling"; gantt.config.lightbox.project_sections = [ { name: "description", height: 70, map_to: "text", type: "textarea", focus: true }, { name: "type", type: "typeselect", map_to: "type" }, { name: "auto_scheduling", type: "checkbox", map_to: "auto_scheduling" }, { name: "time", type: "duration", map_to: "auto" } ]; gantt.attachEvent("onTaskLoading", (task) => { task.auto_scheduling = task.auto_scheduling !== false; return true; }); gantt.init("gantt_here"); gantt.parse({ data: [ { id: 11, text: "Project #1", start_date: "02-04-2025", duration: 16, type: "project", progress: 0.6, open: true }, { id: 12, text: "Task #1", start_date: "03-04-2025", duration: 5, parent: 11, progress: 1, open: true }, { id: 13, text: "Task #2", start_date: "03-04-2025", duration: 12, auto_scheduling: false, type: "project", parent: 11, progress: 0.5, open: true }, { id: 14, text: "Task #3", start_date: "02-04-2025", duration: 6, parent: 11, progress: 0.8, open: true }, { id: 15, text: "Task #4", start_date: "03-04-2025", duration: 14, type: "project", auto_scheduling: false, parent: 11, progress: 0.2, open: true }, { id: 16, text: "Final milestone", start_date: "15-04-2025", type: "milestone", parent: 11, progress: 0, open: true }, { id: 17, text: "Task #2.1", start_date: "03-04-2025", duration: 2, parent: 13, progress: 1, open: true }, { id: 18, text: "Task #2.2", start_date: "06-04-2025", duration: 3, parent: 13, progress: 0.8, open: true }, { id: 19, text: "Task #2.3", start_date: "10-04-2025", duration: 4, parent: 13, progress: 0.2, open: true }, { id: 20, text: "Task #2.4", start_date: "10-04-2025", duration: 4, parent: 13, progress: 0, open: true }, { id: 21, text: "Task #4.1", start_date: "03-04-2025", duration: 4, parent: 15, progress: 0.5, open: true }, { id: 22, text: "Task #4.2", start_date: "03-04-2025", duration: 4, parent: 15, progress: 0.1, open: true }, { id: 23, text: "Mediate milestone", start_date: "14-04-2025", type: "milestone", parent: 15, progress: 0, open: true } ], links: [ { id: 16, source: 17, target: 18, type: 0 }, { id: 17, source: 18, target: 19, type: 0 }, { id: 18, source: 19, target: 20, type: 0 } ] }); </script> </body>