Enhancement: Allow conditional calendar event background color based on text contained in the event

[swampylee]

So for example, I've tried to use code similar to the code below which should look at each event and if it contains "Time" it should change the background of the event to red and if it contains "CONFIRMED" it should change the background color of the event to Green. I couldn't get it to work so I ran it through ChatGPT and it basically said that

The Problem
You’re trying to match event titles like:

John Smith - Full Bath & Groom (Medium) with Una - Cockerpoo - CONFIRMED

But that string lives inside .bubble-event-name, not as an attribute. So CSS can't target the outer .bubble-event based on that text.

✅ The Only Reliable Fix (Current Version)
Bubble Card v3.0.0 does NOT support text-based conditional styling via CSS alone.

Here's the code:

type: custom:bubble-card
card_type: calendar

entities:
  - entity: calendar.deb_s_dog_grooming
    color: blue

show_end: true
show_progress: true
card_layout: normal
rows: 10
scrolling_effect: false
limit: 10

styles: |
  /* Match CONFIRMED in event title */
  .event[data-summary*="CONFIRMED"] {
    --bc-calendar-event-background: rgba(23, 190, 0, 0.5) !important;
  }

  /* Match TIME in event title */
  .event[data-summary*="Time"] {
    --bc-calendar-event-background: rgba(255, 0, 0, 0.5) !important;
  }

  /* Optional: base card background */
  ha-card {
    --bubble-main-background-color: rgba(0, 0, 0, 0.7);
  }