Provide onDropFromOutside prop for Dnd Cal

[kamry-bowman]

This PR is meant to resolve issue #1090.

Basic callback for outside drops

The change exposes the onDropFromOutside prop on the withDragAndDrop HOC, which takes a callback that fires when an outside draggable item is dropped onto the calendar. The callback receives as a parameter an object with start and end properties that are times based on the drop position and slot size.

It is worth noting that it is entirely up to the user to handle actual event creation based on the callback. All that this API does is allow draggable DOM elements to trigger a callback that receives start and end times for the slot an item was dropped on, and a boolean as to whether it's an all-day event. If the user wants to know which event was dropped, they will have to handle that themselves outside of React-Big-Calendar. An example added to the example App demonstrates how this can be done.

Optional selective dropping

By default, if onDropFromOutside prop is passed, all draggable events are droppable on calendar. If the user wishes to discriminate as to whether draggable events are droppable on the calendar, they can pass an additional onDragOver callback function. The onDragOver callback takes a DragEvent as its sole parameter. If it calls the DragEvent's preventDefault method, then the draggable item in question is droppable. If it does not call preventDefault during the function call, it will not be droppable.

An example was also added to the examples App, this one labelled `Addon: Drag and Drop (from outside calendar). The GIFs show this example in action.

I also added the following comments into the withDragAndDrop HOC by way of documentation.

 * Additionally, this HOC adds the callback props `onDropFromOutside` and `onDragOver`. 
 * By default, the calendar will not respond to outside draggable items being dropped
 * onto it. However, if `onDropFromOutside` callback is passed, then when draggable 
 * DOM elements are dropped on the calendar, the callback will fire, receiving an 
 * object with start and end times, and an allDay boolean.
 *
 * If `onDropFromOutside` is passed, but `onDragOver` is not, any draggable event will be
 * droppable  onto the calendar by default. On the other hand, if an `onDragOver` callback
 * *is* passed, then it can discriminate as to whether a draggable item is droppable on the
 * calendar. To designate a draggable item as droppable, call `event.preventDefault`
 * inside `onDragOver`. If `event.preventDefault` is not called in the `onDragOver`
 * callback, then the draggable item will not be droppable on the calendar.

Hopefully this gives users the flexibility they need, without getting react-big-calendar overly involved with managing outside drag and drop scenarios. Any feedback/discussion/harangues are welcome!

[nhatduong97]

Does it work in version 0.20.4 ?

[kamry-bowman]

I'm not sure if I understand. It's a PR into the master branch which is already a few commits ahead of version 0.20.4. So it's not in that version, it would be in a later release assuming it gets merged. But its functionality is compatible with the 0.20.4 codebase from what I can tell; it doesn't rely on anything added in a subsequent commit for its functionality.

[jquense]

dumb question, how do you know if this is "from the outside", is it b/c for "internal" drops we don't actually use the drop/drag events?

[kamry-bowman]

Yes, that's exactly right. I didn't really think about it that way but that's the reason. I think if we did move to drop events for the internals we would have to refactor this approach.

[jquense]

this is awesome, thanks for taking the time to do this!

[dhyegocalota]

Thank you for your awesome work @kamry-bowman

I just wanted to know... is there any way also make the events be draggable to outside of the calendar?

[yasserzubair]

Is there any documentation or example related to this?

[Nikualla1]

Is there any documentation or example related to this?

https://github.com/jquense/react-big-calendar/blob/master/examples/demos/dndOutsideSource.js