Highlighting specific calendars in Atomic Calendar Revive with Card Mod

Configuration Frontend
1

I’ve added a number of calendar feeds to Home Assistant, but when I display them all in Event mode of Atomic Calendar Revive, I want to highlight events from both the family calendar as well as the trash pickup calendar, to make them stand out from all the other events (mostly holidays, observances, and release dates).

I’ve come up with a solution using Card Mod as follows:

type: custom:atomic-calendar-revive
card_mod:
  style: |
    .event-right:has(ha-icon[icon="mdi:account"]) {
      background-color: rgba(67,160,71,0.15);
    }
    .event-right:has(ha-icon[icon="mdi:delete"]) {
      background-color: rgba(0,0,0,0.1);
    }

Explanation: Since the HTML doesn’t contain source calendar details, I match the entries by their respective calendar icon. For calendar entries (.event-right) that contain a mdi:account icon (family calendar), set the background to a transparent green tint. For calendar entries that contain a mdi:delete icon (garbage pickup), set the background to a transparent light gray tint.

Here’s what the result looks like:
image

(And yes, I’m cheating by using the Unicode logo for UN International observances. :slight_smile: )

I hope this helps anyone looking for a similar solution.

1 Like