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 05 - Oct 11, 2026
Task
Start
Project launch
Oct 08, 2026
Planning
Oct 08, 2026
Execution
Oct 12, 2026
Backend
Oct 13, 2026
Frontend
Oct 16, 2026
Go-live
Oct 24, 2026
Fri 02
Sat 03
Sun 04
Mon 05
Tue 06
Wed 07
Thu 08
Fri 09
Sat 10
Sun 11
Mon 12
Tue 13
Wed 14
Project launch
Planning
Execution
Backend

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