pkissling/clock-weather-card

A Home Assistant Card indicating today's date/time, along with an iOS inspired weather forecast for the next days with animated icons

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

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

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.	''

Footnotes

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 ↩

clock-weather-card's Issues

Scale to Fit Grid Layout?

I am trying to make a grid-layout that has fixed dimensions. For right now I have a grid layout with 4 columns and 4 rows. The grid layout is set to 100% of the screen. I am placing the clock-weather-card along the top using a grid-area. It doesn't seem to mater what I specify the clock-weather-card grows well outside of the size of the row. I can't figure out what to modify with card-mod top make it stay within its bounds. Any help appreciated..... here is an example of my code and in image. If you look at the image you can see that the top set of boxes is the grid area.... but as you can also see the clock-weather-card is well outside of those boxes. Thanks

- title: New
  path: new-new
  type: custom:grid-layout
  layout:
    height: calc(100vh - 64px)
    width: 100%
    margin: 0
    grid-gap: 15px
    grid-template-columns: 1fr 1fr 1fr 1fr
    grid-template-rows: 100px 1fr 1fr 1fr
    grid-template-areas: |
      "header header header header"
      ". . . ."
      ". . . ."
      "footer . . ."
  cards:
    - type: custom:mod-card
      view_layout:
        grid-area: header
      card:
        type: grid
        columns: 1
        square: false
        cards:
          - type: custom:clock-weather-card
            entity: weather.openweathermap
    - type: custom:mod-card
      view_layout:
        grid-area: footer
      card:
        type: grid
        columns: 1
        square: false
        cards:
          - type: custom:button-card
            entity: switch.lamp1

time font wrongly wraps wraps

Hello and first of all thank you for this nice widget!
I am using this and under certain sizes, the time wraps and makes this ugly result.
To make it more clear, I have attached an image.

Is it something that could be done to fix this?

Problem on a iPad mini 2 in the Mobile App

I really love the “Clock Weather Card” and it works for me on almost every device perfect 😊!
But on my iPad mini 2 in the Mobile App it looks like on the attached screenshot. The whole weather part is missing. Is there a possibility to fix it on my side or is there an update form your side necessary?

Weather icon is allways animated

I have set "animated_icon: false" but icon still animated.

Day, night icon not working

Probably day, night (icon) mode using sun.sun entity is not working after HA update.
The sun.sun entity itself works fine.

Not displaying the right values for temperature for met.no

Seems like it doesn't work with met.no forecast for some reason.

Optionally reduce padding around icon and hide date to reduce height

Is your feature request related to a problem? Please describe.
No, just some more options to reduce the overall height of the card.

Describe the solution you'd like

• an option to reduce padding on top & bottom of top most data (above and below icon)
• an option to remove the date string, also to reduce overall height

Describe alternatives you've considered
Reducing forecast days is helpful, but empty real-estate around upper section is (optionally) unnecessary

Additional context
n/a

Rain animation not working on Firefox

Rain animation isn't working for me with Firefox. Sun, clouds, etc. do work. It works with Chrome and mobile though

Align weather time and date

It is necessary to center the weather, time and date in the card. In the current version, it does not look very nice.

Option to hide top or bottom portion of the card

Feature request to hide/show parts of the card which is basically only two parts. So if I want I could just show the top portion of the card with the clock, date, and current temp information or I could just show the bottom portion of the card with daily forecast. The default would be to show the entire card as it is.

Besides that the cards works awesome and I haven't had any issues. I want to use it for my custom:sidebar-crd but I need to style: it a little bit so it fits because the side bar is only 25% of my screen and small than a "normal" column. I don't think that will be a problem though.

Please, add Czech translations

{
"common": {
"invalid_configuration": "Neplatná konfigurace.",
"entity_missing": "chybí entita",
"invalid_forecast_days": "forecast_days musí být větší než 0.",
"invalid_time_format": "time_format musí být '12' nebo '24'.",
"invalid_hides": "'hide_today_section' a 'hide_forecast_section' nesmí být současně povolené."
},
"weather": {
"clear-night": "Jasno",
"cloudy": "Zataženo",
"fog": "Mlha",
"hail": "Kroupy",
"lightning": "Bouřky",
"lightning-rainy": "Bouřky s deštěm",
"partlycloudy": "Částečně zataženo",
"pouring": "Silný déšť",
"rainy": "Déšť",
"snowy": "Sníh",
"snowy-rainy": "Sníh s deštěm",
"sunny": "Slunečno",
"windy": "Vítr",
"windy-variant": "Prudký vítr",
"exceptional": "Chaos"
},
"day": {
"0": "Ne",
"1": "Po",
"2": "Út",
"3": "St",
"4": "Čt",
"5": "Pá",
"6": "So"
}
}

typo in resources

url: /hacsfiles/clock-weather-car/clock-weather-card.js
should be
url: /hacsfiles/clock-weather-card/clock-weather-card.js

The card does not work

Good day. The card does not work. OpenWeather weather operator, everything is written:
type: custom:clock-weather-card
entity: weather.irpin
animated_icon: true
forecast_days: 5
locale: en
although it may or may not be necessary. Installation via Hacs

Default date formatting

As it is possible to format the date (great feature :-) ), is it possible to change the default formatting to "eee, P" and remove the hardcoded weekday at the start of the line?

Language stuck in English - "locale" option does not work

I have HA language and location in Spanish but card shows the data in English. I have set locale card property to "es" to try to force the change but card still displays weather text in english.

Date formatting and locale

Regarding this, #86 , is it possible to set the same locale as configured with the locale configuration for this card?

Russian traslation error

Hello. An error occurred in the translation. In Russia, the week starts on Monday, not Sunday.
It is necessary to move the table down one day.

"day": {
"0": "Вс",
"1": "Пн",
"2": "Вт",
"3": "Ср",
"4": "Чт",
"5": "Пт",
"6": "Сб",

Thanks!

Originally posted by @Microbeen in #58 (comment)

Remove leading '0' from 12 hour time

Thank you for creating this card, it seriously looks BEAUTIFUL!

That said, it would be nice to ditch the leading 0 on 12 hour time, as it isn't needed.

Include precipitation

Is your feature request related to a problem? Please describe.
Part of weather forecast, besides temperature, is "will there be rain? and how much?"

Describe the solution you'd like
It would be great if besides temperature and a weather icon, also the amount of precipitation could be displayed. This weather card (https://community.home-assistant.io/t/lovelace-weather-card-with-chart/88816) has a very nice feature to display amount of rain also not only as a number but an additional bar. That makes it very easy on the first look to see if there is days with some/a lot of rain upcoming.

Displayed Date format configurable

Hi,

It would be great to be able to define the format of the date (currently mm/dd/yy) to other formats.

For example:
dd/mm/yy
dd/mm/yyyy

Thanks for all your work on this card, it looks awesome!

Cannot read properties of undefined (reading 'locale')

Checklist:

• I updated to the latest version available
• I cleared the cache of my browser

Release with the issue:

..Last working release (if known):
1.0.4
Browser and Operating System:
iOS HA App / Windows Edge

Description of problem:

Just added the card, it just shows an error. On the browser I get "Cannot read properties of undefined (reading 'locale')", in the HA app it shows "undefined is not an object (evaluating 'this.config.locale')". The same message is shown in the console.

Javascript errors shown in the web inspector (if applicable):

Additional information:

Add label to card to describe weather entity

Is your feature request related to a problem? Please describe.
I use NWS and Openweather on 2 cards. There is no way to tell which card is NWS and which is Openweather

Describe the solution you'd like
entry in the config for Lable

Describe alternatives you've considered
A clear and concise description of any alternative solutions or features you've considered.

Additional context
Add any other context or screenshots about the feature request here.

Add support for hourly forecast

Currently the clock-weather-card breaks if one uses the hourly forecast option of a certain weather provider (Pirate weather, OpenWeather).

To make the hourly forecast optional work, additional logic is required to aggregate the hourly forecasts by day and create the avg/min/max values for it.

Make clock font-width grow dynamically

Currently the font-size of the clock is set to a fixed value. Depending on the resolution and viewport, there is a lot of wasted space.

Task: Find a solution to make the clock font-size grow dynamically with the space of the surrounding div.
Options:

• Calculate font-size dynamically based on width of surrounding div
• Render text as svg

Time does not update

Thanks for your custom card, I really like the layout.

One thing I have noticed though is that the time is not auto updating. On page load it shows the current time at when the page loaded. If I leave that page open though, the time does not update and stays on the same time as when the page loaded.

I have only tested it on Chrome at this stage.

Additional Language (German)

Hi Patrick.
Is it possible to add german Language?
I created a translation (de.json), maybe you can add it.
Thanks
Marcel

Where is point?

Hi, where is point in BAR graph like you have on main picture https://raw.githubusercontent.com/pkissling/clock-weather-card/1.0.7/.github/assets/card.gif. I not have it.

I have this settings in HA:
type: custom:clock-weather-card
entity: weather.domov
sun_entity: sun.sun
weather_icon_type: line
animated_icon: true
forecast_days: 5
locale: cz
time_format: 24
hide_today_section: false
hide_forecast_section: false

Thank you

If the lowest temperature is 0 degrees, the graph is not displayed correctly.

Checklist:

• I updated to the latest version available
• I cleared the cache of my browser
• I read the FAQ and the issue I'm having was not mentioned there.

Release with the issue:

Last working release (if known):

Browser and Operating System:

Description of problem:

If the lowest temperature is 0 degrees, the graph will not show the lowest temperature. The graph shows the highest temperature as the lowest temperature.
Javascript errors shown in the web inspector (if applicable):

Additional information:

Days do not advance

I set this card up last Tuesday. Today we have Sunday, but I always saw and still see Tue-Sat. Why?

current humidity, barometric pressure and wind stats

Would it be possible to add additional weather info, like humidity, pressure and wind direction/speed?

Constant locale console errors

Checklist:

• I updated to the latest version available
• I cleared the cache of my browser
• I read the FAQ and the issue I'm having was not mentioned there.

Release with the issue:

Version: 1.0.9

Last working release (if known):

Browser and Operating System:

Browser: Firefox on Arch
HA: HA Core on Unraid

Description of problem:

Without any locale specified in the card config, the console errors below showed up continuously. The readme shows locale: en under the "Full Configuration" section, but that produced the same error. It wasn't until changing it to locale: en-US when the error stopped appearing. No other functionality seemed affected though.

Javascript errors shown in the web inspector (if applicable):

clock-weather-card - Locale not supported: en
    getDateFnsLocale clock-weather-card.js:239
    date clock-weather-card.js:239
    renderToday clock-weather-card.js:206
    render clock-weather-card.js:185

Visualize hourly forecast in same manner

I am using the TomorrowIO integration to provide met with two entities for forecast, a daily variant and a hourly variant.
The daily variant is working perfectly with this card. When selecting the hourly version, I only get the days bars within the forecast range (based on hours).

Can you also support hourly forecasts, where an hour would be a line?

Does not seem to work on the Android companion app

Really nice card,

Also would be great to add in forecasted rain in the future

Change Tap Action

Is your feature request related to a problem? Please describe.

it would be great if you could change the tap_action. like other cards.

iOS12 compatibility

I would love to use this on my wall mounted iPad Air (iOS12)

currently it is not supported:
"Custom element doesn't exist: clock-weather-card"

Deleted Frontend-Cache, Restarted Home-Assistant, restarted the iPad.
Maybe some JS functions wont work on iOS12?

Maybe you can ensure iOS12 compatibility somehow? – when I can provide anything, let me know.

add the Ukrainian language

Please add the Ukrainian language

{
"common": {
"invalid_configuration": "Помилка конфігурації.",
"entity_missing": "Відсутня необхідна сутність погоди.",
"invalid_forecast_days": "значення днів прогнозу має бути більше 0.",
"invalid_time_format": "формат часу має бути '12' або '24'"
},
"weather": {
"clear-night": "Ясно",
"cloudy": "Хмарно",
"fog": "Туман",
"hail": "Грім",
"lightning": "Грози",
"lightning-rainy": "Дощові грози",
"partlycloudy": "Мінлива хмарність",
"pouring": "Злива",
"rainy": "Дощ",
"snowy": "Сніг",
"snowy-rainy": "Мокрий сніг",
"sunny": "Сонячно",
"windy": "Вітряно",
"windy-variant": "Дуже вітряно",
"exceptional": "Буря"
},
"day": {
"0": "Нд",
"1": "Пн",
"2": "Вт",
"3": "Ср",
"4": "Чт",
"5": "Пт",
"6": "Сб"
}
}

Chaos is confusing

Is your feature request related to a problem? Please describe.
I find the fact that a current condition of "exceptional" is translated to "chaos" as very confusing. I expect the weather services to provide clear condition indicators. I had to go looking into the source code to figure out why my testing of this card was showing a spinning vortex instead of a exclamation triangle and saying the current condition is chaos when my standard weather card just said exceptional!

Describe the solution you'd like
The weather conditions should be translated as expected and not to cutesy versions

Describe alternatives you've considered
While I like the look of the card, if it is not clear and concise to the end user what is going on then it is not useful and I will need to use a more generic card. I can't be training everyone that may see the card (it would be used in a short term rental unit as well as my home) what things like that mean.

min/max temperature for today

The (very beautiful) widget doesn't show the min/max-temperature for the current day. The weather-provider delivers this data as shown in the standard ha-widget.

Add Vietnamese language

#This is the vi.json code of Vietnamese language. Hope the author will update

{
"weather": {
"clear-night": "Trời xanh",
"cloudy": "Nhiều mây",
"fog": "Sương mù",
"hail": "Mưa đá",
"lightning": "Giông bão",
"lightning-rainy": "Mưa giông",
"partlycloudy": "Mây rải rác",
"pouring": "Ẩm ướt",
"rainy": "Trời mưa",
"snowy": "Tuyết rơi",
"snowy-rainy": "Mưa tuyết",
"sunny": "Trời nắng",
"windy": "Trời có gió",
"windy-variant": "Gió mạnh",
"exceptional": "Khắc nghiệt"
},
"day": {
"0": "Th2",
"1": "Th3",
"2": "Th4",
"3": "Th5",
"4": "Th6",
"5": "Th7",
"6": "CN"
}
}

Adjusting height of current weather stats

The current weather and clock are the first things I look at on the screen. Could you make them both adjustable?

Also, dumb question, but what do the colored sections mean on the forecast for each day?

Does not work with Openweathermap weather entity

The Layout does not work with weather.openweathermap entity.
Version: 1.0.4
Openweathermap is configured in mode hourly and language en.

Generic translations

As of now every additional translation (json) requires changes in src/localize/localize.ts.

Goal: Find a way to load the translations generically.

Hungarian localisation

Please add hungarian localisation to the card.

hu.zip

Daily forecast time tracking

Checklist:

• I updated to the latest version available -yes
• I cleared the cache of my browser -yes
• I read the FAQ and the issue I'm having was not mentioned there. -yes

Release with the issue:
v1.09

Last working release (if known):
v1.0.9
Browser and Operating System:
chromium, archlinux,

Description of problem:
Is the black dot on the today's forecast bar meant to be tracking time? If it's tracking time, it seems to be tracking UTC time and not local time. What I see at 21:49 local time is bright sunshine which is not as it is right now.

Javascript errors shown in the web inspector (if applicable):

![image](https://user-images.githubusercontent.com/49336389/200116495-6bf7fc86-2f63-48a0-9bc4-60e84d82f5d3.png)

Additional information:

Please, add a Russian translation.

Please, add a Russian translation.

{
"common": {
"invalid_configuration": "Неверная конфигурация",
"entity_missing": "Отсутствует сущность погоды",
"invalid_forecast_days": "Количество дней прогноза должно быть больше 0",
"invalid_time_format": "Значение 'time_format' должно быть '12' или '24'",
"invalid_hides": "Опции 'hide_today_section' и 'hide_forecast_section' нельзя включать одновременно!"
},
"weather": {
"clear-night": "Ясно",
"cloudy": "Облачно",
"fog": "Туман",
"hail": "Град",
"lightning": "Гроза",
"lightning-rainy": "Дождь с грозой",
"partlycloudy": "Переменная облачность",
"pouring": "Проливной дождь",
"rainy": "Дождь",
"snowy": "Снег",
"snowy-rainy": "Мокрый снег",
"sunny": "Солнечно",
"windy": "Ветер",
"windy-variant": "Сильный ветер",
"exceptional": "Буря"
},
"day": {
"0": "Пн",
"1": "Вт",
"2": "Ср",
"3": "Чт",
"4": "Пт",
"5": "Сб",
"6": "Вс"
}
}

Many thanks!

Temperature not rounded

Hello,

it seems the card is rounding the temperature:

it would be nice to configure it if the value should be rounded.

Snow Icon Broken

Checklist:

• [x ] I updated to the latest version available
• [x ] I cleared the cache of my browser

Release with the issue:
1.0.5
Last working release (if known):
N/A
Browser and Operating System:
Chrome on Windows 11 - HA Running on HAOS

Description of problem:
The snow icon on the forecast is broken/non-exsistent. Top picture is of the custom card, and the bottom is when clicking to view more details.

Javascript errors shown in the web inspector (if applicable):

N/A

Additional information:

Card stops working with environment Canada integration

The card stops working in the evening with environment Canada integration but comes back the next day. My assumption is this happens when the integration stops reporting the current days high temperature ( temperature: null)

please add Ukrainian language support

I really like your work. I'm from Ukraine. Please add Ukrainian language support. Thanks in advance

The current temperature indicator is not displayed.

Checklist:

• I updated to the latest version available
• I cleared the cache of my browser

Release with the issue:

Last working release (if known):

Browser and Operating System:

Description of problem:

If the current temperature is lower than today's minimum temperature, the indicator showing the current temperature is not displayed.

And are there any options I need to set to apply hourly weather? I applied hourly weather entity so hourly weather information is not displayed.

Javascript errors shown in the web inspector (if applicable):

Additional information: