Okay all. I wanted to get a calendar setup in my Tileboard and there was little to now documentation so I wanted to share my setup…
First, we need a way to get more than one calendar event. For this I used iCal sensor.
Next we need an array of events to parse through so I created a group of iCal sensors and a template sensor in home assistant…
iCal_sensors:
name: iCal sensors
entities:
- sensor.ical_family_calendar_event_0
- sensor.ical_family_calendar_event_1
- sensor.ical_family_calendar_event_2
- sensor.ical_family_calendar_event_3
- sensor.ical_family_calendar_event_4
- sensor.ical_family_calendar_event_5
- sensor.ical_family_calendar_event_6
- sensor.ical_family_calendar_event_7
- sensor.ical_family_calendar_event_8
- sensor.ical_family_calendar_event_9
ical_sensor_array:
friendly_name: 'iCal sensor array'
value_template: >-
{{ '' }}
attribute_templates:
start: >-
{% set start = namespace(value=[]) %}
{% for entity in states.group.ical_sensors.attributes.entity_id %}
{% set start.value = start.value + [state_attr(entity, 'start').strftime('%m-%d-%Y at %I:%m%p')] %}
{% endfor %}
{{ start.value }}
end: >-
{% set end = namespace(value=[]) %}
{% for entity in states.group.ical_sensors.attributes.entity_id %}
{% set end.value = end.value + [state_attr(entity, 'end').strftime('%m-%d-%Y at %I:%m%p')] %}
{% endfor %}
{{ end.value }}
all_day: >-
{% set all_day = namespace(value=[]) %}
{% for entity in states.group.ical_sensors.attributes.entity_id %}
{% set all_day.value = all_day.value + [state_attr(entity, 'all_day')] %}
{% endfor %}
{{ all_day.value }}
summary: >-
{% set sum = namespace(value=[]) %}
{% for entity in states.group.ical_sensors.attributes.entity_id %}
{% set sum.value = sum.value + [state_attr(entity, 'summary').replace('\n', '\n# ')] %}
{% endfor %}
{{ sum.value }}
Now we can use the data in Tileboard and add it to a custom tile…
Tile:
{
position: [1, 2],
type: TYPES.CUSTOM,
width: 2,
height: 1,
title: false,
id: 'sensor.ical_sensor_array',
customHtml: '<table class="caltbl" id="caltbl"></table>',
state: function(item, entity) {
setInterval(getcal('caltbl', 5, entity), 300000); //every 5 minutes
},
action: function(item, entity) {
return this.$scope.openPopup(calpop, calpop.id);
},
},
getcal function:
var getcal = function(eleID, rowCount, entity) {
var tbl = document.getElementById(eleID);
tbl.innerHTML = "";
var currentDate = new Date();
var tomorrowDate = new Date(currentDate);
tomorrowDate.setDate(tomorrowDate.getDate() + 1);
var months = ['01', '02', '03', '04', '05', '06', '07', '08', '09', '10', '11', '12'];
var monthIndexToday = currentDate.getMonth();
var monthIndexTomorrow = tomorrowDate.getMonth();
var today = months[monthIndexToday] + '-' + currentDate.getDate() + '-' + currentDate.getFullYear();
var tomorrow = months[monthIndexTomorrow] + '-' + tomorrowDate.getDate() + '-' + tomorrowDate.getFullYear();
for (var i = 0; i < rowCount; i++) {
var row = tbl.insertRow(i);
row.setAttribute('class', 'calrow');
var imgcell = row.insertCell(0);
imgcell.setAttribute('class', 'calimg');
var img = document.createElement('img');
img.setAttribute('class', 'calimgsrc');
var tm = row.insertCell(1);
tm.setAttribute('class', 'caltm');
var starttxt = entity.attributes.start[i];
var startarry = starttxt.split(' at ');
if (startarry[0] == today) {
starttxt = 'Today at ' + startarry[1];
} else if (startarry[0] == tomorrow) {
starttxt = 'Tomorrow at ' + startarry[1];
} else {}
tm.innerHTML = '<div class="tmdiv">' + starttxt + '<br>' + '</div>';
var sum = row.insertCell(2);
sum.setAttribute('class', 'calsum');
var sumtxt = entity.attributes.summary[i];
sum.innerHTML = '<div class="sumdiv">' + sumtxt + '</div>';
if (sumtxt.startsWith('Name1:')) {
img.style.backgroundColor = 'green';
} else if (sumtxt.startsWith('Name2:')) {
img.style.backgroundColor = 'pink';
} else if (sumtxt.startsWith('All:')) {
img.style.backgroundColor = 'orange';
} else {
img.style.backgroundColor = 'gray';
}
imgcell.appendChild(img);
}
};
Popup:
let calpop = {
position: [0, 0],
type: TYPES.POPUP,
id: {},
state: false,
title: false,
popup: {
tileSize: 150,
items: [{
position: [0, 0],
type: TYPES.CUSTOM,
width: 3,
height: 2,
title: false,
id: 'sensor.ical_sensor_array',
customHtml: '<table class="caltbl" id="caltblpop"></table>',
state: function(item, entity) {
getcal('caltblpop', 10, entity);
},
}, ],
},
};
The result:
I’ve learned all of my coding knowledge on my own so if anyone sees something that can be refactored/improved please let me know.
