fullCalendar 1.5.3创建了多个事件，无法删除未选中的事件

使用fullCalendar，我允许用户在大日历（#cal_big）中选择月中视图，并在日视图中选择相应的小日历，并显示小时数（#cal_small）。

每当用户在#cal_small中选择一个事件（一小时或一小时）时，我将显示一个确认/取消模式。 确认/取消模式允许用户确认预订或取消预订（这在语义上意味着用户并不真的想要预订该时段）。

如果用户确认预订，我会向服务器发出ajax呼叫并注册预订。 一旦ajax调用成功返回，我只需隐藏当前模态并显示“您的预订成功！” 新模式中的消息。 这部分完美无瑕。

如果用户取消预订，则确认/取消模式被隐藏，我尝试以编程方式取消选择当前选择，这就是问题开始的地方。 unselect不起作用，似乎fullCalendar会记住所有这些未经确认的选择，当用户最终确认他的选择时，一大堆以前未经证实的选择都会在多个ajax调用中重复发送到服务器。

为什么会如此？如何阻止fullCalendar记住未经证实的选择？

这是代码： –

$(document).ready(function() { var todayDate = new Date(); var myDate = todayDate.setDate(todayDate.getDate() - 1); var csrfmiddlewaretoken = '{{ csrf_token }}'; var condo_slug = '{{ condo.slug }}'; var facility = $("#id_facility"); var cal_small_options = { titleFormat: { day: 'dddd' }, header: { left: '', center:'title', right:'', }, height: 520, defaultView: 'agendaDay', editable: true, minTime: '10:00', maxTime: '23:00', slotMinutes: 60, selectable: true, select: function(startDate, endDate, allDay, jsEvent, view) { console.log("selection triggered", jsEvent.handleObj.guid) checkAvailability(csrfmiddlewaretoken, condo_slug, facility, startDate, endDate); $('#confirm').click(function(){ confirmBooking(csrfmiddlewaretoken, condo_slug, facility.val(), startDate, endDate) }); }, events: function(start, end, callback) { // start and end marks the current date range shown on the calendar ajaxShowEvents(facility.val(), condo_slug, start, end, callback); }, eventClick: function(event) { console.log(event.title); }, viewDisplay: function(view) { // Clear the calendar and retrieve event objects when user selects a facility. $('#id_facility').change(function(){ ajaxShowEvents(facility_id = $(this).val(), start = view.start, end = view.end); }); } }; var cal_big_options = { header: { left: '', center:'title', right: '' }, dayClick: function(date, allDay, jsEvent, view) { if (date < myDate) { alert('You cannot book on this day!'); } if (allDay) { $('#cal_small').fullCalendar('gotoDate', date); } else { alert('Clicked on the slot: ' + date); } }, selectable: true, unselectCancel: '', events: function(start, end, callback) { // start and end marks the current date range shown on the calendar ajaxShowEvents(facility.val(), condo_slug, start, end, callback); }, viewDisplay: function(view) { // Clear the calendar and retrieve event objects when user selects a facility. $('#id_facility').change(function(){ ajaxShowEvents(facility_id = $(this).val(), start = view.start, end = view.end); }); }, eventClick: function(event, jsEvent, view) { if(event.start < myDate) { alert('You cannot book on this day!'); } else { // check to see if the booking belongs to user ajaxCheckBooking(csrfmiddlewaretoken, event); $('#confirm').click(function(){ ajaxDeleteBooking(csrfmiddlewaretoken, event) }); } } }; $('#cal_small').fullCalendar(cal_small_options); $('#cal_big').fullCalendar(cal_big_options); $('.cancel, .btn_close').click(function() { $('#cal_big, #cal_small').fullCalendar('unselect') $('#modal-window').modal('hide'); }); }); // END document ready 

UPDATE

confirmBooking函数按要求： –

 function confirmBooking(csrfmiddlewaretoken, condo_slug, facility_id, startDate, endDate) { // Given condo slug, facility id and the user selected startDate and endDate, // send an ajax post request to confirm the booking post_data = {csrfmiddlewaretoken: csrfmiddlewaretoken, condo_slug: condo_slug, facility_id: facility_id, start_date: startDate.toUTCString(), end_date: endDate.toUTCString()} $.ajax({ url: '/facility/ajax-confirm-booking/', data: post_data, type: 'POST', dataType: 'json', success: function(data) { if (data['status']=='success') { message = "Your booking is confirmed!" event = new Object(); event.id = data['id']; event.title = "Your Booked Event"; event.start = startDate; event.end = endDate; event.allDay = false; $("#cal_big").fullCalendar('renderEvent', event); $("#cal_small").fullCalendar('renderEvent', event); // TODO: // * disable the submit and reset buttons // * email notification to end user and property manager } else if (data['status']=='not logged in') { message = "You are not yet logged in!" // TODO: // * Provide fb login button so user can login. } else { message = "I am sorry. Something went wrong with your booking" // TODO: // * Work on an email notification to site admin if a booking has failed for some reason } displayModal(message, false); } }); }; // END confirmBooking 

感谢是否有人可以详细说明为什么.fullCalendar（’unselect’）调用无法删除未经证实的事件以及如何解决此问题。

Answer 1

解决了它。

这是一个我完全错过的死亡简单的bug。

  select: function(startDate, endDate, allDay, jsEvent, view) { console.log("selection triggered", jsEvent.handleObj.guid) checkAvailability(csrfmiddlewaretoken, condo_slug, facility, startDate, endDate); $('#confirm').click(function(){ confirmBooking(csrfmiddlewaretoken, condo_slug, facility.val(), startDate, endDate) }); }, 

每次在日历上选择事件时，都会将click事件绑定到#confirm按钮。 因此，如果用户在未确认的情况下继续选择事件，则#confirm按钮将继续使用不同的startDate和endDate累积不同的点击事件。 当用户在重复犹豫不决后最终点击#confirm按钮时，所有点击事件一次性触发，导致先前未选择的事件作为ajaxpost发送到服务器。

要解决这个问题，我必须记住在用户点击.cancel或.close按钮时指定$('#confirm').unbind() 。

唉……一个简单的解决方案，但我花了很长时间才看到它！

Answer 2

我有同样的问题，但我用这个解决了它：

 $( "#confirm" ).dialog({... 

如果我早些时候知道unbind ，那么我必须改变的所有东西都没有必要:(