当前位置：首页 > article >正文

DHTMLX Scheduler 7.2全新发布：增强了重复事件的编辑、修改了实时更新等

article 2025/1/11 3:52:48

DHTMLX Scheduler是一个全面的 UI 组件，用于处理面向业务的 Web 应用程序中复杂的调度和任务管理需求。

DHTMLX Scheduler 7.2现已全新发布！此更新将增强JS 调度库的编码体验，并确保使用它构建的日历具有更高的可用性。在之前版本的坚实基础之上，v7.2 增加了针对重复事件的新编辑选项、修改了协作编辑，并增强了对日和周视图中事件显示的控制，附下载链接：

DHTMLX Scheduler 最新版下载

以下是新版本的主要更新内容：

重复事件的新编辑选项

在 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版本更新的主要内容。

查看全文

http://www.kler.cn/a/443313.html