Vue-visjs-timeline

Vue component for the vis.js timeline module.

Installation

npm i -- save vue-visjs-timeline

Basic usage

Import and declare the component

import timeline from 'vue-visjs-timeline'
Vue.component('timeline', timeline)

Add the component in the template.

<template>
    <timeline v-bind:items="items" v-bind:groups="groups"></timeline>
</template>

Create items and groups data in the component.

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.

<timeline v-bind:items="items" v-bind:groups="groups" :hide-tools=true></timeline>

Events

This event is triggered when item is moved or changed

<timeline v-bind:items="items" v-bind:groups="groups" v-on:item-move="updateItem"></timeline>

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 |