如何将多谷歌日历事件关联到FullCalendar垂直资源视图对应资源？

要让每个谷歌日历的事件对应到垂直资源视图的指定房间，核心是给每个谷歌日历事件源绑定对应的资源ID，而不是修改资源列表的ID格式。具体操作如下：

修正后的完整配置示例 #

document.addEventListener('DOMContentLoaded', function() {
  var calendarEl = document.getElementById('calendar');
  var calendar = new FullCalendar.Calendar(calendarEl, {
    googleCalendarApiKey: 'api-key',
    initialView: 'resourceTimeGridDay',
    // 资源列表：每个房间对应唯一ID和名称
    resources: [
      { id: 'a', title: 'Room Alpha' },
      { id: 'b', title: 'Room Bravo' },
      { id: 'c', title: 'Room Charlie' },
      { id: 'd', title: 'Room Delta' }, // 修正原重复ID，避免资源冲突
      { id: 'e', title: 'Room Echo' }   // 修正ID保持唯一性
    ],
    // 事件源：给每个谷歌日历添加resourceId，绑定到对应资源
    eventSources: [
      { 
        googleCalendarId: 'calendar-id-room-alpha@group.calendar.google.com',
        backgroundColor: '#8ecae6',
        resourceId: 'a' // 对应Room Alpha的资源ID
      },
      { 
        googleCalendarId: 'calendar-id-room-bravo@group.calendar.google.com',  
        backgroundColor: '#219ebc',
        resourceId: 'b' // 对应Room Bravo的资源ID
      },
      { 
        googleCalendarId: 'calendar-id-room-charlie@group.calendar.google.com',  
        backgroundColor: '#023047',
        resourceId: 'c' // 对应Room Charlie的资源ID
      },
      { 
        googleCalendarId: 'calendar-id-room-delta@group.calendar.google.com',  
        backgroundColor: '#ffb703',
        resourceId: 'd' // 对应Room Delta的资源ID
      },
      { 
        googleCalendarId: 'calendar-id-room-echo@group.calendar.google.com',  
        backgroundColor: '#fb8500',
        resourceId: 'e' // 对应Room Echo的资源ID
      }
    ]
  });
  calendar.render();
});

关键说明 #

• 资源列表（resources）：保持id+title的结构，每个资源的id必须唯一（原代码中Room Delta与Charlie的ID重复，会导致显示异常，需修正）。
• 事件源（eventSources）：给每个谷歌日历配置项添加resourceId字段，值与resources中对应房间的id完全一致，这样该日历下的所有事件会自动渲染到对应的资源列中。
• 无需修改资源列表的ID为谷歌日历ID，FullCalendar通过resourceId字段建立事件与资源的关联。

内容的提问来源于stack exchange，提问作者Donut