如何从完整日历中删除外部丢弃的事件？

Question

我一直在努力做到这一点，以便我可以将事件从 fullcalendar 拖到垃圾箱中，并且我拥有的代码非常适用于在日历初始化时呈现的事件，但它似乎不适用于以下事件已从外部事件中删除到日历中。

当我将外部事件拖到日历上，然后尝试将它们拖到回收站时，它会删除所有事件。

我看过一些帖子，比如this，说要使用 _id 属性，但是当我这样做时，什么都没有被删除。

这是我正在使用的代码：

eventDragStop: function (event, jsEvent) {

    var trashEl = jQuery('#trashCan');
    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) {
        console.log(event);
        $('#calendar').fullCalendar('removeEvents', event._id);
    }
},

传递 event.id 有效，但 event._id，正如我在这里所拥有的，什么都不做。

编辑： 为了澄清一点，我决定我应该留下所有相关的代码。

这就是我处理外部事件的方式。第一个是直接从我工作了大约一年的完整日历实例中复制而来的。：

<div id="external-events" class="dropdown col-lg-3">
    <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1"
            data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
        Unscheduled Events
        <span class="caret"></span>
    </button>
    <ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
        <li class="dropdown-header">Drag events to calendar</li>
        <li class="divider"></li>
        <li><a href="#" data-duration="01:00" data-event='{"id": "803", "title": "Jennifer Ramundo"}' class='menu-event'>My Event 1</a></li>
        <li class="divider"></li>
        <li><a href="#" data-event="{'id': '2'}" class='menu-event'>My Event 2</a></li>
        <li class="divider"></li>
        <li><a href="#" data-event="{'id': '3'}" class='menu-event'>My Event 3</a></li>
    </ul>
</div>

这是我初始化外部事件的方式：

$('#external-events .menu-event').each(function () {

    // store data so the calendar knows to render an event upon drop
    $(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)
    });

    // make the event draggable using jQuery UI
    $(this).draggable({
        zIndex: 999,
        revert: true,      // will cause the event to go back to its
        revertDuration: 0  //  original position after the drag
    });
});

这是我的 drop 函数：

drop: function (date, jsEvent, ui, resourceId) {
    console.log('drop', date.format(), resourceId);
    $(this).parent().next().remove();
    $(this).remove();
    if ($('#external-events').find('.menu-event').length === 0) {
        $('#external-events').hide();
    }
},

Answer 1

@ADyson 是对的。从您对他上述评论的回复中：

当它在日历上时，id 似乎也没有显示在事件对象中。

事实上，外部元素 ID 在任何拖动发生之前都会丢失。在 $('#external-events .menu-event').each(...) 迭代中使用 console.log() 我发现您在 html 中指定的内联数据完全被 JS 中应用的新事件数据覆盖。

这很奇怪，因为我的理解是这不应该发生。 来自the jQuery docs：

在 jQuery 1.4.3 中，使用 .data(obj) 设置元素的数据对象会扩展之前使用该元素存储的数据。

（我假设这意味着 v1.4.3 及更高版本）。在整个早上误解了那条线之后，我意识到文档说您可以使用新元素扩展数据对象，例如：

$('#selector').data('a', stuff);
$('#selector').data('b', otherstuff);

没问题，没有冲突，$('#selector') 上的数据现在包含两个元素，以及两个值 stuff 和 otherstuff。

但这不适用于尝试将现有元素与一些新值“合并”，这就是你正在做的：

$('#selector').data('a', stuff);
$('#selector').data('a', otherstuff);

在这种情况下，最终结果是a 上的数据是otherstuff，而不是stuff 与otherstuff 合并。您只是替换a 的数据值。我认为，事后看来，这很明显。

这样做的最终结果是，当您的任何外部元素放到日历上时，都没有id。调用removeEvents 没有指定id will remove all events。

似乎最简洁的选择是在一个地方一次性指定所有数据 - 全部内联在 HTML 中，或者全部通过 JS 动态指定。如果您必须从两者中分配它，则解决方案是在迭代项目时将内联数据与新数据正确合并：

var elData = $(this).data('event'),
newData = {
    title: $.trim($(this).text()),
    stick: true
};
$(this).data('event', $.extend(elData, newData));

注意这里的顺序很重要，newData 中的键：值对将覆盖elData 中的匹配键。

通过此更新，我能够让您的代码正常工作。 Here's a working JSFiddle.

旁注：

• 您正在混合使用 jQuery 和 $，至少在您的 eventDragStop() 回调中。

• 事件 2 和 3 的内联数据的 JSON 语法不正确。 JSON requires double quotes 为其字符串。为了看到这一点，我在 JSFiddle 中修复了事件 2 的语法，您可以测试垃圾事件 1 和 2（有效的 JSON）是否有效。尝试删除事件 3（无效的 JSON），所有事件都将被删除。