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

[Giruga]

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]

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 

[Giruga]

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]

Hi Giruga, 

 

Thanks for your update. 

 

We are happy to hear that our solution has fulfilled your requirement.  

 

Regards, 

M.Vinitha devi    

[Ervis Trupja]

Hello Giruda,

You said that "I have managed to dynamically restrict the 'working hours' to be entity specific.". How did you do that?

[Hareesh Balasubramanian]

Hi Ervis, 

Greetings from Syncfusion Support..! 

We have validated your shared scenario at our end and suspect that your requirement is to apply work hours for the resources on May 26, 2018 (Saturday). By default the work hour have been applied for the work days alone and we have maintained Saturday and Sunday as holidays (non-working days), so that in your case work hours in May 26 is not highlighted . If you need to apply work hour for those days, then you need to apply workDaysField for those resources and for the same we have prepared a sample, which can be viewed from the following link. 

Sample: https://stackblitz.com/edit/angular-customized-workhour-sample?file=app.component.ts  

    <ejs-schedule 

      #scheduleObj 

      width="100%" 

      cssClass="timeline-resource-grouping" 

      height="650px" 

      [selectedDate]="selectedDate" 

      [group]="group" 

    > 

      <e-resources> 

        <e-resource 

          field="TaskId" 

          title="Category" 

          [dataSource]="categoryDataSource" 

          [allowMultiple]="allowMultiple" 

          name="Categories" 

          textField="text" 

          idField="id" 

          groupIDField="groupId" 

          colorField="color" 

          workDaysField="workDays" 

          startHourField="startHour" 

          endHourField="endHour" 

        > 

        </e-resource> 

      </e-resources> 

      <e-views> 

        <e-view option="TimelineDay"></e-view> 

        <e-view option="TimelineWeek"></e-view> 

        <e-view option="TimelineWorkWeek"></e-view> 

        <e-view option="TimelineMonth"></e-view> 

        <e-view option="Agenda"></e-view> 

      </e-views> 

   </ejs-schedule> 

  public categoryDataSource: Object[] = [ 

    { 

      text: "Nancy", 

      id: 1, 

      groupId: 1, 

      color: "#df5286", 

      startHour: "08:00", 

      endHour: "16:00", 

      workDays: [1, 2, 3, 4, 5, 6] 

    }, 

    { 

      text: "Steven", 

      id: 2, 

      groupId: 1, 

      color: "#7fa900", 

      startHour: "10:00", 

      endHour: "15:00", 

      workDays: [1, 2, 3, 4, 5, 6] 

    }, 

    { 

      text: "Robert", 

      id: 3, 

      groupId: 2, 

      color: "#ea7a57", 

      startHour: "12:00", 

      endHour: "14:00", 

      workDays: [1, 2, 3, 4, 5, 6] 

    }, 

    { 

      text: "Smith", 

      id: 4, 

      groupId: 2, 

      color: "#5978ee", 

      startHour: "06:00", 

      endHour: "12:00", 

      workDays: [1, 2, 3, 4, 5, 6] 

    }, 

    { 

      text: "Micheal", 

      id: 5, 

      groupId: 3, 

      color: "#df5286", 

      startHour: "07:00", 

      endHour: "18:00", 

      workDays: [1, 2, 3, 4, 5, 6] 

    }, 

    { 

      text: "Root", 

      id: 6, 

      groupId: 3, 

      color: "#00bdae", 

      startHour: "08:00", 

      endHour: "20:00", 

      workDays: [1, 2, 3, 4, 5, 6] 

    } 

  ]; 

Kindly try the above solution and get back to us if you need any further assistance. 

We will happy to assist you. 

Regards, 

Hareesh