Blazor Gantt Chart Example - Timeline API Customization
This demo passes automated axe checks with 0 violations — semantic markup, ARIA, full keyboard operation, visible focus. Section 508 conformant
Accessibility report
VPAT
ID | Name | Start Date | End Date | Duration | Progress | Dependency | Notes |
|---|
| 1 | Project initiation | 4/5/2021 | 4/16/2021 | 10 days | 56 | ||
| 2 | Identify site location | 4/5/2021 | 4/9/2021 | 5 days | 70 | ||
| 3 | Perform soil test | 4/5/2021 | 4/9/2021 | 5 days | 50 | ||
| 4 | Soil test approval | 4/12/2021 | 4/16/2021 | 5 days | 50 | 2FS | |
| 5 | Project estimation | 4/12/2021 | 4/16/2021 | 5 days | 25 | ||
| 6 | Develop floor plan for estimation | 4/12/2021 | 4/16/2021 | 5 days | 0 | ||
| 7 | List materials | 4/12/2021 | 4/16/2021 | 5 days | 50 | ||
| 8 | Development of final design | 4/5/2021 | 4/7/2021 | 3 days | 23 | ||
| 9 | Develop dimensions and design | 4/5/2021 | 4/6/2021 | 2 days | 30 | ||
| 10 | Develop designs to meet industry | 4/5/2021 | 4/6/2021 | 2 days | 40 | ||
| 11 | Include all the details | 4/5/2021 | 4/7/2021 | 3 days | 30 | ||
| 12 | CAD - Computer Aided Design | 4/5/2021 | 4/7/2021 | 3 days | 0 |
Apr 01, 2021 | Apr 04, 2021 | Apr 11, 2021 | Apr 18, 2021 | Apr 25, 2021 | May 02, 2021 | May 09, 2021 | May 16, 2021 | May 23, 2021 |
T | F | S | S | M | T | W | T | F | S | S | M | T | W | T | F | S | S | M | T | W | T | F | S | S | M | T | W | T | F | S | S | M | T | W | T | F | S | S | M | T | W | T | F | S | S | M | T | W | T | F | S | S | M | T | W | T | F | S |
Properties
This sample demonstrates a construction planning workflow from site analysis and soil testing to estimation and design, while showcasing the flexible timeline customization options available in the Blazor Gantt Chart . It illustrates how real-world engineering processes can be effectively represented using task hierarchies, dependencies, and progress tracking across different phases, including site identification, approval, estimation, and detailed design.
The Gantt Chart supports customizable timeline tiers, enabling precise control over interval representation through the TimelineSettings.TopTier and TimelineSettings.BottomTier properties. These settings allow you to define the unit, format, and count of both top and bottom timeline headers, ensuring accurate and flexible visualization of time-based data.
This flexibility allows the timeline view to adapt to varying project durations, ranging from short-term tasks measured in hours to long-term planning across days, weeks, months, quarter-years, half-years, and years.
The sample also includes an interactive property panel that enables runtime modification of timeline settings such as timeline view start and end dates, weekend visibility, unit width, tier configuration, counts, and display formats. These settings provide immediate visual feedback and allow different timeline views to be configured based on project scheduling requirements and working calendars.
Refer to the Blazor Gantt Chart documentation for comprehensive information on timeline configuration.