Please have a look: calendar title not changing button-card background

Configuration Frontend
1

Hello guys

I would like to have a button-card in my dashboard which is changing its backround to red if the title of an calendar entry is “Low Demand Season - Peak” or “High Demand Season - Peak”. Otherwise, the backround should be green.

type: custom:button-card
entity: calendar.eskom_ruraflex
name: Eskom Tariff
icon: mdi:power-plug
show_state: false
label: |
  {% if state_attr('calendar.eskom_ruraflex', 'message') %}
    {{ state_attr('calendar.eskom_ruraflex', 'message') }}
  {% else %}
    Low Eskom Tariff
  {% endif %}
styles:
  card:
    - background-color: >
        {% if 'Low Demand Season - Peak' in
        state_attr('calendar.eskom_ruraflex', 'message') or 'High Demand Season
        - Peak' in state_attr('calendar.eskom_ruraflex', 'message') %}
          red
        {% else %}
          green
        {% endif %}
  icon:
    - color: white

Well, nothing is happening, just the standard dark backround. It looks like the code is not reading the attribute “message” correctly. Looking it up under developer tools shows the right message of the event though.
I don’t have a clue, but it is also my first calendar based automation. Any idea what I am doing wrong here?

2

You are trying to use jinja templates here.
But this card only supports JS templates.
Here is the main button-card thread where you can find examples (not to mention reading Docs) - as well as ask all button-card-related questions.

3

Thank so much for pointing me in the right direction. It works flawlessly now!

1 Like