Appointment Drag Time slot variations

[Shubham]

Hi,
Hope you and the team is doing well

There are two issues we are facing when implementing the appointment drag within angular sceduler.
First issue is whenever we are dragging the appointment, the time variation available are based on 

scheduleObj.timeScale.interval

supposidly if the timescale is 10 mins, we are able to drag appointment and change its time for each 5 mins
but if it is 30/60 mins we could only change it for  15/30 mins.
so the requirement is that we need to change the appointment drag time with 5mins variations keeping the timescale interval of 30mins.

second issue is we need to show the updated time when we are dragging the appointment, its happening now but only after the appointment has been dragged and placed. it needs to be shown sync with the action of drag as well.  (please give us quick help for this).
  
After going through the document several time, we couldn't comeup to a solution for our problem, please write us back for our query as soon as possible.

Also i am attaching the video of our query in case you need more elaborations based on query.
https://vimeo.com/569298707

Thanks

[Satheesh Kumar Balasubramanian]

Hi Shubham, 

  

Thanks for using Syncfusion Products. 

  

Query 1: 

  

We have validated your reported query "the requirement is that we need to change the appointment drag time with 5 mins variations" and suspect that you need to change the dragging appointment time interval. We have achieved your requirement by passing the appropriate values to the interval option within the dragStart event. 

  

UG: https://ej2.syncfusion.com/angular/documentation/schedule/appointments/#setting-drag-time-interval 

  

 

app.component.ts:

  

onDragStart(args: DragEventArgs): void { 

    args.interval = 5; // drag interval time is changed to 5 minutes 

  } 

Query 2: 

  

We have validated your reported query "we need to show the updated time when we are dragging the appointment" and suspect that you have directly assigned start and end time to the template. We have prepared a working sample for your reference which can be viewed from the following link. 

  

Sample: https://stackblitz.com/edit/angular-schedule-appointment-timeslots?file=app.component.html 

  

app.component.html:

<e-view option="Week"> 

    <ng-template #eventTemplate let-data> 

        <div class="e-appointment-details"> 

            <div class="inner-wrap"> 

                <div class="e-subject">{{data.Subject}}</div> 

                <div class="e-time">{{getTimeString(data.StartTime)}} 

                    - {{getTimeString(data.EndTime)}}</div> 

            </div> 

        </div> 

    </ng-template> 

</e-view> 

Kindly try the above sample and if you still face the issue please share the event template related code. 

Regards,

Satheesh Kumar B