vue-gantt

A Configurable Gantt chart build for Vue.

Features & characteristics

- Customizable header fields
- Customizable date fields
- Simple design

Example

!Vue-gantt-example

Demo

https://salamanderbe.github.io/vue-gantt/

Status

In development

Install & basic usage

``bash
npm install @salamander.be/vue-gantt
`

Minimum configuration
- Items: a list of tasks shown in the Gantt chart

`vue



`

Configuration

$3

| props | type | default | description |
| ------------- | ------------- | ------------- | ------------- |
| items | Array | [] | A list of all items shown in the Gantt |
| title | String | '' | A title shown above the Gantt |
| fields | Object | fields | A list of fields used in the header, items keys should match the header fields |
| levels | Number | 2 | Item indentation levels |
| dateLimit | Number | 12 | Amount of dates shown in the chart |
| startDate | String | today | The start date from witch the Gantt will be shown |
| endDate | String | today + datelimit | The end date till witch the Gantt will be shown |
| canEdit | Boolean | true | whether or not Gantt tables can be edited

$3

| key | type | description |
| ------------- | ------------- | ------------- |
| label | String | The Name displayed in the header |
| component | String | The vue component that should represent the cells (gantt-text, gantt-date, gantt-number) |
| width | Number | The fixed cell width |
| placeholder | String | The text shown when the cell is empty |

The default fields when no field option is provided.

`js
{
summary: {
label: 'Summary',
component: 'gantt-text',
width: 300,
placeholder: 'Add a new task...'
},
start_date: {
label: 'Start date',
component: 'gantt-date',
width: 95,
placeholder: 'Start',
callback: 'startdateUpdated'
},
end_date: {
label: 'End date',
component: 'gantt-date',
width: 95,
placeholder: 'End',
callback: 'enddateUpdated'
},
duration: {
label: 'Days',
component: 'gantt-number',
width: 50,
placeholder: '0',
callback: 'durationUpdated'
}
}
``

$3

| events | description |
| ------------- | ------------- |
| update | Triggers whenever a cell has been updated |