使用JavaScript日历小部件和DHTMLX Gantt的应用场景（三）

DHTMLX Suite UI 组件库允许您更快地构建跨平台、跨浏览器 Web 和移动应用程序。它包括一组丰富的即用式 HTML5 组件，这些组件可以轻松组合到单个应用程序界面中。

DHTMLX Gantt是用于跨浏览器和跨平台应用程序的功能齐全的Gantt图表，可满足项目管理应用程序的所有需求，是完善的甘特图图表库。

DHTMLX Gantt 8.0正式版下载

在项目管理中，合理利用时间起着至关重要的作用。当在甘特图中处理大量任务时，有必要腾出时间来指定它们的持续时间。因此，用日历功能来补充它是一个好主意，这样可以更方便地进行时间管理，您可以依赖经过时间验证的DHTMLX Calendar，替代使用某些第三方工具。

在这篇博文中，您将学习使用Suite UI库中的JavaScript日历小部件和DHTMLX Gantt的场景。

在上文中（点击这里回顾>>），我们为大家介绍了“开始日期和结束日期”这个使用场景，接下来将介绍第三个场景，一起来看看吧~

日历在弹出式菜单编辑截止日期

最后我们想与您分享如何使用DHTMLX Suite库中的Calendar小部件在甘特图时间轴中演示任务截止日期。

这种自定义看起来很不寻常，所以让我们介绍一下它在实践中应该如何工作。在时间轴上双击截止日期元素后，可以更改截止日期或将其删除。如果给定的任务没有截止日期，而最终用户希望添加此参数，则只需双击时间轴中所需的任务行并添加截止日期。

现在，我们进入这个自定义的实现阶段。

在这种情况下，使用额外的层绘制最后期限。自定义元素使用属性进行补充，其中应该指定任务ID。

gantt.attachEvent("onGanttReady", function () {
gantt.addTaskLayer(function drawPlanned(task) {
if (task.deadline) {
const sizes = gantt.getTaskPosition(task, task.deadline, task.deadline);
const el = document.createElement('div');
el.className = 'deadline';
el.setAttribute("data-taskId", task.id);
el.style.left = sizes.left + 'px';
el.style.top = sizes.top + 7 + 'px';
return el;
}
return false;
});
});

双击鼠标的事件处理程序以以下方式添加：

window.addEventListener('dblclick', function (e) {

使用此处理程序，您可以检查是否已经打开了用于编辑截止日期的对话框窗口。如果是，则必须使用return语句终止函数。

if (document.querySelector(".deadline_editor")) {
return
}

接下来应该做的是获取截止日期的DOM元素或时间轴中的任务行。

const deadlineNode = e.target.closest(".deadline");
const taskRowNode = e.target.closest(".gantt_task_row");

const targetNode = deadlineNode || taskRowNode;

DOM元素的属性帮助您获取任务ID，该ID将在getTask()方法中用于获取任务对象。

const taskId = targetNode.dataset.taskId || targetNode.dataset.taskid;
const task = gantt.getTask(taskId);

如果在时间轴上双击单元格后，它已经有了截止日期，那么该操作很可能不是为了更改截止日期，而是为了更改其他内容。因此在这种情况下，应该用return语句结束函数。

if (taskRowNode && task.deadline) {
return
}

然后您必须为一项任务设定截止日期，从任务的相应截止日期属性中获取。如果任务没有截止日期，则需要从时间轴中的单击中获取日期，为此使用getRelativeEventPosition()方法。该方法的第一个参数是click事件itself (`e`)，第二个参数是时间轴的DOM元素，该方法将返回时间轴中的点击位置。接下来，使用dateFromPos()方法从单击位置获取日期。

let deadlineDate;
if (task.deadline){
deadlineDate = new Date(task.deadline);
}
else {
const clickPos = gantt.utils.dom.getRelativeEventPosition(e, gantt.$task_data);
deadlineDate = gantt.dateFromPos(clickPos.x);
}

下面的步骤是创建一个弹出实例并向其添加HTML内容，将有保存更改、删除截止日期的按钮，以及用于选择日期和时间的日历本身。

const popup = new dhx.Popup({
css: "deadline_editor dhx_widget--bordered"
});
popup.attachHTML("<div id='form_container'></div><div id='calendar_container'></div>");

之后，日历显示在单击的元素下面。

popup.show(targetNode);

日历只有在重新绘制后才能添加到弹出框中，因此您需要将以下代码放入函数中，该函数将在弹出式重绘后启动：

dhx.awaitRedraw().then(function () {
// code
});

当重新绘制弹出窗口时，需要添加一个新的日历实例。在本例中，您指定容器的ID，日历应该在容器中初始化。

const calendar = new dhx.Calendar("calendar_container", {
value: deadlineDate,
dateFormat: gantt.config.date_format,
timePicker: true,
css: "dhx_widget--bordered"
});

下一步是添加一个事件处理程序，该处理程序将在日历中选择日期或时间时触发，并将所选日期添加到deadlineDate变量。

calendar.events.on("change", function (date) {
deadlineDate = date;
});

现在是时候创建一个表单了，您可以在其中显示两个按钮。在CSS属性中，指定dhx_widget-border_bottom来在按钮下呈现框架，并在视觉上将带有按钮的表单与日历分开。在align参数中，可以设置页面宽度的对齐方式。

const form = new dhx.Form("form_container", {
rows: [
{
css: "dhx_widget--border_bottom",
align: "evenly",
cols: [
{ name: "save", view: "flat", text: "Save", type: "button", },
{ name: "delete", view: "link", text: "Delete", type: "button", },
]
},
]
});

最后您必须向表单添加事件处理程序，当按钮被点击时，这些处理程序将被触发。在一个事件处理程序中，您可以为任务指定截止日期值，而在另一个事件处理程序中，您应该删除截止日期属性。之后，更新任务并隐藏弹出窗口。

form.getItem("save").events.on("click", function (events) {
task.deadline = deadlineDate;
gantt.updateTask(task.id);
popup.hide();
});

form.getItem("delete").events.on("click", function (events) {
if (task.deadline) {
delete task.deadline;
gantt.updateTask(task.id);
}
popup.hide();
});

这就是使用DHTMLX Suite库中的日历小部件在甘特图时间轴中实现任务截止日期的方法。

总结

根据上面指南提供的说明，您可以在基于DHTMLX Gantt的项目管理应用程序中有效使用DHTMLX Suite的日历小部件的三个选项。