HA Separate Garbage Collection Card

A Lovelace custom card for Home Assistant that displays your waste collection schedule directly from a calendar — no Python, no custom integration required.

[![HACS Custom][hacs-badge]][hacs-url] [![License: GNU3.0][license-badge]][license-url]

This is a fork of Raccolta differenziata created by Enrico & Caio on HassioHelp, from which only a redesigned version of the background and trash bin remain.

---

🇬🇧 English · 🇮🇹 Italiano

---

What it does

The card reads events from any Home Assistant calendar (Local Calendar, Google Calendar, CalDAV…) and displays upcoming garbage collection days as coloured bin icons.

• One card, one parameter — days: 1 for a single-day view, days: 5 for a 5-column view, any number in between or beyond
• Zero dependencies — reads the HA calendar REST API directly from the browser; no custom integration, no Python, no YAML sensors
• Auto-coloured icons — set color: #4CAF50 in the calendar event description and the bin icon is automatically tinted to that colour using CSS filters calibrated to the base SVG colours (#f68b22)
• Custom icons — use icon: filename.png to show a completely custom image per waste type
• Skip empty days — with skip_empty: true (default) days with no collection are silently skipped; the card always shows the next N days that have something to collect
• Smart label — the waste type name is overlaid on the bin image just below the lid; multi-word names wrap to two lines; single long words are abbreviated (e.g. Indiffer.)
• Multi-event day — when a day has 2+ collections, the bins are merged into a single multi-colour bin split into N equal slices — each exactly 1/N of the bin (vertical left/right or horizontal top/bottom) — with the event names stacked over the body of the bin in ascending alphabetical order, so the layout stays stable across refreshes. Toggle with merge_same_day and split_direction
• Day-change logic — show_before defines a daily cut-off time. Before that time the card shows today's collection; after it, tomorrow's — so in the evening you always see what to prepare for the next morning
• Built-in translations — 12 bundled languages (en, it, fr, de, es, pt, nl, hu, ru, hi, zh, ja) covering day labels, weekday names, default title and the "no collection" text. The card auto-detects the active Home Assistant language; override with language: it (or any code) in the YAML
• Fully translatable — even if your locale isn't bundled, you can override every UI string directly in the card YAML (day_labels, short_days, full_days, title, )

---

Requirements

Requirement	Notes
Home Assistant ≥ 2023.4	Needs the calendar REST endpoint
A calendar integration	Built-in Local Calendar works perfectly
trashcan.svg	Base bin icon — place in the folder below
background.png	Card background image — same folder

Default asset folder: /config/www/redfoxy/ha-separate-garbage-collection/

---

Installation

Via HACS (recommended)

1. Open HACS → Frontend
2. Click ⋮ → Custom repositories
3. Add https://github.com/RedFoxy/HA-Separate-Garbage-Collection — category Dashboard
4. Click Download
5. Reload your browser

Manual

1. Copy ha-separate-garbage-collection-card.js, trashcan.svg and background.png to /config/www/redfoxy/ha-separate-garbage-collection/
2. In HA go to Settings → Dashboards → ⋮ → Resources → Add resource

• URL: /local/redfoxy/ha-separate-garbage-collection/ha-separate-garbage-collection-card.js
• Type: JavaScript module

3. Hard-reload the browser (Ctrl + Shift + R)

---

Setting up the calendar

1. Create a Local Calendar

Go to Settings → Integrations → Add integration → Local Calendar.
Give it a name (e.g. Waste). HA will create entity calendar.waste.

2. Add recurring events

Open the Calendar view in HA sidebar and add one all-day recurring event for each waste type.

Field	What to enter
Title	Waste type name — shown on the card (e.g. Wet waste, Paper, Glass)
All day	✅ Yes
Recurrence	Weekly / bi-weekly / monthly as needed
Description	Metadata (see format below)

Event description format (one property per line):

color: #4CAF50
icon: wet.png
filter: hue-rotate(92deg) saturate(42%) brightness(1.07)

Key	Required	Description
color	✅	HEX colour used to tint trashcan.svg automatically
icon	❌	Custom image filename (in BASE_PATH) or absolute path starting with /
filter	❌	Manual CSS filter override — skips auto-computation

Note: if icon is omitted, the card displays trashcan.svg tinted with a CSS filter computed from color. The filter is calibrated to the base SVG palette (#f68b22).

⚠️ icon is ignored on multi-event days. When a day has 2+ collections and merge_same_day: true (default), the card draws a single multi-colour trashcan.svg divided into N slices — the per-event icon: field is not used in this case, because the colour split only works on the base monochrome SVG. The custom icon is still used on days where that waste type is the only collection. Set merge_same_day: false to keep your custom icons even when multiple events overlap.

---

Card options

Card type

type: custom:ha-separate-garbage-collection-card

Backward-compatible aliases: custom:garbage-collection-day, custom:garbage-collection-week.

Full option reference

Option	Type	Default	Description
calendar	string	required	Calendar entity ID (e.g. calendar.waste)
days	number	5	Number of days / columns. 1 = single-day layout with larger icons
background	string	…/background.png	Background image URL
show_before	string	"09:00"	Cut-off time HH:MM. Before → show today; at or after → show tomorrow
show_title	bool	false	Show the card title bar
title	string	"Waste collection"	Card title text (only shown when show_title: true)
show_labels	bool	true	Overlay the waste type name on the bin icon
show_day_labels	bool	true	Show the day-offset label (Today / Tomorrow / in N days…)
show_weekday	bool	true	Show the weekday name below the offset label
weekday_format	string	"short"	Format of the weekday name: short (Mon, Tue…) or full (Monday, Tuesday…)
language	string	null (auto)	Force the UI language. null = read hass.language and auto-pick. Bundled: en, it, fr, de, es, pt, nl, hu, ru, hi, zh, ja
day_labels	list	auto

---

Examples

Minimal — 5-days view

type: custom:ha-separate-garbage-collection-card
calendar: calendar.waste

---

Single day — large icons

type: custom:ha-separate-garbage-collection-card
calendar: calendar.waste
days: 1
icon_size: 80

---

3-day view

type: custom:ha-separate-garbage-collection-card
calendar: calendar.waste
days: 3
background: /local/redfoxy/ha-separate-garbage-collection/background.png

---

With title, no weekday row

type: custom:ha-separate-garbage-collection-card
calendar: calendar.waste
days: 5
show_title: true
title: "This week's collections"
show_weekday: false

---

7 days, slow refresh, larger icons

type: custom:ha-separate-garbage-collection-card
calendar: calendar.waste
days: 7
icon_size: 60
refresh_interval: 3600
show_weekday: true

---

Fixed column width

type: custom:ha-separate-garbage-collection-card
calendar: calendar.waste
days: 4
column_width: 110

---

Multi-event day — horizontal split

type: custom:ha-separate-garbage-collection-card
calendar: calendar.waste
days: 5
merge_same_day: true
split_direction: horizontal
icon_size: 180

When a day has more than one collection (e.g. Paper + Glass on the same Monday), the bin is rendered as a single icon split into horizontal stripes — one per waste type — with the event names stacked over the body of the bin.

⚠️ Custom icons are not used in this mode. The split needs the monochrome trashcan.svg to tint each slice independently, so any per-event icon: field is ignored on merged days. Your custom icon still appears on days where the same waste type is the only collection — and you can always set merge_same_day: false to disable the merge and keep custom icons everywhere.

Set merge_same_day: false to return to the original behaviour (one bin per event, side by side).

---

Italian translation

type: custom:ha-separate-garbage-collection-card
calendar: calendar.waste
days: 5
empty_text: Nessuna raccolta
empty_symbol: —
language: it

---

French translation

type: custom:ha-separate-garbage-collection-card
calendar: calendar.waste
days: 5
empty_text: Pas de