A VueJs Gantt chart.
npm install @salamander.be/vue-ganttbash
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'
}
}
``