1
+ <!DOCTYPE html>
2
+ < html lang ="en " class ="no-js ">
3
+
4
+ <!-- Head -->
5
+
6
+ < head >
7
+ <!-- Meta data -->
8
+ < meta charset ="utf-8 ">
9
+ < title > jsGantt Improved</ title >
10
+ < meta name ="description " content ="FREE javascript gantt - jsGantt Improved HTML, CSS and AJAX only ">
11
+ < meta name ="keywords " content ="jsgantt-improved free javascript gantt-chart html css ajax ">
12
+ < meta name ="viewport " content ="width=device-width,initial-scale=1 ">
13
+ < style >
14
+ .row [type = checkbox ] {
15
+ margin-right : 10px
16
+ }
17
+
18
+ .row {
19
+ width : 100%
20
+ }
21
+
22
+ .space {
23
+ display : inline-block;
24
+ width : 30px ;
25
+ }
26
+
27
+ .deadline-line {
28
+ position : absolute;
29
+ top : 0 ;
30
+ width : 1px ;
31
+ height : 22px ;
32
+ background : # 777777 ;
33
+ }
34
+
35
+ @media print {
36
+ .no-print {
37
+ display : none;
38
+ }
39
+ }
40
+ </ style >
41
+ <!-- External resources -->
42
+ <!-- jQuery + Ajax [required by Bootstrap] -->
43
+ < script src ="https://code.jquery.com/jquery-3.1.1.slim.min.js "
44
+ integrity ="sha384-A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/EheAdgtzNs3hpfag6Ed950n " crossorigin ="anonymous ">
45
+ </ script >
46
+ < script src ="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js "
47
+ integrity ="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb " crossorigin ="anonymous ">
48
+ </ script >
49
+ <!-- Required by smooth scrolling -->
50
+ < script src ="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js "> </ script >
51
+ <!-- Bootstrap v4.0.0 Alpha -->
52
+ < link href ="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css " rel ="stylesheet "
53
+ integrity ="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ " crossorigin ="anonymous " />
54
+ < script src ="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js "
55
+ integrity ="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn " crossorigin ="anonymous ">
56
+ </ script >
57
+ <!-- Google Fonts -->
58
+ < link href ="https://fonts.googleapis.com/css?family=Cookie|Satisfy|Kelly+Slab|Overlock " rel ="stylesheet ">
59
+
60
+ <!-- jsGanttImproved App -->
61
+ < link href ="../dist/jsgantt.css " rel ="stylesheet " type ="text/css " />
62
+ < script src ="../dist/jsgantt.js " type ="text/javascript "> </ script >
63
+ </ head >
64
+
65
+ <!-- Content -->
66
+
67
+ < body data-spy ="scroll " data-target ="#my-navbar-nav " style ="padding: 30px; ">
68
+
69
+ < div class ="no-print ">
70
+ < h3 > Chart</ h3 >
71
+
72
+ < div id ="embedded-Gantt ">
73
+ </ div >
74
+
75
+ < div class ="row ">
76
+ < h3 class ="row "> Hide and Show Properties</ h3 >
77
+
78
+ < div class ="row ">
79
+ < span >
80
+ < label for ="vShowRes "> Responsible</ label >
81
+ < input type ="checkbox " id ="vShowRes " onchange ="start(event) " />
82
+ </ span >
83
+
84
+ < span >
85
+ < label for ="vShowDur "> Duration</ label >
86
+ < input type ="checkbox " id ="vShowDur " onchange ="start(event) " />
87
+ </ span >
88
+
89
+ < span >
90
+ < label for ="vShowCost "> Cost</ label >
91
+ < input type ="checkbox " id ="vShowCost " onchange ="start(event) " />
92
+ </ span >
93
+
94
+ <!-- <span>
95
+ <label for="vShowAddEntries">Add Entry</label>
96
+ <input type="checkbox" id="vShowAddEntries" checked onchange="start(event)" />
97
+ </span> -->
98
+
99
+ < span >
100
+ < label for ="vShowComp "> Comp</ label >
101
+ < input type ="checkbox " id ="vShowComp " onchange ="start(event) " />
102
+ </ span >
103
+
104
+ < span >
105
+ < label for ="vShowTaskInfoLink "> tooltip</ label >
106
+ < input type ="checkbox " id ="vShowTaskInfoLink " onchange ="start(event) " />
107
+ </ span >
108
+
109
+ < span >
110
+ < label for ="vShowEndWeekDate "> date for the last day of the week</ label >
111
+ < input type ="checkbox " id ="vShowEndWeekDate " onchange ="start(event) " />
112
+ </ span >
113
+
114
+
115
+
116
+ </ div >
117
+
118
+ < span >
119
+ < label for ="vShowStartDate "> StartDate</ label >
120
+ < input type ="checkbox " id ="vShowStartDate " onchange ="start(event) " />
121
+ </ span >
122
+
123
+ < span >
124
+ < label for ="vShowEndDate "> EndDate</ label >
125
+ < input type ="checkbox " id ="vShowEndDate " onchange ="start(event) " />
126
+ </ span >
127
+
128
+ < span >
129
+ < label for ="vShowPlanStartDate "> Planned StartDate</ label >
130
+ < input type ="checkbox " id ="vShowPlanStartDate " onchange ="start(event) " />
131
+ </ span >
132
+
133
+ < span >
134
+ < label for ="vShowPlanEndDate "> Planned EndDate</ label >
135
+ < input type ="checkbox " id ="vShowPlanEndDate " onchange ="start(event) " />
136
+ </ span >
137
+ </ div >
138
+
139
+
140
+ < br >
141
+
142
+ Choose a language:
143
+ < select id ="lang " onchange ="start(event) ">
144
+ < option value ='cn '> Chinese (cn)</ option >
145
+ < option value ='cs '> Czech (cs)</ option >
146
+ < option value ='nl '> Dutch (Standard)</ option >
147
+ < option value ='en ' selected > English (en)</ option >
148
+ < option value ='fr '> French (fr)</ option >
149
+ < option value ='de '> German (de)</ option >
150
+ < option value ='hu '> Hungarian (hu)</ option >
151
+ < option value ='id '> Indonesian (id)</ option >
152
+ < option value ='ja '> Japanese (ja)</ option >
153
+ < option value ='pt '> Portuguese (pt)</ option >
154
+ < option value ='ru '> Russian (ru)</ option >
155
+ < option value ='es '> Spanish (es)</ option >
156
+ < option value ='sv '> Swedish (sv)</ option >
157
+ < option value ='tr '> Turkish (tr)</ option >
158
+ </ select >
159
+
160
+ < br />
161
+ Data getting from a URL, < a href ="fixes/data-plan-color.json "> JSON Data</ a > . Use `bigdata.json` to test with more
162
+ data.
163
+ < input id ="dataurl " onchange ="start(event) " value ="./fixes/data-plan-color.json " type ="text ">
164
+ < br />
165
+
166
+ Delay for tooltip to hide (in ms): < input id ="delay " onchange ="start(event) " value ="150 " type ="number ">
167
+
168
+ UseSingleCell: < input id ="useSingleCell " onchange ="start(event) " value ="100000 " type ="number ">
169
+
170
+
171
+ < br />
172
+
173
+ < span >
174
+ < label > Configure debug and see in console:</ label >
175
+ < input type ="checkbox " id ="debug " onchange ="start(event) " />
176
+ </ span >
177
+
178
+ < br />
179
+
180
+ < span >
181
+ < label > Configure editable:</ label >
182
+ < input type ="checkbox " id ="editable " checked onchange ="start(event) " />
183
+ </ span >
184
+
185
+ < br />
186
+
187
+ < span >
188
+ < label > Configure sortTasks:</ label >
189
+ < input type ="checkbox " id ="sort " onchange ="start(event) " />
190
+ </ span >
191
+
192
+ < span >
193
+ < label > Show Weekenddays:</ label >
194
+ < input type ="checkbox " id ="vShowWeekends " checked onchange ="start(event) " />
195
+ </ span >
196
+
197
+
198
+
199
+
200
+ < br />
201
+
202
+
203
+ <!-- <span>-->
204
+ < label > Height:</ label >
205
+ < input type ="text " id ="vTotalHeight " fl onchange ="start(event) " />
206
+ (CSS style height like "300px". Empty for auto height)
207
+
208
+
209
+ < br /> < br />
210
+ < span >
211
+ < label > Custom elements (black lines for deadlines):</ label >
212
+ < input type ="checkbox " id ="customElements " checked onchange ="start(event) " />
213
+ < div class ="space "> </ div >
214
+ < label > Min Date:</ label >
215
+ < input type ="date " id ="vMinDate " onchange ="start(event) " />
216
+ < div class ="space "> </ div >
217
+ < label > Max Date:</ label >
218
+ < input type ="date " id ="vMaxDate " onchange ="start(event) " />
219
+ </ span >
220
+
221
+ < br />
222
+
223
+ < span >
224
+ < label > Custom Tooltip Template:</ label > < br />
225
+ < textarea id ="tooltiptemplate "
226
+ onchange ="start(event) "> < div > Nome: {{pName}}</ div > < div > {{Lang:pStart}}: {{pStart}}</ div > </ textarea >
227
+ < div class ="space "> </ div >
228
+ < label > Dynamic tooltip:</ label >
229
+ < input type ="checkbox " id ="dynamicTooltip " checked onchange ="start(event) " />
230
+ </ span >
231
+
232
+
233
+ < br /> < br />
234
+ < span >
235
+ < label > Custom columns order:</ label >
236
+ < input type ="text " id ="vColumnOrder " onchange ="start(event) " />
237
+ <!-- value="vShowDur,vShowComp,vShowRes,vShowStartDate,vShowEndDate,vShowPlanStartDate,vShowPlanEndDate,vShowCost,vAdditionalHeaders,vShowAddEntries" -->
238
+ </ span >
239
+
240
+
241
+
242
+ < br />
243
+
244
+ < span >
245
+ < button onclick ="clearTasks() "> Clear all tasks</ button >
246
+ </ span >
247
+
248
+ < span >
249
+ < button onclick ="printTasksInConsole() "> Print data in console</ button >
250
+ </ span >
251
+
252
+ < br />
253
+
254
+ < select id ="print_page_size ">
255
+ < option value ="210,297 "> A4 Portrait</ option >
256
+ < option value ="297,210 "> A4 Landscape</ option >
257
+ < option value ="297,420 "> A3 Portrait</ option >
258
+ < option value ="420,297 "> A3 Landscape</ option >
259
+ < option value ="420,594 "> A2 Portrait</ option >
260
+ < option value ="594,420 "> A2 Landscape</ option >
261
+ < option value ="594,841 "> A1 Portrait</ option >
262
+ < option value ="841,594 "> A1 Landscape</ option >
263
+ < option value ="841,1189 "> A0 Portrait</ option >
264
+ < option value ="1189,841 "> A0 Landscape</ option >
265
+ </ select >
266
+ < button onclick ="printChart() "> Print</ button >
267
+
268
+ < br >
269
+
270
+ < small >
271
+ * Click events in table are binded to console.log for testing
272
+ </ small >
273
+
274
+
275
+ < br /> < br />
276
+ </ div >
277
+
278
+
279
+ </ body >
280
+ < script type ="text/javascript " src ="index.js "> </ script >
281
+
282
+ </ html >
0 commit comments