DHTMLX Gantt custom task and project view in ReactJS

Gantt
1

Hi Team, I need you support on two topics. We do have full license of the control.

  1. To bring up below view in Gantt JavaScript control.
    Need to display 3 layer/s on time line.
    a. Office time
    b. Employee working time
    c. Employee task
    image
    image773×228 6.17 KB
  2. Drag a task from Employee 1 to another Employee 3.
2

Hello Mahesh,
If you want to highlight the timeline cells, you can use the timeline_cell_class template:
https://docs.dhtmlx.com/gantt/api__gantt_timeline_cell_class_template.html

Gantt doesn’t have a built-in way to vertically reorder tasks in the timeline. The dev team will add that feature in the future, but I cannot give you any ETA.
For now, you need to implement a custom solution.

There is an example of the implementation where you can do that:
https://snippet.dhtmlx.com/usfulweq

And here is the snippet that demonstrates how it can be implemented in your case according to what I see on the screenshot:
https://snippet.dhtmlx.com/j85ag6h2

3

Hello Ramil,
Thank you for your feedback.

W.r.to First Point :- We are want to apply color not based on task cell.
It’s like Working time is overlapped on Office time. Worktime is 10:45am - 5:30pm. Office time like 9:10am to 6:10pm. Task are like 11:00am - 11:51am and so on.

For Second point we want to hide “+” symbol which is next to Duration column.
https://snippet.dhtmlx.com/usfulweq

4

Hello Mahesh,

W.r.to First Point :- We are want to apply color not based on task cell.
It’s like Working time is overlapped on Office time. Worktime is 10:45am - 5:30pm. Office time like 9:10am to 6:10pm. Task are like 11:00am - 11:51am and so on.

You can show any HTML elements in the timeline by using the addTaskLayer method:

But you will need to implement a custom solution to show one rectangle on top of another. The easiest way would be to create several HTML elements and attach them to 1 HTML element that will be returned by the addTaskLayer method.

Here is an example that can help you to start implementing your solution:

For Second point we want to hide “+” symbol which is next to Duration column.

You can customize which columns are displayed by modifying the columns parameter:

Here is an example in the snippet:

5

@ramil : Thank you for the input.
Two more follow up questions.

  1. Can we drag and drop when gantt.config.readonly = true;? If gantt.config.readonly = false, user can change the task duration, we need to avoid this.
  2. After drag and drop of a task, it should retains it’s duration. Ex if Task is spread across 3 hours after it’s part of another parent, it should retain its duration.
6

Hello Mahesh,

Can we drag and drop when gantt.config.readonly = true;? If gantt.config.readonly = false, user can change the task duration, we need to avoid this.

If you enable the readonly mode, you cannot modify tasks via drag and drop, but it is possible to do that with the Gantt API:
https://files.dhtmlx.com/30d/934ce17734e13fbda1c0af3813ab4fcd/vokoscreen-2023-12-26_10-05-26.mp4

After drag and drop of a task, it should retains it’s duration. Ex if Task is spread across 3 hours after it’s part of another parent, it should retain its duration.

By default, the duration_unit parameter is set to “day”:

Gantt stores the duration value only in the integer format. If you have a different value, the duration will be rounded after a task is updated. When you set the duration_unit to “hour”, Gantt calculates the duration in hours.

Also, when you drag tasks in the timeline, by default, Gantt snaps them to the scales. If you disable the round_dnd_dates config, Gantt will round the dates to the nearest hour:

It works that way in the snippets I sent you:
https://files.dhtmlx.com/30d/fa563dc4cac9688899642b7cbf364fa0/vokoscreen-2023-12-26_10-13-28.mp4