Selecting cell, and inserting html to it


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:

What I have so far:

Code so far:

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

  gantt.attachEvent('onEmptyClick', function (e: PointerEvent) {
    const id = ( as any).parentNode.attributes[1].nodeValue
    const name = ( 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! = `${e.clientY - 104}px`
      const input = form!.querySelector("[name='description']")
      const startDate = form!.querySelector('#startDate')
      input!.value = `task: ${task.text}`
      startDate!.innerHTML = date


Thanks in advance!

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:

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: