Vue-visjs-timeline

Vue component for the vis.js timeline module.

$3

``
npm i -- save vue-visjs-timeline
`

$3

Import and declare the component
`javascript
import timeline from 'vue-visjs-timeline'
Vue.component('timeline', timeline)
`
Add the component in the template.
`html

`
Create items and groups data in the component.
`javascript
export default {
name: 'home-page',
data() {
return {
groups: [
{id: 'a1', content:'Group one'},
{id: 'a2', content:'Group two'},
{id: 'a3', content:'Group three'}
],
items: [
{id: 'a1', content: 'Item one', group: 'Group one'},
{id: 'a2', content: 'Item two', group: 'Group two'},
{id: 'a3', content: 'Item three', group: 'Group three'}
]
}
}
}
`

#### Styling
Custom CSS added to enhance the UI. Import custom CSS
`
require('../node_modules/vue-visjs-timeline/dist/vue-visjs-timeline.css')
`

#### Configure tools
Tools is group of options (Go today, Zoom in, Zoom out). Enabled by default. Add the configuration to disable.
`

`
#### Events
This event is triggered when item is moved or changed
`


export default {
name: 'home-page',
methods: {
updateItem: function (item) {
// handle the event
}
}
}
``

#### Supported events
Note: Only limited events are supported for now

| Events | Description |
| --- |---|
| v-on:item-move | On item position change |
| v-on:range-changed | On window zoom in/out or move|

#### Supported props
Note: Only limited props are enabled

| Name | Description |
| --- |---|
| v-bind:items | List of items |
| v-bind:groups | List of groups |
| v-bind:option | Timeline option (If not present default option is added) |
| v-bind:start | Window start (Timestamp/moment date) |
| v-bind:end | Window end (Timestamp/moment date) |
| :hideTools | Force tools to hide |