How do i highlight scale cells when dragging a task?

How do i highlight scale cells when dragging a task like screen below?


is there any convenient function in dhtmlx i could use?

Hello Kevin,
There is no built-in feature, but you can implement it by using Gantt API.
You can highlight the cells by using the scale_cell_class template.
When you drag a task, you save the start_date and end_date parameters into variables and use gantt.render() to repaint the changes. I didn’t test it with many tasks, but I know that if you drag many tasks simultaneously you might encounter performance issues.
Here is an example of how it might be implemented:

You can find additional information about the event handlers and the template, in the following article:

It works! Yes it would be performance issue if I call gantt.render() so often, does gantt have any other method to force to re-render scale cells only?

Hello Kevin,
There is no other method to do render the changes. However, you can add a condition that will improve the performance a bit. Here is an example where you can see when the rendering happens:

I added “highlight timeline cells when dragging tasks” as a feature request in the tracker. The dev team will try to implement it, but I cannot you an ETA.

I find two way to highlight the scale cell:

  1. highlight the scale cells using scale css
    a. record drag task start_date and end date,
    b. dynamically generate the css classname for drag task on scale cells.
    c. gantt.$ui.getView(“timeline”)._refreshScales(); to refresh the scale view only

for example: highlight on day scale view


  1. insert the DOM fragment on scale cells to highlight the dragging task dates

for example: highlight on week view: