Fullcalendar - 在日视图中以垂直显示方式显示来自多个Google日历的事件

Question

我在我的网站上放了fullCalendar插件。它需要显示来自多个Google日历的事件。我是从documentation开始做类比的。 （多个Google日历）

但事件仅以周和月间隔显示，在日间隔，不显示事件。仅当我删除块（阵列）资源时才显示它们。但如果没有它，那天内的事件显示就会变成水平，但它需要是垂直的（事件的阴影时区）。当我在事件中手动填充事件时，一切正常，但我需要从Google中获取它们。

如何以垂直视图显示的每日间隔从谷歌获取事件？

$('#calendar').fullCalendar({
  schedulerLicenseKey: 'CC-Attribution-NonCommercial-NoDerivatives',
  scrollTime: '09:00:00',
  minTime: '08:00:00',
  googleCalendarApiKey: '<MY API KEY>',
  defaultView: 'agendaDay',
  header: {
    left: 'prev,next today',
    center: 'title',
    right: 'agendaDay,agendaWeek,month'
  },
  eventSources: [
    {
      id: 'k01',
      resourceId: 'k01',
      googleCalendarId: 'hhug0bdep49rjgq4kk79rrjbgg@group.calendar.google.com', // 1 calendar
      color: 'blue',
    },
    {
      id: 'k02',
      resourceId: 'k02',
      googleCalendarId: 'db1ls6vg0fh9sgqt57fkethens@group.calendar.google.com' //2 calendar
    },
    {
      id: 'k03',
      resourceId: 'k03',
      googleCalendarId: 'ncvl95m9f8irl6nd3ejm99fvho@group.calendar.google.com' //3 calendar
    }
  ],
  resources: [
    { id: 'k01', title: 'calendar 1', eventColor: 'red'}, 
    { id: 'k02', title: 'calendar 2',},
    { id: 'k03', title: 'calendar 3'}
  ]
});

Answer 1

来自Google的活动不会包含资源ID。如果没有资源ID，则fullCalendar不可能知道要显示哪个列，因此根本无法显示它。

要停止使用资源显示agendaDay视图，您需要将选项groupByDateAndResource设置为false：

groupByDateAndResource: false

虽然文档说默认情况下这是错误的，但您似乎必须在日历配置中明确设置此选项才能使其正常工作。

有关工作示例，请参阅http://jsfiddle.net/toytd26b/63/（您可以填写API密钥以查看实际的事件数据，但它会正确显示布局）。