@sdetweil
Hi Sam, at the end i’ve to change a little bit more:
I’ve created following folders under modules:
pi@MM30626:~/MagicMirror/modules $ ls -al calendar/
total 28
drwxrwxr-x 3 pi pi 4096 Aug 12 19:34 .
drwxrwxr-x 31 pi pi 4096 Aug 12 15:31 ..
-rw-rw-r-- 1 pi pi 15565 Jul 26 15:23 abholtermine_gefiltert.ics
drwxrwxr-x 2 pi pi 4096 Aug 12 19:34 public
pi@MM30626:~/MagicMirror/modules $ ls -al calendar/public/
total 48
drwxrwxr-x 2 pi pi 4096 Aug 12 19:34 .
drwxrwxr-x 3 pi pi 4096 Aug 12 19:34 ..
-rw-rw-r-- 1 pi pi 7271 Feb 18 2026 BL.png
-rw-rw-r-- 1 pi pi 5559 Feb 18 2026 GR.png
-rw-rw-r-- 1 pi pi 6886 Feb 18 2026 LA.png
-rw-rw-r-- 1 pi pi 6558 Feb 18 2026 SW.png
-rw-rw-r-- 1 pi pi 5670 Feb 18 2026 TA.png
As you can see, there is my ics file and a public folder witth my pictures.
E.g. “BL.png” means blue garbage can for paper, “GR.png” for green waste bin etc.
The “abholtermine_gefiltert.ics” is a python output 'cause i have to take out some lines.
This is how my config folder looks like:
pi@MM30626:~/MagicMirror/config $ ls -al
total 40
drwxrwxr-x 2 pi pi 4096 Aug 27 15:33 .
drwxrwxr-x 17 pi pi 4096 Aug 23 10:32 ..
-rw-rw-r-- 1 pi pi 30 Aug 27 15:24 basepath.js
-rw-rw-r-- 1 pi pi 18339 Aug 27 15:24 config.js
-rw-rw-r-- 1 pi pi 2220 Aug 18 15:37 custom.css
The description for the calendar in the config.js:
{
// siehe im MagicMirrir/css Veerzeichnis die custom.css und Bilder
module: "calendar",
header: "Mülltermine",
position: "top_left",
config: {
maximumNumberOfDays: 60,
maximumEntries: 4,
timeFormat:"HH:mm [Uhr]",
joiningWord:"um",
dateFormat:"DD.MMMM",
maximumNumberOfDays:"31",
maxTitleLength:"30",
customEvents: [
{
keyword: 'Abfuhr blaue',
symbol: '',
eventClass: 'muell-blau'
},
{
keyword: 'Abfuhr schwarze',
symbol: '',
eventClass: 'muell-schwarz'
},
{
keyword: 'Abfuhr grüne',
symbol: '',
eventClass: 'muell-gruen'
},
{
keyword: 'Problemabfall',
symbol: '',
eventClass: 'muell-rot'
}
],
coloredSymbolOnly: true,
coloredSymbol: true,
coloredText: true,
columns: true,
calendars: [
{
symbol: 'calendar', //'calendar',
color: '#2e9afe',
url: 'webcal://localhost:8080/modules/calendar/abholtermine_gefiltert.ics'
}
]
}
},
and my custom.css looks like this:
/*****************************************************
* Magic Mirror *
* Custom CSS *
* *
* By Michael Teeuw http://michaelteeuw.nl *
* MIT Licensed. *
* *
* Add any custom CSS below. *
* Changes to this files will be ignored by GIT. *
*****************************************************/
body {
}
/* Gemeinsame Basis für alle Müll-Icons */
/* =========================================================
Mülltonnen-Symbole für das Standard Calendar-Modul
========================================================= */
/* Standard-Font-Awesome-Symbol ausblenden */
.calendar .event-wrapper.muell-blau .symbol span,
.calendar .event-wrapper.muell-schwarz .symbol span,
.calendar .event-wrapper.muell-gruen .symbol span,
.calendar .event-wrapper.muell-laub .symbol span {
display: none;
}
/* Symbol-Zelle der blauen Tonne */
.calendar .event-wrapper.muell-blau .symbol {
background-image: url("/modules/calendar/public/BL.png");
background-repeat: no-repeat;
background-position: center center;
background-size: contain;
width: 40px;
height: 40px;
}
/* Symbol-Zelle der schwarzen/grauen Tonne */
.calendar .event-wrapper.muell-schwarz .symbol {
background-image: url("/modules/calendar/public/SW.png");
background-repeat: no-repeat;
background-position: center center;
background-size: contain;
width: 40px;
height: 40px;
}
/* Symbol-Zelle der grünen Tonne */
.calendar .event-wrapper.muell-gruen .symbol {
background-image: url("/modules/calendar/public/GR.png");
background-repeat: no-repeat;
background-position: center center;
background-size: contain;
width: 40px;
height: 40px;
}
/* Symbol-Zelle der Laubtonne */
.calendar .event-wrapper.muell-laub .symbol {
background-image: url("/modules/calendar/public/LA.png");
background-repeat: no-repeat;
background-position: center center;
background-size: contain;
width: 40px;
height: 40px;
}
At the end i have my bins on the screen:

I’m sure there must be a much simpler way, but it took me quite a while to get the result, and that’s what counts in the end. ;-)
BR
Jens