# gantt-holidays

> Gantt chart sample displaying holidays and non-working days on the project timeline.

**Framework:** angular  **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/angular/gantt-holidays.json
```

**Install Package(s)**

```bash
npm install @syncfusion/ej2-angular-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/holidays.component.ts

```typescript
import { Component, OnInit} from '@angular/core';
import { projectNewData } from '../data';
import { DayMarkersService, GanttModule, SelectionService } from '@syncfusion/ej2-angular-gantt';
@Component({
    selector: 'ej2-ganttholiday',
    templateUrl: 'holidays.html',
    standalone: true,
    providers: [SelectionService, DayMarkersService],
    imports: [ GanttModule]
})
export class GanttHolidaysComponent implements OnInit {
    public data!: object[];
    public taskSettings!: object;
    public columns!: object[];
    public labelSettings!: object;
    public projectStartDate!: Date;
    public projectEndDate!: Date;
    public splitterSettings!: object;
    public holidays!: object[];
    public ngOnInit(): void {
        this.data = projectNewData;
        this.taskSettings = {
            id: 'TaskID',
            name: 'TaskName',
            startDate: 'StartDate',
            endDate: 'EndDate',
            duration: 'Duration',
            progress: 'Progress',
            dependency: 'Predecessor',
            parentID: 'ParentID'
        };
        this.splitterSettings = {
            columnIndex: 1
        },
        this.columns = [
            { field: 'TaskID', visible: false, width: 80 },
            { field: 'TaskName', width: 280 },
            { field: 'StartDate' },
            { field: 'EndDate' },
            { field: 'Duration' },
            { field: 'Predecessor' },
            { field: 'Progress' }
        ];
        this.projectStartDate = new Date('03/25/2025');
        this.projectEndDate = new Date('07/20/2025');
        this.labelSettings = {
            leftLabel: 'TaskName',
        };
        this.holidays = [
            {
                from: new Date('03/28/2025'),
                to: new Date('03/28/2025'),
                label: 'Good Friday'
            },
            {
                from: new Date('03/30/2025'),
                to: new Date('03/30/2025'),
                label: 'Easter Sunday'
            },
            {
                from: new Date('05/26/2025'),
                to: new Date('05/26/2025'),
                label: 'Memorial Day'
            },
            {
                from: new Date('07/04/2025'),
                to: new Date('07/04/2025'),
                label: 'Independence Day'
            }
        ];
    }
}

```

### src/components/gantt-holidays/holidays.html

```html
<div class="control-section">
    <ejs-gantt id="holidays" height="650px" rowHeight="46" taskbarHeight="25" [dataSource]="data" [taskFields]="taskSettings" [allowSelection]="true"
        [labelSettings]="labelSettings" [columns]="columns" [treeColumnIndex]="1" [projectStartDate]="projectStartDate" [projectEndDate]="projectEndDate"
        [highlightWeekends]="true" [holidays]="holidays" [splitterSettings]="splitterSettings">
    </ejs-gantt>
</div>
```