Drag & drop or resize events inside calendar about react-big-calendar

[jquense]

this has already been released

[mbahoshy]

I thought I'd throw my two cents here... I had a branch going a few months ago with fully functional drag and drop, I just never got it cleaned up enough to make a PR.

Basically I was using the existing event cells, and on drag start, i would change the z-index of these cells so that they are "droppable". On drop we'd fire a callback to a user supplied prop function, with the new cells dates as parameters, and then set our z-index back to 0. The user can then update the event date in onEventDrop callback.

Take a look at what I did and see if this can help the effort.

https://github.com/mbahoshy/react-big-calendar/pull/1/files

[wonbyte]

@mbahoshy can you create a PR. Would be great to at least can this in so we can try it and improve if needed.

[mbahoshy]

+1 yes drag and drop events would be a great feature!

[jgibbons]

+1

[mackenziefernandez1]

+1

[leesalminen]

I've forked this library (https://github.com/leesalminen/react-big-calendar) and have been working on Drag n Drop support using the react-dnd library (https://github.com/gaearon/react-dnd).

I'll submit a PR once all is working properly, but would appreciate any/all assistance!

I also have no idea how to approach resizing of an event. Would appreciate any assistance/guidance with that!

[srajko]

@leesalminen Nice! I've had some success as well integrating react-dnd with react-big-calendar. In my case, I made events draggable, as well as drop-targets, and I made day labels drop targets. With that, I could reschedule events to a different day (by dragging an event to a day label), and associate outside items with events (by dragging outside items onto events).

The way I approached it was to use customization points of react-big-calendar, and then add drag-and-drop support outside of the core library. For example, http://intljusticemission.github.io/react-big-calendar/examples/index.html#prop-components allows the event component to be customized. So I made a custom d&d event using react-dnd, and used that. I also made it possible to customize the day label component (srajko@2ee37d6 - I added another prop for it though really I should have built this on top of the existing components prop), and then used a day label that was drop-target enabled.

This approach would work really nice if react-big-calendar:

• exposed default versions of its components
• allowed customization of more of its components via the components prop

That way d&d support could be added by just extending the default components with react-dnd attributes, and this could be done outside of core react-big-calendar (so someone else could implement different d&d functionality, or use a different d&d library)

Anyway - I would love to work with you on this, esp. if an approach like this sounds good to you (extending react-big-calendar to expose its default components and allow all of them to be customized, and then providing sample overrides that use react-dnd).

[jquense]

thanks for letting the effort here folks. I think I'd be great if this was doable as an extension point, then folks that don't need the behavior would have to include all of react-dnd. it also solves issues with the calendar it needing to know how to write to event objects to move the end and start dates, which is nice.

I'm happy to talk about adding any extension points needed to make it work, and maybe ultimately including it as an "official addon" or something

[srajko]

@leesalminen @jquense I started a work-in-progress PR (#84) that exposes the EventCell component, and then extends it in an added drag&drop example. That much allows cells in the Month view to be dragged, though there is nothing to drop them on yet.

To make the example useful for moving around events, we'd need to expose components used to display events in other views, as well as background cells that could serve as drop targets.

[Rtg147]

@mbahoshy @jquense why dont thew merge?

[IanLondon]

+1
@mbahoshy Is the problem that the PR is many commits behind? I might be up to re-do your implementation from the current repo if that is the only problem.

[jquense]

dnd has been merged already :)

[IanLondon]

How can we use it? Is it this: https://github.com/intljusticemission/react-big-calendar/tree/master/src/addons/dragAndDrop ? The addons/ doesn't show up in node_modules/react-big-calendar/, is the idea to add it in manually?

Thanks!

[jquense]

not pushed to a release yet

[IanLondon]

Is a push to a release planned? Thanks!