@maurizio53 - I found the source of your bug. You need to add the line
show_icon: true
I found this while trying to clean up the code and add features for Version 2.
Sorry for the delay.
Please enjoy.
That’s one solution.
You could possibly also load the library as an external dependency, however this would slow the initial load down as well as make the card depend on an internet connection, which kinda sucks… 
Another way would be to bundle the library and your js together with something like rollup and the resolve plugin, a bit more advanced though.
Thanks… all is working now…
I’ll have to check out how to combine a library like you said. It’s called Moment.js and can handle any date you throw at it, in any format, no work on the developer’s side. In other words, a perfect library. It’ll output things like “Two weeks from Tuesday”. It’s awesome.
Good deal. I realize that’s a pretty pointless option, so it’ll be going away. If you’ve already said how big you want the icon and what it should link to, it’s pretty stupid to have to say “and show the icon, too”. 
There are two main functions of any lovelace card, setConfig and the hass setter (set hass(hass)).
The setConfig function is called rarely, in most cases only once in the entire lifetime of the card.
The hass setter is called every time anything changes in your home-assistant system.
Every time any sensor changes it’s value (even the time sensor), every time a service is called, etc… In short, it happens a lot.
Some cards I’ve seen (and some of mine before I learned this) tore down everything and rebuilt the card from scratch in the hass setter. Needless to say, that puts a lot of unnecessary strain on the browser, and may even make the card flicker.
It’s better to put as much of the work as possible in the setConfig function, and only make minor changes in the hass setter.
For example, this block. Instead of jumping through hoops to make sure it runs only once, you should put it in the setConfig function. The same goes for calculating the icon size and most of the contents of this.contents. If you move this to setConfig you can use this.contents.querySelector("div p strong").innerHTML in the hass setter to change only the day count.
If you can’t access this.config.blahblahin the setConfig function, it may be because you set the value of this.config at the very end of the function. Before that line you can use config.blahblah instead - or move the definition to the start of the function…
Personally, I’d move this function definition out of the hass setter too and make it a standalone function of the class, but that’s really just personal preference.
1 Like
Thank you my friend. I’m going to back it up, tear it down, and rebuild it… now that I have a better understanding of how it works.
I presume that setConfig will get called again if, y’know, the config changes.
I’m quickly learning that it’s one thing to know the Javascript syntax and another thing entirely to understand how such a complex system operates. I’ll take all the bits and pieces I can get, and I thank you for sharing this.
1 Like
Now at version 1.5!
- More customization, including:
– five icons to choose from, in three different sizes
– customizable card title (“Vacation”, “Anniversary”, etc.)
– custom phrase (“Days remaining: X”) - Cleaner code (many thanks to @thomasloven)
I don’t have the fancy auto-updater thing hooked up yet, so for now just grab a fresh copy from my repo (https://github.com/bundito/day-countdown). Drop it into your <config>/www folder and set a few parameters as explained in the README.
Note and apology: The changes I made probably broke some of your existing setups. I apologize for that. Any changes should be simple and self-explanatory. Post a reply if you need help.
Enjoy!
2 Likes
@Miicroo
https://github.com/Miicroo/homeassistant-custom-components/tree/master/birthdays
How can I use it in lovelace?
Oh, forgot to add that in the README.
I use a simple entity-card together with Thomas Lovéns fold-entity-row (to divide different parts of my family into sections). Using the example birthdays on github the lovelace-ui-config looks like this:
# Example use in lovelace
- type: entities
title: Birthdays
show_header_toggle: false
entities:
- birthday.Frodo_Baggins
- birthday.Bilbo_Baggins
- birthday.Elvis
The entity-card will have a name and value for each item; the name will be the name given in the config, and the value is the number of days until birthday.
Thank you! Works like a charm.
Is there an easy way to send a notification when a birthday is today/tomorrow? I can setup an automation for each birthday, but if I have round about 20 birthdays…its a lot of code.
Does this support !include_dir_merge_list?
Currently trying to do the same, Ill post if I manage to get it working. Currently stuck if multiple people have the same birthday 
I think so, but I haven’t tried it myself I assume that include_dir_merge_list is a hass-function that is used when they parse the configuration, and that the component will get the evaluated expression.
I also noticed that you can’t do.
name: "Bob's Birthday"
It has to be.
name: 'Bob's Birthday
Which just doesn’t look right.
How did I miss this one? Looks great, going to play around with it a bit and maybe send a PR your way for some ideas I have
Nice work! Using it for my wedding aniversary. A count-up would be nice too 
to help me remember how long I’ve been married 
Small update:
Was able to update the file to do both
It checks if the date is before or after today and changes the title and calculation based on that.
The only issue I have is I don’t get the date in the correct textformat, it shows 4/1/2017 while the inserted date was 23 Feb 2017. The year is always correct though so it’s a stupid detail I’m missing.
Anyway, had some fun getting to know javascript a bit
1 Like
This is really nice! Have you pushed the count-up to your github yet? I just pulled it down but when I set the date to yesterday, it still reads “Days remaining:-2”.
Edit: Please push, I just noticed the last commit was Nov 25, 2018! I would greatly appreciate it.
I’m not the original developer I’ll post my code changes later today to get it working, the original developer can probably implement it in his code (and better, as I’m not a javascript guy 
, like said, I still have a bug with the date being shown wrong as seen in the last screenshot. Maybe someone can see what is wrong then ).
When you edit the javascript file, the following changes do the count-up:
At the top, after the “now”, “then” variables you place the code between an if statement:
if (now < then){ var timeDiff = Math.abs(then.getTime() - now.getTime()); var diffDays = Math.ceil(timeDiff / (1000 * 3600 * 24)); if (then.getTime() < now.getTime()) { diffDays = diffDays * -1; } return diffDays; }else if (then < now){ var timeDiff = Math.abs(now.getTime() - then.getTime()); var diffDays = Math.ceil(timeDiff / (1000 * 3600 * 24) - 1); if (now.getTime() < then.getTime()) { diffDays = 5; } return diffDays; }
a bit further there is a block for the phrase:
if (!this.config.phrase) { var now = new Date(); var then = new Date(this.config.date); var options = { weekday: 'long', year: 'numeric', month: 'long', day: 'numeric' }; if (now < then){ this.config.phrase = "Days Remaining"; }else if (then < now){ this.config.phrase = "Days since " + then.getDay() + '/' + then.getMonth() + '/' + then.getFullYear(); } }
Now, in that last block there is a bug that it shows another date in text than it shows a different day and month than what is in the code. Haven’t been able to fix that yet. If it should’t work, let me know, I’ll upload the complete file then :).
1 Like
Still getting negative days but I probably didn’t edit the file right. Post the entire file if you don’t mind!