Drag events issue on scroll

[sureshb4u]

Describe the bug
Hi,
I have divided my day view into 15 mins slots and I have made the calendar scrollable.
Now on dragging an event from top to bottom the calendar is not scrolling automatically.
The event is coming along with the pointer but not dropping in the correct time.

Minimal reproduction of the problem with instructions

You can replicate the issue in the below link

Try to drag the event from 12 and drop it in 10 it will drop in some other time.

Screenshots

Versions
Angular 4

• @angular/core:
• angular-calendar:
• Browser name and version:

[arorakanav]

Hi, @mattlewis92 any solution to this issue facing the same issue.

[sureshb4u]

Hi,
@arorakanav11 I couldn't figure out a way to fix that but i just found a way to get the correct time when dropping.

I have used interact.io an external library to the hour segments.
Now i'm getting the correct segment where the event is dropped, Then i update that correct timing in the event timings changed method.

The only thing i felt is that the dragging lags a bit since two libraries are attached to the element.
(Note: if you try to remove mwlDraggable directive then it is fast, But the dropdata attribute will not work. Unfortunately interact.io is not providing any option like dropdata and we have to figure a way to get the event object)

[mattlewis92]

There's currently no support for auto scrolling when dragging and dropping, however I believe this library may be able to do the heavy lifting. If someone wanted to make a PR to the drag and drop lib that integrates the auto scroller lib that would be awesome 👍

[mattlewis92]

Should be fixed now in 0.27.5! (Note in the example you gave, you'll need to make the mwl-calendar-day-view component scrollable instead and add mwlDraggableScrollContainer to it so the drag and drop library knows which is the scrollable container)

[eshan1987]

Hi @mattlewis92,
I'm using the latest (0.27.11) mwl-calendar-day-view version and below is my code,

<div class="sp-calendar-scroll" mwlDraggableScrollContainer> <mwl-calendar-day-view [viewDate]="viewDate" [events]="events" [refresh]="refresh" [hourSegments]="2" (eventTimesChanged)="eventDropped($event)" (eventClicked)="eventClicked($event)" (dayClicked)="clickedDate = $event.day.date" (hourSegmentClicked)="hourSegmentClicked($event.date)" > </mwl-calendar-day-view> </div>

sp-calendar-scroll class enables scrolling for that div. I'm trying to drag and drop an external event to my calendar but my scrolling is not working. Could you please let me know what I'm doing wrong here.

[mattlewis92]

@eshan1987 can you make a runnable repro on stackblitz or something that shows the problem?