README.md

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

Inspiration

The style and the initial concept come from https://github.com/craigdanj/vue-day-schedule.