j查询完整日历回调未定义错误

Question

我一直在关注 fullcalendar 的文档，终于找到了一种从我的 php 后端数据库返回 json 对象的方法。但是我收到此错误： 未捕获的类型错误：未定义回调

任何人都可以帮忙吗？

这是全日历的代码，请注意，我正在使用 react。这在 ComponentDidMount 位中执行，正如我在使用完整日历的教程中看到的那样。

$(calendar).fullCalendar({
header: {
left: 'none',
center: 'title',
right: 'today prev,next',
},
height: 480,
width: 20,
editable: true,
eventAfterAllRender: function(event, element, view) {
alert(event.title);
var new_description =
'<div style="background-color: #4286f4"><strong>Title: </strong><br/>' + event.title + '<br/>'+
'<strong>Month: </strong><br/>'+view.title+'<br/></div>';
return (new_description);
},
events: function(callback) {
let d = $(calendar).fullCalendar('getDate');
let month = moment(d).format("MM");
let year = moment(d).format("YYYY");
$.ajax({
url: '/api/phpfile',
dataType: 'json',
data: {
month: month,
year: year,
},
success: function(doc) {
var events = [];
**$(doc).find('event').each(function() {
events.push({
title: $(this).attr('title'),
start: $(this).attr('start') // will be parsed
});
});**old code
alert(doc[29].title);
console.log(doc);
events.push({
title: doc[0].title,
start: doc[0].start,
})** new code
callback(events);
},
});
}
});

任何帮助将不胜感激。我仍然对这个东西很陌生。谢谢。

更新：

我尝试更改代码以查看显示的内容，现在我看到了更有趣的行为。它显示显示的第一个月(当前月份)的标题，但是通过单击下一步，它不仅不会显示下个月的正确计数，而且日历会冻结。它停止移动下一个或上一个。这是怎么回事？？？

Answer 1

events: function(callback) 

是不正确的。

根据 https://fullcalendar.io/docs/event_data/events_function/中的文档，事件函数的正确签名是：

function( start, end, timezone, callback ) {

您命名为"回调"的第一个参数实际上是当前日历视图的开始日期。因此，将其作为函数调用将不起作用。也无需做您正在做的工作来计算日历上显示的当前开始/结束日期 - 您忽略的开始/结束参数将其交给您盘子。

这样的事情应该工作得更顺利：

events: function(start, end, timezone, callback) {
let month = start.format("MM");
let year = start.format("YYYY");
$.ajax({
url: '/api/phpfile',
dataType: 'json',
data: {
month: month,
year: year,
},
success: function(eventData) {
console.log(JSON.stringify(eventData)); //just to give a visual on the data. From what you were doing in your example it looks like your data is already in a format suitable to be used by fullCalendar, so no need to push it all into another array
callback(eventData);
},
error: function(jqXHR, textStatus, errorThrown)
{
alert("Error when fetching events: " + textStatus + " - " + errorThrown);
}
});
}

不过，您可以进一步改进这一点。您的后端仅收到一个月和一年。这是不灵活的 - 如果您修改它以接受名为start和end的两个日期变量，并返回介于这些日期之间的事件数据，那么您可以使用 fullCalendar 提供的不那么冗长的语法来自动连接到 JSON 提要：

events: '/api/phpfile'

在这种情况下，FullCalendar 会自动将"开始"和"结束"值作为 GET 参数发送到终结点 URL。您的 PHP 所要做的就是读取这些变量并返回相应的 JSON。它还允许您使用"月"视图以外的视图，因为您可以返回更具体时间段的数据。有关更多详细信息，请参阅 https://fullcalendar.io/docs/event_data/events_json_feed/。

Answer 2

更新：
如果你做一个console.log('end: ', end)，你会看到以下数据：

end:  ƒ () {
if (!isResolved) {
isResolved = true;
success.apply(this, arguments);
}
}

这是将事件数据返回到日历的回调函数。
我的函数看起来像这样：

plugins: [dayGridPlugin, timeGridPlugin, interactionPlugin, googleCalendarPlugin],
header: {
left:  'prevYear,prev next,nextYear  today,   datePickerButton',
center: 'title',
right: 'dayGridMonth,timeGridWeek,timeGridDay'
},
defaultDate: moment().format('YYYY-MM-DD'),
editable: true,
navLinks: true, // can click day/week names to navigate views
eventLimit: true, // allow "more" link when too many events
events: (dates, callback) => {
console.log('start: ', dates)
console.log('callback: ', callback)
axios.get('/training-session/auth/user').then(result => {
let events = []
result.data.forEach((event) => {
let date = event.date.split(' ')[0]
events.push({
title: event.name,
start: date + 'T' + event.time
})
})
callback(events)
})
}

它正在工作！

Answer 3

我遇到了这个问题，这是因为版本更新。"回调"已使用版本 4 版本重命名。

旧版本是：

function( startMoment, endMoment, timeZoneStr, callback )

更新后的版本是：

function( fetchInfo, successCallback, failureCallback )

示例函数：

$.ajax({  
url: '/Calendar/GetCalendarData',  
type: "GET",  
dataType: "JSON",  
success: function (result)  
{  
var events = [];  
$.each(result, function (i, data)  
{  
events.push(  
{  
title: data.title,  
start: data.startStr,
end: data.endStr, 
backgroundColor: "#9501fc"                   
});                                  
});  
successCallback(events);
//callback(events);  
}  
});  

以及其他更改和更新的参考 https://fullcalendar.io/docs/upgrading-from-v3

Answer 4

我实际上找到了这个问题的解决方案。 对于那些可能需要解决这个或类似问题的人来说，这就是有效的方法，而且非常简单。这解决了在日历中所有/或某些日期更新事件的问题。

$(calendar).fullCalendar({
header: {
left: 'none',
center: 'title',
right: 'today prev,next',
},
height: 480,
width: 20,
editable: true,
eventRender: function(event, element, view) {
if(event.title == null){
var new_description = '<div style="background-color: #d3d3d3;border-radius:10px;text-align:center;"><strong>Projects </strong><br/>0<br/>';
}else{
var new_description = '<div style="background-color: #fcd771;border-radius:10px;text-align:center;"><strong>Projects </strong><br/>' + event.title + '<br/>';
}
return (new_description);
},
events: function(start,end,timezone,callback) {
let d = $(calendar).fullCalendar('getDate');
let month = moment(d).format("MM");
let year = moment(d).format("YYYY");
$.ajax({
url: '/api/phpfile',
dataType: 'json',
data: {
month: month,
year: year,
},
success: function(doc) {
var events = [];
for (var i=0;i<doc.length;i++){
events.push({
title: doc[i].title,
start: doc[i].start,
})//this is displaying!!!
}
callback(events);
},
});
},
});

当我在文档上做一个控制台.log我发现这实际上是来自后端的结果 json 对象。您所要做的就是让一个 for 循环遍历该对象的长度并将其推送到 events 数组中，然后执行该数组的回调函数。您可以使用 eventRender 以您喜欢的任何方式渲染它。这真的很有帮助。 文档在帮助解决此类问题方面真的很差，因为那里的代码不能很好地解释语法，并且可能会让这个插件的新手飞走。