Blazorise Gantt: Timeline

Control the visible date range and add timeline-level annotations.

Examples

Auto Expand View

Enable AutoExpandView 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.
Aug 27 - Oct 08, 2026
Task
Start
Auto-expand release
Aug 28, 2026
Design phase
Aug 28, 2026
Implementation
Sep 04, 2026
Backend services
Sep 06, 2026
Frontend polish
Sep 13, 2026
Validation and rollout
Sep 27, 2026
August 2026
September 2026
October 2026
Thu 27
Fri 28
Sat 29
Sun 30
Mon 31
Tue 01
Wed 02
Thu 03
Fri 04
Sat 05
Sun 06
Mon 07
Tue 08
Wed 09
Thu 10
Fri 11
Sat 12
Sun 13
Mon 14
Tue 15
Wed 16
Thu 17
Fri 18
Sat 19
Sun 20
Mon 21
Tue 22
Wed 23
Thu 24
Fri 25
Sat 26
Sun 27
Mon 28
Tue 29
Wed 30
Thu 01
Fri 02
Sat 03
Sun 04
Mon 05
Tue 06
Wed 07
Thu 08
Auto-expand release
Design phase
Implementation
Backend services
Frontend polish
Validation and rollout

Anchor date: 6/2/2026 | View: Week | AutoExpandView: True

<Field Margin="Margin.Is3.FromBottom">
    <Switch @bind-Value="@autoExpandView">Auto expand current view to the loaded task range</Switch>
</Field>

<Gantt TItem="TaskItem"
       Data="@tasks"
       @bind-Date="@selectedDate"
       @bind-SelectedView="@selectedView"
       AutoExpandView="@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

Use Milestones to render date markers for sprint boundaries, approvals, releases, or other timeline events that are independent from task rows.
Aug 31 - Sep 06, 2026
Task
Start
Milestone release
Aug 31, 2026
Planning
Aug 31, 2026
Design
Sep 02, 2026
Development
Sep 05, 2026
Validation
Sep 10, 2026
Rollout
Sep 13, 2026
Mon 31
Tue 01
Wed 02
Thu 03
Fri 04
Sat 05
Sun 06
Kickoff
Design approved
Milestone release
Planning
Design
Development
<Gantt TItem="TaskItem"
       Data="@tasks"
       Milestones="@milestones"
       Date="@selectedDate"
       SelectedView="GanttView.Week"
       DurationField="Duration"
       IncludeMilestonesInAutoExpandView
       MilestoneStyling="@ApplyMilestoneStyling">
    <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 API reference for the parameters, events, methods, and related types available to the components covered on this page.

On this page