Clock Weather Card

A Home Assistant Dashboard Card available through the Home Assistant Community Store showing the current date, time and a weather forecast.

[^1]

Credits go to basmilius for the awesome weather icons.

Migrating from v1 to v2

• Configuration property forecast_days was renamed to forecast_rows to indicate that this attribute does not only work for daily, but also for hourly forecasts.
• date-fns has been replaced by luxon for date/time formatting. If you configure date_pattern, make sure to migrate your pattern to comply with luxon. Additionally, the weekday is now not hardcoded anymore.
• Configuration property use_browser_time is now by default false, so by default the card will show the time of the current HA time zone.

FAQ

• Why don't I see the current day in my weather forecast?
• What does the card actually display?

Why don't I see the current day in my weather forecast?

Your weather provider may not provide today's weather as part of their weather forecast. You may consider switching to a different weather provider. OpenWeatherMap is one of the weather integrations providing today's weather.

What does the card actually display?

The bars represent the temperature range for a given day. In the above image, the 9° on Thursday represents the low across all of the forecast days and the 21° represents the highs (i.e. all bars are from 9° to 21°). The colored portion of the bar represents the range of temperatures that are forecast for that day (so 12° to 21° on Monday). The circle represents the current temperature (16° or roughly midway between 12° and 21° in your case).

Thanks to @deprecatedcoder for this text from #143

The basic idea of the forecast bars is to be able to understand the weather trend for the upcoming days in a single glance.

Installation

Manual Installation

1. Download the clock-weather-card.

2. Place the file in your Home Assistant's config/www folder.

3. Add the configuration to your ui-lovelace.yaml.

   resources:
     - url: /local/clock-weather-card.js
       type: module
   

4. Add configuration for the card in your ui-lovelace.yaml.

Installation and tracking with hacs

1. Make sure the HACS component is installed and working.

2. Search for clock-weather-card in HACS and install it.

3. Depening on whether you manage your Lovelace resources via YAML (3i) or UI (3ii), you have to add the corresponding resources.

   1. YAML: Add the configuration to your ui-lovelace.yaml.

      resources:
        - url: /hacsfiles/clock-weather-card/clock-weather-card.js
          type: module
      

   2. UI: Add Lovelace resource . (Alternatively go to Settings -> Dashboards -> Resources -> Add Resource)

      URL: /hacsfiles/clock-weather-card/clock-weather-card.js
      Type: JavaScript Module
      

4. Restart Home Assistant.

5. Add configuration for the card in your ui-lovelace.yaml or via the UI.

Configuration

Minimal configuration

type: custom:clock-weather-card
entity: weather.home

Full configuration

type: custom:clock-weather-card
entity: weather.home
title: Home
sun_entity: sun.sun
temperature_sensor: sensor.outdoor_temp
humidity_sensor: sensor.outdoor_humidity
weather_icon_type: line
animated_icon: true
forecast_rows: 5
locale: en-GB
time_pattern: HH:mm
time_format: 24
date_pattern: ccc, d.MM.yy
hide_today_section: false
hide_forecast_section: false
show_humidity: false
hide_clock: false
hide_date: false
hourly_forecast: false
use_browser_time: false
time_zone: null
show_decimal: false
apparent_sensor: sensor.real_feel_temperature

Options

Footnotes

[^1]: Theme used: lovelace-ios-themes. [^2]: Supported languages: bg, ca, cs da, de, el,en, es, et, fi, fr, he, hu, is, it, ko, lt, nb, nl, pl, pt, pt-BR, ro, ru, sk, sl, sr, sr-Latn, sv, th, tr, uk, ur, vi, zh-CN, zh-TW