完整日历 - dayRender 在'removeEvents'调用后似乎不起作用

Question

我在ASP.NET MVC应用程序中使用FullCalendar v1.6.4(作为模拟)。

一方面，我实现了"dayRender"回调，以引入"cell.bind('dblclick'，function()｛…｝)；"(通过双击day单元格来添加事件)。

另一方面，我实现了"eventClick"回调，以在单击事件时显示KendoUI窗口弹出。

在这个窗口中，我有一些版本控制&2个按钮：一个用于使用版本控件中的新值修改事件，另一个用于删除事件。

"delete"按钮触发了"removeEvents"回调，将当前事件删除到日历中。

一切都很好，但当我处理到删除一个事件时，我就不能添加新的事件了。

"dblclick"事件似乎被很好地激发了(我已经放置了一些JS警报进行测试)。我在Chrome调试器的中没有发现javascript错误

有人看到我错在哪里了吗？

这是我的代码：

@{
ViewBag.Title = "Mock";
}
<h2 class="content-title">Mock</h2>
<div class="divSetAddedActivity">
<input id="ddlMissions" style="width: 250px" />
<input id="tbxDuration" type="number" value="8" min="1" max="24" step="1" />
<textarea rows="1" cols="50" id="tbxComment" placeholder="Add a comment"></textarea>
</div>
<div>
<div id='calendar'></div>
</div>
<div id="window">
<p id="activityDate"></p>
<input type="hidden" id="itemId"/>
<input id="ddlMissions2" style="width: 250px" />
<input id="tbxDuration2" type="number" min="1" max="24" step="1" />
<textarea rows="1" cols="50" id="tbxComment2" placeholder="Add a comment"></textarea>
<button id="btnModifyActivity">Modify</button>
<button id="btnDeleteActivity">Delete</button>
</div>
<script>
jQuery(document).ready(function () {
var window = $("#window");
$("#tbxDuration").kendoNumericTextBox({
format: "# h",
decimals: 0
});
$("#tbxDuration2").kendoNumericTextBox({
format: "# h",
decimals: 0
});
if (!window.data("kendoWindow")) {
window.kendoWindow({
width: "500px",
visible: false,
modal: true,
title: "Modify activity"
});
}
var today = new Date();
var d = today.getDate();
var m = today.getMonth();
var y = today.getFullYear();
var userEvents = [];
var missions = [{ Id: 1, DisplayLabel: 'Mission1' },
{ Id: 2, DisplayLabel: 'Mission2' },
{ Id: 3, DisplayLabel: 'Mission3' },
{ Id: 4, DisplayLabel: 'Mission4' },
{ Id: 5, DisplayLabel: 'Mission5' },
{ Id: 6, DisplayLabel: 'Mission6' },
{ Id: 7, DisplayLabel: 'Mission7' },
{ Id: 8, DisplayLabel: 'Mission8' }];
jQuery("#ddlMissions").kendoDropDownList({
dataSource: missions,
dataTextField: "DisplayLabel",
dataValueField: "Id"
});
jQuery("#ddlMissions2").kendoDropDownList({
dataSource: missions,
dataTextField: "DisplayLabel",
dataValueField: "Id"
});
jQuery('#calendar').fullCalendar({
header: {
left: 'prev,next today',
center: 'title',
right: ''
},
editable: true,
firstDay: 1,
eventClick: function(calEvent, jsEvent, view) {
jQuery("#itemId").val(calEvent.id);
jQuery("#activityDate").text(calEvent.start);
jQuery("#ddlMissions2").data("kendoDropDownList").value(calEvent.missionId);
jQuery("#tbxDuration2").val(calEvent.duration);
jQuery("#tbxComment2").val(calEvent.comment);
window.data("kendoWindow").open();
window.data("kendoWindow").center();
},
eventMouseover: function (calEvent, jsEvent) {
var tooltip = '<div class="tooltipevent" style="width:150px;background:rgb(159,201,175);position:absolute;z-index:10001;"><b>' + calEvent.title + '</b><br/>'+ calEvent.duration + 'h<br/><i>' + calEvent.comment +'</i></div>';
$("body").append(tooltip);
$(this).mouseover(function (e) {
$(this).css('z-index', 10000);
$('.tooltipevent').fadeIn('500');
$('.tooltipevent').fadeTo('10', 1.9);
}).mousemove(function (e) {
$('.tooltipevent').css('top', e.pageY + 10);
$('.tooltipevent').css('left', e.pageX + 20);
});
},
eventMouseout: function (calEvent, jsEvent) {
$(this).css('z-index', 8);
$('.tooltipevent').remove();
},
eventRender: function(event, element) { 
element.find('.fc-event-title').append("<br/>" + event.duration + "h"); 
element.find('.fc-event-time').hide();
},
dayRender: function (date, cell) {
cell.bind('dblclick', function () {
var ddlMissions = $("#ddlMissions").data("kendoDropDownList");
var numDuration = $("#tbxDuration").data("kendoNumericTextBox");
alert('a');
userEvents.push({
id: userEvents[userEvents.length - 1].id + 1,
title: ddlMissions.text(),
missionId: ddlMissions.value(),
start: new Date(date.getFullYear(), date.getMonth(), date.getDate()),
allDay: false,
duration: numDuration.value(),
comment: jQuery("#tbxComment").val(),
color: "green"
});
alert('b');
jQuery('#calendar').fullCalendar('refetchEvents');
alert('c');
});
},
events: userEvents
});
jQuery("#btnModifyActivity").click(function () {
var currentId = jQuery("#itemId").val();
var activity = jQuery.grep(userEvents, function (e) { return e.id == currentId; })[0];
activity.title = jQuery("#ddlMissions2").data("kendoDropDownList").text();
activity.missionId = jQuery("#ddlMissions2").data("kendoDropDownList").value();
activity.duration = jQuery("#tbxDuration2").val();
activity.comment = jQuery("#tbxComment2").val();
for (var i = 0; i < userEvents.length; i++) {
if (userEvents[i].id === activity.id) {
userEvents[i] = activity;
}
}
jQuery('#calendar').fullCalendar('refetchEvents');
window.data("kendoWindow").close();
});
jQuery("#btnDeleteActivity").click(function () {
var currentId = jQuery("#itemId").val();
jQuery('#calendar').fullCalendar('removeEvents', [currentId]);
jQuery('#calendar').fullCalendar('refetchEvents');
window.data("kendoWindow").close();
});
});
</script>

谢谢！

Answer 1

好的，添加这个似乎已经解决了：

jQuery('#calendar').fullCalendar('removeEvents');
jQuery('#calendar').fullCalendar('addEventSource', userEvents);
$('#calendar').fullCalendar('rerenderEvents');

代替这个(在我的"dayRender"回调结束时)：

jQuery('#calendar').fullCalendar('refetchEvents');