Prevent new appointment window from closing after save click

[Gregory Perozzo]

Hello,

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!

[Karthigeyan Krishnamurthi]

Hi Gregory, 

 

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. 

http://www.syncfusion.com/downloads/support/forum/141540/ze/Sample412287492 

 

<ejs-schedule id="schedule" height="100%" actionbegin="onActionBegin" databound="onDataBound"> 

    <e-schedule-eventsettings> 

        <e-data-manager url="/Home/LoadData" crudurl="Home/UpdateData" adaptor="UrlAdaptor" crossdomain="true"> 

        </e-data-manager> 

    </e-schedule-eventsettings> 

</ejs-schedule> 

 

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"); 

    } 

} 

 

Regards, 

Karthigeyan 

[Gregory Perozzo]

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?

[Karthigeyan Krishnamurthi]

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. 

https://npmci.syncfusion.com/development/javascript/documentation/api/datepicker/datePicker?no-cache=1#strictmode-code-classlanguage-textbooleancode 

http://www.syncfusion.com/downloads/support/forum/141540/ze/validationSample-943189378 

 

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.   

 

Regards, 

Karthigeyan 

 

 

[Gregory Perozzo]

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!

[Nevitha Ravi]

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. 

Regards, 

Nevitha. 

[Gene Allen]

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

Is there an updated method?

[Ruksar Moosa Sait]

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.

Regards,

Ruksar Moosa Sait