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
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:

Created:

Updated:

Platform:

Replies:

148779 Nov 4,2019 10:49 AM UTC Jan 6,2021 01:30 PM UTC Angular - EJ 2 5
loading
Tags: Schedule
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!

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. 

Regards, 
Hareesh 


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!

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    


Ervis Trupja
Replied On 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?

Hareesh Balasubramanian [Syncfusion]
Replied On 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 


CONFIRMATION

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