Drag Events to Different Months

Scheduler
#1

Hello, is it possible to drag an event from Feb to May for example? thanks

#2

Hi,
Unfortunately, there is no built-in way to drag events between months in the scheduler, but you can do it with your custom code.
The easiest way is to change the month when you drag the event, depending on the location of the cursor in the document.
Here are general steps on how this can be done:

  1. You can detect event drag and drop using onEventDrag event
  2. Inside the handler, you have a drag mode (can be move and can be resized) and a mousemove HTML event.
  3. Using this HTML event you can check where the mouse pointer is relative to the Month view. If the user dragged the event close to the right or to the left edge - switch the scheduler to the next or to the previous month respectively.
    Here are some implementation notes about code in my snippet:
    In order to determine the position of the mouse relative to the scheduler, you can use getBoundingClientRect and event.clientX.
    You can get the current date via getState, add or subtract a month to it and switch the scheduler through setCurrentView method to the next or previous month.
    Here is a snippet:
    http://snippet.dhtmlx.com/5/15ac4db00
#3

Thanks Ales. I appreciate the help.

1 Like
#4

Thanks again for the help. We created a prototype and it works great. Dragging the event “flips” the monthly calendar to the next or previous months; then just release to the specific day. Awesome! Now I have customers asking if there is a way for the monthly view to “scroll” from the bottom of the page. I think they want to see more of a visual reaction on the page. Has anyone ever done this? I’m guessing the data would have to be loaded client side to be able to see the calendar scroll? Any help would be greatly appreciated.

#5

Hi,
there is no built-in way to change months in the Month view with scrolling. We have never done this before and this is a not trivial task that will take a lot of time. Unfortunately, I don’t have any kind of example of this feature.

#6

Thanks Ales. I appreciate your help.