javascript 通过将事件拖到完整日历 V 2 之外来删除事件（带或不带垃圾桶图标...）

Delete event by dragging it outside of the full calendar V 2 (with or without trash icon...)

提问by kaidot

Can somebody please give me advice on how to delete events from the FullCalendar Version 2 by dragging it out of the calendar, please?

有人可以就如何通过将其拖出日历来从 FullCalendar 版本 2 中删除事件给我建议吗？

I saw some solution here: Remove Elements from fullcalendar (by dragging to trash can)

我在这里看到了一些解决方案：从全日历中删除元素（通过拖动到垃圾桶）

but it seems to address the version 1.

但它似乎解决了版本 1。

回答by user2155441

My first approach would be:

我的第一种方法是：

eventDragStop: function(event,jsEvent) {
    alert('Coordinates: ' + jsEvent.pageX + ',' + jsEvent.pageY);
    if( (300 <= jsEvent.pageX) & (jsEvent.pageX <= 500) & (130 <= jsEvent.pageY) & (jsEvent.pageY <= 170)){
      alert('delete: '+ event.id);
      $('#MyCalendar').fullCalendar('removeEvents', event.id);
    }
}

This allows to drag events to the area (in pixels) corresponding to the if condition order to delete. Tested with fullcalendar 2.1.1.

这允许将事件拖动到与要删除的 if 条件顺序对应的区域（以像素为单位）。使用 fullcalendar 2.1.1 测试。

An improvement would be to check and compare jsEvent coordinates with $(window).height()and $(window).width(), this way would confirm/test dragging out of calendar area, much neat of course.

一个改进是检查和比较 jsEvent 坐标$(window).height()和$(window).width()，这种方式将确认/测试拖出日历区域，当然非常整洁。

Actually the improvement is (an elegant solution), based on the solutionmentioned:

实际上改进是（一个优雅的解决方案），基于提到的解决方案：

1. Create a div element with the icon trash:

1. 创建一个带有垃圾桶图标的 div 元素：

<div id="calendarTrash" class="calendar-trash"><img src="path/to/static/images/trash.png" /></div>

<div id="calendarTrash" class="calendar-trash"><img src="path/to/static/images/trash.png" /></div>

1. The eventDragStop is:

   eventDragStop: function(event,jsEvent) {
   
       var trashEl = jQuery('#calendarTrash');
       var ofs = trashEl.offset();
   
       var x1 = ofs.left;
       var x2 = ofs.left + trashEl.outerWidth(true);
       var y1 = ofs.top;
       var y2 = ofs.top + trashEl.outerHeight(true);
   
       if (jsEvent.pageX >= x1 && jsEvent.pageX<= x2 &&
           jsEvent.pageY >= y1 && jsEvent.pageY <= y2) {
           alert('SIII');
           $('#calendario').fullCalendar('removeEvents', event.id);
       }
   }
   

2. eventDragStop 是：

   eventDragStop: function(event,jsEvent) {
   
       var trashEl = jQuery('#calendarTrash');
       var ofs = trashEl.offset();
   
       var x1 = ofs.left;
       var x2 = ofs.left + trashEl.outerWidth(true);
       var y1 = ofs.top;
       var y2 = ofs.top + trashEl.outerHeight(true);
   
       if (jsEvent.pageX >= x1 && jsEvent.pageX<= x2 &&
           jsEvent.pageY >= y1 && jsEvent.pageY <= y2) {
           alert('SIII');
           $('#calendario').fullCalendar('removeEvents', event.id);
       }
   }
   

Tested on Fullcalendar 2.1.1

在 Fullcalendar 2.1.1 上测试

回答by Laurie Clark

Without jQuery :

没有 jQuery ：

        eventDragStop: function(e) {
            let trashEl = document.getElementById('fcTrash') as HTMLElement;

            let x1 = trashEl.offsetLeft;
            let x2 = trashEl.offsetLeft + trashEl.offsetWidth;
            let y1 = trashEl.offsetTop;
            let y2 = trashEl.offsetTop + trashEl.offsetHeight;

            if (e.jsEvent.pageX >= x1 && e.jsEvent.pageX <= x2 &&
                e.jsEvent.pageY >= y1 && e.jsEvent.pageY <= y2) {
                    e.event.remove();
            }
        }

回答by Abdoulayebacary

 eventDragStop: function(event,jsEvent) {

        var trashEl = jQuery('#calendarTrash');
        var ofs = trashEl.offset();

        var x1 = ofs.left;
        var x2 = ofs.left + trashEl.outerWidth(true);
        var y1 = ofs.top;
        var y2 = ofs.top + trashEl.outerHeight(true);

        if (jsEvent.pageX >= x1 && jsEvent.pageX<= x2 &&
            jsEvent.pageY >= y1 && jsEvent.pageY <= y2) {
                if (confirm("Are you sure to  detete " + event.title +" ?")) {
                    //pour annuker les informations
                    $('#external-calendar').fullCalendar('removeEvents', event._id);
                }

        }
    }

`
event._idnot event.id (all events will be deleted)

`
event._id不是event.id（所有事件将被删除）

<div id="calendarTrash" class="calendar-trash"><img src="images\trash.png"  alt="image"/></div>