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

Sam 0

Hi,

How do you create multiple events with color css?
Is there an example of what this looks like?
I now have the following and it works, but I don’t know how I want to add a second event, so in addition to outings, for example birthdays

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

I also wonder how I can get a nice icon in an event, for example a birthday cake icon, does anyone have an example that I can look at?

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	
  },