已经有同名的问题。我尝试了他们提供的解决方案，但没有帮助。
我正在尝试动态地将事件添加到fullcalendar。 这意味着，我有一个AJAX请求，它将与PHP服务进行通信，并将返回需要在日历中显示的数据。
每当我更改一个月（仅启用月视图）时，就会启动此AJAX请求。因此，当用户使用向右或向左箭头按钮并导航到2016年11月时，将返回以下JSON。这就是它每个月的工作方式。
[
{
"start": "2016-11-01 00:00:00",
"title": "Non Work Day",
"backgroundColor": "#00a65a",
"borderColor": "#00a65a"
},
{
"start": "2016-11-02 00:00:00",
"title": "Absent",
"backgroundColor": "#00a65a",
"borderColor": "#00a65a"
},
{
"start": "2016-11-03 00:00:00",
"title": "Absent",
"backgroundColor": "#00a65a",
"borderColor": "#00a65a"
},
{
"start": "2016-11-04 00:00:00",
"title": "Absent",
"backgroundColor": "#00a65a",
"borderColor": "#00a65a"
}
]
这是我的AJAX函数，可以获取这些值。现在，我已经在其中硬编了一个日期。
function fetchCalenderAttendance(dateofMonth)
{
var date = "2016-11-01";
var post_url = "url_to_php_service.php";
$.ajax({
url: post_url,
data:{dateofMonth:date,csrf_test_name:csrf_token},
type: "POST",
dataType: 'JSON',
beforeSend: function ( xhr )
{
//Add your image loader here
$('#loading').show();
},
success: function(result)
{
var event= result;
$('#calendar').fullCalendar( 'renderEvent', event, true);
//$('#calendar').fullCalendar( 'updateEvent', event );
}
});//end of ajax
}
当我给$('#calendar').fullCalendar( 'renderEvent', event, true);时
我得到t.start未定义。
当我给$('#calendar').fullCalendar( 'updateEvent', event );时
我得到n是未定义的。
在一个SO问题中，提到格式化日期。我在PHP服务中做到了
Date_create （）：从数据库字段创建日期
example: $start = date_create($row->start_date)
Date_format （）：将日期转换为日期时间
example: date_format ($start, 'Y-m-d H:i:s')
我不知道为什么我无法添加活动。
这是我的fullcalendar js文件。
$(function () {
/* initialize the calendar
-----------------------------------------------------------------*/
//Date for the calendar events (dummy data)
var date = new Date();
var d = date.getDate(),
m = date.getMonth(),
y = date.getFullYear();
var dateofMonth=y+'-'+m+'-'+d;
//fetchCalenderAttendance(dateofMonth);
$('#calendar').fullCalendar({
header: {
left: 'prev,next',
center: 'title',
right: 'month'
},
buttonText: {
today: 'today',
month: 'month'
},
//Random default events
events: [
{
title: 'Absent',
start: new Date(y, m, 1),
backgroundColor: "#f56954", //red
borderColor: "#f56954" //red
},
{
title: 'Holiday',
start: new Date(y, m, d - 5),
end: new Date(y, m, d - 2),
backgroundColor: "#00c0ef", //Info (aqua)
borderColor: "#00c0ef" //Info (aqua)
},
{
title: 'Late by : 00:10:41',
start: new Date(y, m, 2),
backgroundColor: "#f39c12", //yellow
borderColor: "#f39c12" //yellow
},
{
title: 'On Time',
start: new Date(y, m, d + 2, 19, 0),
end: new Date(y, m, d + 1, 22, 30),
allDay: false,
backgroundColor: "#00a65a", //Success (green)
borderColor: "#00a65a" //Success (green)
}
],
editable: true,
droppable: true, // this allows things to be dropped onto the calendar !!!
drop: function (date, allDay) { // this function is called when something is dropped
// retrieve the dropped element's stored Event Object
var originalEventObject = $(this).data('eventObject');
// we need to copy it, so that multiple events don't have a reference to the same object
var copiedEventObject = $.extend({}, originalEventObject);
// assign it the date that was reported
copiedEventObject.start = date;
copiedEventObject.allDay = allDay;
copiedEventObject.backgroundColor = $(this).css("background-color");
copiedEventObject.borderColor = $(this).css("border-color");
// render the event on the calendar
// the last `true` argument determines if the event "sticks" (http://arshaw.com/fullcalendar/docs/event_rendering/renderEvent/)
$('#calendar').fullCalendar('renderEvent', copiedEventObject, true);
// is the "remove after drop" checkbox checked?
if ($('#drop-remove').is(':checked')) {
// if so, remove the element from the "Draggable Events" list
$(this).remove();
}
}
});
/* ADDING EVENTS */
var currColor = "#3c8dbc"; //Red by default
//Color chooser button
var colorChooser = $("#color-chooser-btn");
$("#color-chooser > li > a").click(function (e) {
e.preventDefault();
//Save color
currColor = $(this).css("color");
//Add color effect to button
$('#add-new-event').css({"background-color": currColor, "border-color": currColor});
});
$("#add-new-event").click(function (e) {
e.preventDefault();
//Get value and make sure it is not null
var val = $("#new-event").val();
if (val.length == 0) {
return;
}
//Create events
var event = $("<div />");
event.css({
"background-color": currColor,
"border-color": currColor,
"color": "#fff"
}).addClass("external-event");
event.html(val);
$('#external-events').prepend(event);
//Add draggable funtionality
ini_events(event);
//Remove event from text input
$("#new-event").val("");
});
$('.fc-corner-left').click(function() {
var date = $('#calendar').fullCalendar('getDate');
dateofMonth = "2016-11-01";
if(dateofMonth)
{
fetchCalenderAttendance(dateofMonth);
}
});
$('.fc-corner-right').click(function() {
var date = $('#calendar').fullCalendar('getDate');
dateofMonth = "2016-11-01";
if(dateofMonth)
{
fetchCalenderAttendance(dateofMonth);
}
});
});