Event before "Popup" close

Question

I have few questions1. How to detect event before popup close , I need to check if EndTime < StartTime to prevent popup close2. When drag and drop task feature launchThanks

Velmurugan S · Answer

Hi Nest,

Thanks for Contacting Syncfusion support.

Please find the following response for your queries:

Query #1: How to detect event before popup close , I need to check if EndTime < StartTime to prevent popup close.

By default, there is a built-in support in our JS2 Scheduler to validate the end time and start time field values, while creating or editing the appointment through editor window. If this validation fails, you won't be able to proceed with further appointment save action or closing of editor window. Please refer to the following ways of validation.

Alert Message display:

The alert window will be displayed with validation message as shown below when the EndTime value is less than the StartTime value while clicking on the Save button and the popup will be in open status.

Another way to enable field validation:

You can validate the appointment start and end time field values using the validation rules support. This method will also prevent the editor window from closing, if validation fails. Please refer to the following code example to implement the field validation.

import * as React from 'react';

import './App.css';

import {

ScheduleComponent, Day, Week, WorkWeek, Month, Agenda, Inject, EJ2Instance

} from '@syncfusion/ej2-react-schedule';

import { DateTimePicker } from '../node_modules/@syncfusion/ej2-calendars';

export default class App extends React.Component<{}, {}> {

---------------------

public render() {

return (

<ScheduleComponent popupOpen={this.onPopupOpen} eventSettings={{

dataSource: this.data,

fields: {

id: 'Id',

subject: { name: 'Subject' },

isAllDay: { name: 'IsAllDay' },

startTime: { name: 'StartTime' },

endTime: { name: 'EndTime', validation: { required: true, minLength: [this.minValidation, 'The selected end date occurs before the start date.'] } }

}

}} width="100%">

</ScheduleComponent>

);

}

public minValidation: (args: { [key: string]: string }) => boolean = (args: { [key: string]: string }) => {

const startElement: HTMLElement = document.getElementsByName("StartTime")[0] as HTMLElement;

const startDateObj: DateTimePicker = ((startElement as EJ2Instance).ej2_instances[0] as DateTimePicker);

const startValue: Date = startDateObj.value;

const endElement: HTMLElement = document.getElementsByName("EndTime")[0] as HTMLElement;

const endDateObj: DateTimePicker = ((endElement as EJ2Instance).ej2_instances[0] as DateTimePicker);

const endValue: Date = endDateObj.value;

return endValue.getTime() > startValue.getTime();

};

}

We have prepared the sample with the above code example, which can be downloaded from the following location.

http://www.syncfusion.com/downloads/support/forum/139071/ze/ScheduleValidation108883709

In the above sample, when the end time value greater than the start time value appointment will be created and displayed in the Schedule control. If the end time value is less than the start time value the validation message will be displayed under the end time field (End time DateTimePicker) display as shown below.

Kindly try with the above sample and code example. Also, please let us know, in which specific scenario you need to prevent the popup close in your application apart from the above mentioned cases. Based on your provided information, we will check and provide you the other possibilities.

Query #2: When drag and drop task feature launch.

We have planned to include the drag and drop feature in our upcoming main release Volume 3, 2018.

Please let us know if you need any further assistance on this.

Regards,

Velmurugan