Cal EXT3 - Symbols and colors

_V_

I apologize for a every repeating question, but I cant figure it out completely.

So I want to change the color and/or the symbol, if the title has a specific text.
The readme says:

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

I also found, that I can be more detailed in styling, when I create a class for a event, like this:

eventTransformer: (event) => {
if (event.title.includes('Gus')) event.class = "gus"
return event
},

/* custom.css */

.CX3 .event.gus {
background-color: var(--calendarColor);
color: var(--oppositeColor);
border-radius: 4px;
}

If I want to change the symbol too, Sam said, I can use the same command just with “symbol” instead of color, I guess this?

eventTransformer: (ev) => {
  if (ev.title.search("John") > -1) ev.symbol= "WHAT TO PUT HERE";
  return ev;
};

Obviously I dont know how to put the symbol or the link to the symbol. I set “useIconify:true”, would this mean I can use ANY of the Iconify symbols by their name like “material-symbols:ar-on-you-outline-sharp”? Looks too easy to me, so I guess no.

If someone has time to spare Id appreciate some help.

sdetweil

@_V_

Yes, really that simple

eventTransformer: (ev) => {
  if (ev.title.search("John") > -1) {
          ev.symbol= "WHAT TO PUT HERE";
          ev.color= ‘blue’
  }
  return ev;
};

When using the font-awesome set,
They give you a name or a number, you can use either value
I dont know the set you picked

Fa house is ‘house’ or ‘\f015’

_V_

@sdetweil Hey Sam
As soon as I try to use symbol, the calender wont load up - I see the current month but thats about it.
I tried different icon, I tried changing only symbol and I tried putting up a transform command for color and symbol seperately

eventTransformer: (ev) => {
if (ev.title.search("Geburtstag") > -1)
ev.symbol= "mdi:birthday-cake-outline";
ev.color= "ff00ff";
return ev
 },

I also tried your version with the additional {}, but no change either way
I put this into the ext3 config file, using iconify icons

sdetweil

@_V_ if you want to set multiple properties on this event when the if condition is true

the you need { }
after the if()

otherwise only the first is used when the condition is true…

you would have to open the browser developers window to see what the problem is
ctrl-shift-i (chrome)
console tab,
put ext3 in the filter field.

_V_

@sdetweil I finally understood what you meant by put in filter…^^

So I set the additional {} and the cal stopped again, message saing:

TypeError: event.symbol.join is not a function

Does this give you any clue or do you need the additional “at …” lines too?

sdetweil

@_V_ ok, symbol is a list…

use
ev.symbol.push( “mdi:birthday-cake-outline”)

instead of
ev.symbol=

_V_

@sdetweil OK no error, color is shown but no symbol.
Did I miss some basic setting in the modules config?

sdetweil

@_V_ sorry, don’t know about that icon library…

can you try one of the FA values…

"\f015"

for example

_V_

@sdetweil Tried, no change.

Does it matter, where in the ext3 config it is placed, like at the end for example?

sdetweil

@_V_ the filter/transformer is INSIDE the Ext3 config:{} block…

{
module: "MMM_CalendarExt3",
position:
config:{
   .
.
.
.
  eventTransformer: (ev) => {
        if (ev.title.search("John") > -1){
              ev.symbol= "\f015";
             ev.color= "blue";
        }
        return ev
   },
 }
},