我在fullcalendar中添加标题弹出窗口没什么问题。当我点击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
答案 0 :(得分：0)
尝试以下JS ......
日期格式存在问题。
我已经替换了下面的行...
start = $.fullCalendar.formatDate(start, "yyyy-MM-dd HH:mm:ss");
end = $.fullCalendar.formatDate(end, "yyyy-MM-dd HH:mm:ss");
跟随......
start = $.fullCalendar.formatDate(new Date(start), "yyyy-MM-dd HH:mm:ss");
end = $.fullCalendar.formatDate(new Date(end), "yyyy-MM-dd HH:mm:ss");
$(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;
$.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(new Date(start), "yyyy-MM-dd HH:mm:ss");
end = $.fullCalendar.formatDate(new Date(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 () {
// clear all info, unselect events and...
$(".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
});
});
});