fullCalendar 1.5.3创建了多个事件，无法删除未选中的事件 [英] fullCalendar 1.5.3 multiple events created, unable to remove unselected events

问题描述

使用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）{
 //开始和结束标记日历上显示的当前日期范围
 ajaxShowEvents（facility.val（） ，condo_slug，start，end，callback）; 
}，
 eventClick：function（event）{
 console.log（event.title）; 
}，
 viewDisplay：function（view）{
 //当用户选择设施时，清除日历并检索事件对象。 
 $（'＃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（'你不能在这天预定！ 
} 
 if（allDay）{
 $（'＃cal_small'）。fullCalendar（'gotoDate'，date）; 
} else {
 alert（'点击插槽：'+日期）; 
 
}，
 selectable：true，
 unselectCancel：''，
 events：function（start，end，callback）{
 // start并结束标记日历中显示的当前日期范围
 ajaxShowEvents（facility.val（），condo_slug，start，end，callback）; 
}，
 viewDisplay：function（view）{
 //当用户选择设施时，清除日历并检索事件对象。 
 $（'＃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（'您无法预订这天！'）; 
} else {
 //检查预订是否属于用户
 ajaxCheckBooking（csrfmiddlewaretoken，event）; 
 $（'＃confirm'）。click（function（）{
 ajaxDeleteBooking（csrfmiddlewaretoken，event）
}）; 
} 
} 
}; 
 
 $（'＃cal_small'）。fullCalendar（cal_small_options）; 
 
 $（'＃cal_big'）。fullCalendar（cal_big_options）; 
 $ b $（'。cancel，.btn_close'）。click（function（）{
 $（'＃cal_big，＃cal_small'）。fullCalendar（'unselect'）
 $（'＃modal-window'）。modal（'hide'）; 
}）; 
 
}）; // END文档准备好
  

更新

请求的confirmBooking函数： -

 函数confirmBooking（csrfmiddlewaretoken，condo_slug，facility_id，startDate，endDate ）{
 //给定condo slug，facility id和用户选择的startDate和endDate，
 //发送ajax post请求以确认预订
 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，
类型：'POST'，
 dataType：'json'，
成功：函数（data）{
 if（data ['status'] =='success'）{
 message =您的预订是确认！
 event = new Object（）; 
 event.id = data ['id']; 
 event.title =您的预订活动; 
 event.start = startDate; 
 event.end = endDate; 
 event.allDay = false; 
 $（＃cal_big）。fullCalendar（'renderEvent'，event）; 
 $（＃cal_small）。fullCalendar（'renderEvent'，event）; 
 // TODO：
 // *禁用提交和重置按钮
 // *向最终用户和物业经理发送电子邮件通知
} else if（data ['status'] =='not logged in'）{
 message =你还没有登录！ 
 // TODO：
 // *提供fb登录按钮，以便用户可以登录。 
} else {
 message =我很抱歉，您的预订出了问题
 // TODO：
 // *如果由于某种原因预订失败
 
 $ b $ displayModal（message，false）; 
} 
}）; 
}; //结束confirmBooking 
  

请注意，如果有人可以详细说明.fullCalendar（'unselect'）调用的原因不工作，以消除未经证实的事件，我怎么可能解决这个问题。

解决方案

解决它。 b

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

  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）
}）; 
}，
  

会导致点击事件绑定到每次在日历上选择一个事件时，＃确认按钮。因此，如果用户不确认选择事件， #confirm 按钮将使用不同的startDate和endDate累积不同的点击事件。当用户最终点击 #confirm 按钮后，所有点击事件都会一次性触发，导致之前未选中的事件作为ajax发送到服务器为了解决这个问题，我必须记得指定 $（'＃confirm'）。unbind（）

当用户点击 .cancel 或 .close 按钮时。

阿格...一个简单的解决方案，但它花了我很长时间才能看到它！

Using fullCalendar, I allow a user to select a day in month view in a big calendar (#cal_big) and the corresponding small calendar in day view, with hours shown (#cal_small) will be displayed.

Whenever the user selects an event (an hour or block of hours) in #cal_small, I will display a confirm/cancel modal. The confirm/cancel modal allows the user to either confirm the booking or cancel the booking (which semantically means that the user does not really want to book that slot after all).

If the user confirms the booking, I make an ajax call to the server and registers the booking. Once the ajax call returns successfully, I simply hide the current modal and display a "Your booking is successful!" message in a new modal. This part works flawlessly.

If the user cancels the booking, the confirm/cancel modal gets hidden and I attempt to programmatically unselect the current selection and this is where the problem begins. The unselect does not work and it seems that fullCalendar remembers all these selections which are not confirmed and when the user finally confirms his selection, a whole bunch of previously unconfirmed selections are all sent to the server repeatedly in multiple ajax calls.

Why is this so and how do I prevent fullCalendar from remembering unconfirmed selections?

Here's the code:-

$(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

The confirmBooking function as requested:-

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

Appreciate if some one could elaborate why the .fullCalendar('unselect') call does not work to remove unconfirmed events and how I can possible solve this problem.

解决方案

Solved it.

It is a dead simple bug which I completely missed.

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

causes a click event to be bound to the #confirm button everytime an event is selected on the calendar. So if the user keeps selecting event without confirming, the #confirm button will keep accumulating different click events with different startDate and endDate. When the user finally hits the #confirm button after repeated indecision, all the click events fire off at one go, resulting in the previously unselected events being sent to the server as an ajax post.

To solve this, I must remember to specify $('#confirm').unbind() when the user clicks on the .cancel or .close button.

Argh... a simple solution but it took me so long to see it!

这篇关于fullCalendar 1.5.3创建了多个事件，无法删除未选中的事件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！