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

MMRIZE

@Sam-0
First,
You can assign colour or class per each calendar. So check if your events are separated by different calendars. Check it first.

In case your events are in one calendar and want to distinguish each by title of event, you can do this;

eventTransformer: (ev) => {
  if (ev.title.search('Uitje') > -1) ev.color = 'blue'
  if (ev.title.search('verjaardag' > -1) ev.icon = 'birthday-cake'
  /* and so on ... */
  return ev
},

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.