javascriptgantt 1.0.0 → 1.2.0
Sign up to get free protection for your applications and to get access to all the features.
- package/.github/workflows/npm-publish-github-packages.yml +21 -27
- package/LICENSE +21 -21
- package/index.html +1108 -1111
- package/package.json +34 -33
- package/readme.md +158 -158
- package/src/assets/zt-tour/zt-tour.css +227 -227
- package/src/assets/zt-tour/zt-tour.js +1095 -1095
- package/src/gantt.css +1157 -1157
- package/src/gantt.js +9671 -9642
- package/src/theme/dark.css +100 -100
- package/style.css +215 -215
- /package/src/assets/images/{ztGanttLogo.png → jsGanttLogo.png} +0 -0
- /package/src/assets/images/{zt-gantt-screenshot.png → jsgantt-screenshot.png} +0 -0
package/package.json
CHANGED
@@ -1,33 +1,34 @@
|
|
1
|
-
{
|
2
|
-
"name": "javascriptgantt",
|
3
|
-
"version": "1.
|
4
|
-
"description": "An open source JavaScript Gantt. This library provides a powerful set of tools and functionalities to create interactive Gantt charts for project management.",
|
5
|
-
"main": "src/gantt.js",
|
6
|
-
"scripts": {
|
7
|
-
"lint": "eslint ."
|
8
|
-
},
|
9
|
-
"repository": {
|
10
|
-
"type": "git",
|
11
|
-
"url": "git+https://github.com/Sunilsolankiji/
|
12
|
-
},
|
13
|
-
"keywords": [
|
14
|
-
"gantt",
|
15
|
-
"chart",
|
16
|
-
"gantt chart",
|
17
|
-
"scheduler",
|
18
|
-
"timeline",
|
19
|
-
"jsganttchart",
|
20
|
-
"jsgantt"
|
21
|
-
|
22
|
-
|
23
|
-
"
|
24
|
-
"
|
25
|
-
|
26
|
-
|
27
|
-
|
28
|
-
"
|
29
|
-
|
30
|
-
"eslint": "^9.6.0",
|
31
|
-
"
|
32
|
-
|
33
|
-
}
|
1
|
+
{
|
2
|
+
"name": "javascriptgantt",
|
3
|
+
"version": "1.2.0",
|
4
|
+
"description": "An open source JavaScript Gantt. This library provides a powerful set of tools and functionalities to create interactive Gantt charts for project management.",
|
5
|
+
"main": "src/gantt.js",
|
6
|
+
"scripts": {
|
7
|
+
"lint": "eslint ."
|
8
|
+
},
|
9
|
+
"repository": {
|
10
|
+
"type": "git",
|
11
|
+
"url": "git+https://github.com/Sunilsolankiji/javascriptgantt"
|
12
|
+
},
|
13
|
+
"keywords": [
|
14
|
+
"gantt",
|
15
|
+
"chart",
|
16
|
+
"gantt chart",
|
17
|
+
"scheduler",
|
18
|
+
"timeline",
|
19
|
+
"jsganttchart",
|
20
|
+
"jsgantt",
|
21
|
+
"javascriptgantt"
|
22
|
+
],
|
23
|
+
"author": "Sunil Solanki",
|
24
|
+
"license": "MIT",
|
25
|
+
"bugs": {
|
26
|
+
"url": "https://github.com/Sunilsolankiji/javascriptgantt/issues"
|
27
|
+
},
|
28
|
+
"homepage": "https://github.com/Sunilsolankiji/javascriptgantt#readme",
|
29
|
+
"devDependencies": {
|
30
|
+
"@eslint/js": "^9.6.0",
|
31
|
+
"eslint": "^9.6.0",
|
32
|
+
"globals": "^15.8.0"
|
33
|
+
}
|
34
|
+
}
|
package/readme.md
CHANGED
@@ -1,158 +1,158 @@
|
|
1
|
-
#
|
2
|
-
|
3
|
-
|
4
|
-
## Introduction
|
5
|
-
Welcome to the documentation for [
|
6
|
-
|
7
|
-
|
8
|
-
## Table of Contents
|
9
|
-
- [Installation](#installation)
|
10
|
-
- [Getting Started](#getting-started)
|
11
|
-
- [Features](#features)
|
12
|
-
|
13
|
-
---
|
14
|
-
|
15
|
-
<a name="installation"></a>
|
16
|
-
## Installation
|
17
|
-
|
18
|
-
To integrate the Gantt Chart Library, adhere to the steps below:
|
19
|
-
|
20
|
-
1. Download the library files from our website or repository.
|
21
|
-
2. Integrate the library files (`gantt.js` and `gantt.css`) into your project.
|
22
|
-
3. Link the library files in your HTML file.
|
23
|
-
4. You're now ready to start using the
|
24
|
-
|
25
|
-
<a href="https://
|
26
|
-
<img src="./src/assets/images/
|
27
|
-
</a>
|
28
|
-
|
29
|
-
---
|
30
|
-
|
31
|
-
<a name="getting-started"></a>
|
32
|
-
## Getting Started ##
|
33
|
-
To create a basic Gantt Chart, follow these steps:
|
34
|
-
|
35
|
-
**Step 1:** Add the files:
|
36
|
-
~~~html
|
37
|
-
<script src="gantt.js" ></script>
|
38
|
-
<link rel="stylesheet" href="gantt.css" type="text/css">
|
39
|
-
~~~
|
40
|
-
|
41
|
-
**Step 2:** Insert the markup:
|
42
|
-
~~~html
|
43
|
-
<div id="gantt_here" style='width:100%; height:100vh;'></div>
|
44
|
-
~~~
|
45
|
-
|
46
|
-
**Step 3:** Invoke the Gantt Chart Library using JavaScript, targeting the container element, and define your tasks, dependencies, and duration.
|
47
|
-
|
48
|
-
~~~js
|
49
|
-
let element = document.getElementById("gantt_here");
|
50
|
-
let gantt = new
|
51
|
-
gantt.options.columns = [
|
52
|
-
{
|
53
|
-
name: "text",
|
54
|
-
width: 245,
|
55
|
-
min_width: 80,
|
56
|
-
max_width: 300,
|
57
|
-
tree: true,
|
58
|
-
label: "Name",
|
59
|
-
resize: true,
|
60
|
-
template: (task) => {
|
61
|
-
return `<span>${task.parent == 0 ? task.text : task.subject}</span>`;
|
62
|
-
},
|
63
|
-
},
|
64
|
-
...
|
65
|
-
];
|
66
|
-
|
67
|
-
gantt.options.data = [
|
68
|
-
{ id: 1, text: "Project 1", parent: 0, progress: 50 },
|
69
|
-
{
|
70
|
-
id: 2,
|
71
|
-
text: "Task #1",
|
72
|
-
start_date: "05-05-2023",
|
73
|
-
end_date: "05-05-2023",
|
74
|
-
parent: 1,
|
75
|
-
progress: 60,
|
76
|
-
},
|
77
|
-
...
|
78
|
-
];
|
79
|
-
|
80
|
-
gantt.options.scales = [
|
81
|
-
{
|
82
|
-
unit: "week",
|
83
|
-
step: 1,
|
84
|
-
format: (t) => {
|
85
|
-
return "%d %F";
|
86
|
-
},
|
87
|
-
},
|
88
|
-
{
|
89
|
-
unit: "day",
|
90
|
-
step: 1,
|
91
|
-
format: "%d %D",
|
92
|
-
},
|
93
|
-
];
|
94
|
-
|
95
|
-
gantt.options.links = [
|
96
|
-
{ id: 1, source: 1, target: 2, type: 0 },
|
97
|
-
{ id: 2, source: 2, target: 3, type: 1 },
|
98
|
-
{ id: 3, source: 3, target: 4, type: 2 },
|
99
|
-
{ id: 4, source: 12, target: 15, type: 3 },
|
100
|
-
];
|
101
|
-
|
102
|
-
gantt.render();
|
103
|
-
~~~
|
104
|
-
|
105
|
-
**Note:** Remember to call `gantt.render();` whenever you wish to visualize the updated data.
|
106
|
-
|
107
|
-
[Live demo](https://
|
108
|
-
|
109
|
-
**Complete Documentation:** [
|
110
|
-
|
111
|
-
---
|
112
|
-
|
113
|
-
<a name="features"></a>
|
114
|
-
## Features
|
115
|
-
|
116
|
-
* **Task Linking:** Four types - finish-to-start, start-to-start, finish-to-finish, start-to-finish.
|
117
|
-
|
118
|
-
<a href="https://
|
119
|
-
<img src="./src/assets/images/links.gif">
|
120
|
-
</a>
|
121
|
-
|
122
|
-
* **Drag and Drop:** Shift multiple tasks horizontally and vertically.
|
123
|
-
* **Filtering:** Conveniently filter out tasks.
|
124
|
-
* **Tooltips:** Additional insights via tooltips.
|
125
|
-
* **Grid:** Columns in the grid are fully customizable.
|
126
|
-
* **Customization:** Modify the time scale, task edit form, and much more.
|
127
|
-
|
128
|
-
<a href="https://
|
129
|
-
<img src="./src/assets/images/popup.gif">
|
130
|
-
</a>
|
131
|
-
|
132
|
-
* **Task Progress:** Update task progress via dragging or manually set the percentage.
|
133
|
-
* **Exports:** Get your charts in PDF, PNG, or Excel formats.
|
134
|
-
* **Zoom Levels:** Multiple timeline views - hour, day, week, month, quarter, and year.
|
135
|
-
* **Full Screen:** View your Gantt in full screen for an immersive experience.
|
136
|
-
* **Task Management:** Expand, collapse, add markers, modify, or delete tasks.
|
137
|
-
* **Auto Scheduling:** Tasks are automatically scheduled.
|
138
|
-
* **Date Selection:** Easily select start and end dates through drag and drop.
|
139
|
-
* **Mouse Scroll:** Scroll timeline using mouse click.
|
140
|
-
* **Aesthetics:** Customize the task colors via a color picker.
|
141
|
-
|
142
|
-
<a href="https://
|
143
|
-
<img src="./src/assets/images/taskColor.gif">
|
144
|
-
</a>
|
145
|
-
|
146
|
-
* **Localization:** Multilingual support to cater to a global audience.
|
147
|
-
* **Themes:** Dark mode for those late-night work sessions.
|
148
|
-
|
149
|
-
<a href="https://
|
150
|
-
<img src="./src/assets/images/theme.gif">
|
151
|
-
</a>
|
152
|
-
|
153
|
-
You can see the full list of features in the [documentation](./docs/Gantt-Chart-Documentation.pdf)
|
154
|
-
|
155
|
-
|
156
|
-
[Try it Yourself:](https://stackblitz.com/edit/js-bdaa47?file=index.js): Dive into hands-on examples and truly understand the potential of the library.
|
157
|
-
|
158
|
-
---
|
1
|
+
# javascriptgantt Chart Library Documentation
|
2
|
+
|
3
|
+
|
4
|
+
## Introduction
|
5
|
+
Welcome to the documentation for [javascriptgantt](https://sunilsolankiji.github.io/javascriptgantt/) Chart Library. This library provides a powerful set of tools and functionalities to create interactive Gantt charts for project management. This documentation will guide you through the installation process, usage instructions, and available features of the library.
|
6
|
+
|
7
|
+
|
8
|
+
## Table of Contents
|
9
|
+
- [Installation](#installation)
|
10
|
+
- [Getting Started](#getting-started)
|
11
|
+
- [Features](#features)
|
12
|
+
|
13
|
+
---
|
14
|
+
|
15
|
+
<a name="installation"></a>
|
16
|
+
## Installation
|
17
|
+
|
18
|
+
To integrate the Gantt Chart Library, adhere to the steps below:
|
19
|
+
|
20
|
+
1. Download the library files from our website or repository.
|
21
|
+
2. Integrate the library files (`gantt.js` and `gantt.css`) into your project.
|
22
|
+
3. Link the library files in your HTML file.
|
23
|
+
4. You're now ready to start using the javascriptgantt Chart Library!
|
24
|
+
|
25
|
+
<a href="https://sunilsolankiji.github.io/javascriptgantt/">
|
26
|
+
<img src="./src/assets/images/jsgantt-screenshot.png">
|
27
|
+
</a>
|
28
|
+
|
29
|
+
---
|
30
|
+
|
31
|
+
<a name="getting-started"></a>
|
32
|
+
## Getting Started ##
|
33
|
+
To create a basic Gantt Chart, follow these steps:
|
34
|
+
|
35
|
+
**Step 1:** Add the files:
|
36
|
+
~~~html
|
37
|
+
<script src="gantt.js" ></script>
|
38
|
+
<link rel="stylesheet" href="gantt.css" type="text/css">
|
39
|
+
~~~
|
40
|
+
|
41
|
+
**Step 2:** Insert the markup:
|
42
|
+
~~~html
|
43
|
+
<div id="gantt_here" style='width:100%; height:100vh;'></div>
|
44
|
+
~~~
|
45
|
+
|
46
|
+
**Step 3:** Invoke the Gantt Chart Library using JavaScript, targeting the container element, and define your tasks, dependencies, and duration.
|
47
|
+
|
48
|
+
~~~js
|
49
|
+
let element = document.getElementById("gantt_here");
|
50
|
+
let gantt = new javascriptgantt(element);
|
51
|
+
gantt.options.columns = [
|
52
|
+
{
|
53
|
+
name: "text",
|
54
|
+
width: 245,
|
55
|
+
min_width: 80,
|
56
|
+
max_width: 300,
|
57
|
+
tree: true,
|
58
|
+
label: "Name",
|
59
|
+
resize: true,
|
60
|
+
template: (task) => {
|
61
|
+
return `<span>${task.parent == 0 ? task.text : task.subject}</span>`;
|
62
|
+
},
|
63
|
+
},
|
64
|
+
...
|
65
|
+
];
|
66
|
+
|
67
|
+
gantt.options.data = [
|
68
|
+
{ id: 1, text: "Project 1", parent: 0, progress: 50 },
|
69
|
+
{
|
70
|
+
id: 2,
|
71
|
+
text: "Task #1",
|
72
|
+
start_date: "05-05-2023",
|
73
|
+
end_date: "05-05-2023",
|
74
|
+
parent: 1,
|
75
|
+
progress: 60,
|
76
|
+
},
|
77
|
+
...
|
78
|
+
];
|
79
|
+
|
80
|
+
gantt.options.scales = [
|
81
|
+
{
|
82
|
+
unit: "week",
|
83
|
+
step: 1,
|
84
|
+
format: (t) => {
|
85
|
+
return "%d %F";
|
86
|
+
},
|
87
|
+
},
|
88
|
+
{
|
89
|
+
unit: "day",
|
90
|
+
step: 1,
|
91
|
+
format: "%d %D",
|
92
|
+
},
|
93
|
+
];
|
94
|
+
|
95
|
+
gantt.options.links = [
|
96
|
+
{ id: 1, source: 1, target: 2, type: 0 },
|
97
|
+
{ id: 2, source: 2, target: 3, type: 1 },
|
98
|
+
{ id: 3, source: 3, target: 4, type: 2 },
|
99
|
+
{ id: 4, source: 12, target: 15, type: 3 },
|
100
|
+
];
|
101
|
+
|
102
|
+
gantt.render();
|
103
|
+
~~~
|
104
|
+
|
105
|
+
**Note:** Remember to call `gantt.render();` whenever you wish to visualize the updated data.
|
106
|
+
|
107
|
+
[Live demo](https://sunilsolankiji.github.io/javascriptgantt/)
|
108
|
+
|
109
|
+
**Complete Documentation:** [javascriptgantt Documentation](./docs/Gantt-Chart-Documentation.pdf)
|
110
|
+
|
111
|
+
---
|
112
|
+
|
113
|
+
<a name="features"></a>
|
114
|
+
## Features
|
115
|
+
|
116
|
+
* **Task Linking:** Four types - finish-to-start, start-to-start, finish-to-finish, start-to-finish.
|
117
|
+
|
118
|
+
<a href="https://sunilsolankiji.github.io/javascriptgantt/">
|
119
|
+
<img src="./src/assets/images/links.gif">
|
120
|
+
</a>
|
121
|
+
|
122
|
+
* **Drag and Drop:** Shift multiple tasks horizontally and vertically.
|
123
|
+
* **Filtering:** Conveniently filter out tasks.
|
124
|
+
* **Tooltips:** Additional insights via tooltips.
|
125
|
+
* **Grid:** Columns in the grid are fully customizable.
|
126
|
+
* **Customization:** Modify the time scale, task edit form, and much more.
|
127
|
+
|
128
|
+
<a href="https://sunilsolankiji.github.io/javascriptgantt/">
|
129
|
+
<img src="./src/assets/images/popup.gif">
|
130
|
+
</a>
|
131
|
+
|
132
|
+
* **Task Progress:** Update task progress via dragging or manually set the percentage.
|
133
|
+
* **Exports:** Get your charts in PDF, PNG, or Excel formats.
|
134
|
+
* **Zoom Levels:** Multiple timeline views - hour, day, week, month, quarter, and year.
|
135
|
+
* **Full Screen:** View your Gantt in full screen for an immersive experience.
|
136
|
+
* **Task Management:** Expand, collapse, add markers, modify, or delete tasks.
|
137
|
+
* **Auto Scheduling:** Tasks are automatically scheduled.
|
138
|
+
* **Date Selection:** Easily select start and end dates through drag and drop.
|
139
|
+
* **Mouse Scroll:** Scroll timeline using mouse click.
|
140
|
+
* **Aesthetics:** Customize the task colors via a color picker.
|
141
|
+
|
142
|
+
<a href="https://sunilsolankiji.github.io/javascriptgantt/">
|
143
|
+
<img src="./src/assets/images/taskColor.gif">
|
144
|
+
</a>
|
145
|
+
|
146
|
+
* **Localization:** Multilingual support to cater to a global audience.
|
147
|
+
* **Themes:** Dark mode for those late-night work sessions.
|
148
|
+
|
149
|
+
<a href="https://sunilsolankiji.github.io/javascriptgantt/">
|
150
|
+
<img src="./src/assets/images/theme.gif">
|
151
|
+
</a>
|
152
|
+
|
153
|
+
You can see the full list of features in the [documentation](./docs/Gantt-Chart-Documentation.pdf)
|
154
|
+
|
155
|
+
|
156
|
+
[Try it Yourself:](https://stackblitz.com/edit/js-bdaa47?file=index.js): Dive into hands-on examples and truly understand the potential of the library.
|
157
|
+
|
158
|
+
---
|