@syncfusion/ej2-react-gantt 34.2.3 → 34.2.4
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/README.md
CHANGED
|
@@ -1,18 +1,18 @@
|
|
|
1
1
|
# React Gantt Component
|
|
2
2
|
|
|
3
|
-
The [React Gantt](https://www.syncfusion.com/
|
|
3
|
+
The [React Gantt](https://www.syncfusion.com/gantt-sdk/react-gantt-chart?utm_source=npm&utm_medium=listing&utm_campaign=react-gantt-npm) component is a project planning and management tool used to display and manage hierarchical tasks with timeline details. It helps assess how long a project should take, determine the resources needed, manage the dependencies between tasks, and plan the order in which the tasks should be completed.
|
|
4
4
|
|
|
5
5
|
<p align="center">
|
|
6
|
-
<a href="https://
|
|
6
|
+
<a href="https://help.syncfusion.com/gantt-sdk/react/gantt-chart/getting-started/?utm_source=npm&utm_medium=listing&utm_campaign=react-gantt-npm">Getting Started</a> .
|
|
7
7
|
<a href="https://ej2.syncfusion.com/react/demos/?utm_source=npm&utm_medium=listing&utm_campaign=react-gantt-npm#/bootstrap5/gantt/default">Online demos</a> .
|
|
8
|
-
<a href="https://www.syncfusion.com/
|
|
8
|
+
<a href="https://www.syncfusion.com/gantt-sdk/react-gantt-chart?utm_source=npm&utm_medium=listing&utm_campaign=react-gantt-npm">Learn more</a>
|
|
9
9
|
</p>
|
|
10
10
|
|
|
11
11
|
<p align="center">
|
|
12
|
-
<img alt="React Gantt Control" src="https://raw.githubusercontent.com/SyncfusionExamples/nuget-img/master/react/react-gantt-chart.
|
|
12
|
+
<img alt="React Gantt Control" src="https://raw.githubusercontent.com/SyncfusionExamples/nuget-img/master/react/react-gantt-chart.webp"> </p>
|
|
13
13
|
|
|
14
14
|
<p align="center">
|
|
15
|
-
Trusted by the world's leading companies
|
|
15
|
+
Trusted by the world's leading companies<br>
|
|
16
16
|
<a href="https://www.syncfusion.com">
|
|
17
17
|
<img src="https://ej2.syncfusion.com/home/images/trusted_companies.png" alt="Bootstrap logo">
|
|
18
18
|
</a>
|
|
@@ -22,20 +22,22 @@ Trusted by the world's leading companies
|
|
|
22
22
|
|
|
23
23
|
### Create a React Application
|
|
24
24
|
|
|
25
|
-
You can use [`
|
|
25
|
+
You can use [`Vite`](https://github.com/vitejs/vite) to set up a modern React application. To create a React TypeScript app, use the following command.
|
|
26
26
|
|
|
27
27
|
```bash
|
|
28
|
-
|
|
28
|
+
npm create vite@latest my-app -- --template react-ts
|
|
29
29
|
cd my-app
|
|
30
|
-
npm
|
|
30
|
+
npm install
|
|
31
|
+
npm run dev
|
|
31
32
|
```
|
|
32
33
|
|
|
33
|
-
### Adding Syncfusion Gantt
|
|
34
|
+
### Adding Syncfusion Gantt and Theme Packages
|
|
34
35
|
|
|
35
|
-
All Syncfusion react packages are published in the [npmjs.com](https://www.npmjs.com/~syncfusionorg) registry. To install the
|
|
36
|
+
All Syncfusion react packages are published in the [npmjs.com](https://www.npmjs.com/~syncfusionorg) registry. To install the React Gantt package and the Tailwind 3 theme package, use the following commands.
|
|
36
37
|
|
|
37
38
|
```bash
|
|
38
|
-
npm install @syncfusion/ej2-react-gantt
|
|
39
|
+
npm install @syncfusion/ej2-react-gantt
|
|
40
|
+
npm install @syncfusion/ej2-tailwind3-theme
|
|
39
41
|
```
|
|
40
42
|
|
|
41
43
|
### Adding CSS references for Gantt
|
|
@@ -43,19 +45,7 @@ npm install @syncfusion/ej2-react-gantt --save
|
|
|
43
45
|
Add CSS references needed for a Gantt in **src/App.css** from the **../node_modules/@syncfusion** package folder.
|
|
44
46
|
|
|
45
47
|
```css
|
|
46
|
-
@import
|
|
47
|
-
@import '../node_modules/@syncfusion/ej2-buttons/styles/material.css';
|
|
48
|
-
@import '../node_modules/@syncfusion/ej2-calendars/styles/material.css';
|
|
49
|
-
@import '../node_modules/@syncfusion/ej2-dropdowns/styles/material.css';
|
|
50
|
-
@import '../node_modules/@syncfusion/ej2-inputs/styles/material.css';
|
|
51
|
-
@import '../node_modules/@syncfusion/ej2-lists/styles/material.css';
|
|
52
|
-
@import '../node_modules/@syncfusion/ej2-layouts/styles/material.css';
|
|
53
|
-
@import '../node_modules/@syncfusion/ej2-navigations/styles/material.css';
|
|
54
|
-
@import '../node_modules/@syncfusion/ej2-popups/styles/material.css';
|
|
55
|
-
@import '../node_modules/@syncfusion/ej2-splitbuttons/styles/material.css';
|
|
56
|
-
@import '../node_modules/@syncfusion/ej2-grids/styles/material.css';
|
|
57
|
-
@import '../node_modules/@syncfusion/ej2-treegrid/styles/material.css';
|
|
58
|
-
@import '../node_modules/@syncfusion/ej2-react-gantt/styles/material.css';
|
|
48
|
+
@import "../node_modules/@syncfusion/ej2-tailwind3-theme/styles/gantt/index.css";
|
|
59
49
|
```
|
|
60
50
|
|
|
61
51
|
### Add Gantt Component
|
|
@@ -71,23 +61,23 @@ function App() {
|
|
|
71
61
|
{
|
|
72
62
|
TaskID: 1,
|
|
73
63
|
TaskName: 'Project Initiation',
|
|
74
|
-
StartDate: new Date('04/02/
|
|
75
|
-
EndDate: new Date('04/21/
|
|
64
|
+
StartDate: new Date('04/02/2026'),
|
|
65
|
+
EndDate: new Date('04/21/2026'),
|
|
76
66
|
subtasks: [
|
|
77
|
-
{ TaskID: 2, TaskName: 'Identify Site location', StartDate: new Date('04/02/
|
|
78
|
-
{ TaskID: 3, TaskName: 'Perform Soil test', StartDate: new Date('04/02/
|
|
79
|
-
{ TaskID: 4, TaskName: 'Soil test approval', StartDate: new Date('04/02/
|
|
67
|
+
{ TaskID: 2, TaskName: 'Identify Site location', StartDate: new Date('04/02/2026'), Duration: 4, Progress: 50 },
|
|
68
|
+
{ TaskID: 3, TaskName: 'Perform Soil test', StartDate: new Date('04/02/2026'), Duration: 4, Progress: 50 },
|
|
69
|
+
{ TaskID: 4, TaskName: 'Soil test approval', StartDate: new Date('04/02/2026'), Duration: 4, Progress: 50 },
|
|
80
70
|
]
|
|
81
71
|
},
|
|
82
72
|
{
|
|
83
73
|
TaskID: 5,
|
|
84
74
|
TaskName: 'Project Estimation',
|
|
85
|
-
StartDate: new Date('04/02/
|
|
86
|
-
EndDate: new Date('04/21/
|
|
75
|
+
StartDate: new Date('04/02/2026'),
|
|
76
|
+
EndDate: new Date('04/21/2026'),
|
|
87
77
|
subtasks: [
|
|
88
|
-
{ TaskID: 6, TaskName: 'Develop floor plan for estimation', StartDate: new Date('04/04/
|
|
89
|
-
{ TaskID: 7, TaskName: 'List materials', StartDate: new Date('04/04/
|
|
90
|
-
{ TaskID: 8, TaskName: 'Estimation approval', StartDate: new Date('04/04/
|
|
78
|
+
{ TaskID: 6, TaskName: 'Develop floor plan for estimation', StartDate: new Date('04/04/2026'), Duration: 3, Progress: 50 },
|
|
79
|
+
{ TaskID: 7, TaskName: 'List materials', StartDate: new Date('04/04/2026'), Duration: 3, Progress: 50 },
|
|
80
|
+
{ TaskID: 8, TaskName: 'Estimation approval', StartDate: new Date('04/04/2026'), Duration: 3, Progress: 50 }
|
|
91
81
|
]
|
|
92
82
|
}];
|
|
93
83
|
let taskSettings = {id: 'TaskID', name: 'TaskName', startDate: 'StartDate', endDate: 'EndDate', duration: 'Duration', progress: 'Progress', child: 'subtasks' };
|
|
@@ -101,20 +91,20 @@ export default App;
|
|
|
101
91
|
|
|
102
92
|
Gantt component is also offered in the following list of frameworks.
|
|
103
93
|
|
|
104
|
-
| [<img src="https://ej2.syncfusion.com/github/images/js.svg" height="50" />](https://www.syncfusion.com/javascript-
|
|
94
|
+
| [<img src="https://ej2.syncfusion.com/github/images/js.svg" height="50" />](https://www.syncfusion.com/gantt-sdk/javascript-gantt-chart?utm_medium=listing&utm_source=github)<br/> [JavaScript](https://www.syncfusion.com/gantt-sdk/javascript-gantt-chart?utm_medium=listing&utm_source=github) | [<img src="https://ej2.syncfusion.com/github/images/angular-new.svg" height="50" />](https://www.syncfusion.com/gantt-sdk/angular-gantt-chart/?utm_medium=listing&utm_source=github)<br/> [Angular](https://www.syncfusion.com/gantt-sdk/angular-gantt-chart/?utm_medium=listing&utm_source=github) | [<img src="https://ej2.syncfusion.com/github/images/vue.svg" height="50" />](https://www.syncfusion.com/vue-ui-components?utm_medium=listing&utm_source=github)<br/> [Vue](https://www.syncfusion.com/vue-ui-components?utm_medium=listing&utm_source=github) | [<img src="https://ej2.syncfusion.com/github/images/netcore.svg" height="50" />](https://www.syncfusion.com/gantt-sdk/aspnet-core-gantt-chart?utm_medium=listing&utm_source=github)<br/> [ASP.NET Core](https://www.syncfusion.com/gantt-sdk/aspnet-core-gantt-chart?utm_medium=listing&utm_source=github) | [<img src="https://ej2.syncfusion.com/github/images/netmvc.svg" height="50" />](https://www.syncfusion.com/gantt-sdk/aspnet-mvc-gantt-chart?utm_medium=listing&utm_source=github)<br/> [ASP.NET MVC](https://www.syncfusion.com/gantt-sdk/aspnet-mvc-gantt-chart?utm_medium=listing&utm_source=github) |
|
|
105
95
|
| :-----: | :-----: | :-----: | :-----: | :-----: |
|
|
106
96
|
|
|
107
97
|
## Showcase samples
|
|
108
98
|
|
|
109
|
-
* Loan Calculator - [Source](https://github.com/syncfusion/ej2-showcase-react-loan-calculator), [Live Demo](https://ej2.syncfusion.com/showcase/react/loancalculator/?utm_source=npm&utm_medium=listing&utm_campaign=react-gantt-npm
|
|
99
|
+
* Loan Calculator - [Source](https://github.com/syncfusion/ej2-showcase-react-loan-calculator), [Live Demo](https://ej2.syncfusion.com/showcase/react/loancalculator/?utm_source=npm&utm_medium=listing&utm_campaign=react-gantt-npm)
|
|
110
100
|
|
|
111
101
|
## Key features
|
|
112
102
|
|
|
113
103
|
* [Data sources](https://ej2.syncfusion.com/react/demos/?utm_source=npm&utm_campaign=react-gantt-npm#/bootstrap5/gantt/local-data): Bind hierarchical or self-referential data to Gantt chart with an array of JSON objects or DataManager.
|
|
114
104
|
* [Timeline](https://ej2.syncfusion.com/react/demos/?utm_source=npm&utm_campaign=react-gantt-npm#/bootstrap5/gantt/timeline): Display timescale from minutes to decades easily, and also display custom texts in the timeline units. Timeline can be displayed in either one-tier or two-tier layout.
|
|
115
|
-
* [Task dependency](https://ej2.syncfusion.com/react/demos/?utm_source=npm&utm_campaign=react-gantt-npm#/bootstrap5/gantt/editing): Allows for the definition or update of dependencies between tasks in a project using four types of task dependencies: Finish – Start, Start – Finish, Finish – Finish, and Start – Start.
|
|
105
|
+
* [Task dependency](https://ej2.syncfusion.com/react/demos/?utm_source=npm&utm_campaign=react-gantt-npm#/bootstrap5/gantt/default-editing): Allows for the definition or update of dependencies between tasks in a project using four types of task dependencies: Finish – Start, Start – Finish, Finish – Finish, and Start – Start.
|
|
116
106
|
* [Resources](https://ej2.syncfusion.com/react/demos/?utm_source=npm&utm_campaign=react-gantt-npm#/bootstrap5/gantt/resource-view): Visualizes the list of tasks assigned to each resource in hierarchy manner and switch the resources as per user need by task editing.
|
|
117
|
-
* [Editing](https://ej2.syncfusion.com/react/demos/?utm_source=npm&utm_campaign=react-gantt-npm#/bootstrap5/gantt/editing): Provides the options to dynamically insert, delete and update tasks using columns, dialog and taskbar editing options.
|
|
107
|
+
* [Editing](https://ej2.syncfusion.com/react/demos/?utm_source=npm&utm_campaign=react-gantt-npm#/bootstrap5/gantt/default-editing): Provides the options to dynamically insert, delete and update tasks using columns, dialog and taskbar editing options.
|
|
118
108
|
* [Virtual scrolling](https://ej2.syncfusion.com/react/demos/?utm_source=npm&utm_campaign=react-gantt-npm#/bootstrap5/gantt/virtual-scroll): Improves the performance of the gantt control when binding large amounts of data by only rendering the currently visible parts of the user interface and rendering other elements as needed while scrolling.
|
|
119
109
|
* [Critical path](https://ej2.syncfusion.com/react/demos/?utm_source=npm&utm_campaign=react-gantt-npm#/bootstrap5/gantt/critical-path): The critical path in a project is displayed by a single task or a series of tasks. If a task in critical path is delayed, the entire project will be delayed. A task is considered to be critical if any delay to this task would affect the project end date.
|
|
120
110
|
* [Customizable taskbars](https://ej2.syncfusion.com/react/demos/?utm_source=npm&utm_campaign=react-gantt-npm#/bootstrap5/gantt/taskbar-template): Display various tasks in a project using parent and child taskbars, summary taskbars and milestone UI, which can be customized with templates.
|
|
@@ -130,14 +120,14 @@ Gantt component is also offered in the following list of frameworks.
|
|
|
130
120
|
* [Row re-ordering](https://ej2.syncfusion.com/react/demos/?utm_source=npm&utm_campaign=react-gantt-npm#/bootstrap5/gantt/drag-and-drop): Allows rows to be rearranged through drag and drop actions, changing their position and hierarchy level. A child row can be moved as a sibling within the same parent row or as a child to a different parent row.
|
|
131
121
|
* [Selection](https://ej2.syncfusion.com/react/demos/?utm_source=npm&utm_campaign=react-gantt-npm#/bootstrap5/gantt/selection): Rows or cells can be selected in the Gantt Chart. One or more rows or cells can also be selected by holding Shift, Ctrl or Command, or programmatically.
|
|
132
122
|
* [Templates](https://ej2.syncfusion.com/react/demos/?utm_source=npm&utm_campaign=react-gantt-npm#/bootstrap5/gantt/column-template): Templates can be used to create custom user experiences in the gantt.
|
|
133
|
-
* [RTL support](https://
|
|
134
|
-
* [Localization](https://
|
|
123
|
+
* [RTL support](https://help.syncfusion.com/gantt-sdk/react/gantt-chart/global-local?utm_source=npm&utm_medium=listing&utm_campaign=react-gantt-npm#right-to-left-rtl-support): Provides the right-to-left mode which aligns content in the Gantt Chart component from right to left. This improves user experience and accessibility for those who work with RTL languages like Hebrew and Arabic.
|
|
124
|
+
* [Localization](https://help.syncfusion.com/gantt-sdk/react/gantt-chart/global-local?utm_source=npm&utm_medium=listing&utm_campaign=react-gantt-npm#localization-implementation): Provides inherent support to localize the UI.
|
|
135
125
|
|
|
136
126
|
## Resources
|
|
137
127
|
|
|
138
128
|
* [AI Coding Assistant](https://ej2.syncfusion.com/react/documentation/ai-coding-assistants/overview)
|
|
139
129
|
* [Theme Studio](https://ej2.syncfusion.com/themestudio/)
|
|
140
|
-
* [What's New](https://www.syncfusion.com/products/whatsnew/
|
|
130
|
+
* [What's New](https://www.syncfusion.com/products/whatsnew/gantt-sdk?utm_medium=listing&utm_source=github)
|
|
141
131
|
* [Road Map](https://www.syncfusion.com/products/roadmap/react)
|
|
142
132
|
* [E-Books](https://www.syncfusion.com/succinctly-free-ebooks?searchkey=react&type=all)
|
|
143
133
|
|
|
@@ -146,9 +136,9 @@ Gantt component is also offered in the following list of frameworks.
|
|
|
146
136
|
Product support is available through following mediums.
|
|
147
137
|
|
|
148
138
|
* [Support ticket](https://support.syncfusion.com/support/tickets/create) - Guaranteed Response in 24 hours | Unlimited tickets | Holiday support
|
|
149
|
-
* [Community forum](https://www.syncfusion.com/forums/
|
|
139
|
+
* [Community forum](https://www.syncfusion.com/forums/gantt-sdk?utm_source=npm&utm_medium=listing&utm_campaign=react-gantt-npm)
|
|
150
140
|
* [GitHub issues](https://github.com/syncfusion/ej2-react-ui-components/issues/new)
|
|
151
|
-
* [Request feature or report bug](https://www.syncfusion.com/feedback/
|
|
141
|
+
* [Request feature or report bug](https://www.syncfusion.com/feedback/gantt-sdk?utm_source=npm&utm_medium=listing&utm_campaign=react-gantt-npm)
|
|
152
142
|
* Live chat
|
|
153
143
|
|
|
154
144
|
## Changelog
|
|
@@ -163,4 +153,4 @@ Check the changelog [here](https://github.com/syncfusion/ej2-react-ui-components
|
|
|
163
153
|
|
|
164
154
|
See [LICENSE FILE](https://github.com/syncfusion/ej2-react-ui-components/blob/master/license) for more info.
|
|
165
155
|
|
|
166
|
-
© Copyright 2026 Syncfusion<sup>®</sup> Inc. All Rights Reserved. The Syncfusion<sup>®</sup> Essential Studio<sup>®</sup> license and copyright applies to this distribution.
|
|
156
|
+
© Copyright 2026 Syncfusion<sup>®</sup> Inc. All Rights Reserved. The Syncfusion<sup>®</sup> Essential Studio<sup>®</sup> license and copyright applies to this distribution.
|
package/diConfig.json
CHANGED
|
@@ -281,6 +281,7 @@
|
|
|
281
281
|
],
|
|
282
282
|
"templateProperties": [
|
|
283
283
|
"template",
|
|
284
|
+
"toolbarTemplate",
|
|
284
285
|
"headerTemplate",
|
|
285
286
|
"editTemplate",
|
|
286
287
|
"filter.itemTemplate",
|
|
@@ -598,6 +599,7 @@
|
|
|
598
599
|
],
|
|
599
600
|
"templateProperties": [
|
|
600
601
|
"parentTaskbarTemplate",
|
|
602
|
+
"toolbarTemplate",
|
|
601
603
|
"timelineTemplate",
|
|
602
604
|
"milestoneTemplate",
|
|
603
605
|
"baselineTemplate",
|
|
@@ -613,7 +615,8 @@
|
|
|
613
615
|
"tooltipSettings.timeline",
|
|
614
616
|
"filter.itemTemplate",
|
|
615
617
|
"filterTemplate",
|
|
616
|
-
"emptyRecordTemplate"
|
|
618
|
+
"emptyRecordTemplate",
|
|
619
|
+
"template"
|
|
617
620
|
],
|
|
618
621
|
"blazorTemplates": [
|
|
619
622
|
"parentTaskbarTemplate",
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
/*!
|
|
2
2
|
* filename: ej2-react-gantt.min.js
|
|
3
|
-
* version : 34.2.
|
|
3
|
+
* version : 34.2.4
|
|
4
4
|
* Copyright Syncfusion Inc. 2001 - 2025. All rights reserved.
|
|
5
5
|
* Use of this code is subject to the terms of our license.
|
|
6
6
|
* A copy of the current license can be obtained at any time by e-mailing
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
/*!
|
|
2
2
|
* filename: ej2-react-gantt.umd.min.js
|
|
3
|
-
* version : 34.2.
|
|
3
|
+
* version : 34.2.4
|
|
4
4
|
* Copyright Syncfusion Inc. 2001 - 2025. All rights reserved.
|
|
5
5
|
* Use of this code is subject to the terms of our license.
|
|
6
6
|
* A copy of the current license can be obtained at any time by e-mailing
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@syncfusion/ej2-react-gantt",
|
|
3
|
-
"version": "34.2.
|
|
3
|
+
"version": "34.2.4",
|
|
4
4
|
"description": "Essential JS 2 Gantt Component for React",
|
|
5
5
|
"author": "Syncfusion Inc.",
|
|
6
6
|
"license": "SEE LICENSE IN license",
|
|
@@ -35,9 +35,9 @@
|
|
|
35
35
|
"es2015": "dist/es6/ej2-react-gantt.es2015.js",
|
|
36
36
|
"readme": "ReadMe.md",
|
|
37
37
|
"dependencies": {
|
|
38
|
-
"@syncfusion/ej2-base": "~34.2.
|
|
38
|
+
"@syncfusion/ej2-base": "~34.2.4",
|
|
39
39
|
"@syncfusion/ej2-react-base": "~34.2.2",
|
|
40
|
-
"@syncfusion/ej2-gantt": "34.2.
|
|
40
|
+
"@syncfusion/ej2-gantt": "34.2.4"
|
|
41
41
|
},
|
|
42
42
|
"devDependencies": {},
|
|
43
43
|
"sideEffects": false,
|
|
@@ -2,6 +2,7 @@ import { ComplexBase } from '@syncfusion/ej2-react-base';
|
|
|
2
2
|
import { ColumnModel } from '@syncfusion/ej2-gantt';
|
|
3
3
|
export interface ColumnDirTypecast {
|
|
4
4
|
template?: string | Function | any;
|
|
5
|
+
toolbarTemplate?: string | Function | any;
|
|
5
6
|
headerTemplate?: string | Function | any;
|
|
6
7
|
editTemplate?: string | Function | any;
|
|
7
8
|
filter?: any;
|
|
@@ -3,6 +3,7 @@ import { Gantt, GanttModel } from '@syncfusion/ej2-gantt';
|
|
|
3
3
|
import { DefaultHtmlAttributes } from '@syncfusion/ej2-react-base';
|
|
4
4
|
export interface GanttTypecast {
|
|
5
5
|
parentTaskbarTemplate?: string | Function | any;
|
|
6
|
+
toolbarTemplate?: string | Function | any;
|
|
6
7
|
timelineTemplate?: string | Function | any;
|
|
7
8
|
milestoneTemplate?: string | Function | any;
|
|
8
9
|
baselineTemplate?: string | Function | any;
|
|
@@ -13,6 +14,7 @@ export interface GanttTypecast {
|
|
|
13
14
|
filter?: any;
|
|
14
15
|
filterTemplate?: string | Function | any;
|
|
15
16
|
emptyRecordTemplate?: string | Function | any;
|
|
17
|
+
template?: string | Function | any;
|
|
16
18
|
}
|
|
17
19
|
/**
|
|
18
20
|
* `GanttComponent` represents the react Gantt.
|