I was just going through the BigCalendar drag and drop example HERE. I tried to create a local example of the drag and drop by myself, just to see how the drag and drop works with BigCalendar. I created the following:
Dnd.js
import React from 'react'
import events from './events'
import HTML5Backend from 'react-dnd-html5-backend'
import { DragDropContext } from 'react-dnd'
import BigCalendar from 'react-big-calendar'
import withDragAndDrop from 'react-big-calendar/lib/addons/dragAndDrop';
import 'react-big-calendar/lib/css/react-big-calendar.css';
import 'react-big-calendar/lib/addons/dragAndDrop/styles.less';
const DragAndDropCalendar = withDragAndDrop(BigCalendar)
class Dnd extends React.Component {
constructor(props) {
super(props)
this.state = {
events: events,
}
this.moveEvent = this.moveEvent.bind(this)
}
moveEvent({ event, start, end }) {
const { events } = this.state
const idx = events.indexOf(event)
const updatedEvent = { ...event, start, end }
const nextEvents = [...events]
nextEvents.splice(idx, 1, updatedEvent)
this.setState({
events: nextEvents,
})
alert(`${event.title} was dropped onto ${event.start}`)
}
resizeEvent = (resizeType, { 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}`)
}
render() {
return (
<DragAndDropCalendar
selectable
events={this.state.events}
onEventDrop={this.moveEvent}
resizable
onEventResize={this.resizeEvent}
defaultView="week"
defaultDate={new Date(2015, 3, 12)}
/>
)
}
}
export default DragDropContext(HTML5Backend)(Dnd)
index.js
import React from 'react';
import ReactDOM from 'react-dom';
import Knight from './knight/knight';
import Square from './square/square';
import Board from './board/board';
import Dnd from './bigcalender/dnd';
import { moveKnight , observe } from './game';
import BigCalendar from 'react-big-calendar'
import SimpleDrag from './simpleDrag/simpleDrag';
import moment from 'moment';
BigCalendar.momentLocalizer(moment);
const rootEl = document.getElementById('root');
ReactDOM.render(
<Dnd />,
rootEl
)
The Calendar displays fine with all the events, the problem is that the drag and drop functionality doesn't quite work. The code is almost an copy paste from the source of the BigCalendar drag and drop source code. So why is the drag and drop example not working in my project?
The example I have created locally can be seen also my my repo here.
It seems that LESS is not supported in create-react-app
by default, so the .less
import for dragAndDrop
in your Dnd.js
is not working.
You can setup LESS in your project, or you can just import the .css
file directly, since it is already there.
To use the .css
file, in your dnd.js
file, change this import ...
import 'react-big-calendar/lib/addons/dragAndDrop/styles.less';
To this ...
import 'react-big-calendar/lib/addons/dragAndDrop/styles.css';
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With