Example of Timeline Functional in React Gantt Component

/
/
Timeline

This sample allows you to customize the Gantt Chart timeline by adjusting the timeline unit size, header text format, and count for both the top and bottom tiers, and provides an option to enable the multitaskbar feature.

More Details...

1
Project schedule
Thu Feb 08 2024 08:00:00 GMT+0000 (Coordinated Universal Time)3/13/202425 days48
2
Planning
Thu Feb 08 2024 08:00:00 GMT+0000 (Coordinated Universal Time)2/14/20245 days100
3
Plan timeline
Thu Feb 08 2024 08:00:00 GMT+0000 (Coordinated Universal Time)2/14/20245 days100
4
Plan budget
Thu Feb 08 2024 08:00:00 GMT+0000 (Coordinated Universal Time)2/14/20245 days100
5
Allocate resources
Thu Feb 08 2024 08:00:00 GMT+0000 (Coordinated Universal Time)2/14/20245 days100
6
Planning complete
Wed Feb 14 2024 17:00:00 GMT+0000 (Coordinated Universal Time)2/14/20240 days3FS,4FS,5FS0
7
Design
Thu Feb 15 2024 08:00:00 GMT+0000 (Coordinated Universal Time)2/21/20245 days85
8
Software specification
Thu Feb 15 2024 08:00:00 GMT+0000 (Coordinated Universal Time)2/19/20243 days6FS60
9
Develop prototype
Thu Feb 15 2024 08:00:00 GMT+0000 (Coordinated Universal Time)2/19/20243 days6FS100
10
Get approval from customer
Tue Feb 20 2024 08:00:00 GMT+0000 (Coordinated Universal Time)2/21/20242 days9FS100
11
Design complete
Wed Feb 21 2024 17:00:00 GMT+0000 (Coordinated Universal Time)2/21/20240 days10FS0
12
Implementation phase
Thu Feb 22 2024 08:00:00 GMT+0000 (Coordinated Universal Time)3/6/202410 days26
13
Phase 1
Thu Feb 22 2024 08:00:00 GMT+0000 (Coordinated Universal Time)3/5/20249 days25
14
Implementation module 1
Thu Feb 22 2024 08:00:00 GMT+0000 (Coordinated Universal Time)3/5/20249 days25
15
Development task 1
Thu Feb 22 2024 08:00:00 GMT+0000 (Coordinated Universal Time)2/26/20243 days11FS50
16
Development task 2
Thu Feb 22 2024 08:00:00 GMT+0000 (Coordinated Universal Time)2/26/20243 days11FS50
17
Testing
Tue Feb 27 2024 08:00:00 GMT+0000 (Coordinated Universal Time)2/28/20242 days15FS,16FS0
18
Bug fix
Thu Feb 29 2024 08:00:00 GMT+0000 (Coordinated Universal Time)3/1/20242 days17FS0
19
Customer review meeting
Mon Mar 04 2024 08:00:00 GMT+0000 (Coordinated Universal Time)3/5/20242 days18FS0
20
Phase 1 complete
Tue Mar 05 2024 17:00:00 GMT+0000 (Coordinated Universal Time)3/5/20240 days19FS0
21
Phase 2
Thu Feb 22 2024 08:00:00 GMT+0000 (Coordinated Universal Time)3/6/202410 days28
22
Implementation module 2
Thu Feb 22 2024 08:00:00 GMT+0000 (Coordinated Universal Time)3/6/202410 days28
23
Development task 1
Thu Feb 22 2024 08:00:00 GMT+0000 (Coordinated Universal Time)2/27/20244 days50
24
Development task 2
Thu Feb 22 2024 08:00:00 GMT+0000 (Coordinated Universal Time)2/27/20244 days50
25
Testing
Wed Feb 28 2024 08:00:00 GMT+0000 (Coordinated Universal Time)2/29/20242 days23FS,24FS0
26
Bug fix
Fri Mar 01 2024 08:00:00 GMT+0000 (Coordinated Universal Time)3/4/20242 days25FS0
27
Customer review meeting
Tue Mar 05 2024 08:00:00 GMT+0000 (Coordinated Universal Time)3/6/20242 days26FS0
28
Phase 2 complete
Wed Mar 06 2024 17:00:00 GMT+0000 (Coordinated Universal Time)3/6/20240 days27FS0
29
Phase 3
Thu Feb 22 2024 08:00:00 GMT+0000 (Coordinated Universal Time)3/5/20249 days25
30
Implementation module 3
Thu Feb 22 2024 08:00:00 GMT+0000 (Coordinated Universal Time)3/5/20249 days25
31
Development task 1
Thu Feb 22 2024 08:00:00 GMT+0000 (Coordinated Universal Time)2/26/20243 days50
32
Development task 2
Thu Feb 22 2024 08:00:00 GMT+0000 (Coordinated Universal Time)2/26/20243 days50
33
Testing
Tue Feb 27 2024 08:00:00 GMT+0000 (Coordinated Universal Time)2/28/20242 days31FS,32FS0
34
Bug fix
Thu Feb 29 2024 08:00:00 GMT+0000 (Coordinated Universal Time)3/1/20242 days33FS0
35
Customer review meeting
Mon Mar 04 2024 08:00:00 GMT+0000 (Coordinated Universal Time)3/5/20242 days34FS0
36
Phase 3 complete
Tue Mar 05 2024 17:00:00 GMT+0000 (Coordinated Universal Time)3/5/20240 days35FS0
37
Integration
Thu Mar 07 2024 08:00:00 GMT+0000 (Coordinated Universal Time)3/11/20243 days20FS,28FS,36FS0
38
Final testing
Tue Mar 12 2024 08:00:00 GMT+0000 (Coordinated Universal Time)3/13/20242 days37FS0
39
Final delivery
Wed Mar 13 2024 17:00:00 GMT+0000 (Coordinated Universal Time)3/13/20240 days38FS0
Project schedule
Planning
Plan timeline
Plan budget
Allocate resources
Planning complete
Design
Software specification
Develop prototype
Get approval from customer
Design complete
Implementation phase
Phase 1
Implementation module 1
Development task 1
Development task 2
Testing
Bug fix
Customer review meeting
Phase 1 complete
Phase 2
Implementation module 2
Development task 1
Development task 2
Testing
Bug fix
Customer review meeting
Phase 2 complete
Phase 3
Implementation module 3
Development task 1
Development task 2
Testing
Bug fix
Customer review meeting
Phase 3 complete
Integration
Final testing
Final delivery
Properties
Timeline Unit Size
Top tier
Count
Unit
Format
Bottom tier
Count
Unit
Format
Enable multitaskbar
Description

This example demonstrates how to effectively customize the timeline settings of a Gantt Chart. You can customize the timeline width by adjusting the timelineunitsize property in timelineSettings. The Gantt Chart supports various timeline units such as minutes, hours, days, weeks, months, and years. You can easily customize these units by changing the unit for both top tier and bottom tier in timelineSettings. The format of the timeline can be customized by modifying the format value for both the top and bottom tiers. You can combine timeline cells in the top and bottom tiers using the count property in timelineSettings.

Tooltips are visible by default in the Gantt Chart timeline, You can customize the tooltip visiblity by using the showtooltip property in the timeline settings.

enablemultitaskbar allows you to display multiple taskbars within a parent row, ensuring a clear overview even in collapsed states.

Gantt component features are segregated into individual feature-wise modules. To use a selection support, inject the Selection module. To use markers in Gantt, inject the DayMarkers module.