Drag And Drop outside the calendar [SOLVED]

[martinnov92]

Hello,

is it possible to drag and drop something to calendar from the outside (let say that I create a draggable div and want that div to be able to DnD to calendar)? Or is it only working inside the calendar?

Thank you very much.

Update: solved

[brik-dm]

How did you solve this?

[martinnov92]

Hello @spacedust,

I created a drop target component, where I am passing a function (where I strip the date off the event and in the drop zone component I filter the events without dates) as a prop and call it on a React DND drop() method. Hope it makes sense, here is an example:

drop(props, monitor) {
    // call the function from parent element and pass there 'event' from the React Big Calendar
    return props.onDropTarget(monitor.getItem());
 },

It is working for me, but I am not so sure if calling a function from drop() is the proper way how to do it.

[jupiterkenji]

@martinnov92 how do you pass the location of the event to the droppable? could you elaborate on "where I strip the date off the event and in the drop zone component I filter the events without dates". Do you wrap the whole BigCalendar inside connectDropTarget?
Thank you

[martinnov92]

Hello, I can't remember now, might have a look on it on Monday. By strip the date off I mean that I removed date from event to not to display it in the calendar. And no, the big calendar is already drop target I think. If I don't forget I will add example on Monday.

[martinnov92]

Oh and you have to set the correct name for drop target (the name you set when you are adding connectDropTarget(name,...)). I think the name should be "Event"...

[jupiterkenji]

Thank you @martinnov92 I'll check it out =)

[SagiSan]

Can anyone post a working example of outside drag n drop to calendar please?

[Tim1023]

@SagiSan Here is an example on my repo https://github.com/Tim1023/react-scheduler-firebase. Hope it can help you

[Abenezer]

@SagiSan nice! it used to work for big-calendar 19 but new updates (https://github.com/intljusticemission/react-big-calendar/tree/master/src/addons/dragAndDrop) cause the drop is always diabled. may be the item type changed? or they used another plugin (because if you look the file EventWrapper ) there is no dropTarget.
for now i am falling back to v 19.0 can you make it work for 20 an up

[MinhNguyen41092]

@Abenezer have you found any way to make it work? Also you @ the wrong person.

[mikailbayram]

@Abenezer have you found a way to make it work on v 20. and up?

[milkysingh]

@Abenezer Is there any way I can make it work with v20 and up? It will be a great help.

[tommyspot]

@Tim1023 Do you have any update example with v20. The above example doesn't work with v20 and up.