<![CDATA[MMM-CalendarExt3 full color for timed events]]>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?

cd5493e9-8b78-4d20-bccf-62fbf5427f1a-image.jpeg

]]>https://forum.magicmirror.builders/topic/20285/mmm-calendarext3-full-color-for-timed-eventsRSS for NodeFri, 26 Jun 2026 20:50:54 GMTFri, 26 Jun 2026 16:32:48 GMT60<![CDATA[Reply to MMM-CalendarExt3 full color for timed events on Fri, 26 Jun 2026 18:53:15 GMT]]>@Jk1 css works top of the file down

So you set it, then changed it

It works on my Ext3

]]>https://forum.magicmirror.builders/post/131475https://forum.magicmirror.builders/post/131475Fri, 26 Jun 2026 18:53:15 GMT<![CDATA[Reply to MMM-CalendarExt3 full color for timed events on Fri, 26 Jun 2026 18:43:34 GMT]]>@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;
}
]]>https://forum.magicmirror.builders/post/131474https://forum.magicmirror.builders/post/131474Fri, 26 Jun 2026 18:43:34 GMT<![CDATA[Reply to MMM-CalendarExt3 full color for timed events on Fri, 26 Jun 2026 18:12:54 GMT]]>@Jk1 try

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

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

Screenshot at 2026-06-26 13-12-07.png

]]>https://forum.magicmirror.builders/post/131473https://forum.magicmirror.builders/post/131473Fri, 26 Jun 2026 18:12:54 GMT<![CDATA[Reply to MMM-CalendarExt3 full color for timed events on Fri, 26 Jun 2026 18:00:39 GMT]]>@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.

e720c4bb-5a12-496c-b5de-11b6ccc69234-image.jpeg

]]>https://forum.magicmirror.builders/post/131472https://forum.magicmirror.builders/post/131472Fri, 26 Jun 2026 18:00:39 GMT<![CDATA[Reply to MMM-CalendarExt3 full color for timed events on Fri, 26 Jun 2026 17:23:02 GMT]]>@Jk1 see https://forum.magicmirror.builders/post/131110

]]>https://forum.magicmirror.builders/post/131471https://forum.magicmirror.builders/post/131471Fri, 26 Jun 2026 17:23:02 GMT