0
votes

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:

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?

1
have you tried handling the eventRender callback to find the colour for that event / user combo (I assume you want to colour to reflect the user who is accessing the page, and that your Javascript has access to that info, somehow?) and setting the colour of the event that way? Or if your server knows the userID of the person accessing the page, it can set the event.color property in advance based on the user ID, when it's constructing the event JSON? I don't know for sure because you haven't explained all the relevant aspects - it's not 100% clear how this schema relates to your event JSONADyson
YES! YOU ARE AWESOME!! Thank you!shuk

1 Answers

1
votes

@ADyson guided me very well

This is what I added to 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);
  },