垂直资源视图，包含来自多个 Google 日历的事件

Question

我正在尝试使用来自多个 Google 日历的事件创建一个垂直资源视图（1 天垂直资源视图）。

为此，单个 Google 日历中的每个事件都代表一个资源。所有 Google 日历都来自同一个 Google 帐户，因此只有一个 API 密钥。我目前已按照文档中的描述集成了这些：

googleCalendarApiKey: 'api-key',

eventSources: [
  { // Room Alpha
    googleCalendarId: '[email protected]',
    backgroundColor: '#8ecae6'
  },
  { // Room Bravo
    googleCalendarId: '[email protected]',  
    backgroundColor: '#219ebc'
  },
  { // Room Charlie
    googleCalendarId: '[email protected]',  
    backgroundColor: '#023047'
  },
  { // Room Delta
    googleCalendarId: '[email protected]',  
    backgroundColor: '#ffb703'
  },
  { // Room Echo
    googleCalendarId: '[email protected]',  
    backgroundColor: '#fb8500'
  }
],

不幸的是，我不明白如何为各个房间提供 Google 日历中的活动。根据文档，它应该看起来像这样：

initialView: 'resourceTimeGridDay',
resources: [
  { id: 'a', title: 'Room Alpha' },
  { id: 'b', title: 'Room Bravo' },
  { id: 'c', title: 'Room Charlie' },
  { id: 'c', title: 'Room Delta' },
  { id: 'd', title: 'Room Echo' }
],

所以我尝试将

id:

替换为

googleCalendarId:

，内容和元素都如此，但这没有用。

我在文档中找不到其他任何内容。我也没有在其他方面找到有用的方法。我希望这里有人可以帮助我。

非常感谢。

Answer 1

您的资源列表没问题，但问题是从 Google 日历获取事件本身不包含资源 ID - 因为日历没有“资源”的概念...相反，您使用了不同的日历代表不同的房间。因此 fullCalendar 无法将事件与特定资源匹配，以便知道在哪里显示它。

您可以通过添加每个事件源数据转换来克服这个问题。 事件源文档指出您可以专门为该源添加eventDataTransform回调。

eventDataTransform

回调允许您在每个事件的数据从源下载之后、传递到 fullCalendar 的渲染功能之前对其进行操作。

您可以使用它将相关资源 ID 添加到每个下载的事件，以便将 Google 日历房间映射到完整的日历资源。

例如：

initialView: 'resourceTimeGridDay',
resources: [
  { id: 'a', title: 'Room Alpha' },
  { id: 'b', title: 'Room Bravo' },
  { id: 'c', title: 'Room Charlie' },
  { id: 'c', title: 'Room Delta' },
  { id: 'd', title: 'Room Echo' }
],
googleCalendarApiKey: 'api-key',
eventSources: [
  { // Room Alpha
    googleCalendarId: '[email protected]',
    backgroundColor: '#8ecae6',
    eventDataTransform: function(eventData)
    {
      eventData.resourceId = 'a';
      return eventData;
    }
  },
  { // Room Bravo
    googleCalendarId: '[email protected]',  
    backgroundColor: '#219ebc',
    eventDataTransform: function(eventData)
    {
      eventData.resourceId = 'b';
      return eventData;
    }  },
  { // Room Charlie
    googleCalendarId: '[email protected]',  
    backgroundColor: '#023047',
    eventDataTransform: function(eventData)
    {
      eventData.resourceId = 'c';
      return eventData;
    }
  },
  { // Room Delta
    googleCalendarId: '[email protected]',  
    backgroundColor: '#ffb703',
    eventDataTransform: function(eventData)
    {
      eventData.resourceId = 'd';
      return eventData;
    }
  },
  { // Room Echo
    googleCalendarId: '[email protected]',  
    backgroundColor: '#fb8500',
    eventDataTransform: function(eventData)
    {
      eventData.resourceId = 'e';
      return eventData;
    }
  }
],