readme & demo changes
This commit is contained in:
parent
9daaa75801
commit
b284ed6808
1
.gitignore
vendored
1
.gitignore
vendored
@ -3,3 +3,4 @@
|
|||||||
node_modules
|
node_modules
|
||||||
.cache
|
.cache
|
||||||
dist
|
dist
|
||||||
|
package-lock.json
|
||||||
39
README.md
39
README.md
@ -1 +1,38 @@
|
|||||||
#
|
<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
|
||||||
|
|||||||
@ -24,7 +24,7 @@ const App = () => {
|
|||||||
12,
|
12,
|
||||||
28
|
28
|
||||||
),
|
),
|
||||||
name: 'Redesign website',
|
name: 'Idea',
|
||||||
id: 'Task 0',
|
id: 'Task 0',
|
||||||
progress: 45,
|
progress: 45,
|
||||||
isDisabled: true,
|
isDisabled: true,
|
||||||
@ -32,7 +32,7 @@ const App = () => {
|
|||||||
{
|
{
|
||||||
start: new Date(currentDate.getFullYear(), currentDate.getMonth(), 2),
|
start: new Date(currentDate.getFullYear(), currentDate.getMonth(), 2),
|
||||||
end: new Date(currentDate.getFullYear(), currentDate.getMonth(), 4, 0, 0),
|
end: new Date(currentDate.getFullYear(), currentDate.getMonth(), 4, 0, 0),
|
||||||
name: 'Write new content',
|
name: 'Research',
|
||||||
id: 'Task 1',
|
id: 'Task 1',
|
||||||
progress: 25,
|
progress: 25,
|
||||||
dependencies: ['Task 0'],
|
dependencies: ['Task 0'],
|
||||||
@ -40,7 +40,7 @@ const App = () => {
|
|||||||
{
|
{
|
||||||
start: new Date(currentDate.getFullYear(), currentDate.getMonth(), 4),
|
start: new Date(currentDate.getFullYear(), currentDate.getMonth(), 4),
|
||||||
end: new Date(currentDate.getFullYear(), currentDate.getMonth(), 8, 0, 0),
|
end: new Date(currentDate.getFullYear(), currentDate.getMonth(), 8, 0, 0),
|
||||||
name: 'Apply new styles',
|
name: 'Discussion with team',
|
||||||
id: 'Task 2',
|
id: 'Task 2',
|
||||||
progress: 10,
|
progress: 10,
|
||||||
dependencies: ['Task 1'],
|
dependencies: ['Task 1'],
|
||||||
@ -48,15 +48,15 @@ const App = () => {
|
|||||||
{
|
{
|
||||||
start: new Date(currentDate.getFullYear(), currentDate.getMonth(), 8),
|
start: new Date(currentDate.getFullYear(), currentDate.getMonth(), 8),
|
||||||
end: new Date(currentDate.getFullYear(), currentDate.getMonth(), 9, 0, 0),
|
end: new Date(currentDate.getFullYear(), currentDate.getMonth(), 9, 0, 0),
|
||||||
name: 'Review',
|
name: 'Developing',
|
||||||
id: 'Task currentDate.getMonth()',
|
id: 'Task 3',
|
||||||
progress: 2,
|
progress: 2,
|
||||||
dependencies: ['Task 2'],
|
dependencies: ['Task 2'],
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
start: new Date(currentDate.getFullYear(), currentDate.getMonth(), 8),
|
start: new Date(currentDate.getFullYear(), currentDate.getMonth(), 8),
|
||||||
end: new Date(currentDate.getFullYear(), currentDate.getMonth(), 10),
|
end: new Date(currentDate.getFullYear(), currentDate.getMonth(), 10),
|
||||||
name: 'Deploy',
|
name: 'Review',
|
||||||
id: 'Task 4',
|
id: 'Task 4',
|
||||||
progress: 70,
|
progress: 70,
|
||||||
dependencies: ['Task 2'],
|
dependencies: ['Task 2'],
|
||||||
@ -64,7 +64,7 @@ const App = () => {
|
|||||||
{
|
{
|
||||||
start: new Date(currentDate.getFullYear(), currentDate.getMonth(), 15),
|
start: new Date(currentDate.getFullYear(), currentDate.getMonth(), 15),
|
||||||
end: new Date(currentDate.getFullYear(), currentDate.getMonth(), 26),
|
end: new Date(currentDate.getFullYear(), currentDate.getMonth(), 26),
|
||||||
name: 'Go Live!',
|
name: 'Release',
|
||||||
id: 'Task 6',
|
id: 'Task 6',
|
||||||
progress: currentDate.getMonth(),
|
progress: currentDate.getMonth(),
|
||||||
dependencies: ['Task 4'],
|
dependencies: ['Task 4'],
|
||||||
|
|||||||
9676
package-lock.json
generated
9676
package-lock.json
generated
File diff suppressed because it is too large
Load Diff
Loading…
x
Reference in New Issue
Block a user