Blazorise Gantt component

Build timeline-driven planning experiences with a synchronized tree and timeline view.

The Gantt component is designed for project planning use cases where tasks have hierarchy, dates, duration, and progress. It supports declarative columns, built-in editing, keyboard and mouse interactions, and template-based customization.

Use the focused Gantt pages for data binding, columns and templates, editing, views, and timeline features.

To use the Gantt component, install the Blazorise.Gantt package first.

Installation

NuGet

Install extension from NuGet. 
dotnet add package Blazorise.Gantt

Imports

In your main _Imports.razor add: 
@using Blazorise.Gantt

Basic Usage

Flat Data Binding

Use the classic Id + ParentId model when your API already returns a flat task list.

Some columns are hidden by default so the timeline has more space; use the Column Picker in the toolbar to show them.

Aug 31 - Sep 06, 2026
Task
Start
Website redesign
Aug 31, 2026
Discovery
Aug 31, 2026
Implementation
Sep 04, 2026
Components
Sep 05, 2026
Accessibility pass
Sep 10, 2026
Launch
Sep 14, 2026
Mon 31
Tue 01
Wed 02
Thu 03
Fri 04
Sat 05
Sun 06
Website redesign
Discovery
Implementation
Components
<Gantt TItem="TaskItem"
       Data="@tasks"
       Date="@selectedDate"
       SelectedView="GanttView.Week"
       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>
        <GanttWeekView TimelineCellWidth="90" RowHeight="44" />
    </GanttViews>
</Gantt>

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

    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 = "Website redesign", Start = baseDate, End = baseDate.AddDays( 16 ) },
            new() { Id = "2", ParentId = "1", Title = "Discovery", Start = baseDate, End = baseDate.AddDays( 4 ) },
            new() { Id = "3", ParentId = "1", Title = "Implementation", Start = baseDate.AddDays( 4 ), End = baseDate.AddDays( 14 ) },
            new() { Id = "4", ParentId = "3", Title = "Components", Start = baseDate.AddDays( 5 ), End = baseDate.AddDays( 10 ) },
            new() { Id = "5", ParentId = "3", Title = "Accessibility pass", Start = baseDate.AddDays( 10 ), End = baseDate.AddDays( 13 ) },
            new() { Id = "6", ParentId = "1", Title = "Launch", Start = baseDate.AddDays( 14 ), End = baseDate.AddDays( 16 ) },
        };

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

API

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

On this page