React BigCalendar drag and drop example not working

Question

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.

Answer 1

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';

Answer 2

Check your style loaders. It might be that not all styles are applied as they should be and drag and drop require lot of CSS positioning. I had similar problem in my project.

Answer 3

 import React, { Component } from 'react';
 import moment from 'moment';

 import BigCalendar from 'react-big-calendar';

 import withDragAndDrop from "react-big-calendar/lib/addons/dragAndDrop";

 import "react-big-calendar/lib/addons/dragAndDrop/styles.css";
 import "react-big-calendar/lib/css/react-big-calendar.css";

 const DragAndDropCalendar = withDragAndDrop(BigCalendar);
 const localizer = BigCalendar.momentLocalizer(moment)

 class Calendar extends Component {
   constructor(props) {
    super(props);
    this.state = {
        events: [
            {
                start: new Date(),
                end: new Date(),
                title: "Some title",
                id: 1,
                allDay: false,
            },
            {
                start: new Date('Wed Jan 30 2019 10:06:44 GMT+0200'),
                end: new Date('Thu Jan 31 2019 10:06:44 GMT+0200'),
                title: "Some another title",
                id: 2,
                allDay: false,
            }
        ]
    };
    this.onEventDrop = this.onEventDrop.bind(this);
    this.onEventResize = this.onEventResize.bind(this);
}

onEventResize({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,
    })
}

onEventDrop({ 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,
    })
}


render() {
    const { events } = this.state;
    return (
        <div>
            <DragAndDropCalendar
                style={{ height: '100vh' }}
                localizer={localizer}
                culture="en-GB"
                events={events}
                defaultDate={new Date()}
                defaultView="month"
                startAccessor="start"
                endAccessor="end"
                titleAccessor="title"
                onEventResize={this.onEventResize}
                onEventDrop={this.onEventDrop}
                resizable
                selectable
            />
        </div>
    );
  }
 }

export default Calendar;