MMM-CalendarExt3 CSS issue with full day event text colors, and MMM-CalendarExt3Agenda

ZiggidyZ

Good morning!

I am LOVING the MMM-CalendarExt3!! I am nearly ready to order a display for my project, just trying to iron out a few last wrinkles with the code. Last night I made a change so that the Events listed on the calendar are colored to match the calendar they belong to (using SEVERAL different calendars, all populate just fine, no issues there, each one has a different color for a different family member.

My end goal is to have the TIME for the events remain white, text for event be colored to match calendar color, full day events use BACKGROUND for calendar color but remain with white & black text as determined by the system based on the background color.

This is the ONLY change I have made that has had any effect. Making this change ALSO changed the text color for the all day events, but in the event.fullday it is still using oppositeColor.

.CX3 .event .headline .title {
  color: var(--calendarColor);

I tried moving this section above the section mentioned previously but it had no impact.

.CX3 .event.fullday,
.CX3 .event.multiday {
  background-color: var(--calendarColor);
  mix-blend-mode: difference;
  border-radius: 4px;
  color: var(--oppositeColor);
}

Here is what the calendar looks like with the event titles colored.

Also, and I’m sorry for lumping this into the same thread, with MMM-CalendarExt3Agenda, is there a way to select what information from the calendar is displayed? It defaults to showing just about all the event info, I’d like to keep it at just time, and event name if possible.

ZiggidyZ

Whew, I was able to FINALLY just now solve this issue after banging my head on the wall over and over again. An interesting thing is that the symbols in fullday and partial day events don’t use the same formatting, as you can see in my screenshot that the timed events have colored symbols, and the full day ones use the output I want to see, though I made no changes there. I backed out my change from the .event .headline .title line, and created a NEW line that changed it for ONLY events that are NOT full day events.

.CX3 .event .headline .title {
  color: var(--calendarColor);    <---------- REMOVED

.CX3 .event:not(.fullday) .headline .title {
  color: var(--calendarColor);
}

Additionally, I was able to figure out the Agenda issue no problem. I commented out the default lines in the CSS file for the description and location and added the display: none;, it works exactly the way I intended.

.CX3A .event .description {
//  overflow: hidden;
//  white-space: nowrap;
//  text-overflow: ellipsis;
//  max-width: 100%;
//  font-size: 90%;
//  color: lightgray;
//  padding-left: 20px;
  display: none;
}

.CX3A .event .location {
//  overflow: hidden;
//  white-space: nowrap;
//  text-overflow: ellipsis;
//  max-width: 100%;
//  font-size: 80%;
//  color: darkgray;
//  text-align: right;
  display: none;
}

I am still working on the other issues with the full day events colors being jacked up after changing the event titles and headlines

MMRIZE

@ZiggidyZ
Good job. CX3 and CX3A use heavy CSS juggling, so it is not so easy for those who have not experienced this kind of work.
The only thing I am worried about is that it seems you may modify the CSS file of each module directly.
All custom CSS things should be performed in /css/custom.css by overriding for future-update-proof.

ZiggidyZ

@MMRIZE Thank you, I REALLY appreciate you pointing that out to me. I have gone through and removed and reinstalled all modules manually and moved all of the changes I made to the custom.css and also stopped changing defaults in the .js files and moved those desired changes directly to the config.js file. Saved my bacon from having HUGE headaches in the future with broken configs.