Используя fullCalendar, я позволяю пользователю выбрать день в представлении месяца в большом календаре (#cal_big), и будет отображаться соответствующий маленький календарь в представлении дня с указанием часов (#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') не работает для удаления неподтвержденных событий и как Я могу решить эту проблему.