Skip to content
Gantt chart-like project timeline in Vue.js
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
demo
docs
public
src
tests/unit
.browserslistrc
.editorconfig
.eslintrc.js
.gitignore
CHANGELOG.md
LICENSE
README.md
babel.config.js
jest.config.js
package.json
postcss.config.js
yarn.lock

README.md

Vue.js Project Timeline

  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.

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
You can’t perform that action at this time.