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

Anchor date: 8/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.
Nov 02 - Nov 08, 2026
Task
Start
Milestone release
Nov 02, 2026
Planning
Nov 02, 2026
Design
Nov 04, 2026
Development
Nov 07, 2026
Validation
Nov 12, 2026
Rollout
Nov 15, 2026
Mon 02
Tue 03
Wed 04
Thu 05
Fri 06
Sat 07
Sun 08
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.