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

[Sam 0]

@MMRIZE

I also tested your code and it works fine too.

[MMRIZE]

@Sam-0
If you have some knowledge about CSS, you can almost control the look of this module. Most needed info is described in readme md file.

[MMRIZE]

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

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.

That is why I said;

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

[BKeyport]

Here’s my multi-transform code for reference. (The brackets may be off, I didn’t check on copy…)

eventTransformer: (ev) => {
					if (ev.title.search("🏠") > -1) {
						ev.title = ev.title.replace("🏠 Personal Commitment","🏠 Personal Event");
						ev.color = 'yellow';
					}
					if (ev.title.search("✈ Flight") > -1) {
						ev.title = ev.title.replace("✈ Flight","🏠 Personal Event");
						ev.color = 'yellow';
					}
					if (ev.title.search("busy") > -1) {
						ev.title = ev.title.replace("busy","🏠 Mom Event");
						ev.color = 'yellow';
					}
					if (ev.title.search("Weekley") > -1) {
						ev.title = ev.title.replace("Weekley","Weekly");
					}
					return ev
				}

I’m using both CX3 and CX3A

[Sam 0]

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

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

I only have one calendar. I’ve already looked at an example but it doesn’t seem to work.

I found this example on this forum.

with customer.css
.CX3 .Ben {
color: brown;
}

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

This doesn’t seem to do much, the color just remains white.
But is this possible?

[sdetweil]

@Sam-0 in the default calendar, where you put url:
add

color: … whatever