React-gantt-antd
A beautiful react gantt component with antd style.
This is a fork of JSainsburyPLC/react-timelines
Install
yarn add react-gantt-antd
Example
{ const tasks_a = id: "title1" title: "任务名称" start: '2020-06-01' end: '2020-08-02' const tasks_b = id: "title1" title: "任务名称" start: '2020-07-01' end: '2020-09-02' const sub_projects = id: "sub_project1" title: "子项目" tasks: tasks_b const projects = id: "project1" title: "项目1" tasks: tasks_a projects: sub_projects isOpen: false return <Gantt start='2020-06-01' end='2020-10-01' now='2020-7-01' zoom=1 projects=projects enableSticky scrollToNow /> }
API
Gantt
Property | value | default | Descriptions |
---|---|---|---|
start | Date | The start date of the timeline | |
end | Date | The start date of the timeline | |
now | Date | new Date() | 'now' marker position |
zoom | Number | 1 | The scale of the timeline width |
projects | List | [] | The project list |
minWidth | Number | 120 | The min width of the timeline when resizing the window |
sideWidth | Number | 400 | The width of the sidebar |
clickTask | function | when click task element | |
enableSticky | Bool | true | Determine whether the header is sticky or not |
scrollToNow | Bool | true | Determine whether to scroll to the now marker at first or not |
Project
Property | value | default | Descriptions |
---|---|---|---|
id | String/Number | The id of the Project | |
title | String/Element | The title of the Project | |
tasks | List | All the tasks of the Project | |
projects | List | All the sub projects of the Project | |
isOpen | Bool | false | Determine whether the project is folded not |
Task
Property | value | default | Descriptions |
---|---|---|---|
id | String/Number | The id of the Task | |
title | String/Element | The title of the Task | |
start | Date | The start date of the Task | |
end | Date | The start date of the Task |
Development
yarn installyarn watchyarn build
npm config set registry=http://registry.npmjs.org
npm config set registry=https://registry.npm.taobao.org/