GitHunt
JL

jlambert121/clock-weather-card

Home Assistant Card showing today's date & time along with a weather forecast for the next days with animated icons

Clock Weather Card

HACS
Total downloads
Downloads of latest version (latest by SemVer)
Current version

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

Clock Weather Card
1

Credits go to basmilius for the awesome weather icons.

FAQ

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.

Why does the forecast show less days than expected?

Depending on your Home Assistant's configuration, your weather provider might deliver forecasts hourly. If this is the case, the weather integrations delivers 48 distinct forecasts (This corresponds to forecasts for the next 48 hours). You might want to consider supplying a weather entity which supplies daily forecasts for the card.

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. Add the configuration to your ui-lovelace.yaml.

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

  4. Restart Home Assistant.

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

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
  weather_icon_type: line
  animated_icon: true
  forecast_days: 5
  locale: en
  time_format: 24
  date_pattern: P
  hide_today_section: false
  hide_forecast_section: false

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
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_days number Optional Days of weather forecast to show 5
locale string2 Optional Language to use for language specific text. If not provided, falls back to the locale set in HA en-GB
time_format 24 | 12 Optional Format used to displayed the time. If not provided, falls back to the time format set in HA 24
date_pattern string Optional Pattern to use for time formatting. If not provided, falls back to the default date formatting of the configured language. See date-fns for valid patterns P
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

Footnotes

Footnotes

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

  2. Supported languages: bg, ca, cs da, de, en, es, fi, fr, he, hu, it, ko, nb, nl, pl, pt, pt-BR, ro, ru, sk, sv, th, uk, vi, zh-TW ↩

Languages

TypeScript50.7%HTML38.3%CSS9.4%JavaScript1.7%
Other
Created December 21, 2022
Updated December 20, 2022
jlambert121/clock-weather-card | GitHunt