Custom milestone type

Gantt
#1

Hello,

this sample shows how to create a custom task type : Gantt : Samples

So you simply do this :
gantt.config.types.meeting = "myId";
this to define the css

		.meeting_task {
			--dhx-gantt-task-border: 1px solid #6ba8e3;
			--dhx-gantt-task-background: #F2F67E;
			--dhx-gantt-task-color: #242424e6;
		}

and this to map the type to the css

	gantt.templates.task_class = function (start, end, task) {
		if (task.type == gantt.config.types.meeting) {
			return "meeting_task";
		}
		return "";
	};

then you put the type in the task
{id: 14, text: "Task #3", start_date: "02-04-2023", type: gantt.config.types.meeting, duration: "6", parent: "11", progress: 0.8, open: true},

This works great for tasks, but what if you want a custom milestone type ?
for example milestone1 would be blue, milestone2 would be yellow
if I do
{id: 14, text: "Task #3", start_date: "02-04-2023", type: gantt.config.types.milestone1, duration: "6", parent: "11", progress: 0.8, open: true},
I will have a blue task shape, not a blue milestone shape

Is there a way to tell in the config the type milestone1 should be displayed as a milestone and not a task ?

#2

Hello,
Milestone is a task type. So, if you want to create a custom type for the milestones, it is not different from creating a custom type for tasks. You can add any level of customization for the custom types, but you need to implement it manually, including the styles and the logic.
You need to add these style rules to see the diamond shape:

.gantt_task_line.milestone1 .gantt_task_content {
    left: 50%;
    width: 25px !important;
    height: 25px !important;
    display: inline-block;
    background: DodgerBlue;
    color: transparent;
    visibility: visible !important;
    border: 1px solid RoyalBlue !important;
    transform: rotate(45deg);
    box-sizing: border-box;
    top: 3px;
}

.gantt_task_line.milestone1 {
    border: none;
    width: 70px !important;
    height: 20px !important;
    background-color: rgba(0, 0, 0, 0) !important;
    box-shadow: none;
}

.gantt_task_line.milestone1 .gantt_task_progress_wrapper,
.gantt_task_line.milestone1 .gantt_task_progress_drag,
.milestone1 .gantt_task_drag.task_right.task_end_date,
.milestone1 .gantt_task_drag.task_left.task_start_date {
    display: none;
}

Here are examples:
https://snippet.dhtmlx.com/0j4jdc8a

https://snippet.dhtmlx.com/gj64ex4c

https://snippet.dhtmlx.com/wnmeci87

1 Like