Hello, I’m working to a button-card on which I’m building a family calendar but there are things that get me mad.
The script I’m using, based from an example found in an add-on post, is the following (forgive me since it is quite long):
type: custom:button-card
name: planner
show_icon: false
show_name: false
custom_fields:
header: |
[[[
let month = new Date().toLocaleString('it-IT', { month: 'long' });;
let year = new Date().getFullYear();
let header = `<div class="headerContainer"><currentmonth>${month} ${year}</currentmonth></div>`
return header;
]]]
calendar: |
[[[
let calendar = `
<div class="calendar">
<div style="grid-area: c0_0" id="c0_0"></div>
<div style="grid-area: c0_1" id="c0_1" class="day">1</div>
<div style="grid-area: c0_2" id="c0_2" class="day">2</div>
<div style="grid-area: c0_3" id="c0_3" class="day">3</div>
<div style="grid-area: c0_4" id="c0_4" class="day">4</div>
<div style="grid-area: c0_5" id="c0_5" class="day">5</div>
<div style="grid-area: c0_6" id="c0_6" class="day">6</div>
<div style="grid-area: c0_7" id="c0_7" class="day">7</div>
<div style="grid-area: c0_8" id="c0_8" class="day">8</div>
<div style="grid-area: c0_9" id="c0_9" class="day">9</div>
<div style="grid-area: c0_10" id="c0_10" class="day">10</div>
<div style="grid-area: c0_11" id="c0_11" class="day">11</div>
<div style="grid-area: c0_12" id="c0_12" class="day">12</div>
<div style="grid-area: c0_13" id="c0_13" class="day">13</div>
<div style="grid-area: c0_14" id="c0_14" class="day">14</div>
<div style="grid-area: c0_15" id="c0_15" class="day">15</div>
<div style="grid-area: c0_16" id="c0_16" class="day">16</div>
<div style="grid-area: c0_17" id="c0_17" class="day">17</div>
<div style="grid-area: c0_18" id="c0_18" class="day">18</div>
<div style="grid-area: c0_19" id="c0_19" class="day">19</div>
<div style="grid-area: c0_20" id="c0_20" class="day">20</div>
<div style="grid-area: c0_21" id="c0_21" class="day">21</div>
<div style="grid-area: c0_22" id="c0_22" class="day">22</div>
<div style="grid-area: c0_23" id="c0_23" class="day">23</div>
<div style="grid-area: c0_24" id="c0_24" class="day">24</div>
<div style="grid-area: c0_25" id="c0_25" class="day">25</div>
<div style="grid-area: c0_26" id="c0_26" class="day">26</div>
<div style="grid-area: c0_27" id="c0_27" class="day">27</div>
<div style="grid-area: c0_28" id="c0_28" class="day">28</div>
<div style="grid-area: c0_29" id="c0_29" class="day">29</div>
<div style="grid-area: c0_30" id="c0_30" class="day">30</div>
<div style="grid-area: c0_31" id="c0_31" class="day">31</div>
<div style="grid-area: c1_0" id="c1_0"><span class="name">Fabio</span></div>
<div style="grid-area: c1_1" id="c1_1" class="event"></div>
<div style="grid-area: c1_2" id="c1_2" class="event"></div>
<div style="grid-area: c1_3" id="c1_3" class="event"></div>
<div style="grid-area: c1_4" id="c1_4" class="event"></div>
<div style="grid-area: c1_5" id="c1_5" class="event"></div>
<div style="grid-area: c1_6" id="c1_6" class="event"></div>
<div style="grid-area: c1_7" id="c1_7" class="event"></div>
<div style="grid-area: c1_8" id="c1_8" class="event"></div>
<div style="grid-area: c1_9" id="c1_9" class="event"></div>
<div style="grid-area: c1_10" id="c1_10" class="event"></div>
<div style="grid-area: c1_11" id="c1_11" class="event"></div>
<div style="grid-area: c1_12" id="c1_12" class="event"></div>
<div style="grid-area: c1_13" id="c1_13" class="event"></div>
<div style="grid-area: c1_14" id="c1_14" class="event"></div>
<div style="grid-area: c1_15" id="c1_15" class="event"></div>
<div style="grid-area: c1_16" id="c1_16" class="event"></div>
<div style="grid-area: c1_17" id="c1_17" class="event"></div>
<div style="grid-area: c1_18" id="c1_18" class="event"></div>
<div style="grid-area: c1_19" id="c1_19" class="event"></div>
<div style="grid-area: c1_20" id="c1_20" class="event"></div>
<div style="grid-area: c1_21" id="c1_21" class="event"></div>
<div style="grid-area: c1_22" id="c1_22" class="event"></div>
<div style="grid-area: c1_23" id="c1_23" class="event"></div>
<div style="grid-area: c1_24" id="c1_24" class="event"></div>
<div style="grid-area: c1_25" id="c1_25" class="event"></div>
<div style="grid-area: c1_26" id="c1_26" class="event"></div>
<div style="grid-area: c1_27" id="c1_27" class="event"></div>
<div style="grid-area: c1_28" id="c1_28" class="event"></div>
<div style="grid-area: c1_29" id="c1_29" class="event"></div>
<div style="grid-area: c1_30" id="c1_30" class="event"></div>
<div style="grid-area: c1_31" id="c1_31" class="event"></div>
<div style="grid-area: c2_0" id="c2_0"><span class="name">Sara</span></div>
<div style="grid-area: c2_1" id="c2_1" class="event"></div>
<div style="grid-area: c2_2" id="c2_2" class="event"></div>
<div style="grid-area: c2_3" id="c2_3" class="event"></div>
<div style="grid-area: c2_4" id="c2_4" class="event"></div>
<div style="grid-area: c2_5" id="c2_5" class="event"></div>
<div style="grid-area: c2_6" id="c2_6" class="event"></div>
<div style="grid-area: c2_7" id="c2_7" class="event"></div>
<div style="grid-area: c2_8" id="c2_8" class="event"></div>
<div style="grid-area: c2_9" id="c2_9" class="event"></div>
<div style="grid-area: c2_10" id="c2_10" class="event"></div>
<div style="grid-area: c2_11" id="c2_11" class="event"></div>
<div style="grid-area: c2_12" id="c2_12" class="event"></div>
<div style="grid-area: c2_13" id="c2_13" class="event"></div>
<div style="grid-area: c2_14" id="c2_14" class="event"></div>
<div style="grid-area: c2_15" id="c2_15" class="event"></div>
<div style="grid-area: c2_16" id="c2_16" class="event"></div>
<div style="grid-area: c2_17" id="c2_17" class="event"></div>
<div style="grid-area: c2_18" id="c2_18" class="event"></div>
<div style="grid-area: c2_19" id="c2_19" class="event"></div>
<div style="grid-area: c2_20" id="c2_20" class="event"></div>
<div style="grid-area: c2_21" id="c2_21" class="event"></div>
<div style="grid-area: c2_22" id="c2_22" class="event"></div>
<div style="grid-area: c2_23" id="c2_23" class="event"></div>
<div style="grid-area: c2_24" id="c2_24" class="event"></div>
<div style="grid-area: c2_25" id="c2_25" class="event"></div>
<div style="grid-area: c2_26" id="c2_26" class="event"></div>
<div style="grid-area: c2_27" id="c2_27" class="event"></div>
<div style="grid-area: c2_28" id="c2_28" class="event"></div>
<div style="grid-area: c2_29" id="c2_29" class="event"></div>
<div style="grid-area: c2_30" id="c2_30" class="event"></div>
<div style="grid-area: c2_31" id="c2_31" class="event"></div>
<div style="grid-area: c3_0" id="c3_0"><span class="name">Marco</span></div>
<div style="grid-area: c3_1" id="c3_1" class="event"></div>
<div style="grid-area: c3_2" id="c3_2" class="event"></div>
<div style="grid-area: c3_3" id="c3_3" class="event"></div>
<div style="grid-area: c3_4" id="c3_4" class="event"></div>
<div style="grid-area: c3_5" id="c3_5" class="event"></div>
<div style="grid-area: c3_6" id="c3_6" class="event"></div>
<div style="grid-area: c3_7" id="c3_7" class="event"></div>
<div style="grid-area: c3_8" id="c3_8" class="event"></div>
<div style="grid-area: c3_9" id="c3_9" class="event"></div>
<div style="grid-area: c3_10" id="c3_10" class="event"></div>
<div style="grid-area: c3_11" id="c3_11" class="event"></div>
<div style="grid-area: c3_12" id="c3_12" class="event"></div>
<div style="grid-area: c3_13" id="c3_13" class="event"></div>
<div style="grid-area: c3_14" id="c3_14" class="event"></div>
<div style="grid-area: c3_15" id="c3_15" class="event"></div>
<div style="grid-area: c3_16" id="c3_16" class="event"></div>
<div style="grid-area: c3_17" id="c3_17" class="event"></div>
<div style="grid-area: c3_18" id="c3_18" class="event"></div>
<div style="grid-area: c3_19" id="c3_19" class="event"></div>
<div style="grid-area: c3_20" id="c3_20" class="event"></div>
<div style="grid-area: c3_21" id="c3_21" class="event"></div>
<div style="grid-area: c3_22" id="c3_22" class="event"></div>
<div style="grid-area: c3_23" id="c3_23" class="event"></div>
<div style="grid-area: c3_24" id="c3_24" class="event"></div>
<div style="grid-area: c3_25" id="c3_25" class="event"></div>
<div style="grid-area: c3_26" id="c3_26" class="event"></div>
<div style="grid-area: c3_27" id="c3_27" class="event"></div>
<div style="grid-area: c3_28" id="c3_28" class="event"></div>
<div style="grid-area: c3_29" id="c3_29" class="event"></div>
<div style="grid-area: c3_30" id="c3_30" class="event"></div>
<div style="grid-area: c3_31" id="c3_31" class="event"></div>
<div style="grid-area: c4_0" id="c4_0"><span class="name">Elena</span></div>
<div style="grid-area: c4_1" id="c4_1" class="event"></div>
<div style="grid-area: c4_2" id="c4_2" class="event"></div>
<div style="grid-area: c4_3" id="c4_3" class="event"></div>
<div style="grid-area: c4_4" id="c4_4" class="event"></div>
<div style="grid-area: c4_5" id="c4_5" class="event"></div>
<div style="grid-area: c4_6" id="c4_6" class="event"></div>
<div style="grid-area: c4_7" id="c4_7" class="event"></div>
<div style="grid-area: c4_8" id="c4_8" class="event"></div>
<div style="grid-area: c4_9" id="c4_9" class="event"></div>
<div style="grid-area: c4_10" id="c4_10" class="event"></div>
<div style="grid-area: c4_11" id="c4_11" class="event"></div>
<div style="grid-area: c4_12" id="c4_12" class="event"></div>
<div style="grid-area: c4_13" id="c4_13" class="event"></div>
<div style="grid-area: c4_14" id="c4_14" class="event"></div>
<div style="grid-area: c4_15" id="c4_15" class="event"></div>
<div style="grid-area: c4_16" id="c4_16" class="event"></div>
<div style="grid-area: c4_17" id="c4_17" class="event"></div>
<div style="grid-area: c4_18" id="c4_18" class="event"></div>
<div style="grid-area: c4_19" id="c4_19" class="event"></div>
<div style="grid-area: c4_20" id="c4_20" class="event"></div>
<div style="grid-area: c4_21" id="c4_21" class="event"></div>
<div style="grid-area: c4_22" id="c4_22" class="event"></div>
<div style="grid-area: c4_23" id="c4_23" class="event"></div>
<div style="grid-area: c4_24" id="c4_24" class="event"></div>
<div style="grid-area: c4_25" id="c4_25" class="event"></div>
<div style="grid-area: c4_26" id="c4_26" class="event"></div>
<div style="grid-area: c4_27" id="c4_27" class="event"></div>
<div style="grid-area: c4_28" id="c4_28" class="event"></div>
<div style="grid-area: c4_29" id="c4_29" class="event"></div>
<div style="grid-area: c4_30" id="c4_30" class="event"></div>
<div style="grid-area: c4_31" id="c4_31" class="event"></div>
</div>
`
let today = new Date();
let currentMonth = today.toLocaleString('it-IT', { month: 'short' });
let currentMonthDigits = today.toLocaleString('it-IT', { month: '2-digit' });
function returnDaysInMonth(month, year) {return new Date(year, month, 0).getDate();}
let daysInMonth = returnDaysInMonth(currentMonthDigits, today.getFullYear());
let calFabioState = states['sensor.fabio'].state;
let calFabioData = states['sensor.fabio'].attributes.data;
for (let i = 0; i < calFabioState; i++) {
if (calFabioData[i].start_month == currentMonth) {
let day = calFabioData[i].start_day;
let summary = calFabioData[i].summary.replace(/'/g,''');
let label = '';
let startTime = calFabioData[i].start_time;
if (calFabioData[i].whole_day) {startTime = 'Tutto il giorno';}
if (calFabioData[i].label !== undefined) {label = '<span class="label">'+calFabioData[i].label+'</span>';}
calendar = calendar.replace(`<div style="grid-area: c1_${day}" id="c1_${day}" class="event"></div>`, `<div style="grid-area: c1_${day}" id="c1_${day}" class="event"><span>${startTime} - ${summary}</span>${label}</div>`);
}
}
let calSaraState = states['sensor.sara'].state;
let calSaraData = states['sensor.sara'].attributes.data;
for (let i = 0; i < calSaraState; i++) {
if (calSaraData[i].start_month == currentMonth) {
let day = calSaraData[i].start_day;
let summary = calSaraData[i].summary.replace(/'/g,''');
let label = '';
let startTime = calSaraData[i].start_time;
if (calSaraData[i].whole_day) {startTime = 'Tutto il giorno';}
if (calSaraData[i].label !== undefined) {label = '<span class="label">'+calSaraData[i].label+'</span>';}
calendar = calendar.replace(`<div style="grid-area: c2_${day}" id="c2_${day}" class="event"></div>`, `<div style="grid-area: c2_${day}" id="c2_${day}" class="event"><span>${startTime} - ${summary}</span>${label}</div>`);
}
}
let calMarcoState = states['sensor.marco'].state;
let calMarcoData = states['sensor.marco'].attributes.data;
for (let i = 0; i < calMarcoState; i++) {
if (calMarcoData[i].start_month == currentMonth) {
let day = calMarcoData[i].start_day;
let summary = calMarcoData[i].summary.replace(/'/g,''');
let label = '';
let startTime = calMarcoData[i].start_time;
if (calMarcoData[i].whole_day) {startTime = 'all day';}
if (calMarcoData[i].label !== undefined) {label = '<span class="label">'+calBothData[i].label+'</span>';}
calendar = calendar.replace(`<div style="grid-area: c3_${day}" id="c3_${day}" class="event"></div>`, `<div style="grid-area: c3_${day}" id="c3_${day}" class="event"><span>${startTime} - ${summary}</span>${label}</div>`);
}
}
let calElenaState = states['sensor.elena'].state;
let calElenaData = states['sensor.elena'].attributes.data;
for (let i = 0; i < calElenaState; i++) {
if (calElenaData[i].start_month == currentMonth) {
let day = calElenaData[i].start_day;
let summary = calElenaData[i].summary.replace(/'/g,''');
let label = '';
let startTime = calElenaData[i].start_time;
if (calElenaData[i].whole_day) {startTime = 'all day';}
if (calElenaData[i].label !== undefined) {label = '<span class="label">'+calElenaData[i].label+'</span>';}
calendar = calendar.replace(`<div style="grid-area: c4_${day}" id="c4_${day}" class="event"></div>`, `<div style="grid-area: c4_${day}" id="c4_${day}" class="event"><span>${startTime} - ${summary}</span>${label}</div>`);
}
}
if (daysInMonth < 31) {
calendar = calendar.replace('<div style="grid-area: c0_31" id="c0_31" class="day">31</div>', '');
calendar = calendar.replace('<div style="grid-area: c1_31" id="c1_31" class="event"></div>', '');
calendar = calendar.replace('<div style="grid-area: c2_31" id="c2_31" class="event"></div>', '');
calendar = calendar.replace('<div style="grid-area: c3_31" id="c3_31" class="event"></div>', '');
calendar = calendar.replace('<div style="grid-area: c4_31" id="c4_31" class="event"></div>', '');
if (daysInMonth <= 29) {
calendar = calendar.replace('<div style="grid-area: c0_30" id="c0_30" class="day">30</div>', '');
calendar = calendar.replace('<div style="grid-area: c1_30" id="c1_30" class="event"></div>', '');
calendar = calendar.replace('<div style="grid-area: c2_30" id="c2_30" class="event"></div>', '');
calendar = calendar.replace('<div style="grid-area: c3_30" id="c3_30" class="event"></div>', '');
calendar = calendar.replace('<div style="grid-area: c4_30" id="c4_30" class="event"></div>', '');
}
if (daysInMonth == 28) {
calendar = calendar.replace('<div style="grid-area: c0_29" id="c0_29" class="day">29</div>', '');
calendar = calendar.replace('<div style="grid-area: c1_29" id="c1_29" class="event"></div>', '');
calendar = calendar.replace('<div style="grid-area: c2_29" id="c2_29" class="event"></div>', '');
calendar = calendar.replace('<div style="grid-area: c3_29" id="c3_29" class="event"></div>', '');
calendar = calendar.replace('<div style="grid-area: c4_29" id="c4_29" class="event"></div>', '');
}
}
return calendar;
]]]
styles:
card:
- box-shadow: none
- color: rgba(0, 0, 0, 0.85)
- padding: 0px
grid:
- grid-template-areas: '"header" "calendar"'
- grid-template-columns: 1fr
- grid-template-rows: auto 1fr
calendar: null
months: null
card_mod:
style: |
img {
border-radius: 50%;
width: 120px;
margin-bottom: .5em;
margin-top: .5em;
}
.headerContainer {
width: 100%;
height: 10vh;
#background-image: url('/local/images/winterlandschap.png');
background-repeat: no-repeat;
background-position: center;
background-size: cover;
background-color: #197fe6;
}
currentmonth {
float: center;
margin-left: 4%;
margin-top: 1em;
color: #fff;
font-size: 2.5em;
font-weight: 500;
text-shadow: 3px 2px #000;
text-transform: capitalize;
font-family: 'Permanent Marker';
}
.calendar {
color: #fff;
background: white;
display: grid;
grid-template-areas:
'c0_0 c1_0 c2_0 c3_0 c4_0'
'c0_1 c1_1 c2_1 c3_1 c4_1'
'c0_2 c1_2 c2_2 c3_2 c4_2'
'c0_3 c1_3 c2_3 c3_3 c4_3'
'c0_4 c1_4 c2_4 c3_4 c4_4'
'c0_5 c1_5 c2_5 c3_5 c4_5'
'c0_6 c1_6 c2_6 c3_6 c4_6'
'c0_7 c1_7 c2_7 c3_7 c4_7'
'c0_8 c1_8 c2_8 c3_8 c4_8'
'c0_9 c1_9 c2_9 c3_9 c4_9'
'c0_10 c1_10 c2_10 c3_10 c4_10'
'c0_11 c1_11 c2_11 c3_11 c4_11'
'c0_12 c1_12 c2_12 c3_12 c4_12'
'c0_13 c1_13 c2_13 c3_13 c4_13'
'c0_14 c1_14 c2_14 c3_14 c4_14'
'c0_15 c1_15 c2_15 c3_15 c4_15'
'c0_16 c1_16 c2_16 c3_16 c4_16'
'c0_17 c1_17 c2_17 c3_17 c4_17'
'c0_18 c1_18 c2_18 c3_18 c4_18'
'c0_19 c1_19 c2_19 c3_19 c4_19'
'c0_20 c1_20 c2_20 c3_20 c4_20'
'c0_21 c1_21 c2_21 c3_21 c4_21'
'c0_22 c1_22 c2_22 c3_22 c4_22'
'c0_23 c1_23 c2_23 c3_23 c4_23'
'c0_24 c1_24 c2_24 c3_24 c4_24'
'c0_25 c1_25 c2_25 c3_25 c4_25'
'c0_26 c1_26 c2_26 c3_26 c4_26'
'c0_27 c1_27 c2_27 c3_27 c4_27'
'c0_28 c1_28 c2_28 c3_28 c4_28'
'c0_29 c1_29 c2_29 c3_29 c4_29'
'c0_30 c1_30 c2_30 c3_30 c4_30'
'c0_31 c1_31 c2_31 c3_31 c4_31';
grid-template-columns: 1fr 4fr 4fr 4fr 4fr;
grid-template-rows: 1fr;
# justify-items: stretch;
# align-items: stretch;
font-family: 'SF UI Text Regular';
}
.name {
font-size: 1.5em;
color: black;
#background-color: #434d57;
#border-radius: 6px;
border-bottom: 1px solid #197fe6;
#padding-left: 6px;
#padding-right: 6px;
font-family: 'Permanent Marker';
}
div[id*="_0"] {
background-color: #fff !important;
padding-top: 1em;
}
#.calendar div[id*="c"]:nth-child(2n+4) {
# background-color: #fff00;
#}
#.calendar div[id*="c"]:nth-child(2n+2) {
# background-color: #fff;
#}
.day {
font-size: 1.2em;
# vertical-align: top;
padding-top: 10px;
padding-bottom: 10px;
border-right: 1px solid #197fe6;
border-bottom: 0px solid #197fe6;
border-top: 1px solid #197fe6;
color: #197fe6;
}
.event {
text-align: left;
padding: 10px;
border-right: 1px solid #197fe6;
border-bottom: 1px solid #197fe6;
border-top: 0px solid #197fe6;
font-size: 1.2em;
}
.label {
float: right;
font-size: 14px;
border-radius: 30px;
padding: 2px 5px;
background-color: #fff;
width: max-content;
color: #140b2d;
}
The points I can’t fix are the following:
- misalignment in the grid, i.e.:
-
I’d like to have the month days in red if it is sunday and paint with another color the relative whole row
-
How to increase the width of the card in order to have cells wider.
-
Maybe the most important thing: I can’t see the calendar events on the greed, even if the sensor in the script are correct.