disable events overlap and stacking

Question

Hi!Is it possible to disable the schedule from allowing events to overlap and from stacking  at the same time in the same resource? like if someone tries to drag and drop an event on the top on another event it wont stack and snap to the end of the event that was there already? IS there anything similar?

Venkateshwaran Saravanakumar · Answer

Hi Alexis,

Demo: https://ej2.syncfusion.com/vue/demos/#/bootstrap5/schedule/timeline-resource.htmlYes, it is possible
to customize the Scheduler according to your requirements by utilizing the isSlotAvailable
method of the Scheduler as shown in the below snippet. This method can be used
to check whether the given time range slots are available for event creation or
if they are already occupied by other events. Refer to the provided demo sample
for more details.

onActionBegin: function (args) {
                 
  if
  (args.requestType === 'eventCreate' ||
  args.requestType === 'eventChange') {
                     
  let data;
                     
  let scheduleObj
  = this.$refs.ScheduleObj;
                     
  if
  (args.requestType === 'eventCreate') {
                      
     data = args.data[0];
                     
  } else if (args.requestType === 'eventChange') {
                         
  data = args.data;
                     
  }
                     
  if
  (!scheduleObj.isSlotAvailable(data)) {
                         
  args.cancel = true;
                     
  }
                 
  }
             
  }

Regards,
Venkatesh

alexis garcia · Answer

hi, thanks for the help!

Is it possible that instead of canceling the action make the apointment that was dragged to 'snap' to the end of the event that was already there? drag/drop an event to the top of the other and it snaps to the end time?

Venkateshwaran Saravanakumar · Answer

Alexis,
Before we proceed with your query, we need to confirm whether you are
requesting to add the dragged appointment to the next available cell if an
appointment is found through the isSlotAvailable method, rather than
canceling the action. Please confirm if you are indeed asking for this, or if
we have misunderstood your requirement, kindly share more details about your
requirement.

alexis garcia · Answer

hi yes, i want it to go to the next slot available

Venkateshwaran Saravanakumar · Answer

Alexis,

Sample: https://stackblitz.com/edit/vue-overlapping-events-w5nbtn?file=src%2FApp.vueYou can achieve your
requirement by utilizing isSlotAvailable
method and dragStop
property as shown in the code snippet below.[App.vue]

onDragStop: function (args) {
                  let scheduleObj = this.$refs.ScheduleObj;
                  var available = scheduleObj.isSlotAvailable(args.data);
                  var apptDur = args.data.EndTime - args.data.StartTime
                  while (!available) {
                      args.data.StartTime = new Date(args.data.StartTime.getTime() + 30 * 60000);
                      args.data.EndTime = new Date(args.data.StartTime.getTime() + apptDur);
                      available = scheduleObj.isSlotAvailable(args.data);
                  }
              },