Resize feature seems to be incompatible with external drag-and-drop - react-dnd

Question

First of all, I would like to express my gratitude for this repo: https://github.com/Tim1023/react-scheduler-firebase without which I would not be able to implement external drag-and-drop for react-big-calendar.
I have spent an entire week trying to play with this stuff, but resize feature (stretching the event up and down) just won't work for it. I guess the problem is with css ?
I have tried to upgrade the react-big-calendar's version from 0.19 to 0.20, and situation is the opposite - resize works perfectly, but external DnD no longer works (namely, when dragging an external object on the calendar, drop mode does not get activated)
There's an open issue regarding this, but looks like it remains unhandled up to now.

Answer 1

The latest version of RBC does include external drag and drop. Although the documentation site has not yet been updated, cloning the repo and running the 'examples' will show a working demo of this functionality. Here is the source for that demo:
import React from 'react'
import events from '../events'
import { Calendar, Views } from 'react-big-calendar'
import withDragAndDrop from 'react-big-calendar/lib/addons/dragAndDrop'
import Layout from 'react-tackle-box/Layout'
import Card from '../Card'
import 'react-big-calendar/lib/addons/dragAndDrop/styles.scss'
const DragAndDropCalendar = withDragAndDrop(Calendar)
const formatName = (name, count) => `${name} ID ${count}`
class Dnd extends React.Component {
constructor(props) {
super(props)
this.state = {
events: events,
draggedEvent: null,
counters: {
item1: 0,
item2: 0,
},
displayDragItemInCell: true,
}
}
handleDragStart = event => {
this.setState({ draggedEvent: event })
}
handleDisplayDragItemInCell = () => {
this.setState({
displayDragItemInCell: !this.state.displayDragItemInCell,
})
}
dragFromOutsideItem = () => {
return this.state.draggedEvent
}
customOnDragOver = event => {
// check for undroppable is specific to this example
// and not part of API. This just demonstrates that
// onDragOver can optionally be passed to conditionally
// allow draggable items to be dropped on cal, based on
// whether event.preventDefault is called
if (this.state.draggedEvent !== 'undroppable') {
console.log('preventDefault')
event.preventDefault()
}
}
onDropFromOutside = ({ start, end, allDay }) => {
const { draggedEvent, counters } = this.state
const event = {
title: formatName(draggedEvent.name, counters[draggedEvent.name]),
start,
end,
isAllDay: allDay,
}
const updatedCounters = {
...counters,
[draggedEvent.name]: counters[draggedEvent.name] + 1,
}
this.setState({ draggedEvent: null, counters: updatedCounters })
this.newEvent(event)
}
moveEvent = ({ event, start, end, isAllDay: droppedOnAllDaySlot }) => {
const { events } = this.state
const idx = events.indexOf(event)
let allDay = event.allDay
if (!event.allDay && droppedOnAllDaySlot) {
allDay = true
} else if (event.allDay && !droppedOnAllDaySlot) {
allDay = false
}
const updatedEvent = { ...event, start, end, allDay }
const nextEvents = [...events]
nextEvents.splice(idx, 1, updatedEvent)
this.setState({
events: nextEvents,
})
// alert(`${event.title} was dropped onto ${updatedEvent.start}`)
}
resizeEvent = ({ event, start, end }) => {
const { events } = this.state
const nextEvents = events.map(existingEvent => {
return existingEvent.id == event.id
? { ...existingEvent, start, end }
: existingEvent
})
this.setState({
events: nextEvents,
})
//alert(`${event.title} was resized to ${start}-${end}`)
}
newEvent = event => {
let idList = this.state.events.map(a => a.id)
let newId = Math.max(...idList) + 1
let hour = {
id: newId,
title: event.title,
allDay: event.isAllDay,
start: event.start,
end: event.end,
}
this.setState({
events: this.state.events.concat([hour]),
})
}
render() {
return (
<div>
<Card className="examples--header" style={{ display: 'flex' }}>
<div
style={{
display: 'flex',
flex: 1,
justifyContent: 'center',
flexWrap: 'wrap',
}}
>
<h4 style={{ color: 'gray', width: '100%' }}>
Outside Drag Sources
</h4>
{Object.entries(this.state.counters).map(([name, count]) => (
<div
style={{
border: '2px solid gray',
borderRadius: '4px',
width: '100px',
margin: '10px',
}}
draggable="true"
key={name}
onDragStart={() =>
this.handleDragStart({ title: formatName(name, count), name })
}
>
{formatName(name, count)}
</div>
))}
<div
style={{
border: '2px solid gray',
borderRadius: '4px',
width: '100px',
margin: '10px',
}}
draggable="true"
key={name}
onDragStart={() => this.handleDragStart('undroppable')}
>
Draggable but not for calendar.
</div>
</div>
<div>
<label>
<input
style={{ marginRight: 5 }}
type="checkbox"
checked={this.state.displayDragItemInCell}
onChange={this.handleDisplayDragItemInCell}
/>
Display dragged item in cell while dragging over
</label>
</div>
</Card>
<DragAndDropCalendar
selectable
localizer={this.props.localizer}
events={this.state.events}
onEventDrop={this.moveEvent}
dragFromOutsideItem={
this.state.displayDragItemInCell ? this.dragFromOutsideItem : null
}
onDropFromOutside={this.onDropFromOutside}
onDragOver={this.customOnDragOver}
resizable
onEventResize={this.resizeEvent}
onSelectSlot={this.newEvent}
onD
defaultView={Views.MONTH}
defaultDate={new Date(2015, 3, 12)}
/>
</div>
)
}
}
export default Dnd