удаление события fullcalendar не работает с методом eventDragStop (полный календарь v4) - PullRequest
Новая
       11

удаление события fullcalendar не работает с методом eventDragStop (полный календарь v4)

1 голос
/ 26 сентября 2019

Я использую fullcalendar v4.Я хочу удалить событие в методе eventDragStop.

Все отлично работает, но я не могу удалить событие.на самом деле я хочу удалить внешнее событие в fullcalendar, а также хочу удалить событие fullcalendar в области внешних событий.

Пример для старой версии .Я хочу создать аналогичную демоверсию с последней версией (v4)

Пример: 

    eventDragStop: function( info ) {
        if(isEventOverDiv(info.jsEvent.clientX, info.jsEvent.clientY)) {
            info.event.remove();
            var el = $( "<div class='fc-event'>" ).appendTo( '#external-events-listing' ).text( info.event.title );
            el.draggable({
              zIndex: 999,
              revert: true, 
              revertDuration: 0 
            });
            el.data('event', { title: info.event.title, id: info.event.id, stick: true });
        }
    },

Полный код: 

<code> <pre>

    document.addEventListener('DOMContentLoaded', function() {
      var Calendar = FullCalendar.Calendar;
      var Draggable = FullCalendarInteraction.Draggable;

      var containerEl = document.getElementById('external-events');
      var calendarEl = document.getElementById('calendar');
      var checkbox = document.getElementById('drop-remove');

      new Draggable(containerEl, {
        itemSelector: '.fc-event',
        eventData: function(eventEl) {
          return {
            title: eventEl.innerText
          };
        }
      });
      var calendar = new Calendar(calendarEl, {
        plugins: [ 'interaction', 'dayGrid', 'timeGrid' ],
        header: {
          left: 'prev,next today',
          center: 'title',
          right: 'dayGridMonth,timeGridWeek,timeGridDay'
        },
        editable: true,
        droppable: true, // this allows things to be dropped onto the calendar
        drop: function(info) {
          // is the "remove after drop" checkbox checked?
          if (checkbox.checked) {
            // if so, remove the element from the "Draggable Events" list
            info.draggedEl.parentNode.removeChild(info.draggedEl);
          }
        },
        eventDragStop: function( info ) {
            if(isEventOverDiv(info.jsEvent.clientX, info.jsEvent.clientY)) {
                info.event.remove();
                var el = $( "<div class='fc-event'>" ).appendTo( '#external-events-listing' ).text( info.event.title );
                el.draggable({
                  zIndex: 999,
                  revert: true, 
                  revertDuration: 0 
                });
                el.data('event', { title: info.event.title, id: info.event.id, stick: true });
            }
        },
      });
      calendar.render();

        var isEventOverDiv = function(x, y) {
            var external_events = $( '#external-events' );
            var offset = external_events.offset();
            offset.right = external_events.width() + offset.left;
            offset.bottom = external_events.height() + offset.top;

            // Compare
            if (x >= offset.left
                && y >= offset.top
                && x <= offset.right
                && y <= offset .bottom) { return true; }
            return false;
        }


    });
...