Clock Weather Card

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

¹

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  # replace with your weather providers's entity id

Full configuration

type: custom:clock-weather-card
entity: weather.home  # replace with your weather providers's entity id
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
aqi_sensor: sensor.air_quality_index

Options

Name	Type	Requirement	Description	Default
type	string	Required	custom:clock-weather-card
entity	string	Required	ID of the weather entity
title	string	Optional	Title of the card	''
sun_entity	boolean	Optional	ID of the sun entity. Used to determine whether to show a day or night icon. If sun integration is not enabled, day icon will be shown	sun.sun
temperature_sensor	string	Optional	ID of the temperature sensor entity. Used to show the current temperature based on a sensor value instead of the weather forecast	''
humidity_sensor	string	Optional	ID of the humidity sensor entity. Used to show the current humidity based on a sensor value, if show_humidity is set to true	''
weather_icon_type	line | fill	Optional	Appearance of the large weather icon	line
animated_icon	boolean	Optional	Whether the large weather icon should be animated	true
forecast_rows	number	Optional	The amount of weather forecast rows to show. Depending on hourly_forecast each row either corresponds to a day or an hour	5
locale	string2	Optional	Language to use for language specific text and date/time formatting. If not provided, falls back to the locale set in HA or, if not set in HA, to en-GB	en-GB
time_format	24 | 12	Optional	Format used to display the time. If not provided, falls back to the default time format of the configured locale. This option is ignored if time_pattern is set.	24
time_pattern	string	Optional	Pattern to use for time formatting. See luxon for valid tokens. If not provided, falls back to time_format option.	null
date_pattern	string	Optional	Pattern to use for date formatting. If not provided, falls back to a localized default date formatting. See luxon for valid tokens	D
show_humidity	boolean	Optional	Shows the humidity in the today section. Reads the value from humidity_sensor, if provided, otherwise from the humidity attribute of the configured weather entity	false
hide_today_section	boolean	Optional	Hides the cards today section (upper section), containing the large weather icon, clock and current date	false
hide_forecast_section	boolean	Optional	Hides the cards forecast section (lower section),containing the weather forecast	false
hide_clock	boolean	Optional	Hides the clock from the today section and prominently displays the current temperature instead	false
hide_date	boolean	Optional	Hides the date from the today section	false
hourly_forecast	boolean	Optional	Displays an hourly forecast instead of daily	false
use_browser_time	boolean	Optional	Uses the time from your browser to indicate the current time. If not provided, uses the time_zone configured in HA	false
time_zone	string	Optional	Uses the given time zone to indicate the current date and time. If not provided, uses the time zone configured in HA	null
show_decimal	boolean	Optional	Displays main temperature without rounding	false
apparent_sensor	string	Optional	ID of the apparent temperature sensor entity. It is used to show the apparent temperature based on a sensor and will only show it if value is provided.	''
aqi_sensor	string	Optional	ID of the Air Quality Index sensor entity. It is used to show the AQI based on a sensor and will only show it if value is provided.	''

Footnotes

Footnotes

1. Theme used: lovelace-ios-themes. ↩

2. Supported languages: bg, ca, cs da, de, el,en, es, et, fi, fr, he, hu, id, is, it, ko, lb, lt, nb, nl, pl, pt, pt-BR, ro, ru, sk, sl, sr, sr-Latn, sv, th, tr, uk, ur, vi, zh-CN, zh-TW ↩