MMM-CalendarEXT2 - Event color changes

[suspect24]

I have the module working perfectly but the only thing I want to do is slightly change the color of the events sometimes the grey is hard to read. I tried figuring out the custom css but I have no clue what I am doing or what I am looking for can anyone help?

I have it setup with a weekly view with 5 slot in fullscreen_below and a daily view with 3 slot in the top_right.

[cskenney]

@suspect24 There are a couple ways to make the change.

Are you trying to change all the entries from a specific calendar? If you are you want to assign a className to the calendar and then use that className in the custom.css file.

Here is an example:

				calendars: [
					{
						name: "MHS Softball",
						url: "https://calendar.google.com/calendar/ical/example.ics",
						className: "cal_mhs_softball",
					},

Then in the custom.css file you would include the entry to change the background color of the specified className. Like this:

.CX2 .event.cal_mhs_softball {
	background-color:rgba(128,0,0,1);
	}

I have also successfully used the transform function to search the Title of an event for a specific keyword. Once found I assign an event.className to that event. Then in the custom.css file I can change the background color for that specific event className.

[suspect24]

@cskenney so how do I use the transform function to find the item I want to change? When I look through the css file there’s a lot in there, none of which makes any logical sense to me. Haha

[cskenney]

@suspect24 Here is how I implemented the transform function.

Background: my daughter plays on a softball team that contains the word “Panic”. I want to change the background color to match the team color and I want to include a softball icon for the event.

I add the following code to the defaultSet section in MMM-CalendarExt2. This means every time the word “Panic” is found in an event title that the commands following are executed.

Note: I have an If…else If structure here so I can actually transform a number of items.

defaultSet: {
						calendar: {
							maxItems: 500,
							scanInterval: 1000*60*1,
							beforeDays: 5,
							afterDays: 60,
							maxIterations: 100,
						},
						view: {
							timeFormat: "h:mm A",
							transform: function(event) {
								if (event.title.search("Panic") > -1) {
								event.icon = "noto-softball";
								event.className = "view_panic";
								} else if (event.title.search("Arin") > -1) {
								event.icon = "noto-softball";
								} else if (event.title.search("Violin") > -1) {
								event.icon = "emojione-monotone:violin";
								}
								return event;
							},							
						},
						scene: {}
				},

Now that I have assigned a className object to the events that contain the word “Panic” I can use that object in the custom. css file.

.CX2 .event.view_panic {
	background-color:rgba(139,0,139,1);
	}

There may be other ways to do this but this one worked out well for me.