Show confirmation box in dhtmlx scheduler onbeforeviewchange - scheduler

Question

I want to show the confirmation box before view change. So when user change date for scheduler I want to show confirmation box whether user want to redirect to another date or not.

Answer 1

The simplest solution would be to use window.confirm
It pauses code execution until user choses any option, so you can use simple if-else statement:
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;
});
demo: https://snippet.dhtmlx.com/140d2ff31
If you want a custom confirmation popup, which doesn't block the browser, you'll need to do a small workaround, since scheduler API doesn't support async event handlers:
1) when code enters onBeforeViewChange, you display the dialog and always return false from the handler in order to keep the same date
2) when the user confirms view change - you set some flag to temporary disable step 1 and call scheduler.setCurrentView from the callback. onBeforeViewChange runs again, you check the flag you've set and return true this time, allowing date change.
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;
});
demo: https://snippet.dhtmlx.com/a2b8b09b9