@syncfusion/ej2-vue-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 +44 -73
- package/dist/ej2-vue-gantt.umd.min.js +1 -1
- package/package.json +3 -3
package/README.md
CHANGED
|
@@ -1,12 +1,18 @@
|
|
|
1
1
|
# Vue Gantt Component
|
|
2
2
|
|
|
3
|
-
The [Vue Gantt](https://www.syncfusion.com/
|
|
3
|
+
The [Vue Gantt](https://www.syncfusion.com/gantt-sdk/vue-gantt-chart?utm_source=npm&utm_medium=listing&utm_campaign=vue-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
|
-
<
|
|
6
|
+
<a href="https://help.syncfusion.com/gantt-sdk/vue/gantt-chart/getting-started/?utm_source=npm&utm_medium=listing&utm_campaign=vue-gantt-npm">Getting Started</a> .
|
|
7
|
+
<a href="https://ej2.syncfusion.com/vue/demos/?utm_source=npm&utm_medium=listing&utm_campaign=vue-gantt-npm#/bootstrap5/gantt/default">Online demos</a> .
|
|
8
|
+
<a href="https://www.syncfusion.com/gantt-sdk/vue-gantt-chart?utm_source=npm&utm_medium=listing&utm_campaign=vue-gantt-npm">Learn more</a>
|
|
9
|
+
</p>
|
|
10
|
+
|
|
11
|
+
<p align="center">
|
|
12
|
+
<img alt="Vue Gantt Control" src="https://raw.githubusercontent.com/SyncfusionExamples/nuget-img/master/vue/vue-gantt-chart.webp"> </p>
|
|
7
13
|
|
|
8
14
|
<p align="center">
|
|
9
|
-
Trusted by the world's leading companies
|
|
15
|
+
Trusted by the world's leading companies<br>
|
|
10
16
|
<a href="https://www.syncfusion.com">
|
|
11
17
|
<img src="https://ej2.syncfusion.com/home/images/trusted_companies.png" alt="Bootstrap logo">
|
|
12
18
|
</a>
|
|
@@ -14,7 +20,7 @@ Trusted by the world's leading companies
|
|
|
14
20
|
|
|
15
21
|
## Setup
|
|
16
22
|
|
|
17
|
-
### Create
|
|
23
|
+
### Create a Vue Application
|
|
18
24
|
|
|
19
25
|
You can use [`Vue CLI`](https://github.com/vuejs/vue-cli) to setup your Vue 2 applications.To install Vue CLI use the following commands.
|
|
20
26
|
|
|
@@ -26,52 +32,28 @@ npm run serve
|
|
|
26
32
|
```
|
|
27
33
|
Initiating a new project prompts us to choose the type of project to be used for the current application. Select the option `Default ([Vue 2] babel, eslint)` from the menu.
|
|
28
34
|
|
|
29
|
-
### Adding Syncfusion Gantt
|
|
35
|
+
### Adding Syncfusion Gantt and Theme Packages
|
|
30
36
|
|
|
31
|
-
All Syncfusion Vue packages are published in [npmjs.com](https://www.npmjs.com/~syncfusionorg) registry. To install Vue
|
|
37
|
+
All Syncfusion Vue packages are published in the [npmjs.com](https://www.npmjs.com/~syncfusionorg) registry. To install the Vue Gantt package and the Tailwind 3 theme package, use the following commands.
|
|
32
38
|
|
|
33
39
|
```bash
|
|
34
|
-
npm install @syncfusion/ej2-vue-gantt
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
### Registering Gantt Component
|
|
38
|
-
|
|
39
|
-
You can register the Gantt component in your application by using the **Vue.use()**. Refer to the code example given below.
|
|
40
|
-
|
|
41
|
-
```typescript
|
|
42
|
-
import { GanttPlugin } from '@syncfusion/ej2-vue-gantt';
|
|
43
|
-
|
|
44
|
-
Vue.use(GanttPlugin);
|
|
40
|
+
npm install @syncfusion/ej2-vue-gantt
|
|
41
|
+
npm install @syncfusion/ej2-tailwind3-theme
|
|
45
42
|
```
|
|
46
43
|
|
|
47
|
-
> Registering **GanttPlugin** in vue, will register the gantt component along with its required child directives globally.
|
|
48
|
-
|
|
49
44
|
### Adding CSS references for Gantt
|
|
50
45
|
|
|
51
46
|
Add CSS references needed for Gantt in **style** section of the **App.vue** file from **../node_modules/@syncfusion** package folder.
|
|
52
47
|
|
|
53
48
|
```html
|
|
54
49
|
<style>
|
|
55
|
-
@import
|
|
56
|
-
@import '../node_modules/@syncfusion/ej2-buttons/styles/material.css';
|
|
57
|
-
@import '../node_modules/@syncfusion/ej2-calendars/styles/material.css';
|
|
58
|
-
@import '../node_modules/@syncfusion/ej2-dropdowns/styles/material.css';
|
|
59
|
-
@import '../node_modules/@syncfusion/ej2-inputs/styles/material.css';
|
|
60
|
-
@import '../node_modules/@syncfusion/ej2-lists/styles/material.css';
|
|
61
|
-
@import '../node_modules/@syncfusion/ej2-layouts/styles/material.css';
|
|
62
|
-
@import '../node_modules/@syncfusion/ej2-navigations/styles/material.css';
|
|
63
|
-
@import '../node_modules/@syncfusion/ej2-popups/styles/material.css';
|
|
64
|
-
@import '../node_modules/@syncfusion/ej2-splitbuttons/styles/material.css';
|
|
65
|
-
@import '../node_modules/@syncfusion/ej2-grids/styles/material.css';
|
|
66
|
-
@import '../node_modules/@syncfusion/ej2-treegrid/styles/material.css';
|
|
67
|
-
@import '../node_modules/@syncfusion/ej2-gantt/styles/material.css';
|
|
68
|
-
@import '../node_modules/@syncfusion/ej2-vue-gantt/styles/material.css';
|
|
50
|
+
@import "../node_modules/@syncfusion/ej2-tailwind3-theme/styles/gantt/index.css";
|
|
69
51
|
</style>
|
|
70
52
|
```
|
|
71
53
|
|
|
72
54
|
## Add Gantt Component
|
|
73
55
|
|
|
74
|
-
Add the Vue Gantt by using **ejs-gantt** selector in **template** section of the **App.vue** file.
|
|
56
|
+
Add the Vue Gantt by using **ejs-gantt** selector in **template** section of the **App.vue** file. Ensure that the Gantt Chart component is imported and registered in the **script** section so that Vue can recognize and render it within the template.
|
|
75
57
|
|
|
76
58
|
```html
|
|
77
59
|
<template>
|
|
@@ -80,82 +62,71 @@ Add the Vue Gantt by using **ejs-gantt** selector in **template** section of the
|
|
|
80
62
|
</div>
|
|
81
63
|
</template>
|
|
82
64
|
<script>
|
|
83
|
-
import
|
|
84
|
-
import { GanttPlugin } from "@syncfusion/ej2-vue-gantt";
|
|
85
|
-
|
|
86
|
-
Vue.use(GanttPlugin);
|
|
65
|
+
import { GanttComponent } from "@syncfusion/ej2-vue-gantt";
|
|
87
66
|
|
|
88
67
|
export default {
|
|
68
|
+
name: "App",
|
|
69
|
+
components: {
|
|
70
|
+
'ejs-gantt': GanttComponent // Component registration
|
|
71
|
+
},
|
|
89
72
|
data: function() {
|
|
90
73
|
return{
|
|
91
74
|
data: [
|
|
92
75
|
{
|
|
93
76
|
TaskID: 1,
|
|
94
77
|
TaskName: 'Project Initiation',
|
|
95
|
-
StartDate: new Date('04/02/
|
|
96
|
-
EndDate: new Date('04/21/
|
|
78
|
+
StartDate: new Date('04/02/2026'),
|
|
79
|
+
EndDate: new Date('04/21/2026'),
|
|
97
80
|
subtasks: [
|
|
98
|
-
{ TaskID: 2, TaskName: 'Identify Site location', StartDate: new Date('04/02/
|
|
99
|
-
{ TaskID: 3, TaskName: 'Perform Soil test', StartDate: new Date('04/02/
|
|
100
|
-
{ TaskID: 4, TaskName: 'Soil test approval', StartDate: new Date('04/02/
|
|
81
|
+
{ TaskID: 2, TaskName: 'Identify Site location', StartDate: new Date('04/02/2026'), Duration: 4, Progress: 50 },
|
|
82
|
+
{ TaskID: 3, TaskName: 'Perform Soil test', StartDate: new Date('04/02/2026'), Duration: 4, Progress: 50 },
|
|
83
|
+
{ TaskID: 4, TaskName: 'Soil test approval', StartDate: new Date('04/02/2026'), Duration: 4, Progress: 50 },
|
|
101
84
|
]
|
|
102
85
|
},
|
|
103
86
|
{
|
|
104
87
|
TaskID: 5,
|
|
105
88
|
TaskName: 'Project Estimation',
|
|
106
|
-
StartDate: new Date('04/02/
|
|
107
|
-
EndDate: new Date('04/21/
|
|
89
|
+
StartDate: new Date('04/02/2026'),
|
|
90
|
+
EndDate: new Date('04/21/2026'),
|
|
108
91
|
subtasks: [
|
|
109
|
-
{ TaskID: 6, TaskName: 'Develop floor plan for estimation', StartDate: new Date('04/04/
|
|
110
|
-
{ TaskID: 7, TaskName: 'List materials', StartDate: new Date('04/04/
|
|
111
|
-
{ TaskID: 8, TaskName: 'Estimation approval', StartDate: new Date('04/04/
|
|
92
|
+
{ TaskID: 6, TaskName: 'Develop floor plan for estimation', StartDate: new Date('04/04/2026'), Duration: 3, Progress: 50 },
|
|
93
|
+
{ TaskID: 7, TaskName: 'List materials', StartDate: new Date('04/04/2026'), Duration: 3, Progress: 50 },
|
|
94
|
+
{ TaskID: 8, TaskName: 'Estimation approval', StartDate: new Date('04/04/2026'), Duration: 3, Progress: 50 }
|
|
112
95
|
]
|
|
113
96
|
}],
|
|
114
97
|
taskFields: {
|
|
115
98
|
id: 'TaskID',
|
|
116
99
|
name: 'TaskName',
|
|
117
100
|
startDate: 'StartDate',
|
|
118
|
-
endDate: 'EndDate',
|
|
119
101
|
duration: 'Duration',
|
|
102
|
+
progress: 'Progress',
|
|
120
103
|
child: 'subtasks'
|
|
121
104
|
},
|
|
122
105
|
};
|
|
123
106
|
},
|
|
124
107
|
};
|
|
125
108
|
</script>
|
|
109
|
+
|
|
126
110
|
<style>
|
|
127
|
-
@import
|
|
128
|
-
@import '../node_modules/@syncfusion/ej2-buttons/styles/material.css';
|
|
129
|
-
@import '../node_modules/@syncfusion/ej2-calendars/styles/material.css';
|
|
130
|
-
@import '../node_modules/@syncfusion/ej2-dropdowns/styles/material.css';
|
|
131
|
-
@import '../node_modules/@syncfusion/ej2-inputs/styles/material.css';
|
|
132
|
-
@import '../node_modules/@syncfusion/ej2-lists/styles/material.css';
|
|
133
|
-
@import '../node_modules/@syncfusion/ej2-layouts/styles/material.css';
|
|
134
|
-
@import '../node_modules/@syncfusion/ej2-navigations/styles/material.css';
|
|
135
|
-
@import '../node_modules/@syncfusion/ej2-popups/styles/material.css';
|
|
136
|
-
@import '../node_modules/@syncfusion/ej2-splitbuttons/styles/material.css';
|
|
137
|
-
@import '../node_modules/@syncfusion/ej2-grids/styles/material.css';
|
|
138
|
-
@import '../node_modules/@syncfusion/ej2-treegrid/styles/material.css';
|
|
139
|
-
@import '../node_modules/@syncfusion/ej2-gantt/styles/material.css';
|
|
140
|
-
@import '../node_modules/@syncfusion/ej2-vue-gantt/styles/material.css';
|
|
111
|
+
@import "../node_modules/@syncfusion/ej2-tailwind3-theme/styles/gantt/index.css";
|
|
141
112
|
</style>
|
|
142
113
|
```
|
|
143
|
-
> Refer the [Getting Started with Vue3](https://
|
|
114
|
+
> Refer the [Getting Started with Vue3](https://help.syncfusion.com/gantt-sdk/vue/gantt-chart/getting-started-vue) for using Syncfusion Vue components in Vue 3 applications.
|
|
144
115
|
|
|
145
116
|
## Supported frameworks
|
|
146
117
|
|
|
147
118
|
Gantt component is also offered in the following list of frameworks.
|
|
148
119
|
|
|
149
|
-
| [<img src="https://ej2.syncfusion.com/github/images/js.svg" height="50" />](https://www.syncfusion.com/javascript-
|
|
120
|
+
| [<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/react.svg" height="50" />](https://www.syncfusion.com/gantt-sdk/react-gantt-chart?utm_medium=listing&utm_source=github)<br/> [React](https://www.syncfusion.com/gantt-sdk/react-gantt-chart?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) |
|
|
150
121
|
| :-----: | :-----: | :-----: | :-----: | :-----: |
|
|
151
122
|
|
|
152
123
|
## Key features
|
|
153
124
|
|
|
154
125
|
* [Data sources](https://ej2.syncfusion.com/vue/demos/?utm_source=npm&utm_campaign=vue-gantt-npm#/bootstrap5/gantt/local-data.html): Bind hierarchical or self-referential data to Gantt chart with an array of JSON objects or DataManager.
|
|
155
126
|
* [Timeline](https://ej2.syncfusion.com/vue/demos/?utm_source=npm&utm_campaign=vue-gantt-npm#/bootstrap5/gantt/timeline.html): 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.
|
|
156
|
-
* [Task dependency](https://ej2.syncfusion.com/vue/demos/?utm_source=npm&utm_campaign=vue-gantt-npm#/bootstrap5/gantt/editing.html): 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.
|
|
127
|
+
* [Task dependency](https://ej2.syncfusion.com/vue/demos/?utm_source=npm&utm_campaign=vue-gantt-npm#/bootstrap5/gantt/default-editing.html): 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.
|
|
157
128
|
* [Resources](https://ej2.syncfusion.com/vue/demos/?utm_source=npm&utm_campaign=vue-gantt-npm#/bootstrap5/gantt/resource-view.html): Visualizes the list of tasks assigned to each resource in hierarchy manner and switch the resources as per user need by task editing.
|
|
158
|
-
* [Editing](https://ej2.syncfusion.com/vue/demos/?utm_source=npm&utm_campaign=vue-gantt-npm#/bootstrap5/gantt/editing.html): Provides the options to dynamically insert, delete and update tasks using columns, dialog and taskbar editing options.
|
|
129
|
+
* [Editing](https://ej2.syncfusion.com/vue/demos/?utm_source=npm&utm_campaign=vue-gantt-npm#/bootstrap5/gantt/default-editing.html): Provides the options to dynamically insert, delete and update tasks using columns, dialog and taskbar editing options.
|
|
159
130
|
* [Virtual scrolling](https://ej2.syncfusion.com/vue/demos/?utm_source=npm&utm_campaign=vue-gantt-npm#/bootstrap5/gantt/virtual-scroll.html): 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.
|
|
160
131
|
* [Critical path](https://ej2.syncfusion.com/vue/demos/?utm_source=npm&utm_campaign=vue-gantt-npm#/bootstrap5/gantt/critical-path.html): 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.
|
|
161
132
|
* [Customizable taskbars](https://ej2.syncfusion.com/vue/demos/?utm_source=npm&utm_campaign=vue-gantt-npm#/bootstrap5/gantt/taskbar-template.html): Display various tasks in a project using parent and child taskbars, summary taskbars and milestone UI, which can be customized with templates.
|
|
@@ -171,13 +142,13 @@ Gantt component is also offered in the following list of frameworks.
|
|
|
171
142
|
* [Row re-ordering](https://ej2.syncfusion.com/vue/demos/?utm_source=npm&utm_campaign=vue-gantt-npm#/bootstrap5/gantt/drag-and-drop.html): 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.
|
|
172
143
|
* [Selection](https://ej2.syncfusion.com/vue/demos/?utm_source=npm&utm_campaign=vue-gantt-npm#/bootstrap5/gantt/selection.html): 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.
|
|
173
144
|
* [Templates](https://ej2.syncfusion.com/vue/demos/?utm_source=npm&utm_campaign=vue-gantt-npm#/bootstrap5/gantt/column-template.html): Templates can be used to create custom user experiences in the gantt.
|
|
174
|
-
* [RTL support](https://
|
|
175
|
-
* [Localization](https://
|
|
145
|
+
* [RTL support](https://help.syncfusion.com/gantt-sdk/vue/gantt-chart/global-local#right-to-left-rtl): 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.
|
|
146
|
+
* [Localization](https://help.syncfusion.com/gantt-sdk/vue/gantt-chart/global-local#localization): Provides inherent support to localize the UI.
|
|
176
147
|
|
|
177
148
|
## Resources
|
|
178
149
|
|
|
179
150
|
* [Theme Studio](https://ej2.syncfusion.com/themestudio/)
|
|
180
|
-
* [What's New](https://www.syncfusion.com/products/whatsnew/
|
|
151
|
+
* [What's New](https://www.syncfusion.com/products/whatsnew/gantt-sdk?utm_medium=listing&utm_source=github)
|
|
181
152
|
* [Road Map](https://www.syncfusion.com/products/roadmap/vue)
|
|
182
153
|
* [E-Books](https://www.syncfusion.com/succinctly-free-ebooks?searchkey=vue&type=all)
|
|
183
154
|
|
|
@@ -186,9 +157,9 @@ Gantt component is also offered in the following list of frameworks.
|
|
|
186
157
|
Product support is available through the following mediums.
|
|
187
158
|
|
|
188
159
|
* [Support ticket](https://support.syncfusion.com/support/tickets/create) - Guaranteed Response in 24 hours | Unlimited tickets | Holiday support
|
|
189
|
-
* [Community forum](https://www.syncfusion.com/forums/vue?utm_source=npm&utm_medium=listing&utm_campaign=vue-gantt-npm)
|
|
160
|
+
* [Community forum](https://www.syncfusion.com/forums/gantt-sdk/vue?utm_source=npm&utm_medium=listing&utm_campaign=vue-gantt-npm)
|
|
190
161
|
* [GitHub issues](https://github.com/syncfusion/ej2-vue-ui-components/issues/new)
|
|
191
|
-
* [Request feature or report bug](https://www.syncfusion.com/feedback/
|
|
162
|
+
* [Request feature or report bug](https://www.syncfusion.com/feedback/gantt-sdk?utm_source=npm&utm_medium=listing&utm_campaign=vue-gantt-npm)
|
|
192
163
|
* Live chat
|
|
193
164
|
|
|
194
165
|
## Changelog
|
|
@@ -203,4 +174,4 @@ Check the changelog [here](https://github.com/syncfusion/ej2-vue-ui-components/b
|
|
|
203
174
|
|
|
204
175
|
See [LICENSE FILE](https://github.com/syncfusion/ej2-vue-ui-components/blob/master/license?utm_source=npm&utm_medium=listing&utm_campaign=vue-grid-npm) for more info.
|
|
205
176
|
|
|
206
|
-
© Copyright 2026 Syncfusion<sup>®</sup> Inc. All Rights Reserved. The Syncfusion<sup>®</sup> Essential Studio<sup>®</sup> license and copyright applies to this distribution.
|
|
177
|
+
© Copyright 2026 Syncfusion<sup>®</sup> Inc. All Rights Reserved. The Syncfusion<sup>®</sup> Essential Studio<sup>®</sup> license and copyright applies to this distribution.
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
/*!
|
|
2
2
|
* filename: ej2-vue-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-vue-gantt",
|
|
3
|
-
"version": "34.2.
|
|
3
|
+
"version": "34.2.4",
|
|
4
4
|
"description": "Essential JS 2 Gantt Component for Vue",
|
|
5
5
|
"author": "Syncfusion Inc.",
|
|
6
6
|
"license": "SEE LICENSE IN license",
|
|
@@ -34,9 +34,9 @@
|
|
|
34
34
|
"es2015": "dist/es6/ej2-vue-gantt.es2015.js",
|
|
35
35
|
"readme": "ReadMe.md",
|
|
36
36
|
"dependencies": {
|
|
37
|
-
"@syncfusion/ej2-base": "~34.2.
|
|
37
|
+
"@syncfusion/ej2-base": "~34.2.4",
|
|
38
38
|
"@syncfusion/ej2-vue-base": "~34.2.2",
|
|
39
|
-
"@syncfusion/ej2-gantt": "34.2.
|
|
39
|
+
"@syncfusion/ej2-gantt": "34.2.4"
|
|
40
40
|
},
|
|
41
41
|
"devDependencies": {},
|
|
42
42
|
"scripts": {
|