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. (Last updated on: June 24, 2019).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

Preventing Schedule appointment resize + drag&drop outside 'working hours'

Thread ID:





148779 Nov 4,2019 10:49 AM UTC Nov 7,2019 07:03 AM UTC Angular - EJ 2 3
Tags: Schedule
Asked On November 4, 2019 11:55 AM UTC

I am creating a scheduler for Sauna bookings.

The saunas have their own individual times to be 'reservable' (Ie. Sauna 1 can be reserved on weekdays from 14:00 to 21:00, Sauna 2 can be reserved on same days from 07:00 to 15:00)

I have managed to dynamically restrict the 'working hours' to be entity specific.
I have also managed to prevent duplicate reservations on same time slot (using .isSlotAvailable())
I have also managed to restrict the creation of an appointment/'reservation' within working hours (canceled the popUp event if the target cell does not have class .e-work-hours)

Now I am stuck. I do not know how to prevent 'dragging' or resizing the 'reservation' outside the working hours.

I have a validation in the backend CRUD events, so when a change happens, the validation will prevent the reservation change, and the backend will return error code, but the change in the scheduler view still implies that the change did happen (it changes and stays in the UI until I reload the page).

What is - in Your opinion - best way to prevent users from drag&drop or to resize an existing reservation outside working hours?

Or could the .isSlotAvailable be extended to have optional parameter etc for 'working hours affect availability'?

TL;DR; Is there a way to prevent Drag&Drop and Resize outside the scheduler working hours?

Thanks in advance!

Hareesh Balasubramanian [Syncfusion]
Replied On November 5, 2019 02:16 PM UTC

Hi Giruga, 

Greetings from Syncfusion Support. 

Based on the requirement we have prepared a sample using actionBegin event and the same can be viewed from the following link, 

  onActionBegin(args: ActionEventArgs): void { 
    let isEventChange: boolean = (args.requestType === 'eventChange'); 
    if ((args.requestType === 'eventCreate' && (<Object[]>args.data).length > 0) || isEventChange) { 
      let eventData: { [key: string]: Object } = (isEventChange) ? args.data as { [key: string]: Object } : 
        args.data[0] as { [key: string]: Object }; 
      let eventField: EventFieldsMapping = this.scheduleObj.eventFields; 
      let startDate: Date = eventData[eventField.startTime] as Date; 
      let endDate: Date = eventData[eventField.endTime] as Date; 
      let resourceIndex: number = [1, 2, 3].indexOf(eventData.DoctorId as number); 
      args.cancel = !this.isValidateTime(startDate, endDate, resourceIndex); 
      if (!args.cancel) { 
        args.cancel = !this.scheduleObj.isSlotAvailable(startDate, endDate, resourceIndex); 

Kindly try the above sample, if you have any concerns please revert us back for further assistance. 


Replied On November 6, 2019 07:14 AM UTC

Greetings Hareesh!

And thank you for your kind advice!

I was able to solve my puzzle with this, thank you so much!

Have a nice week!

Vinitha Devi Murugan [Syncfusion]
Replied On November 7, 2019 07:03 AM UTC

Hi Giruga, 
Thanks for your update. 
We are happy to hear that our solution has fulfilled your requirement.  
M.Vinitha devi    


This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Please sign in to access our forum

This page will automatically be redirected to the sign-in page in 10 seconds.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

Live Chat Icon For mobile
Live Chat Icon