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 24 - Aug 30, 2026
Task
Start
Website redesign
Aug 28, 2026
Discovery
Aug 28, 2026
Implementation
Sep 01, 2026
Components
Sep 02, 2026
Accessibility pass
Sep 07, 2026
Launch
Sep 11, 2026
Mon 24
Tue 25
Wed 26
Thu 27
Fri 28
Sat 29
Sun 30
Website redesign
Discovery
<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