Looking for a simple 'Countdown / Days Until' Calendar Card

Hi! I’m in the process of moving 10 years of work in another platform to HA, trying to spend as little time as possible creating code/yaml from scratch as the to do list is long.

One of the first things I am trying to do is get a ‘Countdown Card’ for significant calendar events displayed on the dashboard, ideally with a background image. Like this:

image
I’ve found this thread, which is a little older and requires some navigating of GitHub issues and one dead link that sounded promising.

I worry about trying to apply code from old threads as it often leads to learning that something changed in the core system that I have to figure out. I’ve spent more time searching than I care to admit. Do I need Mushroom? I didn’t see a good example while skimming those threads.
Can someone point me to a good solution?

1 Like

Did you end up finding a solution? I am currently looking for exactly the same…

sort of? I have a rule that reads from a calendar in order to populate the entities, and the card then points at the entities. However, it seems to always refresh the image (which comes from the notes of the calendar item as a URL). I want to improve it but have too many other competing projects and it works well-enough for now:

description: Updates stored event data daily
triggers:
  - at: "00:01:00"
    trigger: time
  - event: start
    trigger: homeassistant
conditions: []
actions:
  - target:
      entity_id: calendar.automations_google
    data:
      start_date_time: "{{ now().strftime('%Y-%m-%d 00:00:00') }}"
      end_date_time: "{{ (now() + timedelta(days=999)).strftime('%Y-%m-%d 00:00:00') }}"
    response_variable: future_events
    action: calendar.get_events
  - target:
      entity_id: input_number.calendar_majorevent_1_daysuntil
    data:
      value: >
        {% set events = future_events['calendar.automations_google'].events |
        selectattr('description', 'equalto', 'event') | list %} {% if events |
        length >= 1 %}
          {% set diff_seconds = (as_datetime(events[0].start + ' 00:00:00').replace(tzinfo=now().tzinfo) - now()).total_seconds() %}
          {% set days = (diff_seconds / 86400) | round(0) | int %}
          {{ days if days > 0 else 0 }}
        {% else %}
          0
        {% endif %}    
    action: input_number.set_value
  - target:
      entity_id: input_text.calendar_majorevent_1
    data:
      value: >
        {% set events = future_events['calendar.automations_google'].events |
        selectattr('description', 'equalto', 'event') | list %} {% if events |
        length >= 1 %}
          {{ events[0].summary }}
        {% else %}
          None
        {% endif %}
    action: input_text.set_value
  - target:
      entity_id: input_text.calendar_majorevent_1_url
    data:
      value: >
        {% set events = future_events['calendar.automations_google'].events |
        selectattr('description', 'equalto', 'event') | list %} {% if events |
        length >= 1 %}
          {{ events[0].location }}
        {% else %}
          No Event
        {% endif %}
    action: input_text.set_value
type: picture-elements
image_entity: image.template_majorevent1_image
elements:
  - type: state-label
    entity: input_number.calendar_majorevent_1_daysuntil
    style:
      top: 50%
      left: 50%
      font-size: 5em
      color: white
      text-shadow: 2px 2px 2px black
  - type: state-label
    entity: input_text.calendar_majorevent_1
    style:
      top: 70%
      left: 50%
      font-size: 2em
      color: white
      text-shadow: 2px 2px 2px black