MMM-CalendarExt3

DDE12

@sdetweil
Yeah, that would definitely be less confusing. Do I have the classes: “FamilyWeek” and classes: “FamilyMonth” in the right place in the CalenderExt3 config(s)?

sdetweil

@DDE12 either can be used in css to select elements to style

DDE12

@sdetweil
I’m completely lost now. I thought all of this went in config.js.

sdetweil

@DDE12 all of THAT goes.in config.js

but if you want to change the color of the text for the second day of the week

in custom.css

. MMM-CalendarExt3  .weekday_1 {
      color:green;
}

bicolorbore586

@fedale @MMRIZE @chadjohn2 I am also trying (unsuccessfully) to have the Calendar event change color depending on which name is in the title.

With the original magicmirror calendar, I’ve used
customEvents: [ {keyword: “Ben”, color: “Brown”} ], which shows the event title and associated symbol in Brown.

In EXT3, using eventTransformer, only the symbol shows in color

I’ve tried to use
eventTransformer: function(event) {
if (event.title.search(“Ben”) > -1) {
event.className = “Ben”;
}
}
with customer.css
.CX3 .Ben {
color: brown;
}

However, this then shows a blank calendar

Have any of you been successful?
Where am I going wrong?

Thanks

MMRIZE

@bicolorbore586
You have to return event object in eventTransformer function. When you omit ‘return’ statement in a function, implicitly it is same with ‘return null’

bicolorbore586

@MMRIZE have tried that, still doesn’t show anything.

eventTransformer: function(event) {
if (event.title.search(“Ben”) > -1) {
event.className = “Ben”;
return event
}
}

mumblebaj

@bicolorbore586 If I am not mistaken, your return goes outside the IF statement

BKeyport

@mumblebaj

Try this:

eventTransformer: function(ev) {
  if (ev.title.search(“Ben”) > -1)  ev.className = “Ben”;
  return ev
}

directly off the README.md :

eventTransformer: (ev) => {
  if (ev.title.search('John') > -1) ev.color = 'blue'
  return ev
}

bicolorbore586

@mumblebaj so that now means I can see the events again, but still not coloured how I want.