拖放外部事件FullCalendar React-Wrapper

Question

I am not being able to drop external events on the calendar. The calendar renders correctly, and the functions select and eventClick works as expected. I wanted to know now how to be able to drop external events in the calendar... I've been reading the fullcalendar.io documentation and I'm not really able to do what I want.

The setting I am using is as follows:

<FullCalendar 
    id="calendario"
    header={{
        left: 'prev,next today myCustomButton',
        center: 'title',
        right: 'month,agendaWeek,agendaDay'
    }}
    navLinks={true}
    nowIndicator={true}
    viewRender={(view, element) => {
        this.handleChangeView(view);
    }}
    selectable={true}
    editable={true}
    droppable={true}
    eventDrop={function(eventBj, date) {
        console.log('eventDrop function');
    }}
    drop={(date, jsEvent, ui, resourceId) => {
        console.log('drop function');
    }}
    select={(start, end, allDay) => {
        this.handleSelect(start, end, allDay);
    }}
    eventClick={(calEvent, jsEvent, view) => {
        this.handleClick(calEvent, jsEvent, view);
    }}
    events={events}
/>

I'm including jQuery-UI and the event triggers the draggable , I can hover with the external-event over the calendar.

EDIT

The drag effect is initiated in the componentDidMount lifecycle.

Note: I use a minifier in setting innerHTML, but I'll put it here without a minifier to understand it better.

componentDidMount() {
    const s = document.createElement('script');
    s.type = 'text/javascript';
    s.innerHTML = "$('.calendar-events').each(function() {
        $(this).data('event', {
            title: $.trim($(this).text()),
            stick: true
        });
        $(this).draggable({
            zIndex: 999,
            revert: true,
            revertDuration: 0
        })
    });";
    document.body.appendChild(s);
}

I have 0 errors and 0 warnings in console. And the drag effect happens like it should :/

EDIT-2

I'm currently using 2 classes to render the calendar:

1.

class Calendario extends Component {
  componentDidMount() {
    const s = document.createElement('script');
    s.type = 'text/javascript';
    s.innerHTML =
      "$('.calendar-events').each(function(){$(this).data('event',{title:$.trim($(this).text()),stick:!0}),$(this).draggable({zIndex:999,revert:!0,revertDuration:0})});";
    document.body.appendChild(s);
  }

  render() {
    return (
      <>
        <Grid container spacing={16} >
          <Grid item md={3}>
            Eventos
            <div className="calendar-events">
              <i className="fa fa-circle text-info" /> Consultas
            </div>
          </Grid>
          <Grid item md={9} style={{ minHeight: '500px' }}>
            <FullCalendarComponent />
          </Grid>
        </Grid>
      </>
    );
  }
}

Second

export class FullCalendarComponent extends Component {
  state = {
    view: 'agendaWeek',
    events: [
      {
        title: 'Static Event 1',
        start: '2018-11-20T16:00:00'
      },
      {
        title: 'Static Event 2',
        start: '2018-11-21T16:00:00',
        end: '2018-11-21T18:00:00'
      },
      {
        title: 'Static Event 3',
        start: '2018-11-20T11:00:00',
        end: '2018-11-20T13:00:00'
      },
      {
        title: 'Static Event 4',
        start: '2018-11-22T14:00:00',
        end: '2018-11-22T16:00:00'
      }
    ]
  };

  shouldComponentUpdate(nextProps, nextState) {
    if (this.state.events !== nextState.events) {
      return true;
    }
    return false;
  }

  handleDrop = (eventObj, date) => {
    console.group('onDrop');
    console.log('date');
    console.dir(date);
    console.groupEnd();
  };

  handleSelect = (start, end, allDay) => {
    console.group('select');
    console.log('start');
    console.dir(start);
    console.dir('end');
    console.dir(end);
    console.groupEnd();
  };

  handleClick = (calEvent, jsEvent, view) => {
    console.group('click');
    console.log('calEvent');
    console.dir(calEvent);
    console.groupEnd();
  };

  handleChangeView = view => e => {
    e.preventDefault();
    this.setState({
      view: view.name
    });
  };

  render() {
    const { events, view } = this.state;
    return (
      <FullCalendar 
        id="calendario"
        header={{
            left: 'prev,next today myCustomButton',
            center: 'title',
            right: 'month,agendaWeek,agendaDay'
        }}
        navLinks={true}
        nowIndicator={true}
        viewRender={(view, element) => {
            this.handleChangeView(view);
        }}
        selectable={true}
        editable={true}
        droppable={true}
        eventDrop={function(eventBj, date) {
            console.log('eventDrop function');
        }}
        drop={(date, jsEvent, ui, resourceId) => {
            console.log('drop function');
        }}
        select={(start, end, allDay) => {
            this.handleSelect(start, end, allDay);
        }}
        eventClick={(calEvent, jsEvent, view) => {
            this.handleClick(calEvent, jsEvent, view);
        }}
        events={events}
      />
    );
  }
}

In my index.html file, I'm including scripts to jquery.min.js and jquery-ui.min.js

Answer 1

The callback eventDrop is only triggered for internal event drops. You need to add the callback eventReceive for external event drops. Then you can at least tell if fullcalendar is detecting the drops. I also have my fullcalendar inside a React wrapper, and after some trial and error, was able to make events draggable and it works perfectly!