Skip to content
main
Switch branches/tags
Code

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
 
 
 
 
 
 
src
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Vue.js Project Timeline

Gantt chart-like project timeline for Vue.js.

  1. Installation
  2. Basic usage
  3. API
    1. Props
    2. Projects Array
      1. Available fields
      2. Team members
      3. Example
  4. Contributing

Installation

npm install @mvsde/vue-project-timeline

Basic usage

<template>
  <project-timeline
    :start-month="startMonth"
    :end-month="endMonth"
    :projects="projects"
  />
</template>

<script>
import ProjectTimeline from '@mvsde/vue-project-timeline'

export default {
  components: {
    ProjectTimeline
  },

  data () {
    return {
      startMonth: new Date('2018-11'),
      endMonth: new Date('2019-02'),
      projects: [
        {
          name: 'Visualize vertical interfaces',
          start: new Date('2018-11-20'),
          end: new Date('2019-01-28')
        }
      ]
    }
  }
}
</script>

<style src="@mvsde/vue-project-timeline/dist/ProjectTimeline.css"></style>

More advanced demo code can be found within the demo project.

API

Props

Name Type Required Default Description
startMonth Date First month displayed in the timeline. The first day of the month for the given date will be automatically calculated.
endMonth Date Last month displayed in the timeline. The last day of the month for the given date will be calculated.
projects Array List of projects. See Projects array for a detailed format description.
visibleMonths Integer 12 Number of visible months. A scrollbar will be displayed if the timeline has more months than this value.
autoScrollToday Boolean false Automatically scroll “today” into view.
locale String en-US Set the localization with a locale string.

Projects array

Available fields

Name Type Required Description
name String Name of the project.
start Date Start date of the project.
end Date End date of the project.
plannedStart Date Planned start date of the project. Displayed as a thin line below the project.
plannedEnd Date Planned end date of the project. Displayed as a thin line below the project.
color String Set a specific color for a project by using a valid CSS color.
team Array Team members of the project. See Team members for a detailed format description.
onClick Function Click handler for the project name. The project name will be a button if a function is provided.

Team members

Name Type Required Description
name String Name of the team member.
avatar String Avatar of the team member.

Example

The following is an example with all fields populated:

[
  {
    name: 'Visualize vertical interfaces',
    start: new Date('2018-11-20'),
    end: new Date('2019-01-28'),
    plannedStart: new Date('2018-11-10'),
    plannedEnd: new Date('2019-01-13'),
    team: [
      {
        name: 'Nellie Bender',
        avatar: 'https://source.unsplash.com/3402kvtHhOo/32x32'
      },
      {
        name: 'Alex Wilkerson',
        avatar: 'https://source.unsplash.com/das6NrjLoM0/32x32'
      }
    ],
    onClick () {
      console.log('Hello World!')
    }
  }
]

Contributing

# Start development server
npm run serve

# Run JavaScript linter
npm run lint:js

# Run unit tests
npm run test:unit