React-gantt-antd

A beautiful react gantt component with antd style.
This is a fork of JSainsburyPLC/react-timelines

!snapshot

Install

``sh
yarn add react-gantt-antd
`


Example

`js
import React from 'react'
import Gantt from 'react-gantt-antd'
import 'react-gantt-antd/lib/css/style.css'

export default function App() {
const tasks_a = [
{
id: "title1",
title: "任务名称",
start: new Date('2020-06-01'),
end: new Date('2020-08-02'),
}
]

const tasks_b = [
{
id: "title1",
title: "任务名称",
start: new Date('2020-07-01'),
end: new Date('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 (
start={new Date('2020-06-01')}
end={new Date('2020-10-01')}
now={new Date('2020-7-01')}
zoom={1}
projects={projects}
enableSticky
scrollToNow
/>
)
}

export default App
`


API

$3

| 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 |

$3

| 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 |

$3

| 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

`sh
yarn install
yarn watch
yarn build
`


`
npm config set registry=http://registry.npmjs.org
npm config set registry=https://registry.npm.taobao.org/
``