Blazorise Gantt: Timeline

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

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

Anchor date: 5/13/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 10 - Aug 16, 2026
Task
Start
Milestone release
Aug 10, 2026
Planning
Aug 10, 2026
Design
Aug 12, 2026
Development
Aug 15, 2026
Validation
Aug 20, 2026
Rollout
Aug 23, 2026
Mon 10
Tue 11
Wed 12
Thu 13
Fri 14
Sat 15
Sun 16
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 documentation below for a complete reference to all of the props and classes available to the components mentioned here.

On this page