How to add click event for the "progress-bar" about gantt-schedule-timeline-calendar

[neuronetio]

You can click on an item, take the X position of the mouse and calculate what percentage of the item's width it is.
For example when you click at the end of an item you will get something like 100% and at the beginning you will get something like 0%.
Knowing what percentage of an item is clicked, you will know if progress was clicked - because progress is also a percentage.
You can even give yourself a margin of error like 10px or 10% - so you don't need to click perfectly on the pixel.

[neuronetio]

You can use slots to add click event on the item.
slots documentation

NOT TESTED EXAMPLE CODE:

function myItemSlot(vido, props) {
  const { onChange } = vido;

  function onClick() {
    alert(props.item.id + " clicked!");
  }

  onChange((changedProps) => {
    // if current element is reused to display other item data just update your data so when you click you will display right alert
    props = changedProps;
  });

  // return render function
  return (content) =>
    vido.html`<div class="my-item-wrapper" @click=${onClick}>${content}</div>`;
}

const config = {
/* ... */
slots: {
    'chart-timeline-items-row-item': { inner: [myItemSlot] },
  },
/* ... */
};

[rohith5429]

Thank you!!. Your solution worked perfectly!.