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

Giruga

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!

Reply | Reply with quote

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,

https://stackblitz.com/edit/angular-cicfqz-f8cmyf?file=app.component.ts

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.

Regards,

Hareesh

Reply | Reply with quote

Giruga

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!

Reply | Reply with quote

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.

Regards,

M.Vinitha devi

Reply | Reply with quote

Thread ID:	Created:	Updated:	Platform:	Replies:
148779	Nov 4,2019 10:49 AM UTC	Nov 7,2019 07:03 AM UTC	Angular - EJ 2	3

Thread ID:

Created:

Updated:

Platform:

Replies:

Please sign in to access our forum

CONTACT US