Holidays in Angular Gantt component
27 Apr 20243 minutes to read
Non-working days in a project can be displayed in the Gantt component using the holidays
property. Each holiday can be defined with the following properties:
-
from
: Defines start date of the holiday(s). -
to
: Defines end date of the holiday(s). -
label
: Defines the description or label for the holiday. -
cssClass
: Formats the holidays label in the Gantt chart.
To highlight the days, inject the DayMarkersService
module in the provide
section.
The following code example shows how to display the non-working days in the Gantt component.
import { NgModule } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'
import { GanttModule } from '@syncfusion/ej2-angular-gantt'
import { DayMarkersService } from '@syncfusion/ej2-angular-gantt'
import { Component, ViewEncapsulation, OnInit } from '@angular/core';
import { Gantt } from '@syncfusion/ej2-gantt';
import { projectNewData } from './data';
@Component({
imports: [
GanttModule
],
providers: [DayMarkersService],
standalone: true,
selector: 'app-root',
template:
`<ejs-gantt id="ganttDefault" height="430px" [dataSource]="data" [taskFields]="taskSettings" [holidays] = "holidays"></ejs-gantt>`,
encapsulation: ViewEncapsulation.None
})
export class AppComponent{
// Data for Gantt
public data?: object[];
public taskSettings?: object;
public holidays?: object[];
public ngOnInit(): void {
this.data = projectNewData;
this.taskSettings = {
id: 'TaskID',
name: 'TaskName',
startDate: 'StartDate',
duration: 'Duration',
progress: 'Progress',
child: 'subtasks'
};
this.holidays = [{
from: "04/04/2019",
to:"04/05/2019",
label: " Public holidays",
cssClass:"e-custom-holiday"
},
{
from: "04/12/2019",
to:"04/12/2019",
label: " LOcal holidays",
cssClass:"e-custom-holiday"
}];
}
}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));