如何从 fullcalendar 中删除外部删除的事件?
How to delete externally dropped events from fullcalendar?
我一直在努力做到这一点,以便我可以将事件从 fullcalendar 拖到垃圾桶,我的代码非常适合在初始化日历时呈现的事件,但它似乎不适用于从外部事件拖放到日历上的事件。
当我将外部事件拖到日历上,然后尝试将它们拖到垃圾桶时,它会删除所有事件。
我看过一些像 这样的帖子说要使用 _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,正如我在这里所用的那样,什么都不做。
编辑:
为了稍微澄清一下,我决定保留所有相关代码。
这就是我处理外部事件的方式。第一个是直接从我工作了大约一年的fullcalendar实例中复制的。:
<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: 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();
}
},
@ADyson 是对的。从你对他上面评论的回复:
The id also doesn't seem to show in the event object when it's on the calendar.
实际上,在任何拖动发生之前,外部元素 ID 都已丢失。在 $('#external-events .menu-event').each(...)
迭代中使用 console.log()
我发现您在 html 中指定的内联数据完全被 JS 中应用的新事件数据覆盖。
这很奇怪,因为我的理解是这不应该发生。
来自 the jQuery docs:
In jQuery 1.4.3 setting an element's data object with .data(obj) extends the data previously stored with that element.
(我假设这意味着 v1.4.3 及更高版本)。整个早上都误解了上面那行之后,我意识到文档说你可以用新元素扩展数据对象,例如:
$('#selector').data('a', stuff);
$('#selector').data('b', otherstuff);
没问题,没有冲突,$('#selector')
上的数据现在包括两个元素,以及两个值 stuff
和 otherstuff
。
但这不适用于尝试 'merge' 具有一些新值的现有元素,这就是您正在做的事情:
$('#selector').data('a', stuff);
$('#selector').data('a', otherstuff);
在这种情况下,最终结果是a
上的数据是otherstuff
,而不是stuff
与otherstuff
合并。您只是替换 a
的数据值。我认为事后看来这是显而易见的。
这样做的最终结果是 none 的外部元素在放到日历上时具有 id
。在不指定 id
will remove all events.
的情况下调用 removeEvents
似乎最好的选择是在一个地方一次指定所有数据——全部内联在 HTML 中,或者全部通过 JS 动态指定。如果您必须从两者分配它,解决方案是在迭代项目时将内联数据与新数据正确合并:
var elData = $(this).data('event'),
newData = {
title: $.trim($(this).text()),
stick: true
};
$(this).data('event', $.extend(elData, newData));
注意这里顺序很重要,newData
中的key:value对将覆盖elData
中的匹配键。
通过这次更新,我能够让您的代码正常工作。 Here's a working JSFiddle.
旁注:
您混合使用了 jQuery
和 $
,至少在您的 eventDragStop()
回调中是这样。
事件 2 和 3 的内联数据的 JSON 语法不正确。 JSON requires double quotes 用于其字符串。为了看到这一点,我在 JSFiddle 中修复了事件 2 的语法,您可以测试垃圾事件 1 和 2(有效 JSON)是否有效。尝试删除事件 3(无效 JSON),所有事件都将被删除。
我一直在努力做到这一点,以便我可以将事件从 fullcalendar 拖到垃圾桶,我的代码非常适合在初始化日历时呈现的事件,但它似乎不适用于从外部事件拖放到日历上的事件。
当我将外部事件拖到日历上,然后尝试将它们拖到垃圾桶时,它会删除所有事件。
我看过一些像
这是我使用的代码:
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,正如我在这里所用的那样,什么都不做。
编辑: 为了稍微澄清一下,我决定保留所有相关代码。
这就是我处理外部事件的方式。第一个是直接从我工作了大约一年的fullcalendar实例中复制的。:
<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: 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();
}
},
@ADyson 是对的。从你对他上面评论的回复:
The id also doesn't seem to show in the event object when it's on the calendar.
实际上,在任何拖动发生之前,外部元素 ID 都已丢失。在 $('#external-events .menu-event').each(...)
迭代中使用 console.log()
我发现您在 html 中指定的内联数据完全被 JS 中应用的新事件数据覆盖。
这很奇怪,因为我的理解是这不应该发生。 来自 the jQuery docs:
In jQuery 1.4.3 setting an element's data object with .data(obj) extends the data previously stored with that element.
(我假设这意味着 v1.4.3 及更高版本)。整个早上都误解了上面那行之后,我意识到文档说你可以用新元素扩展数据对象,例如:
$('#selector').data('a', stuff);
$('#selector').data('b', otherstuff);
没问题,没有冲突,$('#selector')
上的数据现在包括两个元素,以及两个值 stuff
和 otherstuff
。
但这不适用于尝试 'merge' 具有一些新值的现有元素,这就是您正在做的事情:
$('#selector').data('a', stuff);
$('#selector').data('a', otherstuff);
在这种情况下,最终结果是a
上的数据是otherstuff
,而不是stuff
与otherstuff
合并。您只是替换 a
的数据值。我认为事后看来这是显而易见的。
这样做的最终结果是 none 的外部元素在放到日历上时具有 id
。在不指定 id
will remove all events.
removeEvents
似乎最好的选择是在一个地方一次指定所有数据——全部内联在 HTML 中,或者全部通过 JS 动态指定。如果您必须从两者分配它,解决方案是在迭代项目时将内联数据与新数据正确合并:
var elData = $(this).data('event'),
newData = {
title: $.trim($(this).text()),
stick: true
};
$(this).data('event', $.extend(elData, newData));
注意这里顺序很重要,newData
中的key:value对将覆盖elData
中的匹配键。
通过这次更新,我能够让您的代码正常工作。 Here's a working JSFiddle.
旁注:
您混合使用了
jQuery
和$
,至少在您的eventDragStop()
回调中是这样。事件 2 和 3 的内联数据的 JSON 语法不正确。 JSON requires double quotes 用于其字符串。为了看到这一点,我在 JSFiddle 中修复了事件 2 的语法,您可以测试垃圾事件 1 和 2(有效 JSON)是否有效。尝试删除事件 3(无效 JSON),所有事件都将被删除。