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. Image for the cookie policy date

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

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!

5 Replies

HB Hareesh Balasubramanian Syncfusion Team 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. 

Regards, 
Hareesh 



GI Giruga 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!


VD Vinitha Devi Murugan Syncfusion Team 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    



ET Ervis Trupja January 5, 2021 12:21 PM UTC

Hello Giruda,

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


HB Hareesh Balasubramanian Syncfusion Team January 6, 2021 01:30 PM UTC

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. 

    <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 


Loader.
Live Chat Icon For mobile
Up arrow icon