Blazorise Gantt: Timeline
Control the visible date range and add timeline-level annotations.
Auto Expand View
EnableAutoExpandView when the visible range should follow the loaded task dates instead of the bound Date. This sample keeps the anchor date intentionally outside the task range, so switching the toggle off shows the default date-based range again.
Anchor date: 5/13/2026 | View: Week | AutoExpandView: True
<Field Margin="Margin.Is3.FromBottom"> <Switch @bind-Value="">Auto expand current view to the loaded task range</Switch> </Field> <Gantt TItem="TaskItem" Data="" @bind-Date="" @bind-SelectedView="" AutoExpandView="" DurationField="Duration"> <GanttColumns> <GanttColumn Field="Title" Title="Task" Expandable Width="Width.Px( 220 )" /> <GanttColumn Field="Start" Width="Width.Px( 130 )" /> <GanttColumn Field="End" Width="Width.Px( 130 )" Visible="false" /> <GanttColumn Field="Duration" Width="Width.Px( 90 )" TextAlignment="TextAlignment.Center" Visible="false" /> </GanttColumns> <GanttToolbar /> <GanttViews> <GanttWeekView TimelineCellWidth="92" RowHeight="44" /> <GanttMonthView TimelineCellWidth="38" RowHeight="44" /> <GanttYearView TimelineCellWidth="84" RowHeight="44" /> </GanttViews> </Gantt> <Paragraph TextColor="TextColor.Muted" Margin="Margin.Is2.FromTop"> Anchor date: @selectedDate | View: @selectedView | AutoExpandView: @autoExpandView </Paragraph>
@code { private bool autoExpandView = true; private DateOnly selectedDate = DateOnly.FromDateTime( DateTime.Today.AddMonths( -3 ) ); private GanttView selectedView = GanttView.Week; private List<TaskItem> tasks = CreateTasks(); private static List<TaskItem> CreateTasks() { DateTime rangeStart = new DateTime( DateTime.Today.Year, DateTime.Today.Month, 1 ).AddDays( -4 ); List<TaskItem> result = new() { new() { Id = "1", Title = "Auto-expand release", Start = rangeStart, End = rangeStart.AddDays( 41 ) }, new() { Id = "2", ParentId = "1", Title = "Design phase", Start = rangeStart, End = rangeStart.AddDays( 8 ) }, new() { Id = "3", ParentId = "1", Title = "Implementation", Start = rangeStart.AddDays( 7 ), End = rangeStart.AddDays( 28 ) }, new() { Id = "4", ParentId = "3", Title = "Backend services", Start = rangeStart.AddDays( 9 ), End = rangeStart.AddDays( 18 ) }, new() { Id = "5", ParentId = "3", Title = "Frontend polish", Start = rangeStart.AddDays( 16 ), End = rangeStart.AddDays( 31 ) }, new() { Id = "6", ParentId = "1", Title = "Validation and rollout", Start = rangeStart.AddDays( 30 ), End = rangeStart.AddDays( 41 ) }, }; foreach ( TaskItem item in result ) { item.Duration = Math.Max( 1, (int)Math.Ceiling( ( item.End - item.Start ).TotalDays ) ); } return result; } public class TaskItem { public string Id { get; set; } public string ParentId { get; set; } public string Title { get; set; } public DateTime Start { get; set; } public DateTime End { get; set; } public int Duration { get; set; } } }
Milestone Markers
UseMilestones to render date markers for sprint boundaries, approvals, releases, or other timeline events that are independent from task rows.
<Gantt TItem="TaskItem" Data="" Milestones="" Date="" SelectedView="GanttView.Week" DurationField="Duration" IncludeMilestonesInAutoExpandView MilestoneStyling=""> <ChildContent> <GanttColumns> <GanttColumn Field="Title" Title="Task" Expandable Width="Width.Px( 230 )" /> <GanttColumn Field="Start" Width="Width.Px( 130 )" /> <GanttColumn Field="End" Width="Width.Px( 130 )" Visible="false" /> <GanttColumn Field="Duration" Width="Width.Px( 90 )" TextAlignment="TextAlignment.Center" Visible="false" /> </GanttColumns> <GanttToolbar /> <GanttViews> <GanttWeekView TimelineCellWidth="92" RowHeight="44" /> </GanttViews> </ChildContent> <MilestoneTemplate> <Badge Color="@GetMilestoneBadgeColor( context.Milestone )" Pill> @context.Title </Badge> </MilestoneTemplate> </Gantt>
@code { private DateOnly selectedDate = DateOnly.FromDateTime( DateTime.Today ); private List<TaskItem> tasks = CreateTasks(); private List<GanttMilestone> milestones = CreateMilestones(); private static List<TaskItem> CreateTasks() { DateTime baseDate = GetStartOfWeek( DateTime.Today, DayOfWeek.Monday ); List<TaskItem> result = new() { new() { Id = "1", Title = "Milestone release", Start = baseDate, End = baseDate.AddDays( 14 ) }, new() { Id = "2", ParentId = "1", Title = "Planning", Start = baseDate, End = baseDate.AddDays( 2 ) }, new() { Id = "3", ParentId = "1", Title = "Design", Start = baseDate.AddDays( 2 ), End = baseDate.AddDays( 6 ) }, new() { Id = "4", ParentId = "1", Title = "Development", Start = baseDate.AddDays( 5 ), End = baseDate.AddDays( 11 ) }, new() { Id = "5", ParentId = "1", Title = "Validation", Start = baseDate.AddDays( 10 ), End = baseDate.AddDays( 13 ) }, new() { Id = "6", ParentId = "1", Title = "Rollout", Start = baseDate.AddDays( 13 ), End = baseDate.AddDays( 14 ) }, }; foreach ( TaskItem item in result ) { item.Duration = Math.Max( 1, (int)Math.Ceiling( ( item.End - item.Start ).TotalDays ) ); } return result; } private static List<GanttMilestone> CreateMilestones() { DateTime baseDate = GetStartOfWeek( DateTime.Today, DayOfWeek.Monday ); return new() { new() { Date = baseDate.AddDays( 2 ), Title = "Kickoff" }, new() { Date = baseDate.AddDays( 6 ), Title = "Design approved" }, new() { Date = baseDate.AddDays( 11 ), Title = "Beta" }, new() { Date = baseDate.AddDays( 14 ), Title = "Launch", TextColor = TextColor.Danger, LineStyle = GanttMilestoneLineStyle.Solid }, }; } private static void ApplyMilestoneStyling( GanttMilestone milestone, GanttMilestoneStyling styling ) { if ( milestone.Title == "Beta" ) { styling.TextColor = TextColor.Warning; styling.LineStyle = GanttMilestoneLineStyle.Dotted; } } private static Color GetMilestoneBadgeColor( GanttMilestone milestone ) { return milestone.Title switch { "Launch" => Color.Danger, "Beta" => Color.Warning, _ => Color.Primary, }; } private static DateTime GetStartOfWeek( DateTime value, DayOfWeek firstDayOfWeek ) { int diff = ( 7 + ( value.DayOfWeek - firstDayOfWeek ) ) % 7; return value.Date.AddDays( -diff ); } public class TaskItem { public string Id { get; set; } public string ParentId { get; set; } public string Title { get; set; } public DateTime Start { get; set; } public DateTime End { get; set; } public int Duration { get; set; } } }
API
See the documentation below for a complete reference to all of the props and classes available to the components mentioned here.