Skip to content

Commit 25399bb

Browse files
SyncfusionBuildSyncfusionBuild
committed
Integrated latest changes at 06-19-2024 7:45:06 PM
1 parent 956e7f3 commit 25399bb

File tree

1 file changed

+276
-2
lines changed

1 file changed

+276
-2
lines changed

‎ej2-react/gantt/time-line/time-line.md

Lines changed: 276 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -200,14 +200,288 @@ The following code example how to customize the top tier to display the week's w
200200

201201
{% tabs %}
202202
{% highlight js tabtitle="index.jsx" %}
203-
{% include code-snippet/gantt/tooltip-cs8/app/index.jsx %}
203+
{% raw %}
204+
import * as React from 'react';
205+
import * as ReactDOM from 'react-dom';
206+
import { GanttComponent, Inject, Selection, DayMarkers, ColumnsDirective, ColumnDirective, HolidaysDirective, HolidayDirective } from '@syncfusion/ej2-react-gantt'
207+
import {timelineTemplateData} from './datasource'
208+
function App() {
209+
let ganttInstance ;
210+
const taskFields = {
211+
id: 'TaskID',
212+
name: 'TaskName',
213+
startDate: 'StartDate',
214+
duration: 'Duration',
215+
progress: 'Progress',
216+
dependency: 'Predecessor',
217+
child: 'subtasks'
218+
};
219+
const bgColor = (value, date) => {
220+
if (value === "S") {
221+
return "#7BD3EA"
222+
}
223+
const parsedDate = new Date(date);
224+
for (let i = 0; i < ganttInstance.holidays.length; i++) {
225+
const holiday = ganttInstance.holidays[i];
226+
const fromDate = new Date(holiday.from);
227+
const toDate = new Date(holiday.to)
228+
if (parsedDate >= fromDate && parsedDate <= toDate) {
229+
return "#97E7E1";
230+
}
231+
}
232+
return "#E0FBE2"
233+
};
234+
const imagedate = () => {
235+
const getImage = Math.floor(Math.random() * 5) + 1;
236+
return getImage + ".svg";
237+
238+
}
239+
const holidayValue = (value, date) => {
240+
const parsedDate = new Date(date);
241+
for (let i = 0; i < ganttInstance.holidays.length; i++) {
242+
const holiday = ganttInstance.holidays[i];
243+
const fromDate = new Date(holiday.from);
244+
const toDate = new Date(holiday.to)
245+
if (parsedDate >= fromDate && parsedDate <= toDate) {
246+
const options = { weekday: 'short' };
247+
return parsedDate.toLocaleDateString('en-US', options).toLocaleUpperCase();
248+
}
249+
}
250+
return value
251+
}
252+
const timelineTemplate = (props) => {
253+
if (props.tier == 'topTier') {
254+
return (<div
255+
className="e-header-cell-label e-gantt-top-cell-text"
256+
style={{
257+
width: '100%',
258+
backgroundColor: '#FBF9F1',
259+
fontWeight: 'bold',
260+
height: '100%',
261+
display: 'flex',
262+
justifyContent: 'center',
263+
alignItems: 'center',
264+
}}
265+
title={props.date}
266+
>
267+
<div>{props.value}</div>
268+
<div
269+
style={{
270+
width: '30px',
271+
height: '30px',
272+
lineHeight: 'normal',
273+
paddingLeft: '10px',
274+
}}
275+
>
276+
<img style={{ width: '100%', height: '100%' }} src={imagedate()} alt="Image" />
277+
</div>
278+
</div>)
279+
}
280+
if (props.tier == 'bottomTier') {
281+
return (<div
282+
className="e-header-cell-label e-gantt-top-cell-text"
283+
style={{
284+
width: '100%',
285+
backgroundColor: bgColor(props.value, props.date),
286+
textAlign: 'center',
287+
height: '100%',
288+
display: 'flex',
289+
alignItems: 'center',
290+
fontWeight: 'bold',
291+
justifyContent: 'center',
292+
}}
293+
title={props.date}
294+
>
295+
{holidayValue(props.value, props.date)}
296+
</div>)
297+
}
298+
}
299+
const splitterSettings = {
300+
columnIndex: 1
301+
};
302+
const timelineSettings = {
303+
topTier: {
304+
unit: 'Week',
305+
format: 'dd/MM/yyyy'
306+
},
307+
bottomTier: {
308+
unit: 'Day',
309+
count: 1
310+
},
311+
timelineUnitSize: 100
312+
};
313+
const labelSettings = {
314+
leftLabel: 'TaskName',
315+
};
316+
const projectStartDate = new Date('03/31/2019');
317+
const projectEndDate = new Date('04/23/2019');
318+
return <GanttComponent id='Timeline' ref={g => ganttInstance = g} dataSource={timelineTemplateData} timelineTemplate={timelineTemplate}
319+
splitterSettings={splitterSettings}
320+
taskFields={taskFields} height='550px'
321+
projectStartDate={projectStartDate} projectEndDate={projectEndDate} timelineSettings={timelineSettings}
322+
labelSettings={labelSettings} treeColumnIndex={1}>
323+
<ColumnsDirective>
324+
<ColumnDirective field='TaskID' visible={false}></ColumnDirective>
325+
<ColumnDirective field='TaskName' width={300} ></ColumnDirective>
326+
<ColumnDirective field='StartDate'></ColumnDirective>
327+
<ColumnDirective field='EndDate' ></ColumnDirective>
328+
<ColumnDirective field='Duration' ></ColumnDirective>
329+
<ColumnDirective field='Progress' ></ColumnDirective>
330+
</ColumnsDirective>
331+
<HolidaysDirective>
332+
<HolidayDirective from='04/04/2019' to='04/05/2019' label='Public Holiday'></HolidayDirective>
333+
<HolidayDirective from='04/12/2019' to='04/12/2019' label='Good Friday'></HolidayDirective>
334+
</HolidaysDirective>
335+
<Inject services={[Selection, DayMarkers]} />
336+
</GanttComponent>
337+
};
338+
ReactDOM.render(<App />, document.getElementById('root'));
339+
{% endraw %}
204340
{% endhighlight %}
205341
{% highlight ts tabtitle="index.tsx" %}
206-
{% include code-snippet/gantt/tooltip-cs8/app/index.tsx %}
342+
{% raw %}
343+
import * as React from 'react';
344+
import { useRef } from 'react';
345+
import * as ReactDOM from 'react-dom';
346+
import { GanttComponent, Inject, Selection, DayMarkers, ColumnsDirective, ColumnDirective, HolidaysDirective, HolidayDirective } from '@syncfusion/ej2-react-gantt';
347+
import {timelineTemplateData} from './datasource'
348+
function App() {
349+
let ganttInstance :any ;
350+
const taskFields: any = {
351+
id: 'TaskID',
352+
name: 'TaskName',
353+
startDate: 'StartDate',
354+
duration: 'Duration',
355+
progress: 'Progress',
356+
dependency: 'Predecessor',
357+
child: 'subtasks'
358+
};
359+
const bgColor = (value: string, date: string): string => {
360+
if (value === "S") {
361+
return "#7BD3EA"
362+
}
363+
const parsedDate = new Date(date);
364+
for (let i = 0; i < ganttInstance.holidays.length; i++) {
365+
const holiday = ganttInstance.holidays[i];
366+
const fromDate = new Date(holiday.from);
367+
const toDate = new Date(holiday.to)
368+
if (parsedDate >= fromDate && parsedDate <= toDate) {
369+
return "#97E7E1";
370+
}
371+
}
372+
return "#E0FBE2"
373+
};
374+
const imagedate = () => {
375+
const getImage = Math.floor(Math.random() * 5) + 1;
376+
return "./image/" + getImage + ".svg";
377+
378+
}
379+
const holidayValue = (value: string, date: string): string => {
380+
const parsedDate = new Date(date);
381+
for (let i = 0; i < ganttInstance.holidays.length; i++) {
382+
const holiday = ganttInstance.holidays[i];
383+
const fromDate = new Date(holiday.from);
384+
const toDate = new Date(holiday.to)
385+
if (parsedDate >= fromDate && parsedDate <= toDate) {
386+
const options: any = { weekday: 'short' };
387+
return parsedDate.toLocaleDateString('en-US', options).toLocaleUpperCase();
388+
}
389+
}
390+
return value
391+
}
392+
const timelineTemplate = (props): any => {
393+
if (props.tier == 'topTier') {
394+
return (<div
395+
className="e-header-cell-label e-gantt-top-cell-text"
396+
style={{
397+
width: '100%',
398+
backgroundColor: '#FBF9F1',
399+
fontWeight: 'bold',
400+
height: '100%',
401+
display: 'flex',
402+
justifyContent: 'center',
403+
alignItems: 'center',
404+
}}
405+
title={props.date}
406+
>
407+
<div>{props.value}</div>
408+
<div
409+
style={{
410+
width: '30px',
411+
height: '30px',
412+
lineHeight: 'normal',
413+
paddingLeft: '10px',
414+
}}
415+
>
416+
<img style={{ width: '100%', height: '100%' }} src={imagedate()} alt="Image" />
417+
</div>
418+
</div>)
419+
}
420+
if (props.tier == 'bottomTier') {
421+
return (<div
422+
className="e-header-cell-label e-gantt-top-cell-text"
423+
style={{
424+
width: '100%',
425+
backgroundColor: bgColor(props.value, props.date),
426+
textAlign: 'center',
427+
height: '100%',
428+
display: 'flex',
429+
alignItems: 'center',
430+
fontWeight: 'bold',
431+
justifyContent: 'center',
432+
}}
433+
title={props.date}
434+
>
435+
{holidayValue(props.value, props.date)}
436+
</div>)
437+
}
438+
}
439+
const splitterSettings: any = {
440+
columnIndex: 1
441+
};
442+
const timelineSettings: any = {
443+
topTier: {
444+
unit: 'Week',
445+
format: 'dd/MM/yyyy'
446+
},
447+
bottomTier: {
448+
unit: 'Day',
449+
count: 1
450+
},
451+
timelineUnitSize: 100
452+
};
453+
const labelSettings: any = {
454+
leftLabel: 'TaskName',
455+
};
456+
const projectStartDate = new Date('03/31/2019');
457+
const projectEndDate = new Date('04/23/2019');
458+
return <GanttComponent id='Timeline' ref={g => ganttInstance = g} dataSource={timelineTemplateData} timelineTemplate={timelineTemplate}
459+
splitterSettings={splitterSettings}
460+
taskFields={taskFields} height='550px'
461+
projectStartDate={projectStartDate} projectEndDate={projectEndDate} timelineSettings={timelineSettings}
462+
labelSettings={labelSettings} treeColumnIndex={1}>
463+
<ColumnsDirective>
464+
<ColumnDirective field='TaskID' visible={false}></ColumnDirective>
465+
<ColumnDirective field='TaskName' width={300} ></ColumnDirective>
466+
<ColumnDirective field='StartDate'></ColumnDirective>
467+
<ColumnDirective field='EndDate' ></ColumnDirective>
468+
<ColumnDirective field='Duration' ></ColumnDirective>
469+
<ColumnDirective field='Progress' ></ColumnDirective>
470+
</ColumnsDirective>
471+
<HolidaysDirective>
472+
<HolidayDirective from='04/04/2019' to='04/05/2019' label='Public Holiday'></HolidayDirective>
473+
<HolidayDirective from='04/12/2019' to='04/12/2019' label='Good Friday'></HolidayDirective>
474+
</HolidaysDirective>
475+
<Inject services={[Selection, DayMarkers]} />
476+
</GanttComponent>
477+
};
478+
ReactDOM.render(<App />, document.getElementById('root'));
479+
{% endraw %}
207480
{% endhighlight %}
208481
{% highlight html tabtitle="index.html" %}
209482
{% include code-snippet/gantt/tooltip-cs8/index.html %}
210483
{% endhighlight %}
211484
{% endtabs %}
212485

213486
{% previewsample "page.domainurl/code-snippet/gantt/tooltip-cs8" %}
487+

0 commit comments

Comments
 (0)