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

Question

使用 fullCalendar，我允许用户在大日历 (#cal_big) 中选择月 View 中的一天，并在日 View 中选择相应的小日历，并显示小时 (#cal_small)。

每当用户在 #cal_small 中选择一个事件(一小时或几小时)时，我都会显示确认/取消模式。确认/取消模式允许用户确认预订或取消预订(这在语义上意味着用户毕竟不想预订该时段)。

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

如果用户取消预订，确认/取消模式将被隐藏，我尝试以编程方式取消选择当前选择，这就是问题开始的地方。取消选择不起作用，似乎 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

更新

按要求确认预订功能:-

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

解决了。

这是一个非常简单的错误，我完全错过了。

   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)
        });
    },

每次在日历上选择一个事件时，都会将单击事件绑定(bind)到#confirm 按钮。因此，如果用户不断选择事件而不确认，#confirm 按钮将不断累积具有不同 startDate 和 endDate 的不同点击事件。当用户在反复犹豫不决后最终点击 #confirm 按钮时，所有点击事件都会一次性触发，导致之前未选择的事件作为 ajax post 发送到服务器。

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

啊...一个简单的解决方案，但我花了很长时间才看到它!