EVCC Plan Card

A minimal, Home Assistant-native Lovelace card to set an EVCC departure charge plan (departure time + target state of charge). Designed as a lightweight companion to the marq24/ha-evcc integration — without the complexity of a full EVCC dashboard card.

Built to feel like a native Home Assistant tile card: same typography, control styling, hover states, and theme-aware colors. Works great inside a browser_mod popup, on desktop, iPhone, and iPad.

• 📅 Day stepper — quickly pick today, tomorrow, or up to 6 days ahead
• 🕐 Native time picker — 15-minute steps (configurable)
• 🔋 Charge target pills — one-tap SoC selection (50–100%, configurable)
• 🟡 Plan status header — shows the active plan (time → SoC) and highlights the icon, just like a tile card
• 💾 Save / Cancel / Delete — writes the plan via evcc_intg.set_vehicle_plan, deletes via evcc_intg.del_vehicle_plan
• 🪟 Popup-aware — Save/Cancel/Delete automatically close a browser_mod popup
• 🌐 English + Dutch — auto-detected from your Home Assistant language, or forced via config
• 🎨 Theme-aware — all colors derive from your active theme; no hardcoded styling

• ha-evcc (evcc_intg) — the EVCC integration that provides the entities and the set_vehicle_plan / del_vehicle_plan services
• A vehicle configured in EVCC that supports SoC-based plans
• Optional: browser_mod if you want to open the card as a popup

1. In HACS, click the three-dot menu → Custom repositories
2. Add https://github.com/tieskuh/evcc-plan-card with category Dashboard
3. Search for EVCC Plan Card and install it
4. Reload your browser (HACS registers the resource automatically)

1. Download evcc-plan-card.js from the latest release
2. Copy it to config/www/evcc-plan-card.js
3. Add it as a dashboard resource: Settings → Dashboards → ⋮ → Resources → /local/evcc-plan-card.js (JavaScript module)

type: custom:evcc-plan-card
loadpoint: carport

The loadpoint is the slug of your EVCC loadpoint as it appears in your evcc_intg entity IDs (e.g. select.evcc_carport_vehicle_name → loadpoint is carport). All entity IDs are derived from it automatically.

Open the card from any button, for example from a tile card feature:

tap_action:
  action: fire-dom-event
  browser_mod:
    service: browser_mod.popup
    data:
      dismissable: true
      style: |
        --popup-min-width: 420px;
        --popup-max-width: 460px;
        ha-dialog {
          --dialog-surface-margin-top: auto;
          --ha-dialog-scrim-backdrop-filter: blur(8px);
          --mdc-dialog-scrim-color: rgba(0,0,0,0.4);
          --ha-dialog-border-radius: 18px;
        }
      content:
        type: custom:evcc-plan-card
        loadpoint: carport

The Save, Cancel, and Delete buttons close the popup automatically.

When a plan is active, the card pre-fills with the plan's day, time, and target instead of the defaults, and shows a Delete plan button.

The card calls the evcc_intg services directly — no helpers, scripts, or automations needed:

• Save → evcc_intg.set_vehicle_plan with vehicle, soc, and startdate
• Delete → evcc_intg.del_vehicle_plan with vehicle

The vehicle ID is resolved live from the loadpoint's vehicle select entity, so it follows whatever vehicle is currently assigned to the loadpoint.

• marq24/ha-evcc for the excellent EVCC integration
• evcc for the EV charging brains