MMM-CalendarExt3 how do you create multiple events with color css?

Sam 0

@MMRIZE said in MMM-CalendarExt3 how do you create multiple events with color css?:

if (ev.title.search(‘verjaardag’ > -1) ev.icon = ‘birthday-cake’

Thanks for your help, it went wrong at first because a bracket was missing.) I adjusted this but unfortunately it doesn’t work. Could this be related to the fact that I have already adjusted the CSS?

{
module: “MMM-CalendarExt3”,
position: “lower_third”,
title: “”,
config: {
eventTransformer: (ev) => {
if (ev.title.search(‘Uitje’) > -1) ev.color = ‘blue’
if (ev.title.search(‘Verjaardag’) > -1) ev.icon = ‘birthday-cake’
return ev
},

Sam 0

@MMRIZE

Thanks for your help, it went wrong at first because a bracket was missing.) I adjusted this but unfortunately it doesn’t work. Could this be related to the fact that I have already adjusted the CSS?

{
  module: "MMM-CalendarExt3",
  position: "lower_third",
  title: "",
  config: {
       eventTransformer: (ev) => {
              if (ev.title.search('Uitje') > -1) ev.color = 'blue'
              if (ev.title.search('Verjaardag') > -1) ev.icon = 'birthday-cake'
              return ev	
       },
   }
}

sdetweil

@Sam-0 I’ve edited your post…

please try to include all the braces {}
so it is completely clear

and use indents to add clarity to what is where …

Sam 0

@MMRIZE
I have removed the custom CSS so it is standard, but I do not see the icon but I do see the blue color.

MMRIZE

@Sam-0 sorry, it would not be ‘icon’, it would be ’ symbol’

Sam 0

@MMRIZE

So I see that Outing has turned blue, but I don’t see any other symbol for birthday.

sdetweil

@Sam-0 note the code should use symbol NOT icon

MMRIZE

@Sam-0

Sorry, the Previous version was not tested, I have shown the code only with my brain, not with a real device.

Here is the tested code.

  eventTransformer: (ev) => {
    if (ev.title.search('Uitje') > -1) ev.color = 'gold'
    if (ev.title.search('Verjaardag') > -1) ev.symbol = ['birthday-cake']
    return ev	
  },

Sam 0

@MMRIZE

Thank you very much for your effort. I try to describe as best as I can what is working now so that others can learn from it.

Okay, I did some further research based on the term symbol and saw that the symbols had to be added in the general calendar. I also saw them in MMM-CalendarExt3 as below.
Will show my config code here:

{
			module: "calendar",
			header: "Familie agenda",
			position: "top_left",
			config: {
				calendars: [
					{
						
						fetchInterval: 7 * 24 * 60 * 60 * 1000,
						symbol: "calendar-check",
						url: "outlook url"
}	
],					
customEvents: [
    	{keyword: "zwemmen", symbol: "person-swimming fas fa-fw fa-person-swimming"},
    	{keyword: "padel", symbol: "running fas fa-fw fa-running"},
	{keyword: "zingen", symbol: "music fas fa-fw fa-music"},
	{keyword: "verjaardag", symbol: "cake-candles fas fa-fw fa-cake-candles"},
    	{keyword: "volleybal", symbol: "volleyball fas fa-fw fa-volleyball"}
],
					
				
			}
		},

{
  module: "MMM-CalendarExt3",
  position: "lower_third",
  title: "",
  config: {
eventTransformer: (ev) => {
   if (ev.title.search('Uitje') > -1) ev.color = 'blue'
   if (ev.title.search('Verjaardag') > -1) ev.color = '#FF69B4'

I will also try your previous code.

I would also like to control the color via CSS in the config file.
How are you doing this? I already tried something but this doesn’t seem to work.

Sam 0

@MMRIZE

I also tested your code and it works fine too.