0.5.0 • Published 5 years ago
@mvsde/vue-project-timeline v0.5.0
Vue.js Project Timeline
Gantt chart-like project timeline for Vue.js.
Installation
npm install @mvsde/vue-project-timelineBasic 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