A simple Lovelace card for displaying a countdown until a certain date. Other than that, it doesn't do much. It's got a few options you can experiment with, however.
Copy the day-countdown.js file into your <config>/www directory.
In your ui-lovelace.yaml file, add the following at the beginning of the file:
- url: /local/day-countdown.js
type: js
Using the card is simple. The only required parameter is date.
- type: "custom:day-countdown"
date: "July 16 2019"
This will generate the most basic card:
date can be provided in either American or European format, with the month spelled out (or abbreviated). All of these are equivalent:
- Jul 16 2019
- 16 Jul 2019
- July 16, 2019
- 16 july 2019
Note: All-numeric dates (i.e. 04/25/19) are not supported at the moment. Javascript has a complicated relationship with dates. I'm working on it.
Adding the title parameter allows you to, well, change the title of the card.
- type: "custom:day-countdown" date: "July 16 2019" title: Anniversary
There are five icons available, all included within the single Javascript file. No mess to keep track of. You can also choose between three different sizes, small, medium, or large.
You can choose between any of the five by passing the icon_number parameter.
- type: "custom:day-countdown"
date: "July 16 2019"
title: Anniversary
icon_size: small
- type: "custom:day-countdown"
date: "July 16 2019"
title: Anniversary
icon_size: medium
- type: "custom:day-countdown"
date: "July 16 2019"
title: Anniversary
icon_size: large
And finally, if you wish, you can add a link to the calendar icon. The link has no special formatting and is not checked for validity. That's up to you.
- type: "custom:day-countdown"
date: "July 16 2019"
title: Anniversary
icon_size: large
icon_url: https://en.wikipedia.org/wiki/July_16
If you want to skip the whole icon business entirely, just add the
hide_icon: true
parameter and you can leave off all the other icon parameters.
Using the parameter phrase: will determine what term comes before the number of days remaining. Don't get too lengthy; I don't know what might happen if your message is longer than the card is wide. Hm.
This card is more of a learning exercise for me, but it's fully functional and I intend to use it. As with all free software, you're welcome to revise or remix it in any way you wish. Many thanks to @thomasloven for helping me understand the example I started with and how to expand upon it.
- Icons 1, 3, and 5 by Freepik
- Icon 2 by Kiranshastry
- Icon 3 by Alfredo Hernandez
All icons sourced from FlatIcon.
Be cool and credit the artists. Support all artists, in fact. One of my favorites is with us in spirit, inside this very project. Can you find the Easter egg? Post a photo, but don't tell how.
Things I'd like to do...
- Styling/colors/CSS for the card
- Better handling of date inputs
- Further clean up the code and submit it as An Official Example
- Anything else the community suggest and I agree is a Good Idea.