javascript - 具有单独着色 js 的全日历多访问事件

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'] 不起作用

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

点击后颜色会渲染，因为更新首选项/颜色 http 请求 100% 有效

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

有什么想法吗？

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);
  },