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

在web項目中使用DHTMLX Gantt時，開發人員經常需要滿足與UI外觀相關的各種需求。因此他們必須確定JavaScript甘特圖庫的自定義能力，因此本文僅繼續介紹DHTMLX Gantt的自定義用例。

在這個系列的文章中，您將學習如何使用DHTMLX Gantt組件構建類似jira的項目路線圖。在上文中（點擊這里回顧>>）主要介紹了如何實現工作項的自定義對話框窗口、自定義網格列等，本文將繼續介紹如何自定義時間線調整器等，歡迎持續關注！

定制指南

自定義時間線調整器

路線圖頂部還有一個雙面調整器，可用于更改顯示的日期范圍，路線圖包括任務的日期范圍和顯示的日期范圍。它們不是一回事，任務日期的范圍取決于已加載的任務，并根據任務日期進行更改。缺省情況下，不指定顯示的日期范圍，取決于任務日期。但是如果您設置了日期范圍，它將保持不變，直到您更改它。

現在我們應該介紹關于調整器中日期范圍的HTML元素結構，在后臺，有一個元素用于顯示任務日期的總范圍。在前臺，你可以看到兩個圓的元素作為resizers。在這兩個元素之間，我們使用了另一個元素，它突出顯示相對于任務日期范圍的顯示日期范圍。

<div class="range_resizer" title="Change the displayed date range">
<div class="total_range">
<div class="range_indicator"></div>
<div class="left_resizer"></div>
<div class="right_resizer"></div>
</div>
</div>

為了使這些元素易于管理，您必須向窗口對象添加事件處理程序。單擊鼠標按鈕后，事件處理程序將檢查鼠標是否位于左側或右側調整大小器上。如果是，則resizeElement元素保存在resizeElement變量中。

window.addEventListener('mousedown', function (e) {
const element = e.target.closest(".left_resizer") || e.target.closest(".right_resizer")
if (element) {
resizeElement = element;
}
});

在釋放鼠標按鈕之后，必須重置變量，以便在移動鼠標指針時不會改變任何其他內容。

window.addEventListener('mouseup', function (e) {
resizeElement = false;
});

如果resizer元素存儲在變量中，則主要操作發生在mousemove事件中。首先，您需要添加兩個常量來指定resizer元素的一半寬度(resizerWidth)和左/右縮進(margin)。

window.addEventListener('mousemove', function (e) {
if (resizeElement) {
const resizerWidth = 8;
const margin = 10;

 然后將調整器寬度的一半添加到具有新元素位置的變量中，因此當鼠標移動時，元素將被放置在中間(而不是右邊)。

let newPosition = e.pageX - resizerWidth;

之后，您將收到兩個調整器的HTML元素、任務的日期范圍以及它們的坐標。

const totalRange = document.querySelector(".total_range");
const leftResizer = document.querySelector(".left_resizer");
const rightResizer = document.querySelector(".right_resizer");

const totalRect = totalRange.getBoundingClientRect();
const leftRect = leftResizer.getBoundingClientRect();
const rightRect = rightResizer.getBoundingClientRect();

然后，您必須根據坐標和調整器的類型(左或右)修改新調整器的位置。調整大小器不應該擴展到日期范圍元素之外，并且應該正確地放置在彼此之間。

if (resizeElement.className == "left_resizer") {
if (newPosition < totalRect.x) {
newPosition = totalRect.x
}
if (newPosition + resizerWidth >= rightRect.x) {
newPosition = rightRect.x - resizerWidth;
}
}
else {
if (newPosition > totalRect.x + totalRect.width - resizerWidth * 2) {
newPosition = totalRect.x + totalRect.width - resizerWidth * 2;
}
if (newPosition - resizerWidth <= leftRect.x) {
newPosition = leftRect.x + resizerWidth;
}
}

向正在拖動的調整大小器添加一個新坐標。

resizeElement.style.left = newPosition + "px";

設置顯示的調整大小器日期范圍的指示符元素坐標。

const rangeIndicator = document.querySelector(".range_indicator");

rangeIndicator.style.left = leftResizer.offsetLeft + margin + "px";
rangeIndicator.style.width = rightResizer.offsetLeft - leftResizer.offsetLeft + "px";

下一步是將兩個調整器的坐標與路線圖數據關聯起來。在這里您應該獲得任務日期范圍，并在此范圍內以天為單位計算持續時間。

const range = gantt.getSubtaskDates();
const rangeDuration = gantt.calculateDuration(range.start_date, range.end_date);

現在我們應該提到用于轉換值的邏輯。對于左側調整大小器，您應該沿x軸取其坐標(offsetLeft)并減去左側邊距。結果值應該除以任務日期范圍的持續時間，然后乘以指示任務日期范圍的元素的寬度。類似的邏輯適用于正確的調整大小器，只是您必須添加替代減去邊距。

const leftPos = Math.round((leftResizer.offsetLeft - margin) / totalRect.width * rangeDuration);
const rightPos = Math.round((rightResizer.offsetLeft + margin) / totalRect.width * rangeDuration);

結果將是必須添加到任務日期范圍的開始日期天數，您必須將這些值添加到start_date和end_date配置中。要重新繪制更改，需要使用render()方法。

gantt.config.start_date = gantt.date.add(range.start_date, leftPos, "day");
gantt.config.end_date = gantt.date.add(range.start_date, rightPos, "day")

gantt.render()

這些主要步驟將允許您構建與示例類似的jira路線圖。