来自 ajax 调用的全日历显示事件答案

【问题标题】：Fullcalendar display event from ajax call来自 ajax 调用的全日历显示事件
【发布时间】：2019-07-26 08:26:50
【问题描述】：

我已经阅读了很多关于我的问题的帖子，但没有一个回答我的问题。这是我的代码：

编辑

events: {
      url: 'AJAX_selectEvent.do',
      data: function() {
        return {
          "rcn": document.getElementById("rcn").value
        }
      },
      error: function(data) {
        console.log(data);
        alert("Ajax call error");
      }
    },

这是我的 JAVA 数据：

[{"id":"0","resourceId":"p","start":"2019-07-08","end":"2019-07-09","title":" 50602378"},{"id":"1","resourceId":"p","start":"2019-06-18","end":"2019-06-19","title":" 50602503"},{"id":"2","resourceId":"p","start":"2019-06-26","end":"2019-06-27","title":" 50603191"},{"id":"3","resourceId":"p","start":"2019-06-24","end":"2019-06-25","title":" 50603192"},{"id":"4","resourceId":"p","start":"2019-06-13","end":"2019-06-14","title":" 50604130"}

如您所见，我正在从参数“rcn”获取 JSON 数据。在我的成功功能中，我可以看到它，但它不会显示在日历中。我收到警告：

VM1236 main.js:5162 undefined (26) [{…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}
(anonymous) @ VM1236 main.js:5162
wrappedFailure @ VM1236 main.js:3406
success @ RECHERCHE_getInfo.do:87
u @ VM1234 jquery.min.js:2
fireWith @ VM1234 jquery.min.js:2
k @ VM1234 jquery.min.js:2
(anonymous) @ VM1234 jquery.min.js:2
XMLHttpRequest.send (async)
send @ VM1234 jquery.min.js:2
ajax @ VM1234 jquery.min.js:2
events @ RECHERCHE_getInfo.do:63
unpromisify @ VM1236 main.js:3410
fetch @ VM1236 main.js:4183
fetchSource @ VM1236 main.js:5137
fetchSourcesByIds @ VM1236 main.js:5126
fetchDirtySources @ VM1236 main.js:5106
reduceEventSources @ VM1236 main.js:5069
reduce @ VM1236 main.js:5528
Calendar.reduce @ VM1236 main.js:6652
Calendar.dispatch @ VM1236 main.js:6610
(anonymous) @ VM1236 main.js:6583
Calendar.batchRendering @ VM1236 main.js:6673
Calendar.hydrate @ VM1236 main.js:6580
Calendar @ VM1236 main.js:6490
(anonymous) @ RECHERCHE_getInfo.do:32

使用 console.dir(data)，我可以看到（当然是 26 行）：

数组（26）{id：“0”，标题：“50602378”，开始：“08/07/19”，结束：“09/07/0019”，resourceId：“p”}

您能帮我理解为什么我会从回调（事件）中收到警告以及为什么它不显示事件吗？

编辑：即使我将 jquery 版本 1 更改为 2 和库，也会出现新错误

Uncaught TypeError: e.class is not a constructor
at constructor.instantiateView (fullcalendar.min.js:9)
at constructor.renderView (fullcalendar.min.js:9)
at constructor.initialRender (fullcalendar.min.js:9)
at constructor.render (fullcalendar.min.js:9)
at HTMLDivElement.<anonymous> (fullcalendar.min.js:6)
at Function.each (jquery-2.0.0.min.js:4)
at init.each (jquery-2.0.0.min.js:4)
at init.t.fn.fullCalendar (fullcalendar.min.js:6)
at HTMLDocument.<anonymous> (RECHERCHE_getInfo.do:32)
at l (jquery-2.0.0.min.js:4)

<script src="//code.jquery.com/jquery-2.0.0.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/moment.js/2.10.6/moment.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.4.0/fullcalendar.min.js"></script>
<script type="text/javascript" src="jslib/utils.js" ></script>
<script type="text/javascript" src="jslib/core/main.js" ></script>
<script type="text/javascript" src="jslib/core/locales-all.js" ></script>
<script type="text/javascript" src="jslib/interaction/main.js" ></script>
<script type="text/javascript" src="jslib/daygrid/main.js" ></script>
<script type="text/javascript" src="jslib/timegrid/main.js" ></script>
<script type="text/javascript" src="jslib/list/main.js" ></script>
<script type="text/javascript" src="jslib/timeline/main.js" ></script>
<script type="text/javascript" src="jslib/resource-common/main.js" ></script>
<script type="text/javascript" src="jslib/resource-timeline/main.js" ></script>

谢谢

【问题讨论】：

start: "08/07/19", end: "09/07/0019" - 这些日期的格式无效。我不知道这是否是您的问题的原因，但它们肯定不会被 fullCalendar 识别。检查文档（看起来您使用的是 fullCalendar 的第 3 版，因此您需要阅读这篇文章以了解有效日期字符串的构成：fullcalendar.io/docs/v3/moment）
无论如何都是你的警告......哪一行到底是在抛出警告？我不完全确定您的“成功”函数中的代码是否有意义......您似乎将返回的数据视为某种 HTML 或 XML，但您的 ajax 配置说您正在返回 JSON。服务器返回的原始数据实际上是什么样的？如果没有看到样本，很难确定问题出在哪里。
@ADyson 感谢您的回复，很抱歉我的回复晚了（我生病了）。我根据 fullcalender v3 (yyyy-MM-dd) 更改了我的日期格式。但它仍然不会显示，我仍然在没有信息的情况下收到相同的警告。在我的成功函数中，我正在寻找具有属性的值（键，因为这是 json）。

标签： json ajax fullcalendar

【解决方案1】：

我无法重现您的确切警告。我使用您提供的作为 Java 输出但粘贴到 myjson.com 上的虚拟端点 URL 的示例数据对您的代码进行了演示。见http://jsfiddle.net/fpz1m2w4/。使用 fullCalendar v3 这会产生错误

回调不是函数

问题的根源是您错误地指定了事件函数的参数。根据v3 docs，参数应该是function( start, end, timezone, callback ) - 您没有指定所有参数，因此您调用的变量callback 实际上包含时区。 JavaScript 只是使用参数的位置来确定要传递给它的内容，而不是名称 - 名称实际上可以是您喜欢的任何名称（因此 function(a, b, c, d) 可以正常工作，尽管维护起来有点不清楚）。

如果你解决了这个问题，那么代码应该可以工作 - 演示：http://jsfiddle.net/fpz1m2w4/1/。

但是，我实际上认为这些都没有必要。您的 Java（因为您更改了日期格式）似乎已经以 fullCalendar 预期的正确格式生成数据。所以你不需要做所有这些额外的处理。您实际上是在重新创建一个具有相同结构的数组，所以显然这有点毫无意义。

(另外，作为旁注，访问响应的属性不需要像 $(this).attr('id') 这样的代码 - JSON 数据被解析为普通的 JS 对象，因此 this.id 会产生相同的结果。@ 987654331@ 语法仅在您尝试从结构更复杂的 jQuery 对象（表示 HTML 元素）或 XML 节点中获取时才需要。）

相反，您应该能够只使用events as a JSON feed 模式，您只需向 fullCalendar 提供服务器 URL，以及一些简单的选项，例如回调以获取您的 rcn 值，并且 fullCalendar 将负责构建AJAX 请求，接收响应并将数据加载到日历中。

这是您需要的代码：

events: {
  url: "AJAX_selectEvent.do",
  data: function() {
    return {
      "rcn": document.getElementById("rcn").value
    }
  },
  error: function(data) {
    console.log(data);
    alert("Ajax call error");
  }
}

这是一个使用虚拟 URL 的演示：http://jsfiddle.net/fpz1m2w4/4/

【讨论】：

非常感谢您向我解释了很多事情，我真的很感激。我做了你告诉我做的事情：在“回调”之前添加参数“时区”并将事件用作 JSON 提要。现在我收到另一条错误消息：“Uncaught TypeError: e.class is not a constructor”。是js导入版本的问题吗？我的是：
对于 fullCalendar v3，您至少需要 jQuery 2.0 或更高版本。据我所知，1.11 不起作用。但是究竟哪一行代码会引发错误呢？在不知道这一点的情况下，很难准确地说出错误的原因可能是什么。
P.S. “在“回调”之前添加参数“时区”并将事件用作 JSON 提要” ...您不需要同时执行这两项操作。您要么将事件用作函数模式，或将事件用作 JSON。我不知道你怎么能同时使用这两个，这没有意义。这就是为什么我用一行分隔我的答案的两个部分 - 它们是替代品。
对不起，我错了。我使用 JSON 提要，所以我不再拥有该功能。我把错误放在我的帖子上
能否请您提供当前版本的代码。并告诉我你安装了哪些其他库，如果有的话。它看起来可能像某种冲突。