How to customize milestone template

Gantt React Gantt
#1

Hello,
I need to have a custom template for the milestones in my gantt. Instead of showing the rotated square I want to display an emoji or a fontawesome icon.

I tried to get the milestone node by calling getTaskNode() and then call node.querySelector(“.gantt_task_content”) to access the milestone’s square dom element. Later I tried to inject the html of my custom icon or to litterarly replace the square element by another div which itself has the custom icon but both ways didn’t work, the milestones loses the custom template later on.

I tried it in the “onBeforeTaskDisplay” event but also in the “onBeforeGanttRender” because my app is using redux which triggers many renderings each time any data changes. So I need to update the milestone for each of these renderings.

Is it possible to customize the milestone template by any other way otherwize ? Why I couldn’t achieve it in the said ways ?

Here the code for what I tried :

gantt.attachEvent("onBeforeTaskDisplay", function (id, task) {
      if (task.type == "milestone") {
          var node = gantt.getTaskNode(task.id);

          if (node) {
            const ganttTaskContentEl = node.querySelector(".gantt_task_content") as HTMLDivElement;

            if (ganttTaskContentEl) {
              const { current: milestoneIconProperty } = milestoneIconPropertyRef;
              let iconTempl = `<svg aria-hidden="true" focusable="false" data-prefix="fasl" data-icon="fasl_#_list-music" class=" mdIcon svg-inline--fa fasl-list-music " role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" style="color: #ff2540;" > <title>Travail technique</title>      <path fill="currentColor" d="M384 71.8L480 43v93.2L384 165V128 71.8zM352 48v80 46.6V208 376c-20.3-14.8-48.7-24-80-24c-61.9 0-112 35.8-112 80s50.1 80 112 80s112-35.8 112-80V198.4L512 160V33.4 0L480 9.6 352 48zm0 384c0 9.1-5.1 20.3-19.4 30.5C318.3 472.7 297 480 272 480s-46.3-7.3-60.6-17.5C197.1 452.3 192 441.1 192 432s5.1-20.3 19.4-30.5C225.7 391.3 247 384 272 384s46.3 7.3 60.6 17.5C346.9 411.7 352 422.9 352 432zM16 64H0V96H16 272h16V64H272 16zm0 128H0v32H16 272h16V192H272 16zm0 128H0v32H16 144h16V320H144 16z" class=""></path> </svg>`;

              ganttTaskContentEl.style.overflow = "visible";
              ganttTaskContentEl.style.transform = "none";
              ganttTaskContentEl.style.background = "none";
              ganttTaskContentEl.style.border = "none";
              ganttTaskContentEl.style.width = "fit-content";
              ganttTaskContentEl.style.height = "fit-content";

             // Here I tried the replacement 
              const customMilestone = document.createElement("div");
              // customMilestone.setAttribute("data-task-id", `${task.id}`);
              // customMilestone.setAttribute("task_id", `${task.id}`);
              customMilestone.className = "customMilestone ";

              customMilestone.innerHTML = iconTempl;
              ganttTaskContentEl.replaceWith(customMilestone);

              // Here I tried to inject the icon template
              // ganttTaskContentEl.innerHTML = iconTempl;
              debugger;
            }
          }
        }
      return true;
    });
#2

Hello,
You can add custom milestones using addTaskLayer:

gantt.config.min_column_width = 40;

gantt.attachEvent('onGanttReady', () => {
    gantt.addTaskLayer((task) => {
        if (task.type === 'milestone') {
            const sizes = gantt.getTaskPosition(task, task.start_date, task.end_date);
            const el = document.createElement('div');
            el.className = 'custom_icon icon fa fa-' + task.custom_icon;
            el.style.left = sizes.left + 'px';
            el.style.top = sizes.top + 'px';

            return el;
        }

        return false;
    });
});

gantt.init('gantt_here');

const data = {
	tasks: [
		{ id: 2, text: 'Milestone #1', start_date: '03-05-2024 00:00', duration: 2, parent: '1', type: 'milestone', custom_icon: 'wrench' },
		...
    ],
	links: [
		...
	]
};

Include the FontAwesome library:

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css?v=6.1.2">

CSS:

.custom_icon {
	position: absolute;
	font-size: 15px;
	z-index: 1;
	padding: 4px;
	margin-left: -12px;
	margin-top: 6px;
	pointer-events: none;
}

And hide the default milestone:

.gantt_milestone {
    display: none
}

Here is an example: DHTMLX Snippet Tool