Fullcalendar V4 , error dragging dynamic generated events

Question

Using static events in a div works fine. But when I populate the div with dynamic events I get the following error:

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)

I am using fullcalendar v4, to enable dragging on events:

var Draggable   = FullCalendarInteraction.Draggable;

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

Can anybody help??

Edit:

The error seems to come from here, but I can see why. When I change this code:

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

    });

to this is works, but I need to later be able to drag the events again and resize...

$('#kt_calendar_external_events .fc-draggable-handle').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)
            classNames: [$(this).data('color')],
            description: 'Lorem ipsum dolor eius mod tempor labore'
        });

    });

Answer 1

When adding a event to the external list, I needed to declare it as a dragging element. Strange because I have later i loop that declares it again. Seems to work for version 4.

So call this function when loading external events:

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





            };