Selecting cell, and inserting html to it

Gantt
#1

Hello,

Is there any way to select the cell (on event empty click), and insert html/css into it?

I’m trying to implement a solution, where on click on particular cell, I can allocate new task/hours.

So far I’ve managed to get the date and id of task on the cell, but I don’t know how to identify the cell so I can insert html into it (or add new css class).

What I’m trying to achieve:
55

What I have so far:

51
51796×285 5.82 KB

Code so far:

if (!gantt._eventsAttached) {
      gantt._eventsAttached = true

  gantt.attachEvent('onEmptyClick', function (e: PointerEvent) {
    const id = (e.target as any).parentNode.attributes[1].nodeValue
    const name = (e.target as any).parentNode.attributes[1].nodeName
    const posX = gantt.getScrollState().x
    const posY = gantt.getScrollState().y
    const sideMenu = document.querySelector('.ant-layout-sider')
    const position =
      e.clientX - gantt.config.grid_width + posX - sideMenu!.clientWidth
    const date = gantt.dateFromPos(position)

    gantt.showLightbox = function (id: string) {
      const task = gantt.getTask(id)
      const form = document.getElementById('my-form')
      form!.style.display = 'block'
      form!.style.position = 'absolute'
      form!.style.left = `${e.clientX - 248}px`
      form!.style.top = `${e.clientY - 104}px`
      const input = form!.querySelector("[name='description']")
      const startDate = form!.querySelector('#startDate')
      input!.value = `task: ${task.text}`
      startDate!.innerHTML = date
    }

    gantt.showLightbox(id)
  })
}

Thanks in advance!

#2

Hello Bartosz,
Right now, there is no built-in way to display custom content inside the timeline cells. The dev team will add that feature in the future.
For now, you need to use the addTaskLayer method that allows displaying any HTML elements inside the timeline:
https://docs.dhtmlx.com/gantt/api__gantt_addtasklayer.html

The function inside the addTaskLayer method is called for each task row, so, it would be better to add the HTML content as a property to the task objects.
Here is an example of how it might be implemented:
http://snippet.dhtmlx.com/5/acb9d5a6b

#3

Hello Bartosz,
The dev team added the feature that allows adding custom HTML content inside the timeline cells:
https://docs.dhtmlx.com/gantt/whatsnew.html#x6629x80x6630x:~:text=The%20ability%20to%20put%20any%20HTML%20content%20into%20the%20cells%20of%20the%20Timeline%3A
https://docs.dhtmlx.com/gantt/api__gantt_timeline_cell_content_template.html

You can see how it works in the following sample:
https://docs.dhtmlx.com/gantt/samples/04_customization/24_timeline_cells_custom_content.html