Перетащите внешние события FullCalendar React-Wrapper

Question

Я не могу удалить внешние события в календаре. Календарь отображается правильно, а функции select и eventClick работают как положено. Теперь я хотел знать, как иметь возможность удалять внешние события в календаре ... Я читаю документацию fullcalendar.io и не могу делать то, что хочу.

Я использую следующие настройки:

<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}
/>

Я включаю jQuery-UI, и событие вызывает draggable, я могу зависать с внешним событием в календаре.

EDIT

Эффект перетаскивания инициируется в жизненном цикле componentDidMount.

Примечание: я использую минификатор в настройке innerHTML, но я помещу его здесь без минификатора, чтобы лучше понять.

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);
}

У меня 0 ошибок и 0 предупреждений в консоли. И эффект перетаскивания происходит так, как должен: /

EDIT-2

В настоящее время я использую 2 класса для отображения календаря:

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>
      </>
    );
  }
}

Второй

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}
      />
    );
  }
}

В моем файле index.html я включаю скрипты для jquery.min.js и jquery-ui.min.js

Answer 1

Обратный вызов eventDrop срабатывает только для внутренних отбрасываний событий. Вам необходимо добавить функцию обратного вызова eventReceive для удаления внешних событий. Тогда вы можете по крайней мере сказать, обнаруживает ли fullcalendar капли. У меня также есть полный календарь в оболочке React, и после некоторых проб и ошибок я смог сделать события перетаскиваемыми, и он работает отлично!