Schedule - How to allow drag/drop but disable moving items to different resources

[Justin Schnurer]

I have a ScheduleComponent with multiple levels of Resources and I have bound many events to the calendar. Additionally, I have enabled resizing and drag&drop for the events.

I would like to allow users to drag and drag events to change their date range, but I want to prevent​ users from dropping the events into different resources.

For example, if my Resources collection is Facilities, I have 1 row for each facility. Then in each facility's row, there are events bound to those facilities. I want the user to be able to drag/drop/resize the events' date ranges but DO NOT ALLOW the users to drag and drop the events into another facility.

How can I accomplish this?

[Ruksar Moosa Sait]

Hi Justin,

We have checked on your requirement and suggest you set args.cancel as true if the resource id in the appointment is not the same on actionBegin event of the Schedule is triggered as shown in the below code snippet.

onActionBegin(args) {

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

            var data = this.scheduleObj.activeEventData.event.TaskId;

            if (data != args.changedRecords[0].TaskId) {

                args.cancel = true;

            }

        }

    }

Sample: https://stackblitz.com/edit/react-et8peh-dlatmx?file=index.js

Kindly try the above sample and let us know if this meets your requirement.

Regards,

Ruksar Moosa Sait