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.
Oct 26 - Nov 01, 2026
Task
Start
Project launch
Oct 28, 2026
Planning
Oct 28, 2026
Execution
Nov 01, 2026
Backend
Nov 02, 2026
Frontend
Nov 05, 2026
Go-live
Nov 13, 2026
Fri 23
Sat 24
Sun 25
Mon 26
Tue 27
Wed 28
Thu 29
Fri 30
Sat 31
Sun 01
Mon 02
Tue 03
Wed 04
Project launch
Planning
Execution
Backend

Current date: 10/30/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