UNPKG

jetsum_dhtmlx_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

72 lines (67 loc) • 3.32 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
<!DOCTYPE html> <head> <meta http-equiv="Content-type" content="text/html; charset=utf-8"> <title>Validate lightbox values</title> <script src="../../codebase/dhtmlxgantt.js?v=7.1.9"></script> <link rel="stylesheet" href="../../codebase/dhtmlxgantt.css?v=7.1.9"> <script src="../common/testdata.js?v=7.1.9"></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.config.details_on_create = true; gantt.config.lightbox.sections = [ {name: "description", height: 38, map_to: "text", type: "textarea", focus: true}, { name: "user", height: 22, map_to: "user", type: "select", options: [ {key: "", label: "Select a worker..."}, {key: "John", label: "John"}, {key: "Mike", label: "Mike"}, {key: "Anna", label: "Anna"}] }, {name: "time", type: "duration", map_to: "auto"} ]; gantt.locale.labels["section_user"] = "Worker"; gantt.attachEvent("onLightboxSave", function (id, item) { if (!item.text) { gantt.message({type: "error", text: "Enter task description!"}); return false; } if (!item.user) { gantt.message({type: "error", text: "Pick a worker for this task!"}); return false; } return true; }); gantt.init("gantt_here"); gantt.parse({ data: [ {id: 1, text: "Project #1", start_date: "01-04-2018", duration: "11", progress: 0.6, open: true, user: "", priority: "2"}, {id: 2, text: "Task #1", start_date: "03-04-2018", duration: "5", parent: "1", progress: 1, open: true, user: "John", priority: "1"}, {id: 3, text: "Task #2", start_date: "02-04-2018", duration: "7", parent: "1", progress: 0.5, open: true, user: "Anna", priority: "1"}, {id: 4, text: "Task #3", start_date: "02-04-2018", duration: "6", parent: "1", progress: 0.8, open: true, user: "Mike", priority: "2"}, {id: 5, text: "Task #4", start_date: "02-04-2018", duration: "5", parent: "1", progress: 0.2, open: true, user: "John", priority: "3"}, {id: 6, text: "Task #5", start_date: "02-04-2018", duration: "7", parent: "1", progress: 0, open: true, user: "John", priority: "2"}, {id: 7, text: "Task #2.1", start_date: "03-04-2018", duration: "2", parent: "3", progress: 1, open: true, user: "Mike", priority: "2"}, {id: 8, text: "Task #2.2", start_date: "06-04-2018", duration: "3", parent: "3", progress: 0.8, open: true, user: "Anna", priority: "3"}, {id: 9, text: "Task #2.3", start_date: "10-04-2018", duration: "4", parent: "3", progress: 0.2, open: true, user: "Mike", priority: "1"}, {id: 10, text: "Task #2.4", start_date: "10-04-2018", duration: "4", parent: "3", progress: 0, open: true, user: "John", priority: "1"}, {id: 11, text: "Task #4.1", start_date: "03-04-2018", duration: "4", parent: "5", progress: 0.5, open: true, user: "John", priority: "3"}, {id: 12, text: "Task #4.2", start_date: "03-04-2018", duration: "4", parent: "5", progress: 0.1, open: true, user: "John", priority: "3"}, {id: 13, text: "Task #4.3", start_date: "03-04-2018", duration: "5", parent: "5", progress: 0, open: true, user: "Anna", priority: "3"} ], links: [ {id: "10", source: "11", target: "12", type: "1"}, {id: "11", source: "11", target: "13", type: "1"} ] }); </script> </body>