Question

当我在日历上拖动外部元素时，无法通过日历在日历上创建事件。 eventReceive（）回调也不会被触发。

我也将droppable选项设置为true。有人可以帮忙吗？看一下代码：

HTML：

<div class="fc-event">Drag me !!</div>

JS：

$('.fc-event').each(() => {
        // 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)
            duration: '02:00',
            create: true,
        });

        // 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
        });
    });
    const calendarEl = document.getElementById('calendar');
    calendar = new Calendar(calendarEl, {
        themeSystem: 'standard',
        selectable: true,
        droppable: true,
        columnHeader: true,
        selectMirror: true,
        editable: true,
        plugins: [interactionPlugin, dayGridPlugin, timeGridPlugin],
        eventResourceEditable: true,

        select(selectionInfo) {
            showTaskCreationPopup(selectionInfo.start, selectionInfo.end);
        },

        eventReceive(element) {
            console.log('event received');
            createTask(element.event);
        },

        drop(info) {
            console.log('dropped');
            createTask(info.jsEvent);
        },

        eventDrop(info) {
            console.log('event dropped');
        },

        header: {
            left: 'prevYear prev today next nextYear',
            center: 'title',
            right: 'dayGridMonth,timeGridWeek,timeGridDay',
        },

        buttonText: {
        // eslint-disable-next-line new-cap
            prevYear: new moment().year() - 1,
            // eslint-disable-next-line new-cap
            nextYear: new moment().year() + 1,
        },
    });
    calendar.render();

Answer 1

我能够做到这一点的方法不是通过eventReceive-两个eventDrop-事件，而是通过'drop'事件。签名如下：

customDrop =（{资源，日期，dragedEl：{id}}）=> {}）

Answer 2

var containerEl = document.getElementById('external-events-list');
var eventEls = Array.prototype.slice.call(
 containerEl.querySelectorAll('.fc-event')
 );
 eventEls.forEach(function(eventEl) {


if (eventEl.textContent == "Event1") {
  new Draggable(eventEl, {
    eventData: {
      id: 1,
      title: eventEl.innerText.trim(),
      color: 'Orange',
      textColor:'black'
    }
  });
} else if (eventEl.textContent == "Event2") {
  new Draggable(eventEl, {
    eventData: {
      id: 2,
      title: eventEl.innerText.trim(),
      color: '#ccccff',
      textColor:'black'
    }
  });

   }}); // end eventEls.forEach

无法在日历上删除外部元素

2 个答案: