Fullcalendar V4，拖拽动态生成事件出错答案

【问题标题】：Fullcalendar V4 , error dragging dynamic generated eventsFullcalendar V4，拖拽动态生成事件出错
【发布时间】：2019-10-01 08:55:24
【问题描述】：

在 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() { // 存储数据，以便日历知道在放置时呈现事件

        $(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'
        });

    });

【问题讨论】：

这是固定的，有兴趣的可以告诉我。 Fullcalendar 版本 4，PHP Mysql

标签： jquery fullcalendar draggable fullcalendar-4

【解决方案1】：

向外部列表添加事件时，我需要将其声明为拖动元素。奇怪，因为我稍后有 i 循环再次声明它。似乎适用于版本 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
                });





            };

【讨论】：