Blazor Gantt Chart Example - Timezone
This example demonstrates how to plan and coordinate a multi-region marketing campaign using the Gantt Chart component. It showcases automatic adjustment of task dates and times based on the selected timezone, ensuring consistent scheduling accuracy across different geographic locations.
ID | Task Name | Start Date | End Date | Duration | Progress | Dependency |
|---|
| 1 | Campaign strategy & planning | Oct 10, 05:00 AM | Oct 10, 01:00 PM | 8 Hours | 66 | |
| 2 | Stakeholder alignment meeting | Oct 10, 05:00 AM | Oct 10, 06:30 AM | 1.5 Hours | 100 | |
| 3 | Competitor analysis | Oct 10, 06:30 AM | Oct 10, 09:00 AM | 2.5 Hours | 90 | 2FS |
| 4 | Messaging and value propositions | Oct 10, 09:00 AM | Oct 10, 01:00 PM | 4 Hours | 65 | 3FS |
| 5 | Market research survey | Oct 10, 07:00 AM | Oct 10, 09:00 AM | 2 Hours | 55 | |
| 6 | Customer persona workshop | Oct 10, 09:00 AM | Oct 10, 10:30 AM | 1.5 Hours | 60 | 5FS |
| 7 | Finalize campaign strategy | Oct 10, 10:30 AM | Oct 10, 01:00 PM | 2.5 Hours | 40 | 6FS |
| 8 | Creative production | Oct 11, 09:00 AM | Oct 11, 11:00 PM | 14 Hours | 54 | |
| 9 | Produce digital assets | Oct 11, 09:00 AM | Oct 11, 03:00 PM | 6 Hours | 77 | |
| 10 | Landing page development | Oct 11, 03:00 PM | Oct 11, 07:00 PM | 4 Hours | 45 | 9FS |
| 11 | Media & copy approval | Oct 11, 07:00 PM | Oct 11, 11:00 PM | 4 Hours | 30 | 10FS |
| 12 | Digital rollout | Oct 11, 11:00 PM | Oct 12, 07:00 AM | 8 Hours | 0 | |
| 13 | Deploy landing pages | Oct 11, 11:00 PM | Oct 12, 01:00 AM | 2 Hours | 0 | 11FS |
| 14 | Email blast | Oct 12, 01:00 AM | Oct 12, 03:00 AM | 2 Hours | 0 | 13FS |
| 15 | Activate advertisement campaigns | Oct 12, 03:00 AM | Oct 12, 07:00 AM | 4 Hours | 0 | 14FS |
| 16 | Regional market launch | Oct 12, 07:00 AM | Oct 12, 09:00 PM | 14 Hours | 0 | |
| 17 | United states launch | Oct 12, 07:00 AM | Oct 12, 11:00 AM | 4 Hours | 0 | 15FS |
| 18 | European union launch | Oct 12, 11:00 AM | Oct 12, 03:00 PM | 4 Hours | 0 | 17FS |
| 19 | Asia launch | Oct 12, 03:00 PM | Oct 12, 07:00 PM | 4 Hours | 0 | 18FS |
| 20 | Region rollout check-in | Oct 12, 07:00 PM | Oct 12, 09:00 PM | 2 Hours | 0 | 19FS |
| 21 | Campaign monitoring & closure | Oct 12, 09:00 PM | Oct 13, 06:00 AM | 9 Hours | 0 | |
| 22 | Monitor key performance indicators & analytics | Oct 12, 09:00 PM | Oct 13, 12:00 AM | 3 Hours | 0 | 20FS |
| 23 | Optimize campaign spend | Oct 13, 12:00 AM | Oct 13, 03:00 AM | 3 Hours | 0 | 22FS |
| 24 | Review results & archive | Oct 13, 03:00 AM | Oct 13, 06:00 AM | 3 Hours | 0 | 23FS |
Oct 09, 2025 | Oct 10, 2025 | Oct 11, 2025 | Oct 12, 2025 | Oct 13, 2025 |
12 AM | 01 AM | 02 AM | 03 AM | 04 AM | 05 AM | 06 AM | 07 AM | 08 AM | 09 AM | 10 AM | 11 AM | 12 PM | 01 PM | 02 PM | 03 PM | 04 PM | 05 PM | 06 PM | 07 PM | 08 PM | 09 PM | 10 PM | 11 PM | 12 AM | 01 AM | 02 AM | 03 AM | 04 AM | 05 AM | 06 AM | 07 AM | 08 AM | 09 AM | 10 AM | 11 AM | 12 PM | 01 PM | 02 PM | 03 PM | 04 PM | 05 PM | 06 PM | 07 PM | 08 PM | 09 PM | 10 PM | 11 PM | 12 AM | 01 AM | 02 AM | 03 AM | 04 AM | 05 AM | 06 AM | 07 AM | 08 AM | 09 AM | 10 AM | 11 AM | 12 PM | 01 PM | 02 PM | 03 PM | 04 PM | 05 PM | 06 PM | 07 PM | 08 PM | 09 PM | 10 PM | 11 PM | 12 AM | 01 AM | 02 AM | 03 AM | 04 AM | 05 AM | 06 AM | 07 AM | 08 AM | 09 AM | 10 AM | 11 AM | 12 PM | 01 PM | 02 PM | 03 PM | 04 PM | 05 PM | 06 PM | 07 PM | 08 PM | 09 PM | 10 PM | 11 PM | 12 AM | 01 AM | 02 AM | 03 AM | 04 AM | 05 AM | 06 AM | 07 AM | 08 AM | 09 AM |
Executive Brief & Stakeholder Sync
Creative & Copy Approved
First Ad Campaign Live
Campaign Wrap-Up
The Timezone property ensures all dates such as task start/end, baselines, indicators, and event markers are displayed according to the selected timezone. A dropdown enables switching between timezones at runtime, updating the chart instantly without needing a page reload.
The component also handles Daylight Saving Time (DST) automatically, ensuring schedule accuracy throughout the year. This helps teams plan and coordinate projects across regions with consistent time references.
For more details, refer to the documentation section.