React-calendar-timeline: Drag & drop item from one timeline calendar to other

[thamanchand]

Hi,
Let's say I have two timeline calendars, is it possible to drag & drop item from one calendar to other? I would appreciate if anyone can provide me a hint/pointers.

Thanks

[thamanchand]

Need suggestions/pointers for my question! Anyone? I am thinking of using this library for drag and drop item between two timeline calendar but before that I want to know if it's possible.

[foufee]

I have managed to extend react-calendar-timeline to support Drag and drop from a tree view (treebeard), so I expect that drag and drop from another calendar would be quite possible, unfortunately my fork of the timeline is from quite a while ago, however, I expect that in the coming month I will be updating my fork to use 0.15. I ended up adding several extension points for handling drop events on the timeline, and the groups.

[thamanchand]

Hi @foufee i am still stuck with the drag and drop between two time calendars. Do you have time to update fork? Let me know the status!

Thanks

[ashishkvr]

Yes, i too struck with drag & drop of items between two calenders

[msand]

I've implemented a proof of concept for drag & drop unto the timeline from outside of it here: https://github.com/msand/react-calendar-timeline/commit/e2c72b0167a0776d44162d6adbf27fe2669aeb05
@mcMickJuice What do you think of this? Any suggestions how to improve it? Is it alright to depend on these internals? Or should the logic be moved inside the Timeline component?

[richardgirges]

@msand that is almost exactly what I was looking for! But there is one issue: when you scroll through the timeline, or zoom in/out of the timeline, the drop starts to become inaccurate. I'm noticing that the event is placed at a later time than intended. It doesn't happen if I load the demo and drag+drop without zooming or scrolling through the timeline first

[msand]

@richardgirges How about this? https://github.com/namespace-ee/react-calendar-timeline/commit/39d5a8a794c7d0189210248c962ca35eea96b366
https://github.com/namespace-ee/react-calendar-timeline/compare/master...msand:drag-n-drop-unto-timeline

[richardgirges]

@msand it works perfectly!!! I'm able to zoom and scroll freely and the drop is always accurate! Awesome work, thanks so much!

Would be great to get this into the demo codebase or at least document it somewhere, as this seems to be a recurring request. (see #200, #60, #477)

[msand]

Refactored into a reusable component: https://github.com/msand/react-calendar-timeline/commit/4d26362900c6d384a235acf297b8e85e30419e0c
https://github.com/msand/react-calendar-timeline/tree/drag-n-drop-unto-timeline

[msand]

Draggable component:
https://github.com/namespace-ee/react-calendar-timeline/blob/db539d023f3c62cc4e212e42e29a8f6409b6baf6/demo/app/demo-main/index.js#L2-L103

Usage:
https://github.com/namespace-ee/react-calendar-timeline/blob/db539d023f3c62cc4e212e42e29a8f6409b6baf6/demo/app/demo-main/index.js#L235-L293

[Ilaiwi]

@msand this looks really exciting. I will take a look at this ASAP and maybe document it somehow

[mcMickJuice]

I strongly recommend that we add this example to the examples/README.md and not to the project readme.

This should be treated as a recipe and not something that our library supports. Otherwise we're going to get a ton of issues related to this specific feature (this happened with the tree-view example).

Just my 2 cents. I know I haven't been involved in this project for months now but for your sake @Ilaiwi , this is my recommendation.