Gantt marker or banner over scale row

Gantt Vue.js Gantt
#1

Hi community!
Is that possible to create a marker or banner to display like these two layer over these months?
I already used the code below, as I need to display the title above the scale row.

.technical_marker {
background-color: #000;
font-weight: bold;
font-size: 16px;
width: 15vw;
opacity: 0.5;
}

gantt.templates.marker_class = function(marker){
return “technical_marker”;
}

gantt.attachEvent(“onGanttReady”, function () {
gantt.plugins({
marker: true
});

gantt.addMarker({
  id: "marker1",
  start_date: new Date(2024, 3, 1),
  css: "today",
  text: "System Upgrade - PHL"
});
gantt.addMarker({
  id: "marker2",
  start_date: new Date(2024, 2, 1),
  css: "today",
  text: "System Upgrade - PHL"
});
gantt.render();

});

Thanks in advance!

Screenshot 2024-04-08 at 17.00.16
Screenshot 2024-04-08 at 17.00.161672×792 127 KB

#2

Hello,

You can try setting top for gantt_marker_content, it might look something like this:

.gantt_marker_content {
    top: -103px;
}

.gantt_layout_cell,
.gantt_layout_content,
.gantt_task,
.gantt_data_area {
    overflow: visible !important;
}

Here is an example: DHTMLX Snippet Tool . Does it look like what you want?

1 Like
#3

@Maksim_Lakatkou thank you so much. It worked.
Now I have another question: how to I paint a marker considering start and end date?
For example: 2024-01-10 and 2024-02-13, how do I know the pixels per day to paint this date range?

1 Like
#4

I did it! Thank your for your support

1 Like