Calendar Scroll when dragging event

Scheduler Javascript
#1

Currently we have calendars that are set from 6am to 10pm so the calendar needs to be scrolled to see the later time slots.

The problem we are having is that when you drag an event from, say 8am and you want to move it to 8pm, the calendar doesn’t scroll as you drag. Because of this, we are required to drag it as far as we can see, drop it, scroll the calendar down to see the later times, then drag it again.

Is there any fix for this behavior so that the calendar will scroll as you are dragging an event?

Thanks in advance

#2

Currently there is no any solutions, we will check how it can be improved in the future.
( you can decrease size of hour cell, to make all cells visible, but it is hardly a good solution )

#3

Any improvement on this? I’m having the same problem.
Thanks!

#4

Is this feature now available? If it is not, what is the alternative?

#5

Hello @shyamal890,

In the current version of the scheduler(v5.3.6), you can scroll the view while dragging the event.

The scrolling behavior is different in different views:

In the “Day/Week” view you can scroll the view by mouse wheel while dragging the event.

In the “Timeline” view, when the scrollable: true, the view will be scrolled automatically when you will drag the event to the edge of the screen.

You can test it in the following demo:
http://snippet.dhtmlx.com/5/e67660aba

1 Like
#6

That works! Thanks a lot.

#7

In Timeline view scrollable:true creates another issue. The column width is no longer shrink to fit depending on the viewport size.

How to enable scroll on drag as well as dynamic column width to fit the time scale?

Just to put this in context. I need to drag event vertically to another section and not horizontally.

#8

Hello @shyamal890,

There is no built-in functionality for that when the “scrollable: true”, but it can be implemented through custom code.
By default, you can set the column width of the timeline view through the column_width property. So, if you want to make it auto resizable depending on the screen size, all that you need is to change the hardcoded property to the function which will return the calculated width.

The code may look like this fragment:

var calculatedColumnWidth = () => {
  var schedulerWidth = document.querySelector("#scheduler_here").offsetWidth;
  return schedulerWidth/7
}; 

scheduler.attachEvent("onAfterSchedulerResize", function(){
  if( scheduler.getView().name == "timeline")
    scheduler.getView().column_width = calculatedColumnWidth();
});

scheduler.createTimelineView({
  ...
  scrollable: true,
  column_width: calculatedColumnWidth()
  ...
});

Here is a demo:
http://snippet.dhtmlx.com/5/7e67c7af4

The “scroll on drag” functionality by default, will be added in the future updates, unfortunately, I can’t give you any ETA. I will post in this topic when this feature will be implemented.

1 Like