Drag interval

[Ivan]

Hello, 

I'm trying to setup smaller interval for Drag and resize event on Scheduler. 

I have this setup:

dragStart: function (args) {
   args.interval = 30;
},timeScale: {
   enable: true,
   interval: 30,
   slotCount: 2
}

this combination works ok, but if I set args.interval = 5; Only on margin times event drag is ok (eg. 09:00, 09:30) but on 9:10, 9:20 is not ok - wrong time is selected.

I want to achieve that I can have events that will have duration minimum 5 minutes - with timescale interval 15min ( config above ). Is this possible?

9:00 - 9:05 -- Appointment1

9:05 - 9:15 -- Appointment2

with config above event  is created with good time, but representation is not ok, it has a height of event interval block - 15min in this case. 

Edit: I know for option in timescale: 60 - 6, but for me is important that 1h interval is not higher than 200px.

Edit2: Also, is it possible to have drag only on end of event?

Tnx!

[Vinitha Devi Murugan]

Hi Nikola, 

 

Syncfusion Greetings 

 

We could reproduce the reported issues of  ”wrong timing update on dragging and height of 15 min event occupies the half an hour ” and logged the below bug reports and fix will be included in our JS2 weekly release on November 12, 2019. We will ensure the fix and provide further details on November 13, 2019. Kindly be patience until then. 

 

https://www.syncfusion.com/feedback/9346/a-15-minute-event-occupies-the-space-of-half-an-hour-in-event-list-in-default  

https://www.syncfusion.com/feedback/9721/drag-element-updated-wrongly-when-change-the-dragstart-interval  

You can decrease the height of work cell by using below CSS. For the same we have prepared below sample in which we used timescale 60 – 6. 

https://stackblitz.com/edit/angular-geblx6-srtkes?file=main.ts  

.e-schedule .e-vertical-view .e-time-cells-wrap table td, 

.e-schedule .e-vertical-view .e-work-cells { 

    height: 30px; 

} 

 

 

Edit2: Also, is it possible to have drag only on end of event? 

Can you please confirm whether your requirement is to only allow resizing of the event endTime. 

 

Regards, 

M.Vinitha devi 

[Ivan]

Hello,

Tnx for answer and explanations. 

For a drag start interval - I will wait update

15min event - half hour --  I solved the problem by using an EventRendered event 

eventRendered: function (args) {
   if(_scheduler.currentView != 'Month') {
      // calendarStep is 30 or 60, timscaleSlot valua is set to 2
      let _cellDuration = calendarSettings.calendarStep / 2;
      if (args.data.Duration < _cellDuration) {
         args.element.style.height = args.data.Duration * 50 / _cellDuration +'px';
      }
   }
}

Because of smaller total event height I need to remove resize/drag top placeholder and resize bottom placeholder ( Edit2 )

.e-schedule .e-event-resize.e-top-handler {
   display: none!important;
}

.e-schedule .e-event-resize.e-bottom-handler {
   height: 5px!important;
}

[Vinitha Devi Murugan]

Hi Nikola, 

 

Thanks for your update. 

 

We're happy you've found the solution to remove the events top handler. 

 

Note: You can't resize the event startTime if you remove the top event handler. 

 

Regards, 

M.Vinitha devi 

[Ivan]

Hello, 

i see that you fixed wrong drag time calculation. 

I notice one new problem - different start time based on position of pointer in moment when drag event start. 

Example: event duration 2h, drag interval 10min

pointer is positioned on half (1h)

Drag for one step will not update start time + 10 min. it will add 1h and 10min.

if pointer is on top of event, everything will work ok.

[Vinitha Devi Murugan]

Hi Ivan, 

 

Syncfusion Greetings. 

 

We could reproduce the reported issue and logged the below bug report and fix will be included in our upcoming Volume 4 SP release which is expected to roll out by end of December 2019. We would appreciate your valuable patience until then 

 

https://www.syncfusion.com/feedback/10359/drag-action-is-not-working-properly 

 

Regards, 

M.Vinitha devi 

[Ivan]

Hello, 

did you fix that problem? 

It is still present in last ej2 available via CDN.

When draging is droped at something like 9:05, od 9:10. and ceil height is set to 15min, drag interval to 5min.

Video in atttachment.

dragStart: function (args) {
   args.interval = 5;
   args.cancel = args.data.NoShow;
},

Attachment: syncfusion_schedule_drag_bug_be86a1aa.zip

[Vengatesh Maniraj]

Hi Ivan, 

Sorry for the inconvenience. 

Our Volume 4 SP1 release is rescheduled to the end of January 2020. We will fix and include our solution in that volume release. We would appreciate your valuable patience until then. 

Kindly revert us for further assistance. 

Regards, 

Vengatesh