We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date

Prevent new appointment window from closing after save click


I need to check some information of the new appointment window in my database when the save button is clicked.

After that, if there's something that can block that appointment, I need to show a message to the user and don't close the appointment window.

I tried using the onActionBegin(args) function with no success.

How can I do that?

Thank you very much!

7 Replies

KK Karthigeyan Krishnamurthi Syncfusion Team December 18, 2018 04:49 AM UTC

Thank you for contacting Syncfusion support. 
We have prepared the below sample to prevent the event window from closing after the insert action is prevented. In the below sample, when an event is saved with the subject as New, then save action is prevent by setting args.cancel to true with in actionbegin event. 
<ejs-schedule id="schedule" height="100%" actionbegin="onActionBegin" databound="onDataBound"> 
        <e-data-manager url="/Home/LoadData" crudurl="Home/UpdateData" adaptor="UrlAdaptor" crossdomain="true"> 
var flag = false; 
function onActionBegin(args) { 
    if (args.requestType === 'eventCreate' || args.requestType === 'eventChange') { 
        var subject = (args.requestType === 'eventCreate') ? args.data[0].Subject : (args.data).Subject; 
        if (subject == 'New') { 
            args.cancel = true; 
            flag = true; 
function onDataBound() { 
    var scheduleObj = document.getElementById('schedule').ej2_instances[0]; 
    scheduleObj.eventWindow.dialogObject.beforeClose = function (args) { 
        args.cancel = flag; 
        flag = false; 
        alert("Don't Close the Appointment Window"); 

GP Gregory Perozzo December 18, 2018 07:38 PM UTC

Hello Karthigeyan,

That's exactly what I needed! Perfect.

I was wondering if it's possible to manually activate a field validation by code like this:

Example: if the user type an wrong date or time, I need to validate it. What's the best way of doing it? Today I only validate the field length by doing this:

var DateValidation = new Dictionary<string, object>() { { "required", true }, { "minLength", 16 }, { "maxLength", 16 } };

But if the user type a date and time like this it works because of the length, but the date and time are wrong:

How can I achieve it?

KK Karthigeyan Krishnamurthi Syncfusion Team December 19, 2018 12:28 PM UTC

Hi Gregory, 
Thanks for your update. 
By default, in Datepicker control, we can allow only valid date value using strictMode API and for the same we have prepared the below sample. 
var startElement = args.element.querySelector('#StartTime'); 
if (!startElement.classList.contains('e-datetimepicker')) { 
    new ej.calendars.DateTimePicker({ strictMode:true , value: new Date(startElement.value) || new Date() }, startElement); 
var endElement = args.element.querySelector('#EndTime'); 
if (!endElement.classList.contains('e-datetimepicker')) { 
    new ej.calendars.DateTimePicker({ strictMode: true,  value: new Date(endElement.value) || new Date() }, endElement); 
Note: strictMode will automatically correct the date format when the date picker lost its focus.   

GP Gregory Perozzo December 26, 2018 07:36 PM UTC

Hello Karthigeyan,

That's just perfect. Again, exactly what I needed. Thank you very much!

Sorry for the late response.

Have a nice day and wish you a happy new year!

NR Nevitha Ravi Syncfusion Team December 31, 2018 06:20 AM UTC

Hi Gregory, 

Thanks for your update and we are glad that our provided solution fulfilled your requirement.  

We wish you too a very happy and fantastic new year. 


GA Gene Allen September 7, 2022 03:54 AM UTC

This approach isn't working anymore as of 09/06/2022.

Is there an updated method?

RM Ruksar Moosa Sait Syncfusion Team replied to Gene Allen September 12, 2022 07:27 AM UTC

Hi Gene,

We have checked on your query and let you know that the Date Time Picker component is working fine with strictMode using the latest version. Please find the below sample for your reference.

Sample: https://stackblitz.com/edit/48exnr-6tvce5?file=index.js,index.html

Documentation: https://ej2.syncfusion.com/documentation/api/datetimepicker/#strictmode

Let us know if you need further assistance.


Ruksar Moosa Sait

Live Chat Icon For mobile
Up arrow icon