从 json 源中提取时不显示 FullCalendar 事件和资源答案

【问题标题】：FullCalendar Events and resources not displaying when pulled from json source从 json 源中提取时不显示 FullCalendar 事件和资源
【发布时间】：2020-10-13 11:22:30
【问题描述】：

我已经成功地将静态数组用于在运行时通过 asp 注入到 fullcalendar 中的事件和资源（我知道，它很古老，但它是我现在唯一的工具）

我想提高技能，所以现在我试图将事件和资源指向生成数组的 asp 页面。我无法让那个位工作 - 没有显示任何事件。

在下面的代码中，我只是转到 /resources.asp 和 /events.asp 并准确复制输出，然后将其粘贴到硬编码中。日历工作得很好，所以我有理由确定这两页产生了正确的输出。我见过的其他解决方案最终指出 JSON 或日期或其他格式错误，但我确实将我的两个页面的输出粘贴到其中，它们就可以工作了。

当我删除硬编码行并取消注释底部两行以将日历指向两个 asp 页面时，日历不显示任何内容。控制台告诉我两个资源都已成功加载，我可以看到我希望看到的内容。控制台中看不到其他错误消息。

我错过了什么？

document.addEventListener('DOMContentLoaded', function() {
  var calendarEl = document.getElementById('calendar');

  var calendar = new FullCalendar.Calendar(calendarEl, {
    schedulerLicenseKey: 'CC-Attribution-NonCommercial-NoDerivatives',
    displayEventTime : false,
    firstDay: 6,
   // plugins: [ 'resourceTimelinePlugin'],
   slotLabelInterval: {days:1},
   eventTimeFormat: { // will produce something like "Tuesday, September 18, 2018"
    hour: '2-digit',
    minute: '2-digit',
         hour12: false,
  },
    height: "auto",
    timeZone: 'UTC',
    initialView: 'resourceTimelineMonth',
    aspectRatio: 1.5,
    headerToolbar: {
      left: 'prev,next',
      center: 'title',
      right: 'resourceTimelineDay,resourceTimelineWeek,resourceTimelineMonth'
    },
    editable: true,
    resourceAreaHeaderContent: 'Work Orders',
    resources: [{id:'wo_3', title:'Work Order 57820'},{id:'comp_19', title:'Person in charge of possession (PICOP)', parentId: 'wo_3'},{id:'comp_20', title:'Track Safety Coordinator (TSC)', parentId: 'wo_3'},],
    events: [{title:'Unassigned',start:'2020-10-01 08:21',end:'2020-10-01 17:21', resourceId: 'comp_11', color: 'orange'},{title:'Unassigned',start:'2020-10-02 08:21',end:'2020-10-02 17:21', resourceId: 'comp_11', color: 'orange'},{title:'Unassigned',start:'2020-10-03 08:21',end:'2020-10-03 17:21', resourceId: 'comp_11', color: 'orange'},{title:'Unassigned',start:'2020-10-05 08:56',end:'2020-10-05 15:56', resourceId: 'comp_12', color: 'orange'},{title:'Unassigned',start:'2020-10-05 08:56',end:'2020-10-05 15:56', resourceId: 'comp_13', color: 'orange'},{title:'Unassigned',start:'2020-10-05 08:56',end:'2020-10-05 15:56', resourceId: 'comp_14', color: 'orange'},{title:'Unassigned',start:'2020-10-05 08:56',end:'2020-10-05 15:56', resourceId: 'comp_15', color: 'orange'},{title:'Unassigned',start:'2020-10-06 08:56',end:'2020-10-06 15:56', resourceId: 'comp_12', color: 'orange'},{title:'Unassigned',start:'2020-10-06 08:56',end:'2020-10-06 15:56', resourceId: 'comp_13', color: 'orange'},{title:'Unassigned',start:'2020-10-06 08:56',end:'2020-10-06 15:56', resourceId: 'comp_14', color: 'orange'},{title:'Unassigned',start:'2020-10-06 08:56',end:'2020-10-06 15:56', resourceId: 'comp_15', color: 'orange'},{title:'Unassigned',start:'2020-10-07 08:56',end:'2020-10-07 15:56', resourceId: 'comp_12', color: 'orange'},{title:'Unassigned',start:'2020-10-07 08:56',end:'2020-10-07 15:56', resourceId: 'comp_13', color: 'orange'},{title:'Unassigned',start:'2020-10-07 08:56',end:'2020-10-07 15:56', resourceId: 'comp_14', color: 'orange'},{title:'Unassigned',start:'2020-10-07 08:56',end:'2020-10-07 15:56', resourceId: 'comp_15', color: 'orange'},{title:'Unassigned',start:'2020-10-08 08:56',end:'2020-10-08 15:56', resourceId: 'comp_12', color: 'orange'},{title:'Unassigned',start:'2020-10-08 08:56',end:'2020-10-08 15:56', resourceId: 'comp_13', color: 'orange'},{title:'Unassigned',start:'2020-10-08 08:56',end:'2020-10-08 15:56', resourceId: 'comp_14', color: 'orange'},{title:'Unassigned',start:'2020-10-08 08:56',end:'2020-10-08 15:56', resourceId: 'comp_15', color: 'orange'},{title:'Unassigned',start:'2020-10-09 08:56',end:'2020-10-09 15:56', resourceId: 'comp_12', color: 'orange'},{title:'Unassigned',start:'2020-10-09 08:56',end:'2020-10-09 15:56', resourceId: 'comp_13', color: 'orange'},{title:'Unassigned',start:'2020-10-09 08:56',end:'2020-10-09 15:56', resourceId: 'comp_14', color: 'orange'},{title:'Unassigned',start:'2020-10-09 08:56',end:'2020-10-09 15:56', resourceId: 'comp_15', color: 'orange'},{title:'Unassigned',start:'2020-10-10 08:56',end:'2020-10-10 15:56', resourceId: 'comp_12', color: 'orange'},{title:'Unassigned',start:'2020-10-10 08:56',end:'2020-10-10 15:56', resourceId: 'comp_13', color: 'orange'},{title:'Unassigned',start:'2020-10-10 08:56',end:'2020-10-10 15:56', resourceId: 'comp_14', color: 'orange'},{title:'Unassigned',start:'2020-10-10 08:56',end:'2020-10-10 15:56', resourceId: 'comp_15', color: 'orange'},{title:'Unassigned',start:'2020-10-11 08:56',end:'2020-10-11 15:56', resourceId: 'comp_12', color: 'orange'},{title:'Unassigned',start:'2020-10-11 08:56',end:'2020-10-11 15:56', resourceId: 'comp_13', color: 'orange'},{title:'Unassigned',start:'2020-10-11 08:56',end:'2020-10-11 15:56', resourceId: 'comp_14', color: 'orange'},{title:'Unassigned',start:'2020-10-11 08:56',end:'2020-10-11 15:56', resourceId: 'comp_15', color: 'orange'},{title:'Unassigned',start:'2020-10-12 09:14',end:'2020-10-13 20:14', resourceId: 'comp_19', color: 'orange'},{title:'Unassigned',start:'2020-10-12 22:14',end:'2020-10-13 07:14', resourceId: 'comp_20', color: 'orange'},{title:'Unassigned',start:'2020-10-13 09:14',end:'2020-10-13 20:14', resourceId: 'comp_19', color: 'orange'},{title:'Unassigned',start:'2020-10-13 22:14',end:'2020-10-14 07:14', resourceId: 'comp_20', color: 'orange'},{title:'Unassigned',start:'2020-10-14 09:14',end:'2020-10-14 20:14', resourceId: 'comp_19', color: 'orange'},{title:'Unassigned',start:'2020-10-14 22:14',end:'2020-10-15 07:14', resourceId: 'comp_20', color: 'orange'},{title:'Unassigned',start:'2020-10-15 09:14',end:'2020-10-15 20:14', resourceId: 'comp_19', color: 'orange'},{title:'Unassigned',start:'2020-10-15 22:14',end:'2020-10-16 07:14', resourceId: 'comp_20', color: 'orange'},{title:'Unassigned',start:'2020-10-16 09:14',end:'2020-10-16 20:14', resourceId: 'comp_19', color: 'orange'},{title:'Unassigned',start:'2020-10-16 22:14',end:'2020-10-17 07:14', resourceId: 'comp_20', color: 'orange'},{title:'Unassigned',start:'2020-10-17 09:14',end:'2020-10-17 20:14', resourceId: 'comp_19', color: 'orange'},{title:'Unassigned',start:'2020-10-17 22:14',end:'2020-10-18 07:14', resourceId: 'comp_20', color: 'orange'},{title:'Unassigned',start:'2020-10-18 09:14',end:'2020-10-18 20:14', resourceId: 'comp_19', color: 'orange'},{title:'Unassigned',start:'2020-10-26 10:31',end:'2020-10-26 18:31', resourceId: 'comp_16', color: 'orange'},{title:'Unassigned',start:'2020-10-26 10:31',end:'2020-10-26 18:31', resourceId: 'comp_17', color: 'orange'},{title:'Unassigned',start:'2020-10-26 10:31',end:'2020-10-26 18:31', resourceId: 'comp_18', color: 'orange'},{title:'Unassigned',start:'2020-10-27 10:31',end:'2020-10-27 18:31', resourceId: 'comp_16', color: 'orange'},{title:'Unassigned',start:'2020-10-27 10:31',end:'2020-10-27 18:31', resourceId: 'comp_17', color: 'orange'},{title:'Unassigned',start:'2020-10-27 10:31',end:'2020-10-27 18:31', resourceId: 'comp_18', color: 'orange'},{title:'Unassigned',start:'2020-10-28 10:31',end:'2020-10-28 18:31', resourceId: 'comp_16', color: 'orange'},{title:'Unassigned',start:'2020-10-28 10:31',end:'2020-10-28 18:31', resourceId: 'comp_17', color: 'orange'},{title:'Unassigned',start:'2020-10-28 10:31',end:'2020-10-28 18:31', resourceId: 'comp_18', color: 'orange'},{title:'Unassigned',start:'2020-10-29 10:31',end:'2020-10-29 18:31', resourceId: 'comp_16', color: 'orange'},{title:'Unassigned',start:'2020-10-29 10:31',end:'2020-10-29 18:31', resourceId: 'comp_17', color: 'orange'},{title:'Unassigned',start:'2020-10-29 10:31',end:'2020-10-29 18:31', resourceId: 'comp_18', color: 'orange'},{title:'Unassigned',start:'2020-10-30 10:31',end:'2020-10-30 18:31', resourceId: 'comp_16', color: 'orange'},{title:'Unassigned',start:'2020-10-30 10:31',end:'2020-10-30 18:31', resourceId: 'comp_17', color: 'orange'},{title:'Unassigned',start:'2020-10-30 10:31',end:'2020-10-30 18:31', resourceId: 'comp_18', color: 'orange'},{title:'Unassigned',start:'2020-10-31 10:31',end:'2020-10-31 18:31', resourceId: 'comp_16', color: 'orange'},{title:'Unassigned',start:'2020-10-31 10:31',end:'2020-10-31 18:31', resourceId: 'comp_17', color: 'orange'},{title:'Unassigned',start:'2020-10-31 10:31',end:'2020-10-31 18:31', resourceId: 'comp_18', color: 'orange'},]
    //resources: '/resources.asp',
    //events: '/events.asp',
  });

  calendar.render();

});

【问题讨论】：

这看起来很奇怪。如果您的 ASP 脚本完全且仅返回您在“事件：”和“资源”旁边粘贴的内容：那么它应该可以工作。所以我唯一的假设是，当它们被调用时，也许它们实际上并没有完全并且只返回那个内容。
你说你已经检查了输出（“我可以看到内容”），但不清楚你是如何做到的。抱歉，如果我在这里教你祖母吸蛋，但最好是准确的：打开浏览器的开发人员工具，转到网络工具，然后加载你的日历页面。您应该会看到对 events.asp 和 resources.asp 的两个调用出现。依次点击每一项，检查如下： 1) 响应码为 200 OK。 2) 内容类型响应头类似于 application/json （不是 HTML 或其他任何东西）...
和 3) 响应选项卡中的原始数据完全是包含事件/资源数据的 JSON 数组，以 [ 开头并以 ] 结尾。没有空格，没有 HTML，没有奇怪的半隐藏 UTF8 字符，没有其他 JSON 对象 - 没有别的，只有数据。
您确定resources 和events 的ASP 页面URL 是正确的吗？
正如@ADyson 所说，您需要确保 ASP 页面响应中没有其他内容 （如果使用 Response.Buffer 的良好经验法则是调用 Response.Clear 来清除缓冲区在使用Response.Write 输出JSON 字符串之前），您甚至可能需要设置内容类型标头Response.ContentType = "application/json"。通过在 XHR 上进行过滤以查看日历何时使用 AJAX 向 ASP 页面请求响应是如何返回的，应该很容易看到浏览器开发工具中返回的内容。

标签： javascript json ajax asp-classic fullcalendar

【解决方案1】：

好的，感谢这里的输入，当然（畏缩）我页面的响应中有一些 HTML，但主要问题是：字段和数据似乎必须用 " 而不是撇号包装，最后我最后的逗号（由于懒惰没有在代码中删除它）导致每个 JSONLINT 的 JSON 无效 - 但让我感到的是，我的硬编码数据存在所有这些问题，并且 FullCalendar 能够使用无论如何，没问题。我想我认为这有点宽容，并且会以同样的方式处理我的 JSON 输出页面

可以这么说，在进行这些更改后，现在一切正常。

吸鸡蛋没有问题，我还在学习这些东西，所以所有的指点都被感激地接受了。

【讨论】：

JSON != Javascript 文字，这可能就是原因。语法显然有很多重叠，但实际上 JSON 格式在很多方面都更严格。很高兴你把它修好了。