在DnD之外反应大日历

Question

我正在使用React Big Calendar https://github.com/intljusticemission/react-big-calendar。 它有一个使用react-dnd https://github.com/react-dnd/react-dnd的Drag n Drop选项。我想要做的是在日历之外设置可拖动元素，我可以在日历中拖动。像这样：https://codepen.io/kotazi/pen/KVoXob。

class Application extends React.Component {
  render() {
    return <div><External />
      <Calendar /></div>;
  }
}

/*
 * A simple React component
 */
class Calendar extends React.Component {
  render() {
    return <div id="calendar"></div>;
  }
  componentDidMount() {
    $('#calendar').fullCalendar({
            header: {
                left: 'prev,next today',
                center: 'title',
                right: 'month,agendaWeek,agendaDay'
            },
            editable: true,
            droppable: true, // this allows things to be dropped onto the calendar
            drop: function() {
                // is the "remove after drop" checkbox checked?
                if ($('#drop-remove').is(':checked')) {
                    // if so, remove the element from the "Draggable Events" list
                    $(this).remove();
                }
            }
    })
  }
}

class External extends React.Component {
  render() {
    return <div id='external-events'>
            <h4>Draggable Events</h4>
            <div className='fc-event'>My Event 1</div>
            <div className='fc-event'>My Event 2</div>
            <div className='fc-event'>My Event 3</div>
            <div className='fc-event'>My Event 4</div>
            <div className='fc-event'>My Event 5</div>
            <p>
                <input type='checkbox' id='drop-remove' />
                <label for='drop-remove'>remove after drop</label>
            </p>
        </div>;
  }
  componentDidMount() {
        $('#external-events .fc-event').each(function() {

            // store data so the calendar knows to render an event upon drop
            $(this).data('event', {
                title: $.trim($(this).text()), // use the element's text as the event title
                stick: true // maintain when user navigates (see docs on the renderEvent method)
            });

            // make the event draggable using jQuery UI
            $(this).draggable({
                zIndex: 999,
                revert: true,      // will cause the event to go back to its
                revertDuration: 0  //  original position after the drag
            });
        });
  }
}


/*
 * Render the above component into the div#app
 */
React.render(<Application />, document.getElementById('app'));

我找到的唯一'解决方案'是https://github.com/intljusticemission/react-big-calendar/issues/318，但我不知道他是怎么做到的。我有与示例http://intljusticemission.github.io/react-big-calendar/examples/index.html#prop-onNavigate相同的代码。请有人帮帮我吗？