I have an event schema:
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}
}],
});
Which means, multiple people have access to the same event, and each time an event is created, all the members of that group are pushed in the event member's array, and a default preference and color are generated for all. ('Attending', color 'green')
Each time a person clicks on the event - the event changes color and preference - (if 1 then 2 and color yellow, if 2 then 3 and color red, if 3 then 1 and back to color green)
The thing is - the color
property is not in the main EventSchema
, but an inside property, so calendarOptions renders the default color. I managed to reach the colors it should be rendering at initiation, to get the individual coloring:
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 outputs:
Now in calendar options:
events: this.events,
eventColor: this.colors, // <---- doesn't work, renders all with default blue coloring
Overriding the default by typing eventColor: 'yellow'
, works - renders all with yellow.
Also: eventColor: ['yellow']
works too
But, eventColor: ['yellow', 'red', 'green']
doesn't work
I feel like I'm super close to the solution here
The colors do render after a click, as the update pref/color http request works 100%
I think I need to somehow create an array from the colors of the separated array and assign them by order to the events in the events array.
Any ideas?