Holidays in React Gantt Component
12 Jan 202613 minutes to read
The React 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 { DayMarkers } from '@syncfusion/ej2-react-gantt';
<GanttComponent dataSource={data} holidays={holidays} >
...
<Inject services={[DayMarkers]} />
</GanttComponent>The following example configures single and multi-day holidays:
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { GanttComponent, ColumnsDirective, ColumnDirective, Inject } from '@syncfusion/ej2-react-gantt';
import { DayMarkers } from '@syncfusion/ej2-react-gantt';
import { data } from './datasource';
function App() {
const taskSettings = {
id: 'TaskID',
name: 'TaskName',
startDate: 'StartDate',
duration: 'Duration',
progress: 'Progress',
parentID: 'ParentID'
};
const 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'
}
];
return (
<GanttComponent
id="ganttDefault"
height="430px"
dataSource={data}
taskFields={taskSettings}
holidays={holidays}
>
<ColumnsDirective>
<ColumnDirective field="TaskID" headerText="Task ID" width="100" />
<ColumnDirective field="TaskName" headerText="Task Name" width="150" />
<ColumnDirective field="StartDate" headerText="Start Date" width="150" />
<ColumnDirective field="Duration" headerText="Duration" width="150" />
<ColumnDirective field="Progress" headerText="Progress" width="150" />
</ColumnsDirective>
<Inject services={[DayMarkers]} />
</GanttComponent>
);
}
ReactDOM.render(<App />, document.getElementById('root'));import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { GanttComponent, ColumnsDirective, ColumnDirective, Inject } from '@syncfusion/ej2-react-gantt';
import { DayMarkers } from '@syncfusion/ej2-react-gantt';
import { TaskFieldsModel } from '@syncfusion/ej2-gantt';
import { data } from './datasource';
function App() {
const taskSettings: TaskFieldsModel = {
id: 'TaskID',
name: 'TaskName',
startDate: 'StartDate',
duration: 'Duration',
progress: 'Progress',
parentID: 'ParentID'
};
const holidays: object[] = [
{
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'
}
];
return (
<GanttComponent
id="ganttDefault"
height="430px"
dataSource={data}
taskFields={taskSettings}
holidays={holidays}
>
<ColumnsDirective>
<ColumnDirective field="TaskID" headerText="Task ID" width="100" />
<ColumnDirective field="TaskName" headerText="Task Name" width="150" />
<ColumnDirective field="StartDate" headerText="Start Date" width="150" />
<ColumnDirective field="Duration" headerText="Duration" width="150" />
<ColumnDirective field="Progress" headerText="Progress" width="150" />
</ColumnsDirective>
<Inject services={[DayMarkers]} />
</GanttComponent>
);
}
ReactDOM.render(<App />, document.getElementById('root'));<!DOCTYPE html>
<html lang="en">
<head>
<title>Syncfusion React Gantt</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="Essential JS 2 for React Components" />
<meta name="author" content="Syncfusion" />
<link href="https://cdn.syncfusion.com/ej2/32.1.19/material.css" rel="stylesheet" type="text/css"/>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
<script src="systemjs.config.js"></script>
<style>
#loader {
color: #008cff;
height: 40px;
left: 45%;
position: absolute;
top: 45%;
width: 30%;
}
</style>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>
<body>
<div id='root'>
<div id='loader'>Loading....</div>
</div>
</body>
</html>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.