javascript - FullCalendar 事件对象 : Non-standard Fields (GCal)

标签 javascript fullcalendar google-calendar-api fullcalendar-3

FullCalendar (FC) 文档说明

Non-standard Fields In addition to the fields above, you may also include your own non-standard fields in each Event Object. FullCalendar will not modify or delete these fields. For example, developers often include a description field for use in callbacks such as eventRender. [Source: Event Object]



以及 Google 日历事件源

Advanced: Extended Properties Google Calendar’s API allows you to specify Extended Properties for your events. The extended properties will be available as the extendedProperties hash that is attached to each Event Object. [Source: events from Google Calendar]



然而,不太清楚的是哪些 GCal eventSource 属性被归类为标准的,哪些是非标准的。

‍‍‍‍‍‍‍

假设第一个事件对象文档中列出的属性也适用于 GCal eventSources 的标准属性意味着其他任何东西都可能是非标准字段,对吗?

如果我想查询给定 FC 事件的创建者字段,例如 creator.displayName creator.email 根据 events#extendedProperties 的 Google API 引用文档它出现在事件弹出窗口的底部,即“创建者:...”(在 Google 日历中,即不是 FC),但我不确定如何实现。
‍‍‍‍‍‍‍

我在任何地方都找不到 FullCalendar (v3) GCal eventSources 的标准和非标准字段的完整列表,不要介意有关如何访问这些属性的文档/示例。

‍‍‍‍‍‍‍

无论如何尝试了以下操作:
console.log(event.extendedProperties.creator.displayName);
console.log(event.extendedProperties.creator.email);

刚生产

jquery-3.3.1.min.js:2 jQuery.Deferred 异常 :无法读取未定义的属性“displayName”类型错误:无法读取未定义的属性“displayName”

‍‍‍‍‍‍‍

果然 event.extendedProperties.creator 确实产生了 undefined。但是接下来我尝试了:
console.log(event.extendedProperties);
console.dir(event.extendedProperties);

哪个没有产生错误,而是似乎是一个空对象

Screen shot of console.dir(event.extendedProperties)

因此,如果它什么都没有返回(即空对象),可以公平地假设我正在查询的给定事件没有扩展属性,并且假设创建者字段可能是合理的: creator.displayName creator.email 不是 非标准字段毕竟或至少不是扩展属性类型。

等一下,这是否意味着我们正在处理的非标准字段列表上可能有两种类型,或者我已经盯着这个屏幕太久了? 🤔

‍‍‍‍‍‍‍

最后,我尝试再次检查以确保它们不是事件对象的一部分。
console.log(event.creator.displayName);
console.log(event.creator.email);

但这又导致

未捕获的类型错误 : 无法读取未定义的属性“displayName”

‍‍‍‍‍‍‍

我完全不知所措。我应该如何获取 FullCalendar 网站上任何地方都没有提到的字段,也没有显示为扩展属性的字段?

我是否忽略了任何东西,或者是否存在我以某种方式设法错过的标准/非标准字段列表?

Any ideas on how to obtain these creator fields would be much appreciated.



‍‍‍‍‍‍‍

‍‍‍‍‍‍‍

我不知道任何类型的代码示例在这里会有什么帮助,但正如我最近被告知“代码在堆栈溢出中几乎总是需要的”所以为了合规性,这里是我的代码示例......
<div id='calendar'></div>
<script>
$(function() {
  $('#calendar').fullCalendar({
    googleCalendarApiKey: '%googleCalendarApiKey%',
    events: {
      googleCalendarId: 'lph029pf163sce67stdgfcdpfg@group.calendar.google.com' //imdb UK
    },
    defaultView: 'month',
    eventRender: function(event, element) {
      element.popover({
        animation:true,
        delay: 300,
        title: event.title,
        content: event.description, // + req << creator.displayName/email >>  e.g."Created by: imdbreleases@gmail.com"
        placement: 'auto',
        trigger: 'hover'
      });
    }
  });
});
</script>

PS 没有按照建议创建 CodePen 不要共享 GoogleAPIKey

最佳答案

当 fullCalendar 文档说

Google Calendar’s API allows you to specify Extended Properties for your events. The extended properties will be available as the extendedProperties hash that is attached to each Event Object.



它们指的是您可能在 Google 日历事件中定义的额外自定义字段 - 日历 API 不支持或不提供作为标准的字段。这些是 fullCalendar 将复制为“额外”的字段。它是 而不是 指的是“fullCalendar 通常不视为标准的任何字段”。

现在,因为 Calendar API 返回的事件数据结构几乎都不会直接映射到 fullCalendar 要求您提供的数据结构上,以便构建有效的事件对象(请参阅 Event Object docs 中 fullCalendar 的“标准”字段列表) ,我们不能简单地将 Calendar API 的 JSON 输出直接提供给 fullCalendar 并期望它工作并自动映射字段。

这就是 fullCalendar 提供 gcal.js 文件作为连接 API、检索事件数据并将其转换为 fullCalendar 期望和理解的格式的便捷实用程序的原因。显然,开发人员选择了将哪些领域从一个领域转移到另一个领域。由于正在构造一个新对象以传递给 fullCalendar,因此没有任何类型的自动映射 - 这一切都依赖于代码中编写的内容。通常,如果您直接将 JSON 提供给 fullCalendar,它还会复制它在对象中找到的任何其他字段,除了它实际识别为“标准”的字段(即标准字段是它用于特定目的的字段,如文档)。但同样由于代码为 fullCalendar 创建了新对象,这也不会发生。

除了关于“extendedProperties”的注释外,没有明确的文档说明代码将哪些字段从 API 输出复制到与 fullCalendar 兼容的事件对象中。在您的页面中使用 console.log($("#calendar").fullCalendar("clientEvents")); 的快速实验将揭示最终事件具有的属性,但您也可以查看源代码。在撰写本文时,fullCalendar v3 的最新版本是 3.10,以及该版本的 gcal.js 源代码(可见 here)。

该代码包含以下代码段,用于将 API 数据转换为 fullCalendar 对象:
    return {
        id: item.id,
        title: item.summary,
        start: item.start.dateTime || item.start.date,
        end: item.end.dateTime || item.end.date,
        url: url,
        location: item.location,
        description: item.description,
        extendedProperties: extendedProperties
    };

在您的问题和评论中,您提到您会对 Calendar API 提供的 creatordescription 字段感兴趣。这些是 GCal 中的标准字段(根据 resource representation docs ),因此不会在“extendedProperties”集合中。您还可以看到 gcal.js 已经复制了 description,即使它不是 fullCalendar 通常使用的字段 - 但是如果您想在日历中使用它,它就在那里。

因此,要使 creator 字段(或来自 GCal 属性的任何其他字段)在 fullCalendar 事件中可用,您所需要做的就是将其包含在 gcal.js 复制的数据中。例如。:
    return {
        id: item.id,
        title: item.summary,
        start: item.start.dateTime || item.start.date,
        end: item.end.dateTime || item.end.date,
        url: url,
        location: item.location,
        description: item.description,
        extendedProperties: extendedProperties,
        creator: item.creator
    };

当然,如果您通过 CDN 包含 gcal.js/gcal.min.js,则需要更改代码以托管您自己的修改版本。

顺便说一句,如果您觉得 fullCalendar 项目会从默认包含更多来自 GCal 的字段中受益,那么由于 fullCalendar 是一个开源社区项目,您可以自由访问 make a feature request 以获取对gcal 实用程序(它实际上只是作为 fullCalendar 的标准功能和 Google 日历 API 之间的一个层的一个方便的附加组件),甚至是包含建议更改的 make a code contribution,供维护人员考虑以包含在主版本中。如果做不到这一点,您可以继续维护您修改过的 gcal.js 版本,甚至可以将其完全替换为您自己的实用程序,以便与 Calendar API 交互。

关于javascript - FullCalendar 事件对象 : Non-standard Fields (GCal),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/55224690/

相关文章:

javascript - FullCalendar.js 在悬停事件时显示标题标签?

jquery 全日历 : is init done?

java - 使用 Java 客户端库从 Google Calendar API v3 查询事件?

google-calendar-api - 使用 Google Calendar API 更改用户对 future 事件的响应状态

android - 我如何访问谷歌日历信息?

javascript - 在 Https 上使用 Express.js 在 Node.js 上配置 ATS

javascript - 如何在 Loopback 中获取嵌套的主从或主-从-从查询

javascript - 重新定义点击选择器 jQuery

javascript - 如果文本区域为空,则禁用链接按钮

javascript - 全日历刷新/重新定义所有事件