How to stop overlapping of events

Question

Suppose I have created an event from 9-10am .Then I should not be able to create another event under that time stamp (9-10am).

Velmurugan S · Answer

Dear Customer, Thanks for Contacting Syncfusion support. We have prepared the sample to achieve your requirement for preventing the overlapping appointment creation by using our public method “isSlotAvailable” and “actionBegin” event, which can be downloaded from the following location. http://www.syncfusion.com/downloads/support/forum/137662/ze/SchedulePreventingAppCreation2031637543 In the above sample, we have prevented the appointment creation within the onActionBegin method by setting the args.cancel value as true. Please refer to the following code example used in the above sample.



 

app.component.html:

 



 

app.component.ts:

 

onActionBegin(args: ActionEventArgs) { // Here checking
the appointment creation time is available or not, and proceed to create the
appointment if available.    

    if (args.requestType === "eventCreate") {

     
let eventData: any = args.data;

     
let scheduleElement: Element = document.querySelector('.e-schedule');

     
let scheduleObj: Schedule = ((scheduleElement as EJ2Instance).ej2_instances[0] as Schedule);

     
if (!scheduleObj.isSlotAvailable(eventData.StartTime, eventData.EndTime)) // Here the
isSlotAvailable public method used to check for the availability
of the mentioned time slot

       
args.cancel = true;

   
}

  }

Also, we request you to look into our below UG link to know about the isSlotAvailable method and actionBegin event. isSlotAvialable: https://ej2.syncfusion.com/16.1.37/documentation/schedule/api-schedule.html?lang=typescript#isslotavailable actionBegin: https://ej2.syncfusion.com/16.1.37/documentation/schedule/api-schedule.html?lang=typescript#actionbegin Kindly try with the above sample and let us know if you need any further assistance on this. Regards, Velmurugan

Marcin · Answer

Hello,Quick question: can I use a similar approach to exclude slots that are occupied by repeating reservations? It doesn't seem to work when on any other day than the Recurrence Master event is placedThanks and best regards

Vengatesh Maniraj · Answer

Dear Customer, 
 
Thanks for the update. 
 
Yes. We can exclude the slots that are occupied by repeating reservations by setting args.cancel as true in actionBegin events like below code snippet. 
 
Sample: https://stackblitz.com/edit/angular-1xkjn4?file=app.component.ts 
 




onActionBegin(args: ActionEventArgs) { 
    if (args.requestType === "eventCreate" || args.requestType === "eventChange") { 
      let eventData: any = !isNullOrUndefined(args.data[0]) ? args.data[0] : args.data; 
      let scheduleElement: Element = document.querySelector('.e-schedule'); 
      let scheduleObj: Schedule = ((scheduleElement as EJ2Instance).ej2_instances[0] as Schedule); 
      if (!scheduleObj.isSlotAvailable(eventData.StartTime, eventData.EndTime)) 
        args.cancel = true; 
    } 
  } 
 
 
Kindly try the above sample and revert us for further assistance. 
 
Regards, 
Vengatesh

Shanilka · Answer

actually, this sample project and the code not working as expected. preventing overlapping is working but other drag and drop features are not working properly. I applied this for multiple resource with events.

Vengatesh Maniraj · Answer

Hi Shanilka, 

Thanks for the update. 

We have validated the reported problem at our end and we suspect that you never used groupIndex parameter in isSlotAvailable method. Kindly change your condition like below, 

let groupIndex: number = scheduleObj.eventBase.getGroupIndexFromEvent(args.data as any); 
if (!scheduleObj.isSlotAvailable(eventData.StartTime, eventData.EndTime,groupIndex)) 
   args.cancel = true; 

Sample: https://stackblitz.com/edit/angular-1xkjn4-j7ny8v?file=app.component.ts 

Kindly try the above sample and revert us for further assistance. 

Regards, 
Vengatesh

Kübra · Answer

Hi,https://stackblitz.com/edit/angular-1xkjn4-j7ny8v?file=app.component.ts this sample works as expected but there is some problem in the following scenario:1- I have added an event in a time slot.2- I have updated that event.3- I have tried to add another event in the same slot and it added successfully.In this scenario 2 events can be added in the same time slot.Also, I want to disable popup opening in the beginning if there is an appointment. How can I achieve this?Thanks

Hareesh Balasubramanian · Answer

Hi Kübra, 

Thanks for the update. 

We have modified your shared sample based on your shared queries “need to prevent the events update in the already existing event and need to prevent the editor window/quick info popup in an existing slots” using actionBegin and popupOpen events of the scheduler, which can be viewed from the following link. 

Sample: https://stackblitz.com/edit/angular-customized-scheduler-slotavaliable-sample?file=app.component.ts 





  public onActionBegin(args: ActionEventArgs): void { 
    if ( 
      args.requestType === "eventCreate" || 
      args.requestType === "eventChange" 
    ) { 
      let eventData: any = !isNullOrUndefined(args.data[0]) 
        ? args.data[0] 
        : args.data; 

      args.cancel = !this.scheduleObj.isSlotAvailable(eventData); 
    } 
  } 
  public onPopupOpen(args: PopupOpenEventArgs): void { 
    if (args.type == "QuickInfo" || args.type == "Editor") { 
      args.cancel = !this.scheduleObj.isSlotAvailable(args.data); 
    } 
  } 

Kindly try the above solution and get back to us if you need any further assistance. 

We will be happy to assist you..! 

Regards, 
Hareesh