matematuk/gantt-task-react

Gantt chart for React with Typescript

gantt-task-react

Interactive Gantt Chart for React with TypeScript.

Live Demo

Install

npm install gantt-task-react

How to use it

import { Gantt, Task, EventOption, StylingOption, ViewMode, DisplayOption } from 'gantt-task-react';
import "gantt-task-react/dist/index.css";

let tasks: Task[] = [
    {
      start: new Date(2020, 1, 1),
      end: new Date(2020, 1, 2),
      name: 'Idea',
      id: 'Task 0',
      type:'task',
      progress: 45,
      isDisabled: true,
      styles: { progressColor: '#ffbb54', progressSelectedColor: '#ff9e0d' },
    },
    ...
];
<Gantt tasks={tasks} />

You may handle actions

<Gantt
  tasks={tasks}
  viewMode={view}
  onDateChange={onTaskChange}
  onTaskDelete={onTaskDelete}
  onProgressChange={onProgressChange}
  onDoubleClick={onDblClick}
  onClick={onClick}
/>

How to run example

cd ./example
npm install
npm start

Gantt Configuration

GanttProps

Parameter Name	Type	Description
tasks*	Task	Tasks array.
EventOption	interface	Specifies gantt events.
DisplayOption	interface	Specifies view type and display timeline language.
StylingOption	interface	Specifies chart and global tasks styles

EventOption

Parameter Name	Type	Description
onSelect	(task: Task, isSelected: boolean) => void	Specifies the function to be executed on the taskbar select or unselect event.
onDoubleClick	(task: Task) => void	Specifies the function to be executed on the taskbar onDoubleClick event.
onClick	(task: Task) => void	Specifies the function to be executed on the taskbar onClick event.
onDelete*	(task: Task) => void/boolean/Promise/Promise	Specifies the function to be executed on the taskbar on Delete button press event.
onDateChange*	(task: Task, children: Task[]) => void/boolean/Promise/Promise	Specifies the function to be executed when drag taskbar event on timeline has finished.
onProgressChange*	(task: Task, children: Task[]) => void/boolean/Promise/Promise	Specifies the function to be executed when drag taskbar progress event has finished.
onExpanderClick*	onExpanderClick: (task: Task) => void;	Specifies the function to be executed on the table expander click
timeStep	number	A time step value for onDateChange. Specify in milliseconds.

* Chart undoes operation if method return false or error. Parameter children returns one level deep records.

DisplayOption

Parameter Name	Type	Description
viewMode	enum	Specifies the time scale. Hour, Quarter Day, Half Day, Day, Week(ISO-8601, 1st day is Monday), Month, QuarterYear, Year.
viewDate	date	Specifies display date and time for display.
preStepsCount	number	Specifies empty space before the fist task
locale	string	Specifies the month name language. Able formats: ISO 639-2, Java Locale.
rtl	boolean	Sets rtl mode.

StylingOption

Parameter Name	Type	Description
headerHeight	number	Specifies the header height.
ganttHeight	number	Specifies the gantt chart height without header. Default is 0. It`s mean no height limitation.
columnWidth	number	Specifies the time period width.
listCellWidth	string	Specifies the task list cell width. Empty string is mean "no display".
rowHeight	number	Specifies the task row height.
barCornerRadius	number	Specifies the taskbar corner rounding.
barFill	number	Specifies the taskbar occupation. Sets in percent from 0 to 100.
handleWidth	number	Specifies width the taskbar drag event control for start and end dates.
fontFamily	string	Specifies the application font.
fontSize	string	Specifies the application font size.
barProgressColor	string	Specifies the taskbar progress fill color globally.
barProgressSelectedColor	string	Specifies the taskbar progress fill color globally on select.
barBackgroundColor	string	Specifies the taskbar background fill color globally.
barBackgroundSelectedColor	string	Specifies the taskbar background fill color globally on select.
arrowColor	string	Specifies the relationship arrow fill color.
arrowIndent	number	Specifies the relationship arrow right indent. Sets in px
todayColor	string	Specifies the current period column fill color.
TooltipContent		Specifies the Tooltip view for selected taskbar.
TaskListHeader		Specifies the task list Header view
TaskListTable		Specifies the task list Table view

• TooltipContent: React.FC<{ task: Task; fontSize: string; fontFamily: string; }>;
• TaskListHeader: React.FC<{ headerHeight: number; rowWidth: string; fontFamily: string; fontSize: string;}>;
• TaskListTable: React.FC<{ rowHeight: number; rowWidth: string; fontFamily: string; fontSize: string; locale: string; tasks: Task[]; selectedTaskId: string; setSelectedTask: (taskId: string) => void; }>;

Task

Parameter Name	Type	Description
id*	string	Task id.
name*	string	Task display name.
type*	string	Task display type: task, milestone, project
start*	Date	Task start date.
end*	Date	Task end date.
progress*	number	Task progress. Sets in percent from 0 to 100.
dependencies	string[]	Specifies the parent dependencies ids.
styles	object	Specifies the taskbar styling settings locally. Object is passed with the following attributes:
		- backgroundColor: String. Specifies the taskbar background fill color locally.
		- backgroundSelectedColor: String. Specifies the taskbar background fill color locally on select.
		- progressColor: String. Specifies the taskbar progress fill color locally.
		- progressSelectedColor: String. Specifies the taskbar progress fill color globally on select.
isDisabled	bool	Disables all action for current task.
fontSize	string	Specifies the taskbar font size locally.
project	string	Task project name
hideChildren	bool	Hide children items. Parameter works with project type only

*Required

License

MIT

gantt-task-react's Issues

Scrolling doesn't work for touch devices

Hello, thanks for creating this awesome library.

Is this library meant to work with touch events and mobile devices like the iPad?
When I try to scroll the gantt chart on my iPad, nothing happens. I've tried to scroll on both Safari and mobile Chrome with the same results.

Any help would be appreciated!

Scroll to task when user click on the task item

TaskList

Is there a way to hide TaskListTable??

Wrong ViewMode crashing the whole web page

While setting the basic functionality, I tried sending the ViewMode value dynamically and sent wrong values to it and it made the whole website unresponsive and crashed.

Basically sending the wrong view mode is crashing the whole webpage instead of breaking or throwing an error.

Change progress for tasks of type "project"

This project looks great!

Is it possible to change progress for tasks of type "project"?

Putting bars on one row

Hi, it's possible ? anyone knows ? :)

Infinite hierachie

As for now hierarchies looks like

• project A
• • tasks A1
• project B
• • tasks B1

It would be nice to have a more vanilla relationship between elements
First solution:
Infinite parent link :

• Project A
• • Task A1
• • Project B
• • • Task B1

Second solution
Custom type with infinite parent link :

• Custom Theme
• • Custom Product
• • • Project
• • • • Task
• • • • Custom story
• • • • • Custom sub-task

Is there a workaround or do the code need to be modified ? For the later I could contribute. Thanks

Extend date task to end of the day

Is there a way to extend the to/end date bar to the end of the day?

Is this can be used for showing different task for a same project/maintenance in same line as below screenshot?

Week numbers not reporting correct numbers

Hello @MaTeMaTuK

After running the npm run test and failing on the getWeekNumberISO8601 function

I added code to compare the output of the function with 2 other methods of calculation of week number. Using the other methods both returned the same week number which returned the expected value in the test

export const getWeekNumberISO8601 = (date: Date) => {
  const tmpDate = new Date(date.valueOf());
  const dayNumber = (tmpDate.getDay() + 6) % 7;
  tmpDate.setDate(tmpDate.getDate() - dayNumber + 3);
  const firstThursday = tmpDate.valueOf();
  tmpDate.setMonth(0, 1);
  if (tmpDate.getDay() !== 4) {
    tmpDate.setMonth(0, 1 + ((4 - tmpDate.getDay() + 7) % 7));
  }
  const weekNumber = (
    1 + Math.ceil((firstThursday - tmpDate.valueOf()) / 604800000)
  ).toString();

  // https://weeknumber.com/how-to/javascript
  var date2 = new Date(date.valueOf());
  date2.setHours(0, 0, 0, 0);
  // Thursday in current week decides the year.
  date2.setDate(date2.getDate() + 3 - (date2.getDay() + 6) % 7);
  // January 4 is always in week 1.
  var week1 = new Date(date2.getFullYear(), 0, 4);
  // Adjust to Thursday in week 1 and count number of weeks from date to week1.
  const weekNumber2 =  (1 + Math.round(((date2.getTime() - week1.getTime()) / 86400000
                        - 3 + (week1.getDay() + 6) % 7) / 7)).toString();

  // https://www.epoch-calendar.com/support/getting_iso_week.html
  var date3 = new Date(date.valueOf());
  const dowOffset = 1; //default to day starting monday
  var newYear = new Date(date3.getFullYear(),0,1);
  var day = newYear.getDay() - dowOffset; //the day of week the year begins on
  day = (day >= 0 ? day : day + 7);
  var daynum = Math.floor((date3.getTime() - newYear.getTime() - 
  (date3.getTimezoneOffset()-newYear.getTimezoneOffset())*60000)/86400000) + 1;
  var weekNumber3;
  //if the year starts before the middle of a week
  if(day < 4) {
    weekNumber3 = Math.floor((daynum+day-1)/7) + 1;
    if(weekNumber3 > 52) {
      const nYear = new Date(date3.getFullYear() + 1,0,1);
      let nday = nYear.getDay() - dowOffset;
      nday = nday >= 0 ? nday : nday + 7;
      /*if the next year starts before the middle of
          the week, it is week #1 of that year*/
          weekNumber3 = nday < 4 ? 1 : 53;
    }
  }
  else {
    weekNumber3 = Math.floor((daynum+day-1)/7);
  }

  console.log(weekNumber,weekNumber2,weekNumber3.toString());
  if (weekNumber.length === 1) {
    return `0${weekNumber}`;
  } else {
    return weekNumber;
  }
};

Result from example app console.log after changing to Week format

23 22 22
22 21 21
21 20 20
20 19 19
19 18 18
18 17 17
17 16 16
16 15 15
15 14 14
13 13 13

Limited Height

When setting a height limit the chart loses the ability to scroll horizontally. You can view the issue on the demo page as you will not be able to scroll to 'Party Time'.

Horizontal Scroll Bug

If I create a long gantt table (it does not happen with short ones under my experience), whenever I move fast enough the horizontal scroll, the scroll bugs and goes straight and back for a few seconds and it stops.

If I use the keys, then that bug stops happening for that instance, but whenever I move the scroll back, it happens.

onExpanderClick produced error?

Hi, I might be using it incorrectly but I have put onExpanderClick in as a props for the Gantt component and now when I manually change a "project" hideChildren property from true to false and back it does hide/show the child task. however when I click on the actual button on the Gantt (triangle) i get the following error:

hourly view mode?

HI, this is a very promising library, so kudos!

I want to know if its possible to show an hourly view mode? Say from 8 am to 10 pm?

Thanks

How to custom TaskList content ?

Is it possible to custom TaskListHeader text (change Name, From, To to another text) ?
And How to custom date format ? (I want to use DD/MM format).
Thanks.

Project / Parent Relationship bug?

Seems like the "project" parent task feature doesn't work?
I have tried the following:
project task:
{
start: new Date(2022, 0, 3),
end: new Date(2022, 0, 30),
name: Phase 1",
id: "big",
type: "project",
progress: 100,
dependencies: [],
styles: { progressColor: "blue", progressSelectedColor: "#ff9e0d", barCornerRadius: 5 },
hideChildren: true,
},

child task:
{
start: new Date(2022, 0, 3),
end: new Date(2022, 0, 17),
name: "Task 1",
id: 1,
type: "task",
progress: 100,
dependencies: [],
styles: { progressColor: "blue", progressSelectedColor: "#ff9e0d", barCornerRadius: 5 },
project: "big",
},

but the Gantt isn't recognizing that Project Name: phase 1, Id: big has child Name: Task 1, if i have set this up wrong please let me know but as far as i can tell it's just not working as it should based on what i have seen in the documentation / example

install

npm install gantt-task-react

Add task dynamically

Is it possible to add new tasks dynamically or to delete tasks. Also, would be good if there is support to have scheduling tasks by priority from UI itself.

Milestone Diamond Shape

I am using this library in my project but for the milestone, the diamond shape does not come. It is the same as for the issues, i.e. the horizontal bar.

This is the output that I am getting.
So how can I get the diamond shape?

view current date after loading page with gant

Hi,
if i have a lot of date with startDate for example 1-1-2018, page with this gant after loading shows the start of the chart from that point on and I have to scroll to 2022.
How to display a graph, e.g. with the current month displayed after the page has been loaded?

what the mean of rtl

Interactive Dependancy Arrows

It would be great, If we can add interactivity for arrows too. Drag and drop an arrow to modify dependancies or create new dependancy by dragging from a handle.

Is there an example of TaskListHeader、TaskListTable？

Namespace 'React' has no exported member 'SFC'. TS2694

Hi @MaTeMaTuK
I am facing this error while installing this library. This is happening while installing view-switcher

cc @Janlaywss @VikariiCGI @lisaavikarii

TypeScript error in D:/TraxiemCB/traxiem/traxiem-ui/src/components/Gantt/view-switcher.tsx(9,34)
:
Namespace 'React' has no exported member 'SFC'. TS2694

```


7 | onViewModeChange: (viewMode: ViewMode) => void;
8 | };
> 9 | export const ViewSwitcher: React.SFC<ViewSwitcherProps> = ({
| ^
10 | onViewModeChange,
11 | onViewListChange,
12 | isChecked,`

Error thrown when view mode is set to month and the end date is far into the future

An error is thrown when viewmode is set to month and the end date of a task is far in the future.

Uncaught TypeError: Cannot read properties of undefined (reading 'getTime') at taskXCoordinate (bar-helper.ts:274:1) at convertToBar (bar-helper.ts:172:1) at convertToBarTask (bar-helper.ts:128:1) at bar-helper.ts:31:1 at Array.map (<anonymous>) at convertToBarTasks (bar-helper.ts:30:1) at gantt.tsx:117:1 at invokePassiveEffectCreate (react-dom.development.js:23487:1) at HTMLUnknownElement.callCallback (react-dom.development.js:3945:1) at Object.invokeGuardedCallbackDev (react-dom.development.js:3994:1)

Steps to reproduce:

1. In the /example/src/helper.tsx, update the last task to the following (start and end dates are different):
   { start: new Date(2021, 2, 1), end: new Date(2035, 2, 1), name: "Party Time", id: "Task 9", progress: 0, isDisabled: true, type: "task", },
2. Start the example and switch the viewmode to month.
3. Error is thrown

Cause:

In /src/bar-helper.ts line 25, when calculating the dateDelta from the dates array, we're assuming that the difference between each subsequent entry in the array is the same millisecond time interval. This is not the case when view mode is set to month. Some months have more or less days. This causes problems when using this dateDelta in bar-helper.ts on line 272 to find the index of a date in the date array. It causes the index to be out of range of the dates array, hence the error above.

Please add support for showing Resource thumbnail

First of all Kudos to the developers for amazing work!

Please add support for showing Resource thumbnail like shown in screenshot

is it possible to add custom columns in the task list table?

I am using it in a very large scale react project and the stake holders want to see planned duration and planned end date as well along with name , from and to
Is it possible to add custom columns and make them editable?

Milestones

I just started testing your Gantt solution. I like the professional, slick look.

A first thing I tried is start date = end date. In this case the task doesn't get displayed, see example with "developing":

I would suggest to add a special type called "Milestone" for such tasks. It is usually represented as a diamond shape in Gantts.

Drag and drop ordering ?

Hello ! Nice tool 👍

Is it possible to add ordering by drag and drop system ?

I can work on this feature if it pleases 😄

Thanks !

On Hourly view mode, Date mismatch.

On Hourly view mode, Date mentioned in header is one day more than the date mentioned on task date.

How to extend task with my custom component.

How to extend Task and It's Tooltip with my own custom components.

subTask collapse issue when the subtask is in greater amount.

The issue is when we collapse the project and the subProject is in greater amount then it crashes
also when we add the subtask of our previos Project then it will not show below to the related project

Set selected task(s) via props

Hello,

Is there anyway to set which task(s) are selected?

I have a separate task list component in my app, and when clicking an event over there, I'd like to highlight (and, ideally scroll to) the event within Gantt. It was simple to use onSelect to go the other direction, but I'd really like to be able to complete the circuit. Hoping there's something simple I'm just missing. Thanks!

Broken arrows

I am going to use this nice Gantt for a solution, and I have a question: why so many broken lines (see screenshot below)? Wouldn't it be easier to just go straight?

I was thinking maybe something like this:

Thanks!

is it possible to add custom columns in the task list table?

Is possible have in one row more than one task?

Hi @MaTeMaTuK
Is this possible in the current version of component? Or to achieve this effect a library must be overridden?

Hover Text with Single Task

When adding in the ability to filter by owner, there is the scenario where there may be a single task on the chart. If this is the case, the hover text gets cut off. Please see screenshots attached and let me know if you need any additional detail. Thank you!

Calendar header is not rendering

Hi @MaTeMaTuK , @Janlaywss , @VikariiCGI , @lisaavikarii ,

I am getting issue with rendering calendar header.
I am using below versions

"react": "^16.14.0",
"react-dom": "^16.14.0",
"@types/react": "^18.0.14",
"@types/react-dom": "^18.0.5",

re render TaskList Component

I have been using the library in a project using the component options and I have noticed that all those like the TaskList, HeaderList and the ToolTip are re-rendered on every mouse movement on the component, is there any way to avoid this, or is it an issue of the component?

Show Day Names (sun, mon, tue, wed, etc..) instead of number

Hi, I want to display the name of the day, is it possible?

Feature Request: View Modes for 3 Month (Quarter), 6 Month (Half Year), and Full Year

We would like to have additional view modes for tasks with longer durations. This is higher priority for us and we would like to know how we can move this up on the priority list for you.

Happy to take this conversation offline, let me know what works for you!

Example

Should install all deps inside of main directory before try to do it in example

onClick event for tasks

#46

Add ViewMode for year

For projects that run over multiple years there is no way of viewing the information without large amount of scrolling

Import error

Hello nice library, thanks for your work 👍

When I tried integrating it as per README, I get the following error

Attempted import error: 'Task' is not exported from 'gantt-task-react'.

This is how my import looks like

import {
  Gantt,
  Task,
  EventOption,
  StylingOption,
  ViewMode,
  DisplayOption,
} from "gantt-task-react";
import "gantt-task-react/dist/index.css";

Am I missing something?

Feature Request: need to add image for each task or work item

Hi @MaTeMaTuK @Janlaywss @VikariiCGI @lisaavikarii ,

Thank you for the contribution.

Is there any way where I can associate an icon with each row item.
so basically I want to prefix the icon where image tag is present.

Idea
Research
Discussion.
Developing.
etc.
Thanks in advance.

Auto adjust the time range of all tasks

Show year in header

Hello there,

It's there an option to show the year in header table above month row?

Needed grouping of tasks based on projects

Hi,

This is a feature request. OR if anyone already has already implemented this than please help.

What I want to achieve:
Grouping of the tasks based on the project. Means, I want to have collapse and expanded view of tasks based on the projects.

Example:

If this package already have that functionality then please let me know. If not please suggest an approach.

Thanks in advance.

Want to change formate month form string to number

I just want display of Month From December to 12, how can i do that?