mirror of
https://github.com/tenrok/vue-ganttastic.git
synced 2026-06-20 11:10:33 +03:00
Marko Zunic
103 lines
2.7 KiB
Markdown
103 lines
2.7 KiB
Markdown
# vue-ganttastic
|
|
|
|
A simple and easy-to-use Gantt chart component for Vue.js
|
|
|
|
## Installation
|
|
If you use <kbd>npm</kbd> in your project, you can install vue-ganttastic simply with:
|
|
```
|
|
npm install vue-ganttastic
|
|
```
|
|
If you do not use <kbd>npm</kbd> in your project, you may alternatively copy and paste all files from the
|
|
<code>components</code> folder and
|
|
and import the components <code>GGanttChart</code> and <code>GGanttRow</code> wherever you need them
|
|
|
|
## Basic Usage
|
|
Import the components <code>GGanttChart</code> and <code>GGanttRow</code>.
|
|
Use <code>g-gantt-chart</code> in your template, pass the desired chart start and chart end time as props (<code>chart-start</code> and <code>chart-end</code>) and add <code>g-gantt-row</code>s
|
|
to the default template slot.
|
|
Pass an array containing your bar objects to every row using the <code>bars</code> prop, while specifying the name of the properties in your bar objects that stand for the bar start and bar end time using the props <code>bar-start</code> and <code>bar-end</code>
|
|
|
|
For more detailed information, such as how to style the bars or additional configuration options, please refer to the [docs]() on the project's homepage (coming soon).
|
|
|
|
The following code showcases a simple usage example in a .vue SFC (Single File Component)
|
|
```html
|
|
<template>
|
|
...
|
|
|
|
<g-gantt-chart
|
|
:chart-start="myChartStart"
|
|
:chart-end="myChartEnd"
|
|
>
|
|
<g-gantt-row
|
|
v-for="row in rows"
|
|
:key="row.label"
|
|
:label="row.label"
|
|
:bars="row.bars"
|
|
bar-start="myStart"
|
|
bar-end="myEnd"
|
|
/>
|
|
</g-gantt-chart>
|
|
|
|
...
|
|
</template>
|
|
|
|
<script>
|
|
|
|
import {GGanttChart, GGanttBar} from 'vue-ganttastic'
|
|
|
|
export default {
|
|
|
|
...
|
|
|
|
components:{
|
|
GGanttChart,
|
|
GGanttBar
|
|
},
|
|
|
|
data(){
|
|
return {
|
|
myChartStart: "2020-03-01 00:00",
|
|
myChartEnd: "2020-03-03 00:00",
|
|
rows: [
|
|
{
|
|
label: "My row #1",
|
|
bars: [
|
|
{
|
|
myStart: "2020-03-01 12:10",
|
|
myEnd: "2020-03-01 16:35"
|
|
}
|
|
]
|
|
},
|
|
{
|
|
label: "My row #2",
|
|
bars: [
|
|
{
|
|
myStart: "2020-03-02 01:00",
|
|
myEnd: "2020-03-02 12:00"
|
|
},
|
|
{
|
|
myStart: "2020-03-02 13:00",
|
|
myEnd: "2020-03-02 22:00"
|
|
}
|
|
]
|
|
}
|
|
]
|
|
}
|
|
}
|
|
|
|
...
|
|
|
|
}
|
|
</script>
|
|
|
|
```
|
|
|
|
## Contributing
|
|
Pull requests are warmly welcomed, while every major change or proposal ought to be discussed in an issue first. As the project is still new, I will gladly accept suggestions, proposals, contributions etc.
|
|
|
|
## Dependencies
|
|
[Moment.js](https://momentjs.com/)
|
|
|
|
## License
|
|
[MIT](https://choosealicense.com/licenses/mit/)
|