DHTMLX Suite UI 组件库允许您更快地构建跨平台、跨浏览器 Web 和移动应用程序。它包括一组丰富的即用式 HTML5 组件这些组件可以轻松组合到单个应用程序界面中。DHTMLX Gantt是用于跨浏览器和跨平台应用程序的功能齐全的Gantt图表可满足项目管理应用程序的所有需求是完善的甘特图图表库。在项目管理中合理利用时间起着至关重要的作用。当在甘特图中处理大量任务时有必要腾出时间来指定它们的持续时间。因此用日历功能来补充它是一个好主意这样可以更方便地进行时间管理您可以依赖经过时间验证的DHTMLX Calendar替代使用某些第三方工具。在这篇博文中您将学习使用Suite UI库中的JavaScript日历小部件和DHTMLX Gantt的场景。开始日期的甘特图内联编辑器中的日历我们从向甘特图网格中的内联编辑器添加JavaScript日历开始内联编辑器附带了多种预定义的编辑器类型。如果您需要一些特殊的东西(例如日历)来快速设置任务的开始日期和时间则有必要创建自定义内联编辑器。让我们更详细地描述一下如何做到这一点。第一步是在show()方法中创建HTML元素这些元素将在打开自定义编辑器时显示。gantt.config.editor_types.custom_editor { show: function (id, column, config, placeholder) { const html div classdhx_calendar_container input typetext idcalendar readonly>set_value: function (value, id, column, node) { const task gantt.getTask(id)之后您需要创建一个新的calendar对象const calendar new dhx.Calendar(null, { value: task.start_date, dateFormat: %d/%m/%y %H:%i, timePicker: true, css: dhx_widget--bordered });在第一个参数中指定应该显示日历的容器。您应该使用null来创建一个新的calendar对象但不要将其添加到页面中第二个参数是一个具有日历配置的对象。value参数显示在打开日历时将突出显示的日期。value: task.start_date接下来是日期格式dateFormat: %d/%m/%y %H:%i,如果您希望在日历中不仅可以设置日期还可以设置时间可以通过添加timePicker参数(将其值设置为true)来实现。timePicker: trueCSS参数指定日历将接收的类的名称。css: dhx_widget--bordered我们文档的这一部分给出了当使用特定类名时将被添加的CSS类列表。然后创建弹出对象并在其中添加日历。const popup new dhx.Popup(); popup.attach(calendar);之后您必须找到一个输入元素并将从日历中获得的日期值添加到该元素。const dateInput document.querySelector(#calendar); dateInput.value calendar.getValue();因此在单击该元素之后将显示带有日历的弹出窗口。dateInput.addEventListener(click, function () { popup.show(dateInput); });在日历中选择日期或时间时输入元素中的值也将被更新。calendar.events.on(change, function (date) { dateInput.value calendar.getValue(); // uncomment to hide the popup with calendar after changing the date // popup.hide(); });在当前的情况下用户可以选择一个日期然后通过选择另一个日期来修改它或者在Calendar弹出窗口保持显示的同时设置时间。要保存输入的值需要单击甘特图中的空白区域。结果内联编辑器将关闭并保存值。如果使用示例中的popup.hide()方法取消注释行则在更改日期或时间后立即隐藏带有日历的弹出窗口但内联编辑器本身将保持打开状态。要应用更改还需要单击甘特图中的空白区域。在get_value()方法中从输入元素获取日期值将该值从字符串转换为日期对象然后为任务指定一个新的日期。get_value: function (id, column, node) { const newValue node.querySelector(input).value; const dateValue gantt.date.str_to_date(%d-%m-%y %H:%i)(newValue) return dateValue; },在is_changed()方法中检查当前日期是否与打开内联编辑器时显示的日期不同。is_changed: function (value, id, column, node) { return value ! this.get_value(id, column, node); },这些是在将DHTMLX Suite的Calendar添加到DHTMLX Gantt内联编辑器时必须考虑的关键技术特性。未完待续篇幅有限下期继续讲~
