jquery fullcalendar回调没有定义错误

Question

我一直在关注fullcalendar的文档，并最终找到了从我的php后端数据库返回json对象的方法。但我得到这个错误： 未捕获TypeError：回调未定义

任何人都可以请帮忙吗？

这是fullcalendar的代码位，请注意，我正在使用react。这在ComponentDidMount位执行，正如我在使用fullcalendar的教程中看到的。

$(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); 
      }, 
     }); 
    } 
}); 

任何帮助，将不胜感激。我仍然对这个东西不熟悉。谢谢。

UPDATE：

我试图改变代码，看看发生了什么显示，现在我看到更有趣的behavior.It显示标题为正月显示（本月），但是通过点击接下来，不仅不会在下个月显示正确的计数，而且日历会冻结。它停止移动下一个或上一个。这是怎么回事？？？

Answer 1

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

$(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); 
     }, 
     }); 
    }, 
}); 

当我做对DOC一个的console.log，我发现这是从字面上后端结果JSON对象。你所要做的就是让for循环遍历该对象的长度并将其推入事件数组，并执行该数组的回调函数。您可以使用eventRender以任何方式渲染它。这真的很有帮助。 在帮助解决这样的问题方面，文档确实很差，因为那里的代码不能很好地解释语法，并且可以向新插件发送给这个插件。

Answer 2

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/。