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.
<Gantt TItem="TaskItem" Data="" Date="" 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.