По ссылке пример календаря и скрипт которой я использую.
https://preview.keenthemes.com/html/metronic/docs/...
Я его доработал и добавил в него Ajax запрос:
Иногда (не всегда) создаются дубликаты заявки при обновлении, а сама заявка не меняется. При этом в консоле может отправляться до 4 запросов вместо 1. На бэкенде я сделал проверку и запрет на создание дубликатов, но скрипт как-то его обходит.
Код обновления заявки:
submitButton.addEventListener('click', function (e) {
// Prevent default button action
e.preventDefault();
// Validate form before submit
if (validator) {
validator.validate().then(function (status) {
console.log('validated!');
if (status == 'Valid') {
// Show loading indication
submitButton.setAttribute('data-kt-indicator', 'on');
// Disable submit button whilst loading
submitButton.disabled = true;
// Simulate form submission
setTimeout(function () {
let allDayEvent = false;
if (allDayToggle.checked) { allDayEvent = true; }
if (startTimeFlatpickr.selectedDates.length === 0) { allDayEvent = true; }
// Merge date & time
var startDateTime = moment(startFlatpickr.selectedDates[0]).format();
var endDateTime = moment(endFlatpickr.selectedDates[endFlatpickr.selectedDates.length - 1]).format();
if (!allDayEvent) {
const startDate = moment(startFlatpickr.selectedDates[0]).format('YYYY-MM-DD');
const endDate = startDate;
const startTime = moment(startTimeFlatpickr.selectedDates[0]).format('HH:mm:ss');
const endTime = moment(endTimeFlatpickr.selectedDates[0]).format('HH:mm:ss');
startDateTime = startDate + 'T' + startTime;
endDateTime = endDate + 'T' + endTime;
}
var $crf_token = $('[name="csrfmiddlewaretoken"]').attr('value');
$.ajax({
url: 'calendar/api/events/' + data.id + '/',
headers:{"X-CSRFToken": $crf_token},
data: {
"calendar_id": uid(),
"route": eventRoute.value,
"city": eventCity.value,
"location": eventLocation.value,
"phone": eventPhone.value,
"client": eventClient.value,
"entity": eventEntity.value,
"is_date": eventIsDate.value,
"number_counters": eventNumberCounters.value,
"water": eventWater.value,
"price": eventPrice.value,
"phone_second": eventPhoneSecond.value,
"information": eventInformation.value,
"creator": eventCreator.value,
"start": startDateTime,
"end": endDateTime,
"all_day": allDayEvent,
},
type: "PATCH",
});
e.stopImmediatePropagation(); // to prevent more than once submission
// Simulate form submission
submitButton.removeAttribute('data-kt-indicator');
// Show popup confirmation
Swal.fire({
text: "Заявка успешно обновлена!",
icon: "success",
buttonsStyling: false,
confirmButtonText: "ОК!",
customClass: {
confirmButton: "btn btn-primary"
}
}).then(function (result) {
submitButton.disabled = false;
if (result.isConfirmed) {
modal.hide();
// Enable submit button after loading
// Remove old event
calendar.getEventById(data.id).remove();
// Detect if is all day event
// calendar.refetchResources();
calendar.render();
calendar.refetchEvents();
// Reset form for demo purposes only
// form.reset();
}
});
calendar.refetchEvents();
//form.submit(); // Submit form
}, 200);
} else {
// Show popup warning
Swal.fire({
text: "К сожалению при заполнении возникли ошибки, которые нужно устранить",
icon: "error",
buttonsStyling: false,
confirmButtonText: "ОК!",
customClass: {
confirmButton: "btn btn-primary"
}
});
}
});
}
},);
Код создания заявки аналогично:
var $crf_token = $('[name="csrfmiddlewaretoken"]').attr('value');
$.ajax({
url: 'calendar/api/events/',
headers:{"X-CSRFToken": $crf_token},
data: {
"calendar_id": uid(),
"route": eventRoute.value,
"city": eventCity.value,
"location": eventLocation.value,
"phone": eventPhone.value,
"client": eventClient.value,
"entity": eventEntity.value,
"is_date": eventIsDate.value,
"number_counters": eventNumberCounters.value,
"water": eventWater.value,
"price": eventPrice.value,
"phone_second": eventPhoneSecond.value,
"information": eventInformation.value,
"creator": eventCreator.value,
"start": startDateTime,
"end": endDateTime,
"all_day": allDayEvent,
},
type: "POST",
});
e.stopImmediatePropagation(); // to prevent more than once submission
