81 lines
3.2 KiB
Markdown
81 lines
3.2 KiB
Markdown
# gantt-task-react
|
|
|
|
## Interactive Gantt Chart for React with TypeScript.
|
|
|
|
|
|
|
|
## Install
|
|
|
|
```
|
|
npm install gantt-task-react
|
|
```
|
|
|
|
## 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}
|
|
/>
|
|
```
|
|
|
|
## How to run example
|
|
|
|
```
|
|
cd ./example
|
|
npm install
|
|
npm start
|
|
```
|
|
|
|
## Gantt Configuration
|
|
|
|
### GanttProps
|
|
|
|
| Parameter Name | Type | Required | Description |
|
|
| :------------------------------ | :-------- | :------- | :------------------------------------------------- |
|
|
| tasks | Task | Yes | Tasks array. |
|
|
| [EventOption](#EventOption) | interface | No | Specifies gantt events. |
|
|
| [DisplayOption](#DisplayOption) | interface | No | Specifies view type and display timeline language. |
|
|
| StylingOption | interface | No | Specifies chart and global tasks styles |
|
|
|
|
### EventOption
|
|
|
|
| Parameter Name | Type | Required | Description |
|
|
| :--------------- | :-------------------------------- | :------- | :------------------------------------------------------------------------------------ |
|
|
| onDoubleClick | (task: Task) => any | No | Specifies the function to be executed on the bar`s onDoubleClick event. |
|
|
| onTaskDelete | (task: Task) => void/Promise<any> | No | Specifies the function to be executed on the bar`s on Delete button press event. |
|
|
| onDateChange | (task: Task) => void/Promise<any> | No | Specifies the function to be executed when drag bar`s event on timeline has finished. |
|
|
| onProgressChange | (task: Task) => void/Promise<any> | No | Specifies the function to be executed when drag bar`s progress event has finished. |
|
|
| timeStep | number | No | A time step value for onDateChange. Specify in milliseconds. |
|
|
|
|
### DisplayOption
|
|
|
|
| Parameter Name | Type | Required | Description |
|
|
| :------------- | :----- | :------- | :---------------------------------------------------------------------------------------------- |
|
|
| viewMode | enum | No | Specifies the time scale. Quarter Day, Half Day, Day, Week(ISO-8601, 1st day is Monday), Month. |
|
|
| locale | string | No | Specifies the month name language. Able formats: ISO 639-2, Java Locale. |
|
|
|
|
Work in progress
|