Custom templates for subcards / events

[idaho]

Hey everbody,

while i have been redesigning my dashboard lately and i have also been using the button-card, i came up with the idea to integrate an ‘expert’ mode in the next version. Here you can use your own cards to display the individual dates.

Here are a few ideas of what it could look like. The current poc code still looks pretty chaotic, but it's enough to show the possibilities.

Button Card in sections

Mushroom Badges

Default tile card in sections

A widget view with icons

A widget view without icons

And a code example how the default card in sections code would look

card_container: section
card_event:
  type: tile
  entity: "[[[ return entity ]]]"
  state_content: start_time
  name: "[[[return item.label ]]]"
  icon: "[[[return item.icon ]]]"
  color: "[[[return item.color ]]]"
  grid_options:
    columns: 6

And a code example for the widget without icons using the button-card

card_event:
  type: custom:button-card
  entity: "[[[return item.content.entity ]]]"
  name: "[[[return item.label ]]]"
  icon: "[[[return item.icon ]]]"
  color: "[[[return `var(--${item.color}-color)` ]]]"
  color_type: icon
  show_state: |
    [[[ 
      return !item.isWholeDayEvent 
    ]]]
  show_name: true
  state_display: |
    [[[ 
      if ( item.isWholeDayEvent ) {
          return ' '
        } 
        
        const day = item.date.start.
            toLocaleDateString('De', {
            month: 'numeric',
            day: 'numeric'
          });

        const startdate = item.date.start.toLocaleTimeString(undefined,  { hour: "2-digit", minute: "2-digit" })
        const enddate = item.date.end.toLocaleTimeString(undefined,  { hour: "2-digit", minute: "2-digit" })
        
        if ( item.isMultiDay && item.dateIndex == 'start' ) {
          return `${startdate}`
        } 
        if ( item.isMultiDay && item.dateIndex == 'end' ) {
          return `<b>Ende</b> ${enddate}`
        } 
        if ( item.isMultiDay && item.dateIndex == 'between' ) {
          return ` `
        } 
        return `${startdate} - ${enddate}`
    ]]]
  custom_fields:
    background: ""
  styles:
    custom_fields:
      background:
        - position: absolute
        - left: 0px
        - top: 0px
        - z-index: 1
        - background: "[[[ return `var(--${item.color}-color)`]]]"
        - width: calc(100% - 10px)
        - height: 100%
        - opacity: 0.1
        - display: "[[[ return item.isWholeDayEvent ? `none` : `block`]]]"
    img_cell: null
    icon:
      - top: "-1px"
      - position: absolute
      - height: 25px
      - width: 25px
    grid:
      - grid-template-areas: "\"n\" \"s\""
      - grid-template-columns: 1fr
    card:
      - margin-bottom: 5px
      - padding: 2px 0px
      - padding-right: 8px
      - background: transparent
      - border: transparent
      - border-left: "[[[return `solid 5px var(--${item.color}-color)` ]]]"
      - border-radius: 0px
      - position: relative
    state:
      - justify-self: start
      - font-size: 12px
      - font-weight: 300
    name:
      - justify-self: start
      - font-size: 13px
      - font-weight: 300
      - padding-left: 5px
  grid_options:
    columns: 6
card_date:
  type: custom:button-card
  show_state: |
    [[[
      return item.dayIndex === 1
    ]]]
  show_name: true
  name: |
    [[[
      if ( item.dayIndex === 1 ) {
        return item.date.start.toLocaleDateString('de',{ weekday: 'long'});
      }
      if ( item.dayIndex === 2 ) {
        return 'MORGEN';
      }
      const dateYear = item.date.start.getFullYear();
      const isNextYear = (new Date()).getFullYear();
      
      return item.date.start.
        toLocaleDateString('de',{ 
        weekday: 'long',
        day: 'numeric',
        month: 'short',
        year: dateYear != isNextYear ? 'numeric' : undefined
      });
    ]]]
  state_display: |
    [[[ 
      const dateYear = item.date.start.getFullYear();
      const isNextYear = (new Date()).getFullYear();
      
      return item.date.start.
        toLocaleDateString('de',{ 
        //weekday: 'long',
        day: 'numeric',
        month: 'short',
        year: dateYear != isNextYear ? 'numeric' : undefined
      });
    ]]]
  styles:
    grid:
      - grid-template-areas: "\"n\" \"s\""
      - grid-template-columns: 1fr
      - grid-template-rows: auto
    card:
      - padding: 8px 0px
      - background: transparent
      - border: none
    name:
      - justify-self: start
      - justify-content: start
      - justify-items: start
      - align-self: start
      - font-size: 12px
      - color: "[[[ return item.dayIndex === 1 ? `var(--red-color)` : `` ]]]"
      - font-weight: 700
    state:
      - justify-self: start
      - justify-content: start
      - justify-items: start
      - align-self: start
      - align-content: start
      - align-items: start
      - font-size: 24px
      - font-weight: 500
card_container: widget