如果我点击日历中的特定日期进行预约，则会出现一个模式，选择用户，服务，日期和时间并留下评论，模态有两个按钮，第一个用于预约，第二个用于取消约会，问题是如果我想选择另一个日期，我看到两个事件， 我之前单击的一个和当前单击的，如果单击">约会"按钮，将创建两个约会，我不会发生这种情况.
请，当我单击">取消"按钮时如何删除上次单击的事件。
更新：
日历块
<div class="row">
<div class="col-sm-12">
<h3 class="page-header text-uppercase">Booking</h3>
{% if client.is_subscriber(master.id) %}
<div id="calendar"></div>
{% else %}
<div class="alert alert-warning alert-dismissible alert-disappear" role="alert">
You have to subscribe first .
</div>
{% endif %}
<hr>
</div>
</div>
当天单击时出现的模态代码：
<div class="modal_window" id="calendar-modal" style="display: none;">
<div class="book_block">
<div class="base_part">
<div class="alert alert-success alert-dismissible alert-disappear" role="alert" style="display: none;" id="SuccessAppointment">
<button type="button" class="close" data-dismiss="alert" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
Appointment created.
</div>
<div class="alert alert-danger alert-dismissible alert-disappear" role="alert" style="display: none;" id="FaildAppointment">
<button type="button" class="close" data-dismiss="alert" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
Error.
</div>
<input type="hidden" name="serviceSet" id="serviceSet">
<div class="line">
<span class="line_name">Master:</span>
<div class="line_input">
<span>{{master.name}} {{master.family}}</span>
</div>
</div>
<div class="line">
<span class="line_name">Service:</span>
<select id="serviceTitleCalendar">
<option selected>choose service</option>
<option disabled="disabled">-----</option>
{% for service in master.services %}
<option value="{{service.title}}" data-service='{{service.id}}'>{{service.title}}</option>
{% endfor %}
</select>
</div>
<textarea id="serviceCommentCalendar" cols="60" rows="3" maxlength="160" class="comment" placeholder="Leave a comment" name="commentCalendar"></textarea>
</div>
<div class="bottom_part">
<input id="change-cancel-calendar" type="button" value="Отменить" onclick="$('#calendar-modal').hide();">
<input type="button" value="make appointment" id="send-appo">
</div>
</div>
</div>
完整的完整日历 js 代码：
$(document).ready(function() {
var initialLocaleCode = 'ru';
var d = new Date();
var strDate = d.getFullYear() + "/" + (d.getMonth()+1) + "/" + d.getDate();
$('#calendar').fullCalendar({
header: {
left: 'prev,next today',
center: 'title',
right: 'month,agendaWeek,agendaDay,listMonth'
},
timezone: 'local',
defaultView: 'agendaWeek',
height: 650,
locale: initialLocaleCode,
navLinks: true, // can click day/week names to navigate views
selectable: true,
selectHelper: true,
editable: false,
resizable: true,
eventResize: true,
minTime: "06:00:00",
maxTime: "22:00:00",
eventLimit: 6, // allow "more" link when too many events
select: function(title, start, end, jsEvent, view) {
var modal = $('#calendar-modal');
var title = $("select#serviceTitleCalendar option").filter(":selected").val();
var eventData;
if (title) {
$(modal).attr('style', 'display: block');
$("select#serviceTitleCalendar option").filter(function() {
return $(this).val() == $("#serviceSet").val();
}).attr('selected', true);
$("select#serviceTitleCalendar").on("change", function() {
$("#serviceSet").val($(this).find("option:selected").attr("value"));
eventData = {
id: Math.round(Math.random()*100),
title: $("#serviceSet").val(),
start: start,
end: end
};
$('#calendar').fullCalendar('renderEvent', eventData, true);
$('#send-appo').on('click', function(){
eventData = {
title: $("#serviceSet").val(),
comment: $('#serviceCommentCalendar').val(),
start: start,
end: end
};
$.ajax({
type: 'POST',
url: '/client/cat-{{g.current_directory}}/appointment/calendar',
cache: false,
data: {
'title': eventData['title'],
'comment': eventData['comment'],
'start': eventData['start']['_d'],
'end': eventData['end']['_d']
}
})
.done(function(data){
if(data.error){
$('#FaildAppointment').attr('style', 'display: block');
$('#SuccessAppointment').attr('style', 'display: none');
}
else {
$(modal).attr('style', 'display: none');
}
});
});
});
}
$('#calendar').fullCalendar('unselect');
},
events: [
{% for appo in master.appointments %}
{
title: "На услуги: n {{appo.service.title}} nn {% if appo.note %} Комментарий: n{{appo.note}} {% endif %}",
start: "{{appo.start_time}}",
end: "{{appo.end_time}}",
status: '{{appo.is_accepted}}'
},
{% endfor %}
],
eventRender: function(event, element, view) {
if(event.status == 'True') {
element.css('background-color', 'green', 'border-color', 'green');
} else {
element.css('background-color', '#e74c3c', 'border-color', '#e74c3c');
}
},
eventClick: function(calEvent, jsEvent, view) {
if(confirm("Really delete event " + calEvent.title + " ?")) {
// delete event in backend
jQuery.post(
"/delete/appointment/"
, { "id": calEvent.id }
);
// delete in frontend
$('#calendar').fullCalendar('removeEvents', calEvent._id);
}
},
viewRender: function (view,element) {
if (moment() >= view.start && moment() <= view.end) {
$(".fc-prev-button").prop('disabled', true);
$(".fc-prev-button").addClass('fc-state-disabled');
}
else {
$(".fc-prev-button").removeClass('fc-state-disabled');
$(".fc-prev-button").prop('disabled', false);
}
}
});
在我的 eventData 中，我添加了一个随机 ID，只是为了查看我是否单击了取消按钮，所有单击的事件都会被删除，它们会从日历中完全删除，但它们仍然存在，如果我确认约会，我可以看到它们，我在仪表板内收到 4 或 5 条通知。
在eventClick中，如果我直接单击事件，它会询问我是否要删除它，实际上，当我单击取消按钮而不是之后时，删除过程应该发生。
如上所述，解决了@ADyson的问题，我需要在.on()旁边使用.off()来防止向同一元素添加更多事件处理程序，您只需键入：
$(selector).off("change");
或
$(selector).off("click");
这取决于您的代码。
另一件事要提一下，我创建了一个 if 语句，如果日期有效，则只从日历中选择选择日期，如果日期无效，则不会选择它，这是更新的select:事件：
select: function(start, end, jsEvent, allDay, view) {
if (start.weekday()!=0 && start.weekday()!=6) {
$('#calendar').fullCalendar('select',start);
}
events: [
],
}
另外不要忘记添加unselectAuto并将其切换到配置中的false，以避免在取消事件时自动取消选择，在我们的情况下，正如我上面提到的，我们需要选择和取消选择仅单击的元素。
我意识到为什么每次单击都会添加越来越多的事件的另一件事是，因为我必须在$("#serviceSet").val($(this).find("option:selected").attr("value"));之后删除了额外的eventData，这也导致了问题。
我稍后会做更多的工作，但告诉知道问题得到解决.
最终，我真的要再次感谢@ADyson的兴趣:)