MMM-CalendarExt3 full color for timed events

[Jk1]

Hi. I have my MagicMirror pretty much set up the way I want except for one little thing…

I would like the timed events to have the same block coloring as the full day events. Right now, it’s just the text that’s colored. Is there a way to do this?

I eventually will also change the color based on the keyword in the title which I already know how to do for the text. I’m assuming it’ll be the same for the full entry coloring?

[sdetweil]

@Jk1 see https://forum.magicmirror.builders/post/131110

[Jk1]

@sdetweil Yeah, I saw that before but it only colors the text. I want to have it color the whole line like the full-day event.

[sdetweil]

@Jk1 try

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

from here
https://github.com/MMRIZE/MMM-CalendarExt3#styling-with-css

[Jk1]

@sdetweil That didn’t work either. Here’s my custom.css file… maybe something sticks out to you?

I appreciate the help.

custom.css

.normal,
.dimmed,
header,
body {
  color: #fff;
}


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

/* set text color to match color for the calendar list */
.CX3 .event:not(.fullday) .headline .title {
  color: var(--calendarColor);
}


/* Remove the colored dot marker completely in CalendarExt3 */
.CX3 .event.singleday .headline:not(.useSymbol)::before, 
.CX3 .event.singleday .headline.useSymbol .symbol.noSymbol::before { 
  display: none !important; 
}

/* Optional: Clean up spacing if the headline text looks cut off */
.CX3 .event .headline {
  padding-left: 0px !important;
  margin-left: 0px !important;
}

[sdetweil]

@Jk1 css works top of the file down

So you set it, then changed it

It works on my Ext3