Blazorise Gantt: Views

Configure the timeline scale and density users need for planning.

Examples

Multiple Views

Configure all timeline views in one Gantt instance, customize leading and trailing slots per view, and override week start day when needed.
Sep 14 - Sep 20, 2026
Task
Start
Project launch
Sep 17, 2026
Planning
Sep 17, 2026
Execution
Sep 21, 2026
Backend
Sep 22, 2026
Frontend
Sep 25, 2026
Go-live
Oct 03, 2026
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
Project launch
Planning
Execution
Backend

Current date: 9/19/2026 | View: Week

<Gantt TItem="TaskItem"
       Data="@tasks"
       @bind-Date="@selectedDate"
       @bind-SelectedView="@selectedView"
       FirstDayOfWeek="DayOfWeek.Sunday"
       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>
        <GanttDayView TimelineCellWidth="56" RowHeight="44" LeadingSlots="2" TrailingSlots="2" />
        <GanttWeekView TimelineCellWidth="92" RowHeight="44" LeadingSlots="3" TrailingSlots="3" FirstDayOfWeek="DayOfWeek.Monday" />
        <GanttMonthView TimelineCellWidth="38" RowHeight="44" LeadingSlots="5" TrailingSlots="5" />
        <GanttYearView TimelineCellWidth="80" RowHeight="44" LeadingSlots="1" TrailingSlots="1" />
    </GanttViews>
</Gantt>

<Paragraph TextColor="TextColor.Muted" Margin="Margin.Is2.FromTop">
    Current date: @selectedDate | View: @selectedView
</Paragraph>

@code {
    private DateOnly selectedDate = DateOnly.FromDateTime( DateTime.Today );

    private GanttView selectedView = GanttView.Week;

    private List<TaskItem> tasks = CreateTasks();

    private static List<TaskItem> CreateTasks()
    {
        var baseDate = DateTime.Today.AddDays( -2 );

        var result = new List<TaskItem>
        {
            new() { Id = "1", Title = "Project launch", Start = baseDate, End = baseDate.AddDays( 18 ) },
            new() { Id = "2", ParentId = "1", Title = "Planning", Start = baseDate, End = baseDate.AddDays( 4 ) },
            new() { Id = "3", ParentId = "1", Title = "Execution", Start = baseDate.AddDays( 4 ), End = baseDate.AddDays( 16 ) },
            new() { Id = "4", ParentId = "3", Title = "Backend", Start = baseDate.AddDays( 5 ), End = baseDate.AddDays( 11 ) },
            new() { Id = "5", ParentId = "3", Title = "Frontend", Start = baseDate.AddDays( 8 ), End = baseDate.AddDays( 15 ) },
            new() { Id = "6", ParentId = "1", Title = "Go-live", Start = baseDate.AddDays( 16 ), End = baseDate.AddDays( 18 ) },
        };

        foreach ( var 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; }
    }
}

Year View

Use TimelineScale="GanttYearViewTimelineScale.Week" on GanttYearView when planning is organized by weeks but users still need a full-year timeline.
2026
Task
Start
Release train
Apr 02, 2026
Discovery
Apr 02, 2026
Implementation
Apr 09, 2026
Backend services
Apr 10, 2026
Frontend polish
Apr 16, 2026
Validation
Apr 23, 2026
Rollout
May 02, 2026
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
Release train
Discovery
Implementation
Backend services
Frontend polish
Validation
Rollout

View: Year | Year view scale: Week 

<Gantt TItem="TaskItem"
       Data="@tasks"
       Date="@selectedDate"
       SelectedView="GanttView.Year"
       DurationField="Duration"
       FirstDayOfWeek="DayOfWeek.Monday">
    <ChildContent>
        <GanttColumns>
            <GanttColumn Field="Title" Title="Task" Expandable Width="Width.Px( 240 )" />
            <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>
            <GanttYearView TimelineScale="GanttYearViewTimelineScale.Week"
                           TimelineCellWidth="42"
                           RowHeight="44"
                           FirstDayOfWeek="DayOfWeek.Monday" />
        </GanttViews>
    </ChildContent>

    <TimelineHeaderCellTemplate>
        <Span TextSize="TextSize.Small" TextWeight="TextWeight.SemiBold">
            @context.Label
        </Span>
    </TimelineHeaderCellTemplate>
</Gantt>

<Paragraph TextColor="TextColor.Muted" Margin="Margin.Is2.FromTop">
    View: @selectedViewText | Year view scale: Week
</Paragraph>

@code {
    private DateOnly selectedDate = new( DateTime.Today.Year, 1, 1 );

    private string selectedViewText = GanttView.Year.ToString();

    private List<TaskItem> tasks = CreateTasks();

    private static List<TaskItem> CreateTasks()
    {
        DateTime yearStart = new( DateTime.Today.Year, 1, 1 );
        DateTime planningStart = yearStart.AddDays( 91 );

        List<TaskItem> result = new()
        {
            new() { Id = "1", Title = "Release train", Start = planningStart, End = planningStart.AddDays( 35 ) },
            new() { Id = "2", ParentId = "1", Title = "Discovery", Start = planningStart, End = planningStart.AddDays( 7 ) },
            new() { Id = "3", ParentId = "1", Title = "Implementation", Start = planningStart.AddDays( 7 ), End = planningStart.AddDays( 21 ) },
            new() { Id = "4", ParentId = "3", Title = "Backend services", Start = planningStart.AddDays( 8 ), End = planningStart.AddDays( 16 ) },
            new() { Id = "5", ParentId = "3", Title = "Frontend polish", Start = planningStart.AddDays( 14 ), End = planningStart.AddDays( 23 ) },
            new() { Id = "6", ParentId = "1", Title = "Validation", Start = planningStart.AddDays( 21 ), End = planningStart.AddDays( 30 ) },
            new() { Id = "7", ParentId = "1", Title = "Rollout", Start = planningStart.AddDays( 30 ), End = planningStart.AddDays( 35 ) },
        };

        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; }
    }
}

API

See the API reference for the parameters, events, methods, and related types available to the components covered on this page.

On this page