DHTMLX Scheduler是一个全面的 UI 组件,用于处理面向业务的 Web 应用程序中复杂的调度和任务管理需求。
DHTMLX Scheduler 7.2现已全新发布!此更新将增强JS 调度库的编码体验,并确保使用它构建的日历具有更高的可用性。在之前版本的坚实基础之上,v7.2 增加了针对重复事件的新编辑选项、修改了协作编辑,并增强了对日和周视图中事件显示的控制,附下载链接:
以下是新版本的主要更新内容:
重复事件的新编辑选项
在 7.1 版中,我们引入了对定期事件的 RRULE 格式的支持,这与广为接受的 RFC-5545 标准保持一致。DHTMLX Scheduler 7.2 进一步扩展了此功能,让您可以无缝修改定期系列的各部分。
此功能默认可用,无需额外配置。因此,最终用户可以轻松同时编辑一组重复事件。只需指定一个特定事件,即可从中应用重复系列中的更改。在用户界面中,可以通过两种方式完成:
- 通过将所需事件拖到时间线中的某个单元格并选择"此事件和后续事件"来重新安排事件,这会将相同的更改应用于其余的重复系列。
- 单击重复系列中所需的事件,然后在弹出菜单中选择"此事件和后续事件"选项,该选项将进一步的更改应用于重复系列的后续部分。
此方法不需要对应用程序的服务器端代码进行任何更改。
修改后的协同编辑实时更新模块
在 v7.2 中,Scheduler 的协作功能达到了新的水平。我们的开发人员修改了实时更新模块,提供跨多个用户的实时同步和协作编辑。
新的实施方案为实时数据更新带来了现代、高效的支持,确保一个最终用户所做的更改立即被所有其他用户看到。
用于实时更新的客户端处理程序现已嵌入到 Scheduler 组件中。要启用它,您只需在应用中包含以下代码:
const AUTH_TOKEN = "token";
scheduler.init('scheduler_here', new Date(2025, 3, 20), "week");
scheduler.load("/events");
const dp = scheduler.createDataProcessor({
url: "/events",
mode: "REST-JSON",
headers: {
"Remote-Token": AUTH_TOKEN
}
});
const { RemoteEvents, remoteUpdates } = scheduler.ext.liveUpdates;
const remoteEvents = new RemoteEvents("/api/v1", AUTH_TOKEN);
remoteEvents.on(remoteUpdates);
实时协作功能需要兼容的后端实现。该实现使用统一的通信协议,可实现所有支持此功能的 DHTMLX 组件 (如Scheduler、**Gantt**等)的实时更新。
改进隔夜事件的显示
这种方法不需要对应用的服务器端代码进行任何更改。从现在开始,all_timed插件的某些功能将默认启用,使夜间事件的显示更加清晰易懂。
在一天开始并在第二天结束的事件(持续时间少于 24 小时)现在显示在"日"和"周"视图的主列中,而不是显示在顶部的多日部分中。
可以通过将all_timed配置设置为false来 禁用新行为。
此外,我们还添加了新的 API 选项,让您可以更好地控制在多日部分和主列中显示的事件。因此,您可以指定事件放置的标准,确保您的 JavaScript 调度日历以最适合您需求的方式显示事件。
const { isMainAreaEvent } = scheduler.ext.allTimed;
scheduler.ext.allTimed.isMainAreaEvent = function(event) {
if(event.multidaySection){
return false;
}else{
return isMainAreaEvent(event);
}
};
有了这个新功能,您可以获得额外的灵活性,在各种场景中显示预定的夜间事件,从而增强应用程序的可用性。
其他改进
非变异日期函数
scheduler.date .{unit}_start函数已更新,不再改变输入日期。此更改可确保日期计算是纯函数,从而防止意外的副作用并使您的代码更加可预测和可靠。
迷你日历的新 API 事件
迷你日历(日期选择器)扩展还有新的 API 事件,可以更好地控制用户与此元素的交互。
const dateToStr = (date) => date ? scheduler.templates.format_date(date) : null;
var calendar = scheduler.renderCalendar({
container: "cal_here",
navigation: true,
events: {
onBeforeMonthChange: function(oldDate, newDate) {
scheduler.message(`Before change from ${dateToStr(oldDate)} to ${dateToStr(newDate)}`);
return true;
},
onMonthChange: function(oldDate, newDate) {
scheduler.message(`Changed from ${dateToStr(oldDate)} to ${dateToStr(newDate)}`);
},
onDateClick: function(date, e) {
scheduler.setCurrentView(date);
scheduler.message(`Selected date ${dateToStr(date)}`);
},
onDateMouseOver: function(date, e){
scheduler.message(`Mouse over ${dateToStr(date)}`)
}
}
});
这一新颖的功能允许您在与日期选择器交互时实现特定的行为。
以上便是v7.2版本更新的主要内容。