如何为Kendo Scheduler创建自定义删除确认弹窗？

要替换默认的删除确认弹窗，你需要关闭内置确认逻辑，然后在remove事件中手动实现自定义确认流程，具体步骤如下：

步骤1：关闭默认确认弹窗 #

将editable.confirmation设置为false，阻止Scheduler弹出默认的删除确认框。

步骤2：在remove事件中实现自定义确认 #

在remove事件回调里，创建自定义确认弹窗（推荐用Kendo Dialog组件保持UI一致性），根据用户选择决定是否执行删除操作。

修改后的完整代码 #

$("#sessionScheduler").kendoScheduler({
    height: 600,
    editable: {
        confirmation: false, // 关闭默认确认弹窗
        create: true,
        destroy: true,
        edit: true,
        update: true,
        template: $("#session-form-template").html(),
        window: {
            title: "Session",
        }
    },
    eventTemplate: $("#event-template").html(),
    views: [
        { type: "day", dateHeaderTemplate: "<span class='k-link k-nav-day'>#=kendo.toString(date, 'ddd dd/MM')#</span>" },
        { type: "week", dateHeaderTemplate: "<span class='k-link k-nav-day'>#=kendo.toString(date, 'ddd dd/MM')#</span>" },
        { type: "workWeek", dateHeaderTemplate: "<span class='k-link k-nav-day'>#=kendo.toString(date, 'ddd dd/MM')#</span>" },
        { type: "month", selected: true },
        "agenda",
    ],
    timezone: "Etc/UTC",
    remove: function (e) {
        // 先阻止默认删除流程，等待用户确认
        e.preventDefault();
        
        // 创建自定义Kendo Dialog确认弹窗
        $("<div>").kendoDialog({
            title: "确认删除",
            content: "你确定要删除这个会话吗？",
            actions: [
                { text: "取消", action: function() { this.close(); } },
                { text: "删除", primary: true, action: function() {
                    // 用户确认后，执行删除操作
                    this.close();
                    $("#sessionScheduler").data("kendoScheduler").removeEvent(e.event);
                }}
            ],
            close: function() {
                // 弹窗关闭后销毁，避免重复创建
                this.destroy();
            }
        }).data("kendoDialog").open();
    }
});

代码说明 #

• e.preventDefault()：临时阻止默认删除行为，等待用户确认结果
• Kendo Dialog组件：保持和Scheduler一致的UI风格，自定义弹窗标题和内容
• 确认删除逻辑：用户点击“删除”时，调用removeEvent方法手动执行删除；点击“取消”则直接关闭弹窗，不执行删除

如果需要更简单的实现，也可以用原生confirm弹窗替代：

remove: function (e) {
    if (!confirm("你确定要删除这个会话吗？")) {
        e.preventDefault(); // 用户取消则阻止删除
    }
}

内容的提问来源于stack exchange，提问作者chosenOne Thabs