通过将事件拖动到完整日历V 2之外来删除事件(带或不带垃圾图标...)

Question

有人可以通过将其拖出日历来向我提供有关如何从FullCalendar版本2删除事件的建议吗？

我在这里看到了一些解决方案:从fullcalendar中删除元素(通过拖动到垃圾桶)

但它似乎解决了版本1.

Answer 1

我的第一个方法是:

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

这允许将事件拖动到与要删除的if条件顺序相对应的区域(以像素为单位).使用fullcalendar 2.1.1进行测试.

一个改进是检查和比较jsEvent坐标$(window).height()和$(window).width(),这样会确认/测试拖出日历区域,当然非常简洁.

实际上,改进是(一个优雅的解决方案),基于提到的解决方案:

1. 使用图标trash创建div元素:

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

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

在Fullcalendar 2.1.1上测试