Используя 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
UPDATE
Функция подтверждения бронирования по запросу: -
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') не работает для удаления неподтвержденных событий и как я могу решить эту проблему.