}

Example of Timeline API in ASP.NET Core Gantt Control

Gantt Chart
Timeline
Timeline API

This sample demonstrates how the Gantt Chart schedules project tasks using the UTC timezone, ensuring consistent date and time handling across global teams.

1
Project schedule
2/10/20253/7/202520 days49
2
Planning
2/10/20252/14/20255 days100
3
Plan timeline
2/10/20252/14/20255 days100
4
Plan budget
2/10/20252/14/20255 days100
5
Allocate resources
2/10/20252/14/20255 days100
6
Planning complete
2/14/20252/14/20250 days3FS100
7
Design
2/17/20252/21/20255 days85
8
Software specification
2/17/20252/19/20253 days6FS60
9
Develop prototype
2/17/20252/19/20253 days6FS100
10
Get approval from customer
2/20/20252/21/20252 days9FS100
11
Design complete
2/21/20252/21/20250 days10FS0
12
Implementation phase
2/24/20253/7/202510 days12
13
Phase 1
2/24/20253/5/20257 days16
14
Implementation module 1
2/24/20253/5/20257 days16
15
Development task 1
2/24/20252/26/20253 days11FS50
17
Testing
2/25/20252/26/20252 days15FS0
18
Bug fix
3/3/20253/4/20252 days17FS0
19
Customer review meeting
3/3/20253/4/20252 days18FS0
20
Phase 1 complete
3/5/20253/5/20250 days19FS0
21
Phase 2
2/24/20253/5/20258 days20
22
Implementation module 2
2/24/20253/5/20258 days20
24
Development task 2
2/24/20252/27/20254 days50
25
Testing
2/26/20252/27/20252 days0
26
Bug fix
2/28/20253/3/20252 days25FS0
27
Customer review meeting
3/4/20253/5/20252 days26FS0
28
Phase 2 complete
3/5/20253/5/20250 days27FS0
29
Phase 3
2/25/20253/7/20259 days0
14
Implementation module 1
2/24/20253/6/20259 days16
15
Development task 1
2/24/20252/26/20253 days11FS50
17
Testing
2/27/20252/28/20252 days15FS0
18
Bug fix
3/3/20253/4/20252 days17FS0
19
Customer review meeting
3/5/20253/6/20252 days18FS0
20
Phase 1 complete
3/6/20253/6/20250 days19FS0
37
Integration
3/7/20253/11/20253 days20FS0
38
Final testing
3/12/20253/13/20252 days37FS0
39
Final delivery
3/13/20253/13/20250 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
Testing
Bug fix
Customer review meeting
Phase 1 complete
Phase 2
Implementation module 2
Development task 2
Testing
Bug fix
Customer review meeting
Phase 2 complete
Phase 3
Implementation module 1
Development task 1
Testing
Bug fix
Customer review meeting
Phase 1 complete
Integration
Final testing
Final delivery
Properties
Timeline Unit Size
Top tier
Count
Unit
Format
Bottom tier
Count
Unit
Format
Enable multitaskbar

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.


More information on the Essential® JS2 Gantt Chart can be found in this documentation section.

Transform your ASP.NET Core web apps today with Syncfusion® ASP.NET Core components
100+ high-performance and responsive UI components
Dedicated support
Hassle-free licensing
TRY IT FOR FREE
opens in a new tab
Documentation
opens in a new tab
Forum
opens in a new tab
Blog
opens in a new tab
Copyright © 2001 - 2025 Syncfusion® Inc.