Fullcalendar V4, ошибка при перетаскивании динамически генерируемых событий - PullRequest
Новая
       16

Fullcalendar V4, ошибка при перетаскивании динамически генерируемых событий

1 голос
/ 01 октября 2019

Использование статических событий в 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'
        });

    });

1 Ответ

0 голосов
/ 02 октября 2019

При добавлении события во внешний список мне нужно было объявить его как элемент перетаскивания. Странно, потому что позже у меня есть цикл, который объявляет это снова. Кажется, работает для версии 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
                });





            };
...