Skip to content

bundito/day-countdown

master
Switch branches/tags
Code

Latest commit

 

Git stats

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
 
 
 
 
 
 
 
 
 
 
 
 
 
 

NOTE: As of April 1, 2019, I am no longer participating in Home Assistant development (or usage). If there are any problems with this card going forward, I will not be able to fix them. Hope you enjoy!

Day Countdown card (v1.5)

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.

Usage

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

date:

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:

countdown

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.

title

Adding the title parameter allows you to, well, change the title of the card.

  • type: "custom:day-countdown" date: "July 16 2019" title: Anniversary

title

Icons

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.

icon_number: 1

icon_number: 1

icon_number: 2

num_2

icon_number: 3

num_3

icon_number: 4

num_4

icon_number: 5

num_5

small

- type: "custom:day-countdown"
  date: "July 16 2019"
  title: Anniversary
  icon_size: small

small

medium

- type: "custom:day-countdown"
  date: "July 16 2019"
  title: Anniversary
  icon_size: medium

medium

large

- type: "custom:day-countdown"
  date: "July 16 2019"
  title: Anniversary
  icon_size: large

large

icon_url

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

No icon (how dull)

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.

Custom Phrase

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.

Notes & Attribution

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.

Icon attributions
  • 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.

Future Plans

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.

About

A simple day counting card for Home Assistant, with multiple user-settable options

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published