具有单独着色js的fullcalendar多访问事件

Question

我有一个事件架构：

const EventSchema = new Schema({
  title: {type: String, required: true},
  members: [{
    _id: false,
    id: {type: Schema.Types.ObjectId, ref: 'User', required: true},
    color: {type: String, required: true, default: '#008975'},
    preference: {type: Number, required: true, default: 1, min: 1, max: 3}
  }],
});

这意味着，多个人可以访问同一个事件，每次创建一个事件时，该组的所有成员都会被推入事件成员的数组中，并为所有人生成默认的首选项和颜色。 （'参加'，颜色'绿色'）

每次人们点击事件时 - 事件会改变颜色和偏好 - （如果1然后是2并且颜色为黄色，如果是2然后是3并且颜色为红色，如果是3然后是1并且返回到绿色）

问题是 - color属性不在主EventSchema中，而是在内部属性中，因此calendarOptions呈现默认颜色。我设法达到它应该在启动时渲染的颜色，以获得单独的着色：

const activeID = this.activeID;
this.colors = this.events.map(function (event) {
  return event.members
    .filter(function (obj) {
      return obj.id === activeID
    })
    .map(function (obj) {
      console.log(obj.color); // <--- image below - output 1
      return obj.color
    })
});
console.log(this.colors); // <--- image below - output 2

Console.log输出：

现在在日历选项中：

events: this.events,
eventColor: this.colors, // <---- doesn't work, renders all with default blue coloring

通过键入eventColor: 'yellow'来覆盖默认值，可以使用黄色来渲染所有内容。

另外：eventColor: ['yellow']也适用

但是，eventColor: ['yellow', 'red', 'green']不起作用

我觉得我非常接近这里的解决方案

点击后会显示颜色，因为更新pref / color http请求100％

我想我需要以某种方式从分离数组的颜色创建一个数组，并按顺序将它们分配给events数组中的事件。

有什么想法吗？

Answer 1

@ADyson指导我很好

这是我添加到calendarOptions的内容：

eventRender: function(event, element) {
    const color = event.members.filter(function(member) {
      return member.id === activeID
    })
      .map(function(obj) {
        return obj.color
      });
    element.css('background-color', color);
  },