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 12 - Oct 18, 2026
Task
Start
Project launch
Oct 11, 2026
Planning
Oct 11, 2026
Execution
Oct 15, 2026
Backend
Oct 16, 2026
Frontend
Oct 19, 2026
Go-live
Oct 27, 2026
Fri 09
Sat 10
Sun 11
Mon 12
Tue 13
Wed 14
Thu 15
Fri 16
Sat 17
Sun 18
Mon 19
Tue 20
Wed 21
Project launch
Planning
Execution
Backend
Frontend

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