Holidays in Angular Gantt Component
18 Oct 202524 minutes to read
The Angular Gantt component supports holidays to define non-working days, such as national holidays or company closures, that impact task scheduling and project timelines. Holidays override regular working time settings like workWeek or includeWeekend, ensuring tasks do not progress during these periods. In the timeline, holidays appear as highlighted backgrounds with descriptive labels, creating visible gaps in taskbars to reflect scheduling adjustments. Custom CSS classes allow distinct styling for different holiday types (e.g., national vs. company holidays), enhancing visual clarity. Properly configured holidays ensure accurate duration calculations, dependency adjustments, and critical path analysis, aligning project timelines with resource availability and regional requirements.
Understanding holiday effects on tasks
Holidays adjust task scheduling to reflect non-working periods:
- Duration adjustments: Task durations exclude holidays, extending end dates. For example, a task starting December 20, 2024, skips a December 25-26 holiday, adjusting its completion to account for these days.
- Dependency management: Successor tasks shift to maintain relationships (e.g., FS), ensuring no work occurs during holidays.
- Critical path integration: Holidays impact slack calculations when using enableCriticalPath, as tasks delayed by holidays may become critical.
- Resource allocation: Holidays reduce resource availability, pausing task progress during these periods.
The projectStartDate and projectEndDate properties provide context for scheduling, ensuring holidays align with the project timeline.
Configure holidays
Holidays are defined using the holidays property, which accepts an array of holiday objects specifying dates, labels, and styling. The DayMarkersService must be injected to render holidays as visual markers in the timeline and adjust task scheduling calculations. Holidays take precedence over settings like workWeek or includeWeekend, ensuring tasks do not progress during these periods.
Holiday configuration properties
-
from: Sets the start date of the holiday (e.g.,new Date('2024-12-25')). -
to: Defines the end date for multi-day holidays (optional for single-day holidays). -
label: Provides a descriptive name (e.g., “Christmas Day”) displayed in the timeline. -
cssClass: Applies custom CSS classes for styling holiday appearances.
Inject DayMarkersService to enable holiday rendering and scheduling logic:
import { DayMarkersService } from '@syncfusion/ej2-angular-gantt';
@Component({
providers: [DayMarkersService]
})The following example configures single and multi-day holidays:
import { GanttModule,DayMarkersService } from '@syncfusion/ej2-angular-gantt'
import { Component, ViewEncapsulation, OnInit } from '@angular/core';
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 implements OnInit {
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));export let projectNewData: Object[] = [
{
TaskID: 1,
TaskName: 'Product Concept',
StartDate: new Date('04/02/2019'),
EndDate: new Date('04/21/2019'),
subtasks: [
{ TaskID: 2, TaskName: 'Defining the product and its usage', StartDate: new Date('04/02/2019'), Duration: 3, Progress: 30 },
{ TaskID: 3, TaskName: 'Defining target audience', StartDate: new Date('04/02/2019'), Duration: 3 },
{
TaskID: 4, TaskName: 'Prepare product sketch and notes', StartDate: new Date('04/02/2019'), Duration: 2,
Predecessor: '2', Progress: 30
},
]
},
{
TaskID: 5, TaskName: 'Concept Approval', StartDate: new Date('04/02/2019'), Duration: 0, Predecessor: '3,4',
Indicators: [
{
'date': '04/10/2019',
'name': '#briefing',
'title': 'Product concept breifing',
}
]
},
{
TaskID: 6,
TaskName: 'Market Research',
StartDate: new Date('04/02/2019'),
EndDate: new Date('04/21/2019'),
subtasks: [
{
TaskID: 7,
TaskName: 'Demand Analysis',
StartDate: new Date('04/04/2019'),
EndDate: new Date('04/21/2019'),
subtasks: [
{
TaskID: 8, TaskName: 'Customer strength', StartDate: new Date('04/04/2019'), Duration: 4,
Predecessor: '5', Progress: 30
},
{ TaskID: 9, TaskName: 'Market opportunity analysis', StartDate: new Date('04/04/2019'), Duration: 4, Predecessor: '5' }
]
},
{
TaskID: 10, TaskName: 'Competitor Analysis', StartDate: new Date('04/04/2019'), Duration: 4,
Predecessor: '7, 8', Progress: 30
},
{ TaskID: 11, TaskName: 'Product strength analsysis', StartDate: new Date('04/04/2019'), Duration: 4, Predecessor: '9' },
{
TaskID: 12, TaskName: 'Research complete', StartDate: new Date('04/04/2019'), Duration: 0, Predecessor: '10',
Indicators: [
{
'date': '04/20/2019',
'name': '#meeting',
'title': '1st board of directors meeting',
}
]
}
]
},
{
TaskID: 13,
TaskName: 'Product Design and Development',
StartDate: new Date('04/04/2019'),
EndDate: new Date('04/21/2019'),
subtasks: [
{
TaskID: 14, TaskName: 'Functionality design', StartDate: new Date('04/04/2019'),
Duration: 3, Progress: 30, Predecessor: '12'
},
{ TaskID: 15, TaskName: 'Quality design', StartDate: new Date('04/04/2019'), Duration: 3, Predecessor: '12' },
{ TaskID: 16, TaskName: 'Define Reliability', StartDate: new Date('04/04/2019'), Duration: 2, Progress: 30, Predecessor: '15' },
{ TaskID: 17, TaskName: 'Identifying raw materials', StartDate: new Date('04/04/2019'), Duration: 2, Predecessor: '15' },
{
TaskID: 18,
TaskName: 'Define cost plan',
StartDate: new Date('04/04/2019'),
EndDate: new Date('04/21/2019'),
subtasks: [
{
TaskID: 19, TaskName: 'Manufacturing cost', StartDate: new Date('04/04/2019'),
Duration: 2, Progress: 30, Predecessor: '17'
},
{ TaskID: 20, TaskName: 'Selling cost', StartDate: new Date('04/04/2019'), Duration: 2, Predecessor: '17' }
]
},
{
TaskID: 21,
TaskName: 'Development of the final design',
StartDate: new Date('04/04/2019'),
EndDate: new Date('04/21/2019'),
subtasks: [
{
TaskID: 22, TaskName: 'Defining dimensions and package volume', StartDate: new Date('04/04/2019'),
Duration: 2, Progress: 30, Predecessor: '19,20'
},
{
TaskID: 23, TaskName: 'Develop design to meet industry standards', StartDate: new Date('04/04/2019'),
Duration: 2, Predecessor: '22'
},
{ TaskID: 24, TaskName: 'Include all the details', StartDate: new Date('04/04/2019'), Duration: 3, Predecessor: '23' }
]
},
{
TaskID: 25, TaskName: 'CAD Computer-aided design', StartDate: new Date('04/04/2019'),
Duration: 3, Progress: 30, Predecessor: '24'
},
{ TaskID: 26, TaskName: 'CAM Computer-aided manufacturing', StartDate: new Date('04/04/2019'), Duration: 3, Predecessor: '25' },
{
TaskID: 27, TaskName: 'Design complete', StartDate: new Date('04/04/2019'), Duration: 0, Predecessor: '26',
Indicators: [
{
'date': '05/18/2019',
'name': '#meeting',
'title': '2nd board of directors meeting',
}
]
}
]
},
{ TaskID: 28, TaskName: 'Prototype Testing', StartDate: new Date('04/04/2019'), Duration: 4, Progress: 30, Predecessor: '27' },
{ TaskID: 29, TaskName: 'Include feedback', StartDate: new Date('04/04/2019'), Duration: 4, Predecessor: '28ss' },
{ TaskID: 30, TaskName: 'Manufacturing', StartDate: new Date('04/04/2019'), Duration: 5, Progress: 30, Predecessor: '28,29' },
{ TaskID: 31, TaskName: 'Assembling materials to finsihed goods', StartDate: new Date('04/04/2019'), Duration: 5, Predecessor: '30' },
{
TaskID: 32,
TaskName: 'Feedback and Testing',
StartDate: new Date('04/04/2019'),
EndDate: new Date('04/21/2019'),
subtasks: [
{
TaskID: 33, TaskName: 'Internal testing and feedback', StartDate: new Date('04/04/2019'),
Duration: 3, Progress: 45, Predecessor: '31'
},
{
TaskID: 34, TaskName: 'Customer testing and feedback', StartDate: new Date('04/04/2019'),
Duration: 3, Progress: 50, Predecessor: '33'
}
]
},
{
TaskID: 35,
TaskName: 'Final Product Development',
StartDate: new Date('04/04/2019'),
EndDate: new Date('04/21/2019'),
subtasks: [
{
TaskID: 36, TaskName: 'Important improvements', StartDate: new Date('04/04/2019'),
Duration: 4, Progress: 30, Predecessor: '34'
},
{
TaskID: 37, TaskName: 'Address any unforeseen issues', StartDate: new Date('04/04/2019'),
Duration: 4, Progress: 30, Predecessor: '36ss'
}
]
},
{
TaskID: 38,
TaskName: 'Final Product',
StartDate: new Date('04/04/2019'),
EndDate: new Date('04/21/2019'),
subtasks: [
{ TaskID: 39, TaskName: 'Branding product', StartDate: new Date('04/04/2019'), Duration: 4, Predecessor: '37' },
{
TaskID: 40, TaskName: 'Marketing and presales', StartDate: new Date('04/04/2019'),
Duration: 4, Progress: 30, Predecessor: '39'
}
]
}
];The code defines holidays like Christmas (December 25) and a multi-day New Year break, rendering them as highlighted periods in the timeline.
Customize holiday appearance
Customize holiday visuals using the cssClass property to apply distinct styles for different holiday types, such as national or company-specific closures:
.national-holiday {
background-color: #ffebee;
border-left: 3px solid #f44336;
}
.national-holiday .e-gantt-holiday-label {
color: #d32f2f;
font-weight: bold;
background-color: #ffcdd2;
padding: 2px 6px;
border-radius: 4px;
}
.company-holiday {
background-color: #e3f2fd;
border-left: 3px solid #2196f3;
}
.company-holiday .e-gantt-holiday-label {
color: #1976d2;
font-style: italic;
background-color: #bbdefb;
padding: 2px 6px;
border-radius: 4px;
}For multi-day holidays, specify both from and to dates:
holidays: [
{
from: new Date('2024-12-24'),
to: new Date('2024-12-26'),
label: 'Christmas Break',
cssClass: 'national-holiday'
},
{
from: new Date('2024-01-01'),
to: new Date('2024-01-02'),
label: 'New Year Holiday',
cssClass: 'company-holiday'
}
]This code styles holidays with distinct colors and labels, enhancing timeline readability.