我在 fullcalendar 中添加标题的弹出窗口没有什么问题。当我单击以显示完整日历弹出窗口时，我可以添加标题并提交。提交后事件已经添加，但是当我再次点击进入日历弹出窗口时显示旧标题并且下一次添加是不可能的，只有在刷新整个网站之后。
有我的代码：
$(document).ready(function () {
var date = new Date();
var d = date.getDate();
var m = date.getMonth();
var y = date.getFullYear();
var calendar = $('#calendar').fullCalendar({
aspectRatio: 1.45,
droppable: true,
weekend: true,
firstHour: 7,
columnFormat: {
month: 'dddd',
week: 'ddd, dS',
day: 'dddd, MMM dS'
},
header: {
right: 'prev,next',
center: 'title',
left: 'month,agendaWeek,agendaDay'
},
viewDisplay: function(view) {
try {
setTimeline();
} catch(err) {}
},
agenda: 'h:mm{ - h:mm}',
'': 'h(:mm)t',
drop: function (date, allDay) {
var originalEventObject = $(this).data('eventObject');
var copiedEventObject = $.extend({}, originalEventObject);
copiedEventObject.start = date;
copiedEventObject.end = new Date(date.getDate()+2);
copiedEventObject.allDay = allDay;
start = $.fullCalendar.formatDate(copiedEventObject.start, "yyyy-MM-dd HH:mm:ss");
end = $.fullCalendar.formatDate(copiedEventObject.end, "yyyy-MM-dd HH:mm:ss");
$.ajax({
url: '<?php echo SITEURL; ?>/fullcalendar/add_events.php',
data: 'title=' + copiedEventObject.title + '&start=' +start + '&end=' +end + "&backgroundColor=" + copiedEventObject.backgroundColor + '&creator=<?php print_r($_SESSION["uid"]); ?>',
type: "POST",
success: function (response) {
console.log(response);
$('#calendar').fullCalendar('refetchEvents');
}
});
if ($('#drop-remove').is(':checked')) {
$(this).remove();
}
},
editable: true,
defaultView: 'agendaWeek',
firstDay: 1,
handleWindowResize: true,
dragOpacity: 0.7,
allDayDefault: false,
events: "<?php echo SITEURL; ?>/fullcalendar/events.php?creator=<?php print_r($_SESSION['uid']); ?>",
timeFormat: 'HH:mm { - HH:mm}',
selectable: true,
selectHelper: true,
// 我的选择函数
select: function (start, end, allDay) {
$(".popup").css({'display':'block', 'opacity':'0'}).animate({'opacity':'1','top':'45%'}, 300);
$(".submitForm").click(function(){
var title = $(".title").val();
if (title) {
start = $.fullCalendar.formatDate(start, "yyyy-MM-dd HH:mm:ss");
end = $.fullCalendar.formatDate(end, "yyyy-MM-dd HH:mm:ss");
$.ajax({
url: '<?php echo SITEURL; ?>/fullcalendar/add_events.php',
data: 'title=' + title + '&start=' + start + '&end=' + end + '&creator=<?php print_r($_SESSION["uid"]); ?>',
type: "POST",
success: function (json) {
console.log(json);
$('#calendar').fullCalendar('refetchEvents');
}
});
console.log("start " + start + " end " + end);
}
calendar.fullCalendar('unselect');
$(".popup").css({'display':'block', 'opacity':'1'}).animate({'opacity':'0','top':'55%','display':'none'}, 300);
});
$(".exit").click(function(){
$(".popup").css({'display':'block', 'opacity':'1'}).animate({'opacity':'0','top':'55%','display':'none'}, 300);
});
},
//
eventDrop: function (event, delta) {
start = $.fullCalendar.formatDate(event.start, "yyyy-MM-dd HH:mm:ss");
end = $.fullCalendar.formatDate(event.end, "yyyy-MM-dd HH:mm:ss");
$.ajax({
url: '<?php echo SITEURL; ?>/fullcalendar/update_events.php',
data: 'title=' + event.title + '&start=' + start + '&end=' + end + '&id=' + event.id,
type: "POST",
success: function (response) {
console.log(response);
}
});
},
eventClick: function (event, jsEvent, view) {
if (confirm("Really delete event " + event.title + "with id " + event.id + "?") ) {
$.ajax({
url: "<?php echo SITEURL; ?>/fullcalendar/delete_event.php",
data: 'eid='+event.id,
type: "POST",
success: function (response) {
console.log(response);
calendar.fullCalendar('removeEvents', event.id);
}
});
}
},
eventResize: function (event) {
start = $.fullCalendar.formatDate(event.start, "yyyy-MM-dd HH:mm:ss");
end = $.fullCalendar.formatDate(event.end, "yyyy-MM-dd HH:mm:ss");
$.ajax({
url: '<?php echo SITEURL; ?>/fullcalendar/update_events.php',
data: 'title=' + event.title + '&start=' + start + '&end=' + end + '&id=' + event.id,
type: "POST",
success: function (response) {
console.log(response);
}
});
},
});
$('#external-events div.external-event').each(function () {
var eventObject = {
title: $.trim($(this).text()),
backgroundColor : $.trim($(this).attr('bgc'))
};
$(this).data('eventObject', eventObject);
$(this).draggable({
zIndex: 999,
revert: true,
revertDuration: 0
});
});
});
我的html：
<div class="popup cal-popup">
<h2>Add event!</h2>
<br />
<legend>Event title:</legend>
<input class="title eventcal-title" type="text" size="26" />
<a href="#" onclick="return false" class="submitForm" style="color:black;"><button>Submit</button></a> 
<a href="#" onclick="return false" class="exit" style="color:black;"><button>cancel</button></a>
</div>
非常感谢您的帮助！！！最好的问候 Makromat