Skip to content

Commit a6846dd

Browse files
author
Maria Rudenko
committed
Merge pull request '[update] 'Initializing' article' (#75) from GS-2694 into master
Reviewed-on: https://git.webix.io/Servers/gantt-docs/pulls/75
2 parents c53b504 + 6d5126d commit a6846dd

File tree

2 files changed

+89
-80
lines changed

2 files changed

+89
-80
lines changed

‎data/desktop/initializing_gantt_chart.md‎

Lines changed: 89 additions & 80 deletions
Original file line numberDiff line numberDiff line change
@@ -23,6 +23,7 @@ This guide tells about initialization of dhtmlxGantt in plain JS and HTML. You c
2323
</table>
2424

2525

26+
2627
Creating basic Gantt chart
2728
-----------------------
2829

@@ -36,14 +37,14 @@ To display a basic Gantt on the page, follow 3 steps:
3637
<!DOCTYPE html>
3738
<html>
3839
<head>
39-
<script src="codebase/dhtmlxgantt.js"></script>
40-
<link href="codebase/dhtmlxgantt.css" rel="stylesheet">
40+
<script src="codebase/dhtmlxgantt.js"></script>
41+
<link href="codebase/dhtmlxgantt.css" rel="stylesheet">
4142
</head>
4243
<body>
43-
<div id="gantt_here" style='width:1000px; height:400px;'></div>
44-
<script type="text/javascript">
45-
gantt.init("gantt_here"); /*!*/
46-
</script>
44+
<div id="gantt_here" style='width:1000px; height:400px;'></div>
45+
<script type="text/javascript">
46+
gantt.init("gantt_here"); /*!*/
47+
</script>
4748
</body>
4849
</html>
4950
~~~
@@ -53,19 +54,22 @@ To display a basic Gantt on the page, follow 3 steps:
5354
{{sample
5455
01_initialization/01_basic_init.html
5556
}}
56-
57-
57+
58+
59+
5860
How to add Gantt source files into a project
5961
------------------------------------------------------------
6062

6163
You can add Gantt code file into your project in several ways, depending on the type of an application you create:
6264

63-
- [Include files via the &#60;script&#62; tag](#scripttag)
64-
- [Import files into ES6/7 and TypeScript apps](#moduleimport)
65-
- [Include files into a RequireJS-based app](#requirejsimport)
65+
- [Include files via the &#60;script&#62; tag](#usingscripttag)
66+
- [Import files into ES6/7 and TypeScript apps](#importfilesintoes67andtypescriptapps)
67+
- [Using Gantt with Vite](#usingganttwithvite)
68+
- [Svelte production build](#svelteproductionbuild)
69+
- [Include files into a RequireJS-based app](#includefilesintoarequirejsbasedapp)
6670

6771

68-
Include files via the &#60;script&#62; tag
72+
Include files via the &#60;script&#62; tag {#usingscripttag}
6973
--------------------------------------------
7074

7175
The dhtmlxGantt requires including 2 code files on the page:
@@ -82,9 +86,11 @@ Let's quickly explore the structure of the dhtmlxGantt package to find out where
8286

8387
Main folders and files that make up the dhtmlxGantt package are:
8488

85-
- <b>sources</b> - the source code files of the library. The files are not minified and easy-to-read. The package is mostly intended to be used for components' debugging
86-
- <b>samples</b> - the code samples
87-
- <b>codebase</b> - the packed code files of the library. These files have much smaller size and intended to be used in production. <b>In your apps you need to use files from this folder</b>
89+
- <b>sources</b> - the source code files of the library. The files are not minified and easy-to-read. The package is mostly intended to be used for debugging components.
90+
- <b>samples</b> - the code samples.
91+
- <b>codebase</b> - the packed code files of the library. These files have much smaller size and intended to be used in production. <b>In your apps you need to use files from this folder.</b>
92+
93+
8894

8995
Import files into ES6/7 and TypeScript apps
9096
---------------------------------------------
@@ -101,6 +107,8 @@ For the Commercial, Enterprise or Ultimate version the command look like this:
101107
import { gantt, Gantt } from 'dhtmlx-gantt';
102108
~~~
103109

110+
111+
104112
Using Gantt with Vite
105113
--------------------------
106114

@@ -115,48 +123,50 @@ optimizeDeps: {
115123
}
116124
~~~
117125

118-
### Svelte production build
126+
### Svelte production build {#svelteproductionbuild}
119127

120128
If you use [Gantt in a Svelte app](desktop/howtostart_svelte.md), you need to add the following setting into the **vite.config.js** file for the production build,
121-
replacing the *gantt_8.0.6_evaluation* folder with the path to your Gantt folder:
129+
replacing the *gantt_9.0.14_evaluation* folder with the path to your Gantt folder:
122130

123131
{{snippet vite.config.js}}
124132
~~~js
125133
build: {
126134
commonjsOptions: {
127135
include: [
128136
"node_modules",
129-
"gantt_8.0.6_evaluation/codebase/dhtmlxgantt.js"
137+
"gantt_9.0.14_evaluation/codebase/dhtmlxgantt.js"
130138
]
131139
},
132140
}
133141
~~~
134142

143+
144+
135145
Include files into a RequireJS-based app
136146
-------------------------------------------
137147

138148
To include dhtmlxGantt files into a RequireJS-based app, you need to follow the logic shown in the example below:
139149

140150
~~~js
141-
requirejs(["codebase/dhtmlxgantt"], function(dhx){
142-
var gantt = dhx.gantt;
143-
var Gantt = dhx.Gantt;// for Enterprise builds
144-
145-
gantt.init("gantt_here");
146-
gantt.parse({
147-
data: [
148-
{ id:1, text:"Project #2", start_date:"01-04-2018",
149-
duration:18, progress:0.4, open:true },
150-
{ id:2, text:"Task #1", start_date:"02-04-2018",
151-
duration:8, progress:0.6, parent:1 },
152-
{ id:3, text:"Task #2", start_date:"11-04-2018",
153-
duration:8, progress:0.6, parent:1 }
154-
],
155-
links: [
156-
{ id:1, source:1, target:2, type:"1" },
157-
{ id:2, source:2, target:3, type:"0" }
158-
]
159-
});
151+
requirejs(["codebase/dhtmlxgantt"], (dhx) => {
152+
const gantt = dhx.gantt;
153+
const Gantt = dhx.Gantt; // for Enterprise builds
154+
155+
gantt.init("gantt_here");
156+
gantt.parse({
157+
tasks: [
158+
{ id: 1, text: "Project #2", start_date: "01-04-2025", duration: 18,
159+
progress: 0.4, open: true },
160+
{ id: 2, text: "Task #1", start_date: "02-04-2025", duration: 8,
161+
progress: 0.6, parent: 1 },
162+
{ id: 3, text: "Task #2", start_date: "11-04-2025", duration: 8,
163+
progress: 0.6, parent: 1 }
164+
],
165+
links: [
166+
{ id: 1, source: 1, target: 2, type: "1" },
167+
{ id: 2, source: 2, target: 3, type: "0" }
168+
]
169+
});
160170
});
161171
~~~
162172

@@ -168,43 +178,43 @@ The example below demonstrates how a custom extension file *custom_tooltip_plugi
168178

169179
~~~js
170180
requirejs.config({
171-
paths: {
172-
"dhtmlxgantt": "../../codebase/dhtmlxgantt",
173-
"ext/dhtmlxgantt_custom_tooltip": "../custom_tooltip_plugin"
174-
},
175-
shim: {
176-
"ext/dhtmlxgantt_custom_tooltip": ["dhtmlxgantt"]
177-
}
181+
paths: {
182+
"dhtmlxgantt": "../../codebase/dhtmlxgantt",
183+
"ext/dhtmlxgantt_custom_tooltip": "../custom_tooltip_plugin"
184+
},
185+
shim: {
186+
"ext/dhtmlxgantt_custom_tooltip": ["dhtmlxgantt"]
187+
}
178188
});
179189

180-
requirejs(["dhtmlxgantt"],
181-
function (dhx) {
182-
var gantt = dhx.gantt;
183-
184-
var date_to_str = gantt.date.date_to_str(gantt.config.task_date);
185-
var today = new Date(2018, 3, 5);
186-
gantt.addMarker({
187-
start_date: today,
188-
css: "today",
189-
text: "Today",
190-
title: "Today: " + date_to_str(today)
191-
});
192-
193-
gantt.init("gantt_here");
194-
gantt.parse({
195-
data: [
196-
{ id:1, text:"Project #2", start_date:"01-04-2018",
197-
duration:18, progress:0.4, open:true },
198-
{ id:2, text:"Task #1", start_date:"02-04-2018",
199-
duration:8, progress:0.6, parent:1 },
200-
{ id:3, text:"Task #2", start_date:"11-04-2018",
201-
duration:8, progress:0.6, parent:1 }
202-
],
203-
links: [
204-
{ id:1, source:1, target:2, type:"1" },
205-
{ id:2, source:2, target:3, type:"0" }
206-
]
207-
});
190+
requirejs(["dhtmlxgantt"], (dhx) => {
191+
const gantt = dhx.gantt;
192+
193+
const date_to_str = gantt.date.date_to_str(gantt.config.task_date);
194+
const today = new Date();
195+
196+
gantt.addMarker({
197+
start_date: today,
198+
css: "today",
199+
text: "Today",
200+
title: `Today: ${date_to_str(today)}`
201+
});
202+
203+
gantt.init("gantt_here");
204+
gantt.parse({
205+
tasks: [
206+
{ id: 1, text: "Project #2", start_date: "01-04-2025", duration: 18,
207+
progress: 0.4, open: true },
208+
{ id: 2, text: "Task #1", start_date: "02-04-2025", duration: 8,
209+
progress: 0.6, parent: 1 },
210+
{ id: 3, text: "Task #2", start_date: "11-04-2025", duration: 8,
211+
progress: 0.6, parent: 1 }
212+
],
213+
links: [
214+
{ id: 1, source: 1, target: 2, type: "1" },
215+
{ id: 2, source: 2, target: 3, type: "0" }
216+
]
217+
});
208218
});
209219
~~~
210220

@@ -215,20 +225,19 @@ Check that the module name for any file inside the package is specified as *a re
215225
- "dhtmlxgantt": "./vendor/dhtmlxgantt/dhtmlxgantt"
216226

217227

228+
218229
Full screen mode
219230
---------------------------------
220231

221232
To correctly display a Gantt chart in the full-screen mode in different browsers, define the following style on the page:
222233

223234
~~~html
224235
<style type="text/css" media="screen">
225-
html, body{
226-
margin:0px;
227-
padding:0px;
228-
height:100%;
229-
overflow:hidden;
230-
}
236+
html, body {
237+
margin: 0;
238+
padding: 0;
239+
height: 100%;
240+
overflow: hidden;
241+
}
231242
</style>
232243
~~~
233-
234-

‎media/desktop/init_gantt_front.png‎

10.4 KB
Loading

0 commit comments

Comments
 (0)