在 dhtmlx 调度程序 onbeforeviewchange 中显示确认框

Question

我想在视图更改之前显示确认框。因此，当用户更改调度程序的日期时，我想显示确认框，以确定用户是否要重定向到另一个日期。

Answer 1

最简单的解决方案是使用 window.confirm

它会暂停代码执行，直到用户选择任何选项，因此您可以使用简单的 if-else 语句：

scheduler.attachEvent("onBeforeViewChange", function (oldMode, oldDate, mode, date) {
    if (oldMode && oldDate) {
        if (oldMode !== mode || oldDate.valueOf() !== date.valueOf()) {
            if (confirm("are you sure?")) {
                return true;
            }
            return false;
        }
    }

    return true;
});

演示：https://snippet.dhtmlx.com/140d2ff31

如果您想要一个不阻塞浏览器的自定义确认弹出窗口，您需要做一个小的解决方法，因为调度程序 API 不支持异步事件处理程序：

1) 当代码进入 onBeforeViewChange 时，您显示对话框并始终从处理程序 return false 以保持相同的日期

2) 当用户确认视图更改时 - 您设置一些标志以暂时禁用步骤 1 并从回调中调用 scheduler.setCurrentView。 onBeforeViewChange 再次运行，您检查您设置的标志和 return true 这次，允许更改日期。

var callbackViewChange = false;
scheduler.attachEvent("onBeforeViewChange", function (oldMode, oldDate, mode, date) {
    if (oldMode && oldDate) {
        // 
        if (!callbackViewChange && (oldMode !== mode || oldDate.valueOf() !== date.valueOf())) {
            dhtmlx.confirm({
                text: "are you sure?",
                callback: function (result) {
                    if (result) {
                        // set the flag in order to allow view change
                        callbackViewChange = true;
                        scheduler.setCurrentView(date, mode);
                        callbackViewChange = false;
                    }
                }
            });
            // cancel view change while we wait for user action
            return false;
        }
    }
    return true;
});

演示：https://snippet.dhtmlx.com/a2b8b09b9

在 dhtmlx 调度程序 onbeforeviewchange 中显示确认框

Show confirmation box in dhtmlx scheduler onbeforeviewchange

scheduler

dhtmlx