来自 ajax 调用的完整日历显示事件

Question

我已经阅读了很多关于我的问题的帖子，但其中 none 回答了我的问题。这是我的代码：

编辑

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 行）：

Array(26) {id: "0", title: "50602378", start: "08/07/19", end: "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>

谢谢

Answer 1

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

callback is not a function

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

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

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

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

相反，您应该能够只使用 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/

来自 ajax 调用的完整日历显示事件

Fullcalendar display event from ajax call

ajax

json

fullcalendar