Template to select day of week in Lovelace

[ygreq]

Hi folks!

Any idea how I can create a template that I can use in Lovelace so I can tick days of the week on and off? And based on the actual day of the week a binary sensor to turn on or off?

So in Lovelace if I tick Monday, Wednesday and Friday, on those specific days the binary sensor would turn on, otherwise off.

I found a few solutions of the forum but they don’t allow for presenting it on Lovelace.

Thank you so much!

[tom_l]

I currently use the custom button card.

  - card_type: horizontal-stack
    cards:
      - entity: input_boolean.zone_3_mon
        name: Mon
        template: day_button
        type: custom:button-card
      - entity: input_boolean.zone_3_tue
        name: Tue
        template: day_button
        type: custom:button-card
      - entity: input_boolean.zone_3_wed
        name: Wed
        template: day_button
        type: custom:button-card
      - entity: input_boolean.zone_3_thu
        name: Thu
        template: day_button
        type: custom:button-card
      - entity: input_boolean.zone_3_fri
        name: Fri
        template: day_button
        type: custom:button-card
      - entity: input_boolean.zone_3_sat
        name: Sat
        template: day_button
        type: custom:button-card
      - entity: input_boolean.zone_3_sun
        name: Sun
        template: day_button
        type: custom:button-card

template:

button_card_templates:
  day_button:
    color_type: icon
    hold_action:
      action: none
    show_label: false
    show_name: true
    show_state: false
    state:
      - icon: mdi:checkbox-marked-circle
        styles:
          card:
            - border: solid 1px var(--paper-item-icon-active-color)
            - box-shadow: 0px 0px 10px 3px var(--paper-item-icon-active-color)
          name:
            - color: var(--primary-text-color)
        value: 'on'
      - icon: mdi:cancel
        styles: null
        value: 'off'
    styles:
      card:
        - border-radius: 10px
        - border: solid 1px var(--primary-color)
        - box-shadow: none
        - padding: 6px 0px
        - margin: 0px 0px
        - '--ha-card-background': rgba(0, 0, 0, 0)
      grid:
        - grid-template-areas: '"i" "n"'
        - grid-template-rows: 33% auto
        - grid-template-columns: auto
      icon:
        - width: 28px
      name:
        - justify-self: middle
        - align-self: end
        - font-size: 14px
        - padding: 0px 0px
        - color: var(--secondary-text-color)
    tap_action:
      action: toggle

However next month’s release introduces a schedule helper that I will be switching to.

[ygreq]

May I ask where to put the code you shared? I’ve been going through the github and youtube to learn how to use the button-card, but still struggling.

I installed the button-card. But I am stuck at step 3 of the installation, I guess.

Add the configuration to your ui-lovelace.yaml

resources:

• url: /hacsfiles/button-card/button-card.js
  type: module

Where exactly should I put this code. I do not have a ui-lovelace.yaml.

Thank you so much!

[tom_l]

If you install it with HACS you don’t have to worry about that, otherwise it is

Settings → Dashboards → ⋮ → Resources

[ygreq]

Then what are the actual steps I have to take in order to make your example work?

After creating the 7 input_booleans, I tried adding this to Lovelace:

type: horizontal-stack
cards:
  - entity: input_boolean.monday
    name: Mon
    template: day_button
    type: custom:button-card
  - entity: input_boolean.tuesday
    name: Tue
    template: day_button
    type: custom:button-card
  - entity: input_boolean.wednesday
    name: Wed
    template: day_button
    type: custom:button-card
  - entity: input_boolean.thursday
    name: Thu
    template: day_button
    type: custom:button-card
  - entity: input_boolean.friday
    name: Fri
    template: day_button
    type: custom:button-card
  - entity: input_boolean.saturday
    name: Sat
    template: day_button
    type: custom:button-card
  - entity: input_boolean.sunday
    name: Sun
    template: day_button
    type: custom:button-card

But it gives me an error obviously as I did not add the button template. I tried adding the template in configuration.yaml, but that gives me an error as well. Should I put it somewhere else? What am I missing?

Thank you so much!

[tom_l]

When you press the ⋮ icon to edit your dashboard press it again after that and select Raw configuration editor. Paste the template at the top of your raw dashboard YAML. Save and exit.

[ygreq]

I understand now. And it works, too. Thank you!!!

I do have a small issue, but maybe I can dibble in the template to make the icons smaller…

[paulnel (Paul)]

Hallo, since latest update the color has gone wrong, pls will you comment on possible fix?