MMM-CalendarExt3 full color for timed events

[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

[Jk1]

@sdetweil i’m probably missing something…

I removed all of the other .CX3 entries and left this.

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

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

and this is what it shows.

[sdetweil]

@Jk1
ok, tried again

.CX3 .event .headline {
  color: green;
}

image

[Jk1]

@sdetweil right the Juneteenth is a full day event (holiday) so it has a colored background. But your timed event on the 4th is just colored text. I am able to make it do that too.

BUT what I want is the timed event, “Grandpa sam…” to also have a colored background like “Juneteenth” ( but of course a different color since it’s not a holiday).

[sdetweil]

@Jk1 yeh, css has this other core idea,
The selector that is MOST specific wins, regardless which was defined last

So, if you target a big blob, and another targets THAT big blob, the second one wins.

If you look at the css file provided by the module (same folder) you will see how it targets different elements

[Jk1]

@sdetweil YES! That helped me find the missing piece.

I needed this to set the header color

background-color: var(--calendarColor);

Now I just need to figure out how to set all the text to black.

Thanks for your help! Very much appreciated.

[sdetweil]

@Jk1 said:

Now I just need to figure out how to set all the text to black.

check the module doc and css for the ‘opposing color’ I think he calls it…

[sdetweil]

@Jk1 said:

I needed this to set the header color

yes, I thought you were talking about text color, not background…