我在全日历中添加标题的弹出窗口几乎没有问题。当我单击到完整日历弹出窗口时，将显示，我可以添加标题并提交。提交后已经添加了事件，但是当我再次单击日历弹出窗口时，将显示旧标题，并且只有在刷新整个网站后才能进行下一次添加。
http://jsfiddle.net/Nw3fL/3/
有我的代码：
$(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
});
});
});
我的网页：
<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>
非常感谢任何帮助!!此致敬意马克罗马特
尝试遵循 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
});
});
});