{"id":9017,"date":"2021-07-08T13:00:46","date_gmt":"2021-07-08T10:00:46","guid":{"rendered":"https:\/\/dhtmlx.com\/blog\/?p=9017"},"modified":"2026-09-15T14:20:33","modified_gmt":"2026-09-15T11:20:33","slug":"custom-content-timeline-javascript-gantt-part-2","status":"publish","type":"post","link":"https:\/\/dhtmlx.com\/blog\/custom-content-timeline-javascript-gantt-part-2\/","title":{"rendered":"Custom Content in the Timeline of JavaScript Gantt (Part 2)"},"content":{"rendered":"

It is time to continue our quest for discovering the powerful customization capabilities of DHTMLX Gantt. Last time<\/a>, we started to become familiar with the examples of using custom content in the timeline of JavaScript Gantt with the help of the addTaskLayer <\/strong> method. Now we will take a step further and explore more complex cases of enriching Gantt charts with custom elements. <\/p>\n

Today, you will learn how to place custom items on tasks, add a draggable baseline and insert a progress knob in it, apply custom milestones, and even take advantage of recurring events.<\/p>\n

Let’s get to it!<\/p>\n

Custom elements on tasks<\/h5>\n

\"DHTMLX Check the sample ><\/a><\/em><\/p>\n

If it is necessary to add several custom elements for each task, you don’t have to apply multiple layers (by using addTaskLayer <\/strong>several times). Instead, it is possible to create a single HTML element and specify it after the return<\/strong> statement. You can add any number of child elements to this element.<\/p>\n

var<\/span> mainDiv =<\/span> document.createElement<\/span>(<\/span>'div'<\/span>)<\/span>;<\/span>
\nmainDiv.className<\/span> =<\/span> 'icons'<\/span>
\n\/\/generate custom elements<\/span>
\nfor<\/span> (<\/span>var<\/span> i =<\/span> 0<\/span>;<\/span> i <<\/span> 4<\/span>;<\/span> i++<\/span>)<\/span> {<\/span>
\n  var<\/span> elementDate =<\/span> task[<\/span>'custom_element_date_'<\/span> +<\/span> icons[<\/span>i]<\/span>]<\/span> ||<\/span> gantt.date<\/span>.add<\/span>(<\/span>task.start_date<\/span>,<\/span> i,<\/span> 'day'<\/span>)<\/span>
\n  var<\/span> sizes =<\/span> gantt.getTaskPosition<\/span>(<\/span>task,<\/span> elementDate)<\/span>;<\/span>
\n  var<\/span> el =<\/span> document.createElement<\/span>(<\/span>'div'<\/span>)<\/span>;<\/span>
\n  mainDiv.appendChild<\/span>(<\/span>el)<\/span>;<\/span>
\n}<\/span>
\nreturn<\/span> mainDiv;<\/span><\/div><\/div>\n

Our goal here is to add several elements for each task. In this example, you assign the icon<\/strong> property (that is actually the element\u2019s name) to each element to make them distinguishable. This name is also used inside the class<\/strong> element to specify the font awesome<\/strong> icon.<\/p>\n

var<\/span> icons =<\/span> [<\/span>
\n  'wrench'<\/span>,<\/span>
\n  'eye'<\/span>,<\/span>
\n  'check-circle-o'<\/span>,<\/span>
\n  'trophy'<\/span>
\n]<\/span>
\n 
\nvar<\/span> el =<\/span> document.createElement<\/span>(<\/span>'div'<\/span>)<\/span>;<\/span>
\nel.setAttribute<\/span>(<\/span>"data-task"<\/span>,<\/span> task.id<\/span>)<\/span>;<\/span>
\nel.setAttribute<\/span>(<\/span>"data-icon"<\/span>,<\/span> icons[<\/span>i]<\/span>)<\/span>;<\/span>
\nel.className<\/span> =<\/span> 'icon fa fa-'<\/span> +<\/span> icons[<\/span>i]<\/span>;<\/span><\/div><\/div>\n

Given that each element will get different dates, you have to save these dates under the corresponding names in the task<\/strong> properties. To avoid any confusion with other properties, add custom_element_date_<\/strong> to each property name.<\/p>\n

var<\/span> elementDate =<\/span> task[<\/span>'custom_element_date_'<\/span>+<\/span>icons[<\/span>i]<\/span>]<\/span> ||<\/span> gantt.date<\/span>.add<\/span>(<\/span>task.start_date<\/span>,<\/span> i,<\/span> 'day'<\/span>)<\/span><\/div><\/div>\n
Drag-and-drop for custom elements<\/h5>\n

Before we continue exploring the following two examples of using custom content in DHTMLX Gantt, it is necessary to focus on the question of enabling drag-and-drop for custom elements. The thing is that there is no built-in function for the implementation of a custom drag-and-drop in DHTMLX Gantt. But it can be done manually and the whole process is rather simple. <\/p>\n

Here you need to capture three DOM events (mousedown<\/strong>, mousemove<\/strong>, mouseup<\/strong>) and define a couple of flags to store the state of drag-and-drop between these events.<\/p>\n

1. The mousedown<\/strong> event signals that drag-and-drop is starting. However, this may also be the first stage of a regular click<\/strong> event, which shouldn’t activate drag-and-drop. At this step, you have to set a flag, meaning that drag-and-drop is requested, and remember the initial mouse position as well as any other data that will be required later.<\/p>\n

var<\/span> dndRequested =<\/span> false<\/span>;<\/span>
\nvar<\/span> dndActivated =<\/span> false<\/span>;<\/span>
\nvar<\/span> startPosition =<\/span> null<\/span>;<\/span>
\nvar<\/span> startTimestamp =<\/span> null<\/span>
\nvar<\/span> taskId =<\/span> null<\/span>;<\/span>
\nvar<\/span> domUtils =<\/span> gantt.utils<\/span>.dom<\/span>;<\/span>
\n\/\/ in this sample we'll drag `.baseline` elements inside `gantt.$task_data` container<\/span>
\ngantt.event<\/span>(<\/span>gantt.$task_data,<\/span> 'mousedown'<\/span>,<\/span> function<\/span>(<\/span>e)<\/span> {<\/span>
\n  \/\/ use element.closest or gantt.utils.dom.closest to locate the draggable element<\/span>
\n  var<\/span> draggableElement =<\/span> domUtils.closest<\/span>(<\/span>e.target<\/span>,<\/span> '.baseline'<\/span>)<\/span>;<\/span>
\n 
\n  if<\/span> (<\/span>draggableElement)<\/span> {<\/span>
\n    \/\/ we don't know yet whether a user is going to drag the element or just click it<\/span>
\n    \/\/ store the event info, we'll check it at 'mousemove'<\/span>
\n    dndRequested =<\/span> true<\/span>;<\/span>
\n    startTimestamp =<\/span> Date<\/span>.now<\/span>(<\/span>)<\/span>;<\/span>
\n    startPosition =<\/span> domUtils.getRelativeEventPosition<\/span>(<\/span>e,<\/span> gantt.$task_data)<\/span>;<\/span>
\n    taskId =<\/span> draggableElement.getAttribute<\/span>(<\/span>"data-task"<\/span>)<\/span>;<\/span>
\n  }<\/span>
\n}<\/span>)<\/span>;<\/span><\/div><\/div>\n

2. The actual drag-and-drop will start in the mousemove<\/strong> handler. Instead of initiating drag-and-drop when a user clicks the mouse, compare the current mouse position with the initial position saved in mousedown<\/strong>. This way you can start drag-and-drop only when the current position differs enough from the initial one. If you don’t want to set a minimum threshold for drag-and-drop, you can also estimate the time passed since mousedown<\/strong>.<\/p>\n

Once you determine that drag-and-drop has started, you can use the mousemove<\/strong> event handler to update the position of the dragged element on the screen. If you drag a custom layer element, the expected approach for refreshing it is to modify the underlying object and repaint it using Gantt API (gantt.refreshTask<\/a><\/strong>), rather than modifying the DOM element directly.<\/p>\n

gantt.event<\/span>(<\/span>window,<\/span> 'mousemove'<\/span>,<\/span> function<\/span>(<\/span>e)<\/span> {<\/span>
\n  if<\/span> (<\/span>dndRequested &&<\/span> gantt.isTaskExists<\/span>(<\/span>taskId)<\/span>)<\/span> {<\/span>
\n    \/\/ we captured 'mousemove' after 'mousedown' event<\/span>
\n    var<\/span> currentPosition =<\/span> domUtils.getRelativeEventPosition<\/span>(<\/span>e,<\/span> gantt.$task_data)<\/span>;<\/span>
\n    if<\/span> (<\/span>!<\/span>dndActivated)<\/span> {<\/span>
\n      \/\/ 'mousemove' may be a part of the regular click process, we don't want to invoke dnd on regular click<\/span>
\n      \/\/ we check whether mouse position has changed significantly, or if the user holds a mouse longer than it usually happens for regular click      <\/span>
\n      if<\/span>(<\/span>Math<\/span>.abs<\/span>(<\/span>currentPosition.x<\/span> -<\/span> startPosition.x<\/span>)<\/span> ><\/span> 5<\/span> ||<\/span> (<\/span>Date<\/span>.now<\/span>(<\/span>)<\/span> -<\/span> startTimestamp)<\/span> ><\/span> 500<\/span>)<\/span> {<\/span>
\n        \/\/ if so - we assume dnd has started<\/span>
\n        dndActivated =<\/span> true<\/span>;<\/span>
\n      }<\/span>
\n    }<\/span>
\n    if<\/span> (<\/span>dndActivated)<\/span> {<\/span>
\n      \/\/ here we can update the position of the dragged element.<\/span>
\n      \/\/ when we drag an element added via `gantt.addTaskLayer`, it's better to update the task object <\/span>
\n      \/\/ and repaint it via `gantt.refreshTask`<\/span>
\n      \/\/ you can also get the corresponding date of the time scale:<\/span>
\n      var<\/span> pointerDate =<\/span> gantt.dateFromPos<\/span>(<\/span>currentPosition.x<\/span>)<\/span>;<\/span>
\n      gantt.getTask<\/span>(<\/span>taskId)<\/span>.baseline_date<\/span> =<\/span> pointerDate;<\/span>
\n      gantt.refreshTask<\/span>(<\/span>taskId)<\/span>;<\/span>
\n    }<\/span>
\n  }<\/span>
\n 
\n}<\/span>)<\/span>;<\/span><\/div><\/div>\n

3. Finally, you should capture the mouseup<\/strong> event. If drag-and-drop has been started – apply changes to the moved object, call the gantt.updateTask<\/a><\/strong> method, if necessary, and clear all temporary flags.<\/p>\n

gantt.event<\/span>(<\/span>window,<\/span> 'mouseup'<\/span>,<\/span> function<\/span>(<\/span>e)<\/span> {<\/span>
\n  \/\/ apply changes if drag-and-drop was in progress<\/span>
\n  if<\/span> (<\/span>dndActivated)<\/span> {<\/span>
\n    \/\/ validate and finalize changes if needed<\/span>
\n    var<\/span> task =<\/span> gantt.getTask<\/span>(<\/span>taskId)<\/span>;<\/span>
\n    task.baseline_date<\/span> =<\/span> gantt.roundDate<\/span>(<\/span>{<\/span>
\n      date:<\/span> task.baseline_date<\/span>,<\/span>
\n      unit:<\/span> "hour"<\/span>,<\/span>
\n      step:<\/span> 1<\/span>    
\n    }<\/span>)<\/span>;<\/span>
\n    \/\/ call gantt.updateTask to invoke the update of data     <\/span>
\n    gantt.updateTask<\/span>(<\/span>taskId)<\/span>;<\/span>
\n  }<\/span>
\n  \/\/ clear all flags we've set at previous stages<\/span>
\n  dndRequested =<\/span> false<\/span>;<\/span>
\n  dndActivated =<\/span> false<\/span>;<\/span>
\n  startPosition =<\/span> null<\/span>;<\/span>
\n  startTimestamp =<\/span> null<\/span>;<\/span>
\n  taskId =<\/span> null<\/span>;<\/span>
\n}<\/span>)<\/span>;<\/span><\/div><\/div>\n

With this knowledge at hand, let us proceed to more practical cases including drag-and-drop functionality.<\/p>\n

Draggable baselines<\/h5>\n

\"DHTMLX Check the sample ><\/a><\/em><\/p>\n

As we\u2019ve learned from the previous section, you’ll need to write some code to make baselines draggable.<\/p>\n

Before implementing drag-and-drop, you need to make a small change to the addTaskLayer<\/strong> function. Namely, you have to add an ID of a related task to attributes of a rendered baseline element. Use this attribute in the mousedown<\/strong> handler to find out to which task the baseline belongs to.<\/p>\n

var<\/span> el =<\/span> document.createElement<\/span>(<\/span>'div'<\/span>)<\/span>;<\/span>
\nel.setAttribute<\/span>(<\/span>"data-task"<\/span>,<\/span> task.id<\/span>)<\/span>;<\/span><\/div><\/div>\n

Now, you can get to the actual implementation. The mousedown<\/strong> handler will look very similar to the one we had in the example above. However, there is an important difference – a baseline is an element with variable width. A user can start drag-and-drop from any point of the bar and the baseline should be moved smoothly regardless of the initial cursor position. <\/p>\n

You don’t want to assign a start date of the baseline to a cursor position, since the user may start drag-and-drop by pointing to the middle of the bar. In such a case, the start date of baseline will immediately jump to the pointer position. Instead, when drag-and-drop starts, you can remember the horizontal distance from the left edge of the baseline bar to the cursor position – this is the position of the start date of baseline relative to the pointer position. Then, when you need to calculate the new start date of the baseline, you calculate it as follows:<\/p>\n

gantt.dateFromPos<\/span>(<\/span>mousePosition.x<\/span> -<\/span> clickOffset)<\/span>.<\/div><\/div>\n

Pay attention to the clickOffset<\/strong> variable:<\/p>\n

var<\/span> domUtils =<\/span> gantt.utils<\/span>.dom<\/span>;<\/span>
\nvar<\/span> taskId =<\/span> null<\/span>;<\/span>
\nvar<\/span> clickOffset =<\/span> null<\/span>;<\/span>
\nvar<\/span> dndRequested =<\/span> false<\/span>;<\/span>
\nvar<\/span> dndActivated =<\/span> false<\/span>;<\/span>
\nvar<\/span> startTimestamp =<\/span> null<\/span>;<\/span>
\nvar<\/span> startPosition =<\/span> null<\/span>;<\/span>
\n 
\ngantt.event<\/span>(<\/span>gantt.$task_data,<\/span> 'mousedown'<\/span>,<\/span> function<\/span>(<\/span>e)<\/span>{<\/span>  
\n  var<\/span> draggableElement =<\/span> domUtils.closest<\/span>(<\/span>e.target<\/span>,<\/span> '.baseline'<\/span>)<\/span>;<\/span>
\n  if<\/span> (<\/span>draggableElement)<\/span> {<\/span>
\n    taskId =<\/span> draggableElement.getAttribute<\/span>(<\/span>"data-task"<\/span>)<\/span>;<\/span>
\n    clickOffset =<\/span> domUtils.getRelativeEventPosition<\/span>(<\/span>e,<\/span> draggableElement)<\/span>.x<\/span>;<\/span>
\n 
\n    dndRequested =<\/span> true<\/span>;<\/span>
\n    startTimestamp =<\/span> Date<\/span>.now<\/span>(<\/span>)<\/span>;<\/span>
\n    startPosition =<\/span> domUtils.getRelativeEventPosition<\/span>(<\/span>e,<\/span> gantt.$task_data)<\/span>;<\/span>
\n  }<\/span>
\n}<\/span>)<\/span>;<\/span><\/div><\/div>\n

In the mousemove<\/strong> event handler, you obtain the mouse position and calculate the date of the baseline.<\/p>\n

gantt.event<\/span>(<\/span>window,<\/span> 'mousemove'<\/span>,<\/span> function<\/span>(<\/span>e)<\/span>{<\/span>
\n  if<\/span> (<\/span>dndRequested &&<\/span> gantt.isTaskExists<\/span>(<\/span>taskId)<\/span>)<\/span> {<\/span>
\n 
\n    var<\/span> position =<\/span> domUtils.getRelativeEventPosition<\/span>(<\/span>e,<\/span> gantt.$task_data)<\/span>.x<\/span>;<\/span>
\n    if<\/span> (<\/span>!<\/span>dndActivated)<\/span> {<\/span>
\n      if<\/span>(<\/span>Math<\/span>.abs<\/span>(<\/span>position -<\/span> startPosition.x<\/span>)<\/span> ><\/span> 2<\/span> ||<\/span> (<\/span>Date<\/span>.now<\/span>(<\/span>)<\/span> -<\/span> startTimestamp)<\/span> ><\/span> 500<\/span>)<\/span> {<\/span>
\n        dndActivated =<\/span> true<\/span>;<\/span>
\n      }<\/span>
\n    }<\/span>
\n 
\n    if<\/span>(<\/span>dndActivated)<\/span> {<\/span>
\n      var<\/span> task =<\/span> gantt.getTask<\/span>(<\/span>taskId)<\/span>;<\/span>
\n      var<\/span> plannedDuration =<\/span> gantt.calculateDuration<\/span>(<\/span>{<\/span>
\n        start_date:<\/span> task.planned_start<\/span>,<\/span>
\n        end_date:<\/span> task.planned_end<\/span>,<\/span>
\n        task:<\/span> task
\n      }<\/span>)<\/span>;<\/span>
\n 
\n      task.planned_start<\/span> =<\/span> gantt.dateFromPos<\/span>(<\/span>position -<\/span> clickOffset)<\/span>;<\/span>
\n      task.planned_end<\/span> =<\/span> gantt.calculateEndDate<\/span>(<\/span>{<\/span>
\n        start_date:<\/span> task.planned_start<\/span>,<\/span>
\n        duration:<\/span> plannedDuration,<\/span>
\n        task:<\/span> task
\n      }<\/span>)<\/span>;<\/span>
\n      gantt.refreshTask<\/span>(<\/span>taskId)<\/span>;<\/span>
\n    }<\/span>
\n  }<\/span>
\n}<\/span>)<\/span>;<\/span><\/div><\/div>\n

The mouseup<\/strong> event handler looks exactly the same as in the previous example. You just need to submit the changes and reset all temporary variables:<\/p>\n

gantt.event<\/span>(<\/span>window,<\/span> 'mouseup'<\/span>,<\/span> function<\/span>(<\/span>e)<\/span>{<\/span>  
\n  if<\/span>(<\/span>dndActivated)<\/span>{<\/span>
\n    gantt.updateTask<\/span>(<\/span>taskId)<\/span>;<\/span>
\n  }<\/span>
\n 
\n  taskId =<\/span> null<\/span>;<\/span>
\n  clickOffset =<\/span> null<\/span>;<\/span>
\n  dndRequested =<\/span> false<\/span>;<\/span>
\n  dndActivated =<\/span> false<\/span>;<\/span>
\n  startTimestamp =<\/span> null<\/span>;<\/span>
\n  startPosition =<\/span> null<\/span>;<\/span>
\n}<\/span>)<\/span>;<\/span><\/div><\/div>\n

As a result, you get a draggable baseline<\/a> that can be easily moved along the timeline with a mouse.<\/p>\n

Baselines with a draggable progress knob<\/h5>\n

\"Gantt Check the sample ><\/a><\/em><\/p>\n

Custom baselines can also be equipped with other HTML elements such as a progress bar. It is also possible to add the ability to change and save progress values with a knob. Here you need 3 elements – baseline, progress bar, and progress knob. <\/p>\n

First of all, you have to add one extra property to our task object. As an example, you can call it task.baseline_progress<\/strong>. It will contain the progress value as a number between zero and one:<\/p>\n

task.baseline_progress<\/span> =<\/span> 0.5<\/span>;<\/span>\/\/ 50%<\/span><\/div><\/div>\n

Then you’ll be able to use it to show the progress bar of the baseline. That is how the modified gantt.addTaskLayer<\/strong> function will look like this:<\/p>\n

var<\/span> el =<\/span> document.createElement<\/span>(<\/span>'div'<\/span>)<\/span>;<\/span>
\nel.setAttribute<\/span>(<\/span>"data-task"<\/span>,<\/span> task.id<\/span>)<\/span>;<\/span>
\nel.className<\/span> =<\/span> 'baseline'<\/span>;<\/span>
\n...
\n\/\/ adding progress bar<\/span>
\nvar<\/span> progress =<\/span> document.createElement<\/span>(<\/span>'div'<\/span>)<\/span>;<\/span>
\nprogress.className<\/span> =<\/span> 'baseline_progressbar'<\/span>;<\/span>
\nprogress.style<\/span>.width<\/span> =<\/span> task.baseline_progress<\/span> *<\/span> 100<\/span> +<\/span> "%"<\/span>;<\/span>
\nel.appendChild<\/span>(<\/span>progress)<\/span>;<\/span>
\n\/\/adding progress bar drag<\/span>
\nvar<\/span> progress_drag =<\/span> document.createElement<\/span>(<\/span>'div'<\/span>)<\/span>;<\/span>
\nprogress_drag.className<\/span> =<\/span> 'baseline_progress_drag'<\/span>;<\/span>
\nprogress_drag.style<\/span>.left<\/span> =<\/span> task.baseline_progress<\/span> *<\/span> 100<\/span> +<\/span> "%"<\/span>;<\/span>
\nel.appendChild<\/span>(<\/span>progress_drag)<\/span>;<\/span>
\nreturn<\/span> el;<\/span><\/div><\/div>\n

The progress bar inside the baseline element is filled according to the value of the task.baseline_progress<\/strong> property. Once you implement the drag-and-drop function, it will modify the task.baseline_progress<\/strong> property when the user drags the progress knob.<\/p>\n

After changing the markup of the draggable element, the overall logic remains mainly the same. The draggable element is now baseline_progress_drag<\/strong>, and in order to get the ID of the task you need to traverse elements upwards until you get to the baseline<\/strong> element which stores the task\u2019s ID:<\/p>\n

gantt.event<\/span>(<\/span>gantt.$task_data,<\/span> 'mousedown'<\/span>,<\/span> function<\/span>(<\/span>e)<\/span>{<\/span>  
\n  var<\/span> draggableElement =<\/span> domUtils.closest<\/span>(<\/span>e.target<\/span>,<\/span> '.baseline_progress_drag'<\/span>)<\/span>;<\/span>
\n  if<\/span> (<\/span>draggableElement)<\/span> {<\/span>
\n    taskId =<\/span> domUtils.closest<\/span>(<\/span>draggableElement,<\/span> ".baseline"<\/span>)<\/span>.getAttribute<\/span>(<\/span>"data-task"<\/span>)<\/span>;<\/span>      
\n    dndRequested =<\/span> true<\/span>;<\/span>
\n    startTimestamp =<\/span> Date<\/span>.now<\/span>(<\/span>)<\/span>;<\/span>
\n    startPosition =<\/span> domUtils.getRelativeEventPosition<\/span>(<\/span>e,<\/span> gantt.$task_data)<\/span>;<\/span>
\n  }<\/span>
\n}<\/span>)<\/span>;<\/span><\/div><\/div>\n

It is the same story with the mousemove<\/strong> handler. The code is very similar to the previous examples.<\/p>\n

The new progress value can be calculated with the gantt.utils.dom.getRelativeEventPosition<\/strong> (event, node) helper – a relative position of the pointer inside the element. In other words, if the mouse pointer is in the upper left corner of the node, the {x: 0, y: 0)<\/strong> object will be returned. When the pointer is in the lower right corner, you will get {x: node.offsetWidth, y: node.offsetHeight}<\/strong> regardless of the element\u2019s position on the page.<\/p>\n

Using this method and the offset size of the baseline, you can determine the position of the task pointer relative to the size of the baseline element (at 0%, 50%, 90% of the full width) and calculate the percentage with the necessary precision.<\/p>\n

Alternatively, you could use a pointer date using gantt.dateFromPos<\/strong> and calculate the progress from the date difference between the pointer date and the start\/end dates of the baseline rather than from coordinates.<\/p>\n

gantt.event<\/span>(<\/span>window,<\/span> 'mousemove'<\/span>,<\/span> function<\/span>(<\/span>e)<\/span>{<\/span>
\n  if<\/span> (<\/span>dndRequested &&<\/span> gantt.isTaskExists<\/span>(<\/span>taskId)<\/span>)<\/span> {<\/span>
\n
\n    var<\/span> position =<\/span> domUtils.getRelativeEventPosition<\/span>(<\/span>e,<\/span> gantt.$task_data)<\/span>.x<\/span>;<\/span>
\n    if<\/span> (<\/span>!<\/span>dndActivated)<\/span> {<\/span>
\n      if<\/span>(<\/span>Math<\/span>.abs<\/span>(<\/span>position -<\/span> startPosition.x<\/span>)<\/span> ><\/span> 2<\/span> ||<\/span> (<\/span>Date<\/span>.now<\/span>(<\/span>)<\/span> -<\/span> startTimestamp)<\/span> ><\/span> 500<\/span>)<\/span> {<\/span>
\n        dndActivated =<\/span> true<\/span>;<\/span>
\n      }<\/span>
\n    }<\/span>
\n
\n    if<\/span>(<\/span>dndActivated)<\/span> {<\/span>
\n      var<\/span> baselineElement =<\/span> gantt.$root.querySelector<\/span>(<\/span>".baseline[data-task='"<\/span>+<\/span>taskId+<\/span>"'"<\/span>)<\/span>;<\/span>
\n      var<\/span> task =<\/span> gantt.getTask<\/span>(<\/span>taskId)<\/span>;<\/span>
\n
\n      var<\/span> positionRelative =<\/span> domUtils.getRelativeEventPosition<\/span>(<\/span>e,<\/span> baselineElement)<\/span>;<\/span>
\n      var<\/span> dragPos =<\/span> Math<\/span>.max<\/span>(<\/span>positionRelative.x<\/span>,<\/span> 0<\/span>)<\/span>;<\/span>
\n      var<\/span> fullWidth =<\/span> baselineElement.offsetWidth<\/span> ||<\/span> 1<\/span>;<\/span>
\n
\n      var<\/span> computedProgress =<\/span> Math<\/span>.min<\/span>(<\/span>dragPos,<\/span> fullWidth)<\/span> \/<\/span> fullWidth;<\/span>
\n      var<\/span> roundedProgress =<\/span> Math<\/span>.round<\/span>(<\/span>computedProgress *<\/span> 100<\/span>)<\/span> \/<\/span> 100<\/span>;<\/span>
\n      task.baseline_progress<\/span> =<\/span> roundedProgress;<\/span>
\n      gantt.refreshTask<\/span>(<\/span>taskId)<\/span>;<\/span>
\n    }<\/span>
\n  }<\/span>
\n}<\/span>)<\/span>;<\/span><\/div><\/div>\n

Like in the previous examples, you can use the mouseup<\/strong> event to check (via flags) if the drag-and-drop action actually happened, invoke custom functions if needed, and clear the flags.<\/p>\n

gantt.event<\/span>(<\/span>window,<\/span> 'mouseup'<\/span>,<\/span> function<\/span>(<\/span>e)<\/span>{<\/span>  
\n  if<\/span>(<\/span>dndActivated)<\/span>{<\/span>
\n    gantt.updateTask<\/span>(<\/span>taskId)<\/span>;<\/span>
\n    var<\/span> task =<\/span> gantt.getTask<\/span>(<\/span>taskId)<\/span>;<\/span>
\n    gantt.message<\/span>(<\/span>task.text<\/span> +<\/span> " baseline progress is now "<\/span> +<\/span> task.baseline_progress<\/span>)<\/span>;<\/span>
\n  }<\/span>
\n 
\n  taskId =<\/span> null<\/span>;<\/span>
\n  dndRequested =<\/span> false<\/span>;<\/span>
\n  dndActivated =<\/span> false<\/span>;<\/span>
\n  startTimestamp =<\/span> null<\/span>;<\/span>
\n  startPosition =<\/span> null<\/span>;<\/span>
\n}<\/span>)<\/span>;<\/span><\/div><\/div>\n

A fancier way of calling custom functions after drag-and-drop would be to call a custom API event<\/a>, which you could capture in other parts of your code:<\/p>\n

gantt.event<\/span>(<\/span>window,<\/span> 'mouseup'<\/span>,<\/span> function<\/span>(<\/span>e)<\/span>{<\/span>  
\n  if<\/span>(<\/span>dndActivated)<\/span>{<\/span>
\n    \/\/ signal that baseline progress has changed<\/span>
\n    gantt.callEvent<\/span>(<\/span>"onAfterBaselineProgressDrag"<\/span>,<\/span> [<\/span>taskId]<\/span>)<\/span>;<\/span>      
\n    gantt.updateTask<\/span>(<\/span>taskId)<\/span>;<\/span>
\n  }<\/span>
\n  taskId =<\/span> null<\/span>;<\/span>
\n  dndRequested =<\/span> false<\/span>;<\/span>
\n  dndActivated =<\/span> false<\/span>;<\/span>
\n  startTimestamp =<\/span> null<\/span>;<\/span>
\n  startPosition =<\/span> null<\/span>;<\/span>
\n}<\/span>)<\/span>;<\/span><\/div><\/div>\n

Then, you can catch this event the following way:<\/p>\n

gantt.attachEvent<\/span>(<\/span>"onAfterBaselineProgressDrag"<\/span>,<\/span> function<\/span>(<\/span>taskId)<\/span>{<\/span>
\n  var<\/span> task =<\/span> gantt.getTask<\/span>(<\/span>taskId)<\/span>;<\/span>
\n  gantt.message<\/span>(<\/span>task.text<\/span> +<\/span> " baseline progress is now "<\/span> +<\/span> task.baseline_progress<\/span>)<\/span>;<\/span>
\n}<\/span>)<\/span>;<\/span><\/div><\/div>\n

After all these code manipulations, we\u2019ll get a custom baseline<\/a> complemented with a progress bar and a knob allowing users to alter and save progress values.<\/p>\n

Custom milestones<\/h5>\n

\"DHTMLX Check the sample ><\/a><\/em><\/p>\n

If a milestone is not seen on the screen, it can be useful to draw a vertical line going up to the top to remind users about important dates on the project.<\/p>\n

By default, elements of an additional layer are rendered only when the taskbar, to which this element belongs, is visible on the screen. But you can use a more complex configuration of the additional layer to change it. The addTaskLayer<\/strong> method uses a function, but you can also set an object with specific parameters inside this method. In this object, you need to use the renderer<\/strong> property – an object with functions responsible for rendering elements.<\/p>\n

gantt.addTaskLayer<\/span>(<\/span>{<\/span>
\n  renderer:<\/span> {<\/span>
\n    render:<\/span> function<\/span> draw_planned(<\/span>task)<\/span> {<\/span>
\n 
\n    }<\/span>,<\/span>
\n    \/\/ define getRectangle in order to hook layer with smart rendering<\/span>
\n    getRectangle:<\/span> function<\/span>(<\/span>task,<\/span> view)<\/span>{<\/span>
\n    }<\/span>
\n  }<\/span>
\n}<\/span>)<\/span>;<\/span><\/div><\/div>\n

The render<\/strong> is a function that helps to create custom elements, and the getRectangle<\/strong> parameter defines the position of these elements. Inside the render<\/strong> parameter, add the function for creating custom elements utilized in the previous examples. In the getRectangle<\/strong> function, you have to define the position of the task using the getTaskPosition<\/strong> method.<\/p>\n

render:<\/span> function<\/span> draw_planned(<\/span>task)<\/span> {<\/span>
\n  if<\/span> (<\/span>task.type<\/span> ==<\/span> 'milestone'<\/span>)<\/span> {<\/span>
\n    var<\/span> sizes =<\/span> gantt.getTaskPosition<\/span>(<\/span>task,<\/span> task.start_date<\/span>,<\/span> task.end_date<\/span>)<\/span>;<\/span>
\n    var<\/span> el =<\/span> document.createElement<\/span>(<\/span>'div'<\/span>)<\/span>;<\/span>
\n    el.className<\/span> =<\/span> 'milestoneLine'<\/span>;<\/span>
\n    el.style<\/span>.left<\/span> =<\/span> sizes.left<\/span> +<\/span> 'px'<\/span>;<\/span>
\n    el.style<\/span>.width<\/span> =<\/span> 0<\/span> +<\/span> 'px'<\/span>;<\/span>
\n    el.style<\/span>.height<\/span> =<\/span> sizes.height<\/span> +<\/span> sizes.top<\/span> +<\/span> 'px'<\/span>;<\/span>
\n    el.style<\/span>.top<\/span> =<\/span> '0px'<\/span>;<\/span>
\n    return<\/span> el;<\/span>
\n  }<\/span>
\n  return<\/span> false<\/span>;<\/span>
\n}<\/span>,<\/span><\/div><\/div>\n

The next step is to change the parameters of the object that returns this method. You need to replace the value of the top<\/strong> parameter with 0<\/strong> so that the upgoing line will start from the timeline. The height of the element is set as infinite. Since the Gantt chart consists of multiple elements, the custom element will not go outside the Gantt container.<\/p>\n

getRectangle:<\/span> function<\/span>(<\/span>task,<\/span> view)<\/span>{<\/span>
\n  var<\/span> position =<\/span> gantt.getTaskPosition<\/span>(<\/span>task,<\/span> task.start_date<\/span>,<\/span> task.end_date<\/span>)<\/span>;<\/span>
\n  position.top<\/span> =<\/span> 0<\/span>;<\/span>
\n  position.height<\/span> =<\/span> Infinity<\/span>;<\/span>
\n  return<\/span> position;<\/span>
\n}<\/span><\/div><\/div>\n
Recurring tasks<\/h5>\n

\"DHTMLX Check the sample ><\/a><\/em><\/p>\n

If the project includes a range of similar tasks that must be performed at specific time intervals, you can make them recur.<\/p>\n

For this purpose, you have to create buttons in the grid that will allow you to add or remove recurring elements (tasks). To do this, use the template<\/strong> intended for displaying any data or HTML elements.<\/p>\n

gantt.config<\/span>.columns<\/span>=<\/span>[<\/span>
\n  {<\/span>name:<\/span>"recurrency"<\/span>,<\/span>   label:<\/span>"recurrency"<\/span>,<\/span> width:<\/span>70<\/span>,<\/span> template:<\/span> function<\/span> (<\/span>task)<\/span>{<\/span>
\n    var<\/span> add =<\/span> "<img class='add_recurrency' height=30 alt='v' src='https:\/\/encrypted-tbn0.gstatic.com\/images?q=tbn:ANd9GcRctAwCv6r8ffBNojuSyf2PZ5CxcDYMp6i4OxmMOiQ76S2AbPAK2g'>"<\/span>
\n    var<\/span> remove =<\/span> "<img class='remove_recurrency' height=30 alt='x' src='https:\/\/img.freepik.com\/free-vector\/letter-x-alphabet-inside-circle-icon-design_7095-384.jpg?size=338&ext=jpg'>"<\/span>
\n    return<\/span> add +<\/span> remove
\n  }<\/span>}<\/span>,<\/span>
\n]<\/span>;<\/span><\/div><\/div>\n

Then add the onTaskClick<\/strong> event handler that will fire when the mouse button is pressed. It is a more preferable option to adding onclick<\/strong> events inside HTML elements in the grid, which won\u2019t work in Salesforce and other frameworks with limitations on inline functions.<\/p>\n

When the onTaskClick<\/strong> event gets triggered in the grid after the click, take the custom element and use the closest<\/strong> method to find out if the right element was clicked. If the element for adding recurring elements is clicked, use the built-in prompt<\/strong> method and indicate the entered value for the task. Otherwise, you have to remove this value.<\/p>\n

gantt.attachEvent<\/span>(<\/span>"onTaskClick"<\/span>,<\/span> function<\/span>(<\/span>id,<\/span>e)<\/span>{<\/span>
\n  var<\/span> domHelpers =<\/span> gantt.utils<\/span>.dom<\/span>;<\/span>
\n 
\n  if<\/span> (<\/span>domHelpers.closest<\/span>(<\/span>e.target<\/span>,<\/span> ".add_recurrency"<\/span>)<\/span>)<\/span>{<\/span>
\n    var<\/span> task =<\/span> gantt.getTask<\/span>(<\/span>id)<\/span>;<\/span>
\n    task.recurrency<\/span> =<\/span> prompt(<\/span>"Enter the number of recurrency"<\/span>,<\/span> 1<\/span>)<\/span>;<\/span>
\n    gantt.updateTask<\/span>(<\/span>task.id<\/span>)<\/span>;<\/span>
\n  }<\/span>
\n  else<\/span> if<\/span> (<\/span>domHelpers.closest<\/span>(<\/span>e.target<\/span>,<\/span> ".remove_recurrency"<\/span>)<\/span>)<\/span>{<\/span>
\n    var<\/span> task =<\/span> gantt.getTask<\/span>(<\/span>id)<\/span>;<\/span>
\n    task.recurrency<\/span> =<\/span> false<\/span>;<\/span>
\n    gantt.updateTask<\/span>(<\/span>task.id<\/span>)<\/span>;<\/span>
\n  }<\/span>
\n  return<\/span><\/div><\/div>\n

Check if the task has a value in the recurrency<\/strong> property of the function for adding an extra layer. If yes, depending on this value, create the number of elements for repeating the task.<\/p>\n

gantt.addTaskLayer<\/span>(<\/span>function<\/span> draw_planned(<\/span>task)<\/span> {<\/span>
\n  if<\/span> (<\/span>task.recurrency<\/span>)<\/span> {<\/span>
\n    var<\/span> main_div =<\/span> document.createElement<\/span>(<\/span>'div'<\/span>)<\/span>;<\/span>
\n    main_div.className<\/span> =<\/span> 'recurring_tasks'<\/span>;<\/span>
\n    for<\/span> (<\/span>var<\/span> i =<\/span> 1<\/span>;<\/span> i <=<\/span> task.recurrency<\/span>;<\/span> i++<\/span>)<\/span> {<\/span>
\n      var<\/span> el =<\/span> document.createElement<\/span>(<\/span>'div'<\/span>)<\/span>;<\/span>
\n      var<\/span> el_start_date =<\/span> gantt.date<\/span>.add<\/span>(<\/span>task.start_date<\/span>,<\/span> i,<\/span> 'week'<\/span>)<\/span>;<\/span>
\n      var<\/span> el_end_date =<\/span> gantt.calculateEndDate<\/span>(<\/span>el_start_date,<\/span> task.duration<\/span>)<\/span>;<\/span>
\n      var<\/span> sizes =<\/span> gantt.getTaskPosition<\/span>(<\/span>task,<\/span> el_start_date,<\/span> el_end_date)<\/span>;<\/span>
\n      el.className<\/span> =<\/span> 'recurring_task'<\/span>;<\/span>
\n      el.style<\/span>.left<\/span> =<\/span> sizes.left<\/span> +<\/span> 'px'<\/span>;<\/span>
\n      el.style<\/span>.width<\/span> =<\/span> sizes.width<\/span> +<\/span> 'px'<\/span>;<\/span>
\n      el.style<\/span>.top<\/span> =<\/span> sizes.top<\/span> +<\/span> 'px'<\/span>;<\/span>
\n      el.style<\/span>.height<\/span> =<\/span> sizes.height<\/span> +<\/span> 'px'<\/span>;<\/span>
\n      el.innerHTML<\/span> =<\/span>  task.text<\/span>
\n      main_div.appendChild<\/span>(<\/span>el)<\/span>
\n    }<\/span>
\n    return<\/span> main_div;<\/span>
\n  }<\/span>
\n  return<\/span> false<\/span>;<\/span>
\n}<\/span>)<\/span>;<\/span><\/div><\/div>\n
Final words<\/h5>\n

The ability to work with custom content is really important for project managers working with Gantt charts via web apps. A range of useful examples reviewed in this and previous articles on the topic prove that DHTMLX Gantt has a lot to offer in this regard. <\/p>\n

If you are looking for a project management tool with enhanced customization capabilities, try DHTMLX Gantt for free by downloading a 30-day trial version<\/a>.<\/p>\n

Related materials:<\/h5>\n

Following these steps, you can display recurring events<\/a> in the Gantt timeline the same way as in the DHTMLX Scheduler component.<\/p>\n

As an alternative to the customization approach to adding custom milestones<\/a> into your project described above, now you can provide a high-level project summary using rollup tasks. This feature was added to DHTMLX Gantt in the latest update (v7.1<\/a>). <\/p>\n

Note that the event handler is added using gantt.event<\/a><\/strong> rather than native Element.addEventListener<\/a>. It is done because Gantt can be destroyed using the gantt.destructor<\/strong> method and all events attached using gantt.event<\/strong> will be cleared automatically. If you make use of the native method and gantt.destructor<\/strong>, you may need to clear event handlers manually in order to avoid memory leaks.<\/p>\n

After that, you get a custom element with several icons<\/a> that can be placed on a project task in the timeline.<\/p>\n