vue-resource-timeline

A simple component to show timeline of events categorized by resources.

Install

npm install --save vue-resource-timeline

Use as a plugin -

import Vue from 'vue';
import ResourceTimeline from 'vue-resource-timeline';

Vue.use(ResourceTimeline); // Adds 'resource-timeline' component

or directly use as a component

import ResourceTimeline from 'vue-resource-timeline';

export default {
  components: {
    ResourceTimeline,
    ...
  },
  ...
};

Props -

| Prop | Description | Type | Default | |------|--------------|-------|---------| |resources*|Array of resources|Array|| |events*|Array of events|Array|| |showEmptyResource|Toggle showing of resources with no events|Boolean|false| |showAddBtn|Toggle showing add button|Boolean|false|

events expects the following format -

const events = [{
  resourceId: String/Number, // Strictly matches the value of a resource.id
  start: String, // 'HH:mm'
  end: String, // 'HH:mm'
  class: String, // Optional
  title: String, // Optional
}];

resources expects the following format -

const resources = [{
  id: String/Number, // Strictly matches the value of a resource.id
  class: String, // Optional
  title: String, // Optional
}];

Events -

| Event | Description | Payload | |-------|--------------|----------| |addBtnClick|Emitted when the + button is clicked|Number, day of add button that was clicked| |eventClick|Emitted when an event is clicked|Object, original event object for the clicked event|

Development setup

npm install

Compiles and hot-reloads for development

npm run serve

Compiles and minifies for production

npm run build

Run your tests

npm run test

Lints and fixes files

npm run lint

License

MIT