# gantt-holidays

> Gantt chart displays scheduled tasks with dependency columns and configured holiday periods highlighted in the timeline.

**Framework:** blazor  **Component:** Gantt  **Variant:** holidays

## Get this item

**If you are an agent, fetch the JSON.** Source is inlined, so one request is enough and no tooling is required:

```
GET https://ai.syncfusion.com/r/blazor/gantt-holidays.json
```

**Install Package(s)**

```bash
dotnet add package Syncfusion.Blazor.Gantt
```

**Notes**

- Syncfusion release: 2026 Volume 2 (v34.1.29)
- The Syncfusion package is licensed. The composition in this file is source you own and edit. See https://ai.syncfusion.com/licensing.md

## Source files

### src/components/gantt-holidays/DataSource.cs

```cs
using System;
using System.Collections.Generic;
namespace BlazorDemos.Pages.GanttChart.Data
{
    public class GanttDefaultTaskData
    {
        public int TaskId { get; set; }
        public string? TaskName { get; set; }
        public DateTime? StartDate { get; set; }
        public DateTime? EndDate { get; set; }
        public DateTime? BaselineStartDate { get; set; }
        public DateTime? BaselineEndDate { get; set; }
        public string? Duration { get; set; }
        public int Progress { get; set; }
        public string? Predecessor { get; set; }
        public object? ResourceId { get; set; }
        public string? Notes { get; set; }
        public string? TaskType { get; set; }
        public int? ParentId { get; set; }
    }
    public class HolidayModel
    {
        public DateTime HolidayDate { get; set; }
        public string? HolidayName { get; set; }
    }
    internal static class DefaultData
    {
        /// <summary>
        /// Generates and returns a collection of Gantt task data.
        /// </summary>
        internal static List<GanttDefaultTaskData> ProjectNewData()
        {
            List<GanttDefaultTaskData> Tasks = new List<GanttDefaultTaskData>() {
                new GanttDefaultTaskData() { TaskId = 1, TaskName = "Product concept", StartDate = new DateTime(2021, 04, 02), EndDate = new DateTime(2021, 04, 08), Duration = "5days" },
                new GanttDefaultTaskData() { TaskId = 2, TaskName = "Define the product usage", StartDate = new DateTime(2021, 04, 02), EndDate = new DateTime(2021, 04, 08), Duration = "3", Progress = 30, ParentId = 1, BaselineStartDate = new DateTime(2021, 04, 02), BaselineEndDate = new DateTime(2021, 04, 02) },
                new GanttDefaultTaskData() { TaskId = 3, TaskName = "Define the target audience", StartDate = new DateTime(2021, 04, 02), EndDate = new DateTime(2021, 04, 04), Progress = 40, Duration = "2Days", ParentId = 1 },
                new GanttDefaultTaskData() { TaskId = 4, TaskName = "Prepare product sketch and notes", StartDate = new DateTime(2021, 04, 05), Duration = "4", Progress = 30, ParentId = 1, Predecessor = "2" },
                new GanttDefaultTaskData() { TaskId = 5, TaskName = "Concept approval", StartDate = new DateTime(2021, 04, 08), EndDate = new DateTime(2021, 04, 08), Duration = "0", ParentId = 1, Predecessor = "3,4" },
            };
            return Tasks;
        }
    }
}
```

### src/components/gantt-holidays/Gantt.razor

```razor
@page "/gantt-chart/holidays"
@using Syncfusion.Blazor.Gantt
@using BlazorDemos.Pages.GanttChart.Data
<div class="control-section e-gantt-holidays-sample">
	<SfGantt @ref="GanttInstance" DataSource="@TaskCollection" Height="100%" Width="1200px" TreeColumnIndex="1"
			 ProjectStartDate="@(new DateTime(2021, 3, 28))" ProjectEndDate="@(new DateTime(2021, 7, 20))"
			 GridLines="Syncfusion.Blazor.Gantt.GridLine.Vertical" HighlightWeekends="true" ScrollToTaskbarOnClick="true">
		<GanttTaskFields Id="TaskId" Name="TaskName" StartDate="StartDate"
						 EndDate="EndDate" Duration="Duration"
						 Progress="Progress" ParentID="ParentId"
						 Dependency="Predecessor">
		</GanttTaskFields>
		<GanttColumns>
			<GanttColumn Field="TaskId" Width="100"></GanttColumn>
			<GanttColumn Field="TaskName" HeaderText="Task Name"
						 Width="250" ClipMode="Syncfusion.Blazor.Grids.ClipMode.EllipsisWithTooltip">
			</GanttColumn>
			<GanttColumn Field="StartDate" HeaderText="Start Date"></GanttColumn>
			<GanttColumn Field="EndDate" HeaderText="End Date"></GanttColumn>
			<GanttColumn Field="Duration" HeaderText="Duration"></GanttColumn>
			<GanttColumn Field="Progress" HeaderText="Progress"></GanttColumn>
			<GanttColumn Field="Predecessor" HeaderText="Dependency"></GanttColumn>
		</GanttColumns>
		<GanttHolidays>
			@foreach (HolidayModel holiday in HolidayCollection)
			{
				<GanttHoliday From="@holiday.HolidayDate" To="@holiday.HolidayDate" Label="@holiday.HolidayName"></GanttHoliday>
			}
		</GanttHolidays>
		<GanttLabelSettings RightLabel="TaskName" TValue="GanttDefaultTaskData"> </GanttLabelSettings>
		<GanttSplitterSettings Position="28%"></GanttSplitterSettings>
	</SfGantt>
</div>

@code {
    internal SfGantt<GanttDefaultTaskData>? GanttInstance { get; set; }
        internal List<GanttDefaultTaskData> TaskCollection { get; set; } = new List<GanttDefaultTaskData>();
        internal List<HolidayModel> HolidayCollection = new List<HolidayModel>()
        {
            new HolidayModel() { HolidayDate = new DateTime(2021, 4, 02), HolidayName = "Good Friday" },
            new HolidayModel() { HolidayDate = new DateTime(2021, 4, 04), HolidayName = "Easter Sunday" },
            new HolidayModel() { HolidayDate = new DateTime(2021, 5, 31), HolidayName = "Memorial Day" },
            new HolidayModel() { HolidayDate = new DateTime(2021, 7, 04), HolidayName = "Independence Day" }
        };
        /// <summary>
        /// Initializes the sample by loading task data for the Gantt chart.
        /// </summary>
        protected override async Task OnInitializedAsync()
        {
            TaskCollection = DefaultData.ProjectNewData();
            await Task.CompletedTask.ConfigureAwait(true);
        }
}
```