DHTMLX Gantt是用于跨瀏覽器和跨平臺應用程序的功能齊全的Gantt圖表?？蓾M足項目管理應用程序的所有需求，是最完善的甘特圖圖表庫。

當您聲稱您的產品具有高級定制功能時，客戶一定會對產品進行嚴格測試，這個規則當然適用于DHTMLX Gantt，官方技術團隊收到了很多關于如何在JavaScript甘特圖組件中實現某些外觀定制的請求，結合實際的案例，我們將在本文中為您展示如何在實踐中實現這些定制。

在上文中（點擊這里回顧>>），我們介紹了如何為任務分配資源以及任務欄中的任務名稱和資源等，本文將繼續介紹如何高亮顯示項目任務和周末等。

高亮顯示項目的任務和周末

當通過DHTMLX構建的JavaScript甘特圖管理項目時，能夠突出顯示屬于不同項目和周末的任務組是很有用的。

讓我們從突出顯示項目的任務開始。要啟用此特性，需要應用根據任務坐標繪制的附加層，但在此之前，請檢查任務類型是否為project。

gantt.addTaskLayer(function (task) {
if (task.type == "project") {

使用getTaskPosition()方法獲取項目坐標，最上面的坐標是已知的——尺寸對象最上面的參數。

const sizes = gantt.getTaskPosition(task, task.start_date, task.end_date);

將最左邊的任務坐標添加到左邊數組，將最右邊的坐標添加到右邊數組，然后遍歷項目的每個子任務并添加這些坐標。另外，根據子任務的坐標增加sizes對象中的height參數。

const left = [sizes.left];
const right = [sizes.left + sizes.width];
gantt.eachTask(function (child) {
const childSizes = gantt.getTaskPosition(child, child.start_date, child.end_date);
left.push(childSizes.left)
right.push(childSizes.left + childSizes.width)
if (sizes.height < childSizes.top + childSizes.height) sizes.height = childSizes.top + childSizes.height - sizes.top
}, task.id);

在遍歷所有任務之后，必須對左側數組進行排序以獲得最小值，然后將其添加到sizes對象的左側參數中。

sizes.left = left.sort((a, b) => a - b)[0]

接下來，對正確的數組進行排序，但不要將最右邊的值添加到sizes對象的右邊參數中。相反，從結果值中減去最左邊的坐標以獲得矩形的寬度。

const mostRight = right.sort((a, b) => a - b).reverse()[0]
sizes.width = mostRight - sizes.left

然后您需要創建一個HTML元素，并從sizes對象中獲取其坐標。在樣式中從項目的顏色參數中指定顏色，如果不指定顏色，則默認設置為灰色。

在突出顯示周末時，應該應用timeline_cell_class模板。在這里，您應該檢查數組中是否有包含周末的日期，如果有，則返回一個自定義類名。

const weekends = [
+new Date(2025, 11, 24),
+new Date(2025, 11, 25),
+new Date(2025, 11, 31),
+new Date(2026, 0, 1),
]

gantt.templates.timeline_cell_class = function (task, date) {
if (weekends.indexOf(+date) > -1) {
return "weekend";
}
};

任務頂部的自定義圖標

最后我們想與大家分享如何在任務頂部顯示自定義圖標。一個簡單的方法是使用addTaskLayer()方法，使用此方法，您可以檢查任務是否具有icon參數，該參數將指示任務是否具有自定義圖標，它是我們添加到演示項目中的自定義任務屬性。

gantt.addTaskLayer(function (task) {
if (task.type == "project") {

之后，讓我們使用getTaskPosition()方法獲取任務的坐標。然后，創建一個HTML元素，根據icon參數從帶有圖標的數組中指定圖像，并設置樣式。

const sizes = gantt.getTaskPosition(task, task.end_date, task.end_date);

const img = document.createElement('img');
img.src = icons[task.icon - 1]
img.style = `
left: ${sizes.left - 10}px;
width: 30px;
top: ${sizes.top}px;
height: 30px;
margin-top: 2px;

position: absolute;
border-radius: 2px;
color: white;
opacity: 0.9;
z-index:1;
pointer-events: none;

return img;

就是這樣，按照上面的說明，您可以實現我們示例中的關鍵自定義甘特圖特性，并將它們添加到您的項目中。