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.
Aug 31 - Sep 06, 2026
Task
Start
Project launch
Aug 31, 2026
Planning
Aug 31, 2026
Execution
Sep 04, 2026
Backend
Sep 05, 2026
Frontend
Sep 08, 2026
Go-live
Sep 16, 2026
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
Project launch
Planning
Execution
Backend
Frontend

Current date: 9/2/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