CSS Calendar Source

[mcharltonau]

Add the calendar source to the event-title class. e.g. <div class="event-title family" style=".......
Will enable card mod to change the title colors based on calendar source.

[filip-heens]

would also be nice for the appointments... so that we can look in a single glance whose appointment it is ;-)

[davislp]

Add the calendar source to the event-title class. e.g. <div class="event-title family" style="....... Will enable card mod to change the title colors based on calendar source.

It's not ideal, but you can set different icons on different calendars and then use card mod to make the different icons different colors

card_mod:
  style: |
    ha-icon[icon="mdi:circle"] {
      color: aqua !important;
    }
    ha-icon[icon="mdi:triangle"] {
      color: teal !important;
    }

[dml105]

You can also set the icon field to not be an actual icon like mdi:circle. I set my icons to "Dad" "Mom" "Son" and "Daughter" to separate our individual calendars, then set the colors.

Then you can use the "has" selector to select the entire event and mod all you like, even deleting the icon.

.cal-eventContainer {
      --dadColor: #00cc00;
      --dadColorT: #00cc0044;
      --momColor: #cc0000;
      --momColorT: #cc000044;
      --sonColor: #0000ff;
      --sonColorT: #0000ff44;
      --daughterColor:#ffcc00;
      --daughterColorT:#ffcc0044;
      --eventSize: 16px;
      --time-size: 10px;
      --locationSize: 10px;
      .event-icon {display: none};
    }
    .cal-card {padding: 6px !important}
    .single-event-container {gap:0px !important; padding-bottom:6px !important;}
    .daywrap {border-top:none !important; ;};
    .event-right .ha-icon {display: none;}
    .event-right-top { 
        display: contents !important;
        .event-location {
            text-align: right;
            display: inline-block;
            vertical-align: top;
            user-select: text;
            overflow-wrap: anywhere;
            font-size: var(--locationSize);
    }
    }
    .event-right:has(ha-icon[icon="dad"]) {
      font-size: var(--eventSize);
      padding: 8px;
      border: var(--dadColor) 1px solid;
      border-radius: 8px; 
      background-color: var(--dadColorT); 
      border-left-width: 12px;
      .event-icon {display: none};
    }

    .event-right:has(ha-icon[icon="mom"]) {
      font-size: var(--eventSize);
      padding: 8px;
      border: var(--momColor) 1px solid;
      border-radius: 8px; 
      background-color: var(--momColorT); 
      border-left-width: 12px;
      .event-icon {display: none};
    }

    .event-right:has(ha-icon[icon="son"]) {
      font-size: var(--eventSize);
      padding: 8px;
      border: var(--sonColor) 1px solid;
      border-radius: 8px; 
      background-color: var(--sonColorT); 
      border-left-width: 12px;
      .event-icon {display: none};
    }

    .event-right:has(ha-icon[icon="daughter"]) {
      font-size: var(--eventSize);
      padding: 8px;
      border: var(--daughterColor) 1px solid;
      border-radius: 8px; 
      background-color: var(--daughterColorT); 
      border-left-width: 12px;
      .event-icon {display: none};
    }