Question

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

我在这里看到了一些解决方案：Remove Elements from fullcalendar (by dragging to trash can)

但它似乎解决了版本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()，这样可以确认/测试拖出日历区域，当然非常简洁。

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

使用图标trash：

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

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上测试

Answer 2

 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._id 不是event.id（所有事件将被删除）

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

Answer 3

没有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();
            }
        }

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

3 个答案: