Fullcalendar V4，错误拖动动态生成的事件

Question

在 div 中使用静态事件效果很好。但是，当我用动态事件填充 div 时，出现以下错误：

fullcalendar.bundle.js:1036 Uncaught TypeError: Cannot read property 'startTime' of undefined
    at refineProps (fullcalendar.bundle.js:1036)
    at Object.parseDragMeta (fullcalendar.bundle.js:8140)
    at ExternalElementDragging.buildDragMeta (fullcalendar.bundle.js:12401)
    at EmitterMixin.ExternalElementDragging.handleDragStart (fullcalendar.bundle.js:12315)
    at applyAll (fullcalendar.bundle.js:981)
    at EmitterMixin.triggerWith (fullcalendar.bundle.js:3523)
    at EmitterMixin.trigger (fullcalendar.bundle.js:3518)
    at EmitterMixin.HitDragging.handleDragStart (fullcalendar.bundle.js:11484)
    at applyAll (fullcalendar.bundle.js:981)
    at EmitterMixin.triggerWith (fullcalendar.bundle.js:3523)

我正在使用 fullcalendar v4，以启用事件拖动：

var Draggable   = FullCalendarInteraction.Draggable;

        new Draggable(containerEl, {
            itemSelector: '.fc-draggable-handle',
            eventData: function(eventEl) {
                return $(eventEl).data('event');
            }   
        });

有人可以帮忙吗？？

编辑：

错误似乎出自此处，但我明白原因了。当我更改此代码时：

    $('#kt_calendar_external_events .fc-draggable-handle').each(function() {
        // store data so the calendar knows to render an event upon drop
        $(this).data('event', {
            id: $(this).attr("data-id"),
            startEditable: true,
            durationEditable: true,
            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)
            classNames: [$(this).data('color')],
            description: 'Lorem ipsum dolor eius mod tempor labore',
            source: 'planificacion'
        });

    });

这是可行的，但我需要稍后能够再次拖动事件并调整大小...

$('#kt_calendar_external_events .fc-draggable-handle').each(function() { // 存储数据以便日历知道在 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)
            classNames: [$(this).data('color')],
            description: 'Lorem ipsum dolor eius mod tempor labore'
        });

    });

Answer 1

向外部列表添加事件时，我需要将其声明为拖动元素。奇怪，因为我后来循环再次声明它。似乎适用于版本 4。

所以加载外部事件时调用这个函数：

 var initDrag = function(el,value) {
                // create an Event Object (http://arshaw.com/fullcalendar/docs/event_data/Event_Object/)
                // it doesn't need to have a start or end

                //console.log(el);

                var eventObject = {

                id: el.attr("data-id"),
                startEditable: true,
                durationEditable: true,
                startTime: '9:00',
                allDay: true,
                create: true,
                title: $.trim(el.text()), // use the element's text as the event title
                stick: true, // maintain when user navigates (see docs on the renderEvent method)
                classNames: [el.attr("data-color"),],
                description: 'Lorem ipsum dolor eius mod tempor labore',
                source: 'planificacion'
                };


                // store the Event Object in the DOM element so we can get to it later
                el.data('event', eventObject);

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





            };

Fullcalendar V4，错误拖动动态生成的事件

Fullcalendar V4 , error dragging dynamic generated events

jquery

draggable

fullcalendar

fullcalendar-4