Feature request: improved D&D

[amazingmarvin]

Do you want to request a feature or report a bug?

I would like to request a feature. react-big-calendar looks great and I would love to use it in my app but the drag and drop needs to be polished first!

What's the current behavior?

react-big-calendar has a starter demonstrating the dragAndDrop addon.

• events can be resized by dragging an edge into a cell
• events can be moved by dragging them into a cell

What's the expected behavior?

It would feel more natural if:

• events should change size as you drag the edges, then have the new start/end time computed based on the final size
• events should move as you drag them, and should adjust start+end times based on how far you dragged them with the mouse, not just putting the start time in the cell you dropped in. In other words, if an event spans 4 "rows" in your day (e.g. 13:00-17:00) and you drag up from the middle of the bottom row up by one row it should move the event to 12:00-16:00, not set the start time to 15:00 as it would now.

I can make some gifs if this isn't clear, but if you fire up google calendar you can see a demo of how d&d should ideally work in react-big-calendar.

bounty

If someone is interested in implementing this, I would be happy to contribute $250 toward a bounty.

[ehahn9]

@amazingmarvin excellent aspirational goal. Regrettably I won't have more time to work on this for awhile so hopefully someone will pick up the baton.

IMO, the most difficult current behavior is the "origin" time for the DnD. Most users will expect the time slot under the mousedown to help determine the exact drop time. As you know, the current behavior (which is suboptimal) is that the event start time determines the drop time. From my personal (limited) experience, this is the thing most likely to confuse users.

You are correct also that the DnD animation could be better - including live re-rendering of the event during the DnD. This might introduce other problems, but it's a thoughtful suggestion nonetheless!

[bjenkins24]

+1 on this - Without a clean drag and drop, it makes react-big-calendar difficult to use in production.

The biggest issue for us is that the drop time for an event seems to be correlated with where the mouse is when it should be where the event appears on the page. The time in the dragging event should update as well before it's dropped.

Dragging an event larger or smaller should actually make the event div larger and smaller instead just having a dark placement div as well.

This looks close to the correct behavior of resizing at least: #382 (comment) - wasn't able to find that in the docs anywhere or in the PR it doesn't seem to work that way?

Along with google calendar - full calendar https://fullcalendar.io/ seems to do everything correctly.

[jquense]

Y'all we are definitely aware of the limitations of drag and drop. It's not a feature I've ever needed so working on it isnt a priority for me. Heck I didn't even add it originally

Luckily, lots of a folks from the community have provided an initial implementation and have made improvements over time as they've needed to stratch their itch. DnD really is a community add-on, all the way. And that's awesome.

I think having a thread like this we're folks can outline specific improvements they'd like to see is great, as well as bounties. I do want make sure tho expection are set. As the project owner I'm not likely to work on any of these features simply because I don't need them and don't have time to work on extra stuff.

I do hope tho folks new or old do see this and see a good opportunity to contribute as well as outline things they'd like, and know they are welcome to jump in on these things.

[jquense]

hehe, despite what i said above, I had a free moment on the weekend and was inspired with a simpler approach that gets most of the things wanted here 👍 .