React-big-calendar: cannot specify EventWrapper if withDragAndDrop is used

[sigod]

DraggableEventWrapper.js#L32

Can it be fixed?

[jquense]

Feel free to send a PR!

[abelosorio]

Is this fixed?

I have the same issue and I can't find how to solve it.

Thanks

[TomasHubelbauer]

Aw man, I was hoping this had a real solution. I will try to PR this if it is simple enough to contribute to this repository, alternatively I will post any faster workaround if I can find one. Looks like reimplementing DnD on top of a custom EventWrapper could also be an option to consider for anyone who needs this combination to work fast.

[TomasHubelbauer]

@jquense can you please reopen this? This is a legitimate issue without a solution.

[TomasHubelbauer]

The up-to-date link is

https://github.com/intljusticemission/react-big-calendar/blob/master/src/addons/dragAndDrop/EventWrapper.js#L143

In here, instead of creating a new element. I think it may be possible to instead instantiate the eventWrapper component and just set its class and prepend and append the drag handles to its children.

[TomasHubelbauer]

Okay I was able to find a workaround which is good enough for me, however it may not help everyone.

I switched to using the event component instead of the eventWrapper one. Both receive the event prop so the are both equally capable of knowing what the specific slot is. I created a PR for RBC typings to show this: DefinitelyTyped/DefinitelyTyped#33188.

The event component gets placed within the slot, underneath the time range label. The event wrapper obviously around the slot. I am "lucky" in that in my use case the slot's CSS is adjusted so that the time range is hidden so essentially the two blocks work out to be the same area anyway. I just had to make sure my event component has a height of 100% so it stretches across the whole slot.

This solves the problem for me, and while researching this I also found that the event wrapper component works, too, it is just placed on top of the day column because the slot (rbc-event) within it is positioned absolutely. So if you land here from Google and it looks like event wrapper is not working for you with the DnD addon, double check, it should be in the DOM, but the positioning is probably what gives you trouble. I need this component to introduce a hover target for a popover so obviously it appeared broken to me - the slot area itself didn't capture the mouse events.