Wall Clock Card for Home Assistant

Wall Clock Card is a full-screen-friendly Lovelace card for clocks, dashboards and wall panels. Its visual Designer lets you place clock, date, sensors, weather, calendars, public transport and action buttons in a classic 3×3 grid or responsive split-panel layouts.

Highlights

• A 3×3 grid plus vertical and horizontal 2/3 + 1/3 / 1/3 + 2/3 layouts.
• Visual presets, an optional glass panel and touch-capable drag and drop.
• Ordered row strips with automatic or explicit widget width behavior.
• Multiple instances of most widgets; transportation remains a singleton.
• Card, zone and per-widget inspectors organized into Content, Appearance and Behavior.
• Clock/date formatting, responsive sensors, configurable separators and action grids.
• Home Assistant and OpenWeatherMap weather providers.
• Horizontal or vertical current weather and forecast presentation.
• Calendar agenda with multiple calendars, event styling and an event-detail dialog.
• Inline or modal public-transport departures with multiple stop profiles.
• Built-in and installed Home Assistant cards as dashboard widgets.
• Local, Picsum, Unsplash and Home Assistant sensor-backed backgrounds.
• Automatic in-memory migration of existing 2.x configurations.
• Czech and English Designer UI; weather-condition translations cover additional languages.

Tablet layout example

The same widgets can be arranged in a narrow information panel beside the main clock area:

Installation

HACS (recommended)

1. Open HACS and search for Wall Clock Card.
2. Download the card.
3. Reload the browser if HACS asks you to do so.

HACS normally registers the JavaScript resource automatically. A Home Assistant restart is not normally required.

Manual installation

1. Copy dist/wall-clock-card.js to /config/www/wall-clock-card/wall-clock-card.js.

2. In Settings → Dashboards → Resources, add:

   /local/wall-clock-card/wall-clock-card.js
   

   Select JavaScript module as the resource type.

3. Reload the dashboard. If an older bundle remains cached, append or increment a query parameter such as ?v=3.3.0 and perform a hard refresh.

For YAML-managed resources:

lovelace:
  resources:
    - url: /local/wall-clock-card/wall-clock-card.js?v=3.3.0
      type: module

Add and edit the card

Add Wall Clock from Home Assistant's card picker, or start with YAML:

type: custom:wall-clock-card

The empty/default card contains clock and date widgets. To configure it:

1. Put the dashboard in edit mode.
2. On a regular dashboard card, select Configure card. Panel/full-screen cards open the Designer directly.
3. Use Card settings for general appearance, layout/spacing and the background.
4. Drag widgets from the palette into zones. Select a widget or zone to edit it.
5. Changes are saved continuously. Done closes the card Designer; Home Assistant's dashboard Done completes dashboard editing.

Existing 2.x YAML is supported and is migrated in memory. Once the Designer saves a change, the stored configuration uses the 3.0 appearance, background and layout.zones structure.

appearance.fontColor may also be a reactive Home Assistant Jinja template. The card subscribes to referenced entity changes without requiring card-mod. A public --wall-clock-font-color CSS custom property is available for theme/card-mod overrides. See Dynamic font color.

Minimal 3.0 example

type: custom:wall-clock-card
appearance:
  language: cs
  fontColor: '#fff7bb'
  textShadow: '0 2px 4px rgba(0, 0, 0, 0.8)'
  size: medium
background:
  source: picsum
  opacity: 0.3
  rotationInterval: 90
  objectFit: cover
layout:
  spacing: normal
  zones:
    top-left:
      widgets:
        - type: sensors
          sensors:
            - entity: sensor.living_room_temperature
              label: Temperature
    top-right:
      widgets:
        - type: weather
          provider: homeassistant
          providerConfig:
            entityId: weather.home
          displayMode: both
          forecastDays: 5
    center:
      widgets:
        - type: clock
        - type: date
    bottom-center:
      widgets:
        - type: action-bar
          enabled: true
          actions:
            - actionId: action-ha
              title: Home
              icon: mdi:home
              tap_action:
                action: navigate
                navigation_path: /lovelace/0

Documentation

• Configuration — Designer workflow, YAML and custom fonts
• Zone layout — zones, spacing, widgets and 2.x migration
• Clock and date — formatting, size and alignment
• Sensors
• Weather
• Calendar
• Transportation
• Action bar
• Action-bar plugin API
• Image sources
• Background behavior
• Development
• Release checklist
• Changelog

Architecture at a glance

• src/core/ — card shell, normalized configuration, migration and zone rendering
• src/widgets/ — widget registry, built-in widget adapters and shared widget layout
• src/components/ — feature components, controllers and feature editors
• src/editors/ — Designer, inspectors and editor adapters
• src/image-sources/ — background source registry and built-in sources
• src/weather-providers/ — weather provider registry
• src/transportation-providers/ — transport provider registry
• src/components/action-bar/plugins/ — action plugins and their editors
• src/utils/ — localization, logging and cross-component messaging
• src/translations/ — Designer translations
• tests/ — Jest tests for configuration and pure logic
• dist/ — production bundle loaded by Home Assistant

See Development for the build and verification workflow.

License

MIT