如何根据描述使用具有不同颜色的多个完整日历源？

Question

我一直在构建 Google Apps Script 网络应用程序来显示我的 Google 日历事件。日历服务不允许使用可编辑的日历，因此我一直在使用完整日历来完成此任务。当我使用 google 日历 api 导入事件时，它们都进来了，但它们都具有相同的颜色。着色是必不可少的，取决于事件描述（例如，如果事件描述中有“指定的字符串”，则颜色为黄色，否则为灰色）。然后我尝试将它们导入为 JSON 并限制为数组中的标题和开始时间。使用一些我知道这可行的测试用例，但是当我尝试导入事件时，日历保持空白。我做错了什么？

// This Does NOT Work.
var yellowEvents = [];
var greyEvents = [];
function loadEvents(importedData) {
  // importedData is coming in as 
  //     importedData = [
  //       {title: "someTitle", start: ISODateTime, end: ISODateTime, color: "someColor"}, 
  //       {title: "someTitle", start: ISODateTime, end: ISODateTime, color: "someColor"}, 
  //      ...]
  for (var k in importedData) {
    var event = importedData[k];
    if (event.color == 'yellow') {
      yellowEvents.push({ title: event.title, start: event.start, end: event.end });
    } else {
      greyEvents.push({ title: event.title, start: event.start, end: event.end });
    }
  }
}
google.script.run.withSuccessHandler(loadEvents).getCalenderEventsAsJson();
var calendar = new FullCalendar.Calendar(calendarEl, {
  eventSources: [{
    events: yellowEvents,
    color: "yellow"
  }, {
    events: greyEvents,
    color: "blue"
  },
  ]
});



// This Works.
document.addEventListener('DOMContentLoaded', function() {
  var calendar = new FullCalendar.Calendar(calendarEl, {
    eventSources: [{
        events: [
          {title: "TEST", start: new Date().toISOString()},
        ],
        color: "red"
      }, {
        events: [
          {title: "TEST", start: new Date(2022, 0, 23, 12, 30).toISOString(), end: new Date(new Date().setHours(18)).toISOString()},
        ],
        color: "blue"
     },
     ]
   });
   calendar.render();
}

在通过控制台创建日历之前检查选项 object，我确定事件正在进入日历选项。最终选项如下所示：

{...,
  eventSources: {
    0: {color: "yellow",
        events: [
          0: {title: 'Some Person', start: '2022-01-23T16:00:00.000Z', end: '2022-01-23T18:00:00.000Z'}, 
          1: {title: 'Some OtherPerson', start: '2022-01-24T16:00:00.000Z', end: '2022-01-24T18:00:00.000Z'},
          ...
        ]
    },
    1: {color: "grey",
        events: [
          0: {title: 'Some Person', start: '2022-01-23T12:00:00.000Z', end: '2022-01-23T14:00:00.000Z'}, 
          1: {title: 'Some OtherPerson', start: '2022-01-24T12:00:00.000Z', end: '2022-01-24T14:00:00.000Z'},
          ...
        ]
    }
  },
...}

我也在 Calendar.currentData.eventSources.{SOME_NUMBER}.meta.

中看到它们预渲染和 post 渲染

Answer 1

最终我确实找到了答案。服务器端调用“google.script.run”异步运行，因此 fullCalendar 将其视为长度为零的数组，即使添加了条目也是如此。我不熟悉承诺，所以我尝试在 [=14] 中使用它们=] Apps 脚本失败。然后我重新排序程序以在 loadEvents(importedData) 的 for 循环之后添加事件并修复了错误。

var yellowEvents = [];
var greyEvents = [];
function addEventsToFullCalendar(cal) {
  function loadEvents(importedData) {
    for (var k in importedData) {
      var event = importedData[k];
      if (event.color == 'yellow') {
        yellowEvents.push({ title: event.title, start: event.start, end: event.end });
      } else {
        greyEvents.push({ title: event.title, start: event.start, end: event.end });
      }
    }
    cal.addEventSource({
      events: yellowEvents,
      color: "yellow",
      textColor: "black"
    });
    cal.addEventSource({
      events: greyEvents ,
      color: "grey"
    });
  }
  google.script.run
    .withSuccessHandler(loadEvents)
    .getCalenderEventsAsJson();
}

document.addEventListener('DOMContentLoaded', function() {
  var calendar = new FullCalendar.Calendar(calendarEl, options);
  calendar.render();
  addEventsToFullCalendar(calendar);
}

如何根据描述使用具有不同颜色的多个完整日历源？

How to use multiple Full Calendar sources with different coloring based on description?

javascript

google-apps-script

fullcalendar-5