@nilleb/timeline-vue

README

Timeline-Vue is a capacity planner component for VueJS. Focusing on a single quarter, week or day. With swimlanes, one for every resource of your team. With the possibility to select a single item. With the possibility to highlight a timeline slot (week, day or hour). With integrated drag & drop (alters the event startDate and endDate accordingly). Builds upon a simple list of items, with four simple properties.

Use

import TimelineView from "@nilleb/timeline-vue";
[..]
export default {
  name: "App",
  components: {
    TimelineView,
  },
  data: function() {
      return { 
          events: [
              {
                  id: "1one",
                  name: 'event',
                  startDate: "Mon April 19th, 2021",
                  endDate: "Fri April 23rd, 2021",
                  members: ["Julia", "John"]
              }
        ],
        attributeName: 'members'
    };
  }
}

<timeline-view
    :period="'Quarter'"
    :events="events"
    :attributeName="attributeName"
/>

notes

In order to enable drag & drop, the events shall have an id.

Contribute

To serve the component in local.

yarn serve

To build the minified version of the package.

yarn build