DHTMLX Suite UI 组件库允许您更快地构建跨平台、跨浏览器 Web 和移动应用程序。它包括一组丰富的即用式 HTML5 组件这些组件可以轻松组合到单个应用程序界面中。DHTMLX Gantt是用于跨浏览器和跨平台应用程序的功能齐全的Gantt图表可满足项目管理应用程序的所有需求是完善的甘特图图表库。在项目管理中合理利用时间起着至关重要的作用。当在甘特图中处理大量任务时有必要腾出时间来指定它们的持续时间。因此用日历功能来补充它是一个好主意这样可以更方便地进行时间管理您可以依赖经过时间验证的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 idform_container/divdiv idcalendar_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的日历小部件的三个选项。