2020-07-22 23:33:13 +03:00
|
|
|
<h1 align="center">gantt-task-react</h1>
|
|
|
|
|
<h2 align="center">Interactive Gantt Chart for React with TypeScript.</h2>
|
|
|
|
|
<img src="https://user-images.githubusercontent.com/26743903/88215863-f35d5f00-cc64-11ea-81db-e829e6e9b5c8.png"/>
|
|
|
|
|
|
|
|
|
|
## How to use it
|
|
|
|
|
|
|
|
|
|
```javascript
|
|
|
|
|
let tasks: Task[] = [
|
|
|
|
|
{
|
|
|
|
|
start: new Date(2020, 1, 1),
|
|
|
|
|
end: new Date(2020, 1, 2),
|
|
|
|
|
name: 'Idea',
|
|
|
|
|
id: 'Task 0',
|
|
|
|
|
progress: 45,
|
|
|
|
|
isDisabled: true,
|
|
|
|
|
styles: { progressColor: '#ffbb54', progressSelectedColor: '#ff9e0d' },
|
|
|
|
|
},
|
|
|
|
|
...
|
|
|
|
|
];
|
|
|
|
|
<Gantt tasks={tasks} />
|
|
|
|
|
```
|
|
|
|
|
|
|
|
|
|
You may handle actions
|
|
|
|
|
|
|
|
|
|
```javascript
|
|
|
|
|
<Gantt
|
|
|
|
|
tasks={tasks}
|
|
|
|
|
viewMode={view}
|
|
|
|
|
onDateChange={onTaskChange}
|
|
|
|
|
onTaskDelete={onTaskDelete}
|
|
|
|
|
onProgressChange={onProgressChange}
|
|
|
|
|
onDoubleClick={onDblClick}
|
|
|
|
|
/>
|
|
|
|
|
```
|
|
|
|
|
|
|
|
|
|
## Gantt Configuration
|
|
|
|
|
|
|
|
|
|
- EventOption
|
2020-07-23 10:05:42 +03:00
|
|
|
|
|
|
|
|
Work in progress
|