Why not use a template sensor in home-assistant instead? That way the number of remaining days can be used in automations, scripts, other sensors… you know… be useful besides pretty (which it certainly is!)
What you have is a really nice display card, but you’re severely limiting it with the countdown function. Make it display an arbitrary entity state instead, but with the icon options and stuff.
Just my two cents.
Because I don’t know how to use template sensors effectively yet? 
I can code Javascript, so I wanted to dig around and see how HA custom entities use it.
Plus I have to keep at least some Javascript, so I can continue to use the BASE64 encoding for the icon, a technique I dragged out of my memory simply so I didn’t have to distribute two files. 
I like your ideas and appreciate the interest and compliments. I’ll see what I can come up with for Version 2.
Oh, I definitely think you should keep the javascript. It’s just that this could be so much more.
Though I see now I misunderstood what icon_url does. I thought it replaced the icon with a user choice…
If you want inspiration, try digging around in the hass object that’s passed to your card regularly. It’s full of all kinds of interesting and useful stuff to play around with.
Also, there’s a lot going on in your hass setter. Much of it could probably be moved into setConfig which is run only once, rather than once every two seconds or so…
Also, a friend asked me if it did anything once you hit the countdown.
“Uhh, no.”
“What about if you let it run past the expiration date?”
I thought it would start showing negative numbers. I was wrong.
(Jeeze, has it really been that long?)
Oop. Better watch out with that. It’ll soon roll around to three zeroes - and we all know what that means to all of the worlds computers…
I’ll try explaining it better. I intended it to link to someone’s page for a birthday, or to an itinerary for a vacation. Something like that.
Time to dust off the web-developer skills & tools, it seems. I put them aside to write Python, C++, and Qt. (Which I really should get back to, after my extended detour into HA)
Ah, I see. I confess I didn’t quite understand how the underlying engine works. This was loosely based on the basic custom component tutorial from the HA docs. I just modified it and hacked at it until it did what I wanted (my favorite way to learn).
I’ve got so many things on my HA to-do list, one of which is rewriting and submitting the main module for the ‘Glances’ system monitor component. I have many ideas.
But my own configuration isn’t even done. Find and check out my attempt to build a remote control. It’s been unfinished for at least two weeks.
This looks awesome! Will definitely use it to customize my birthday countdowns.
I have been running my own custom birthday component for a while now, which is basically a countdown. I don’t mean to hijack your post, but if you want inspiration you look at it here. (I was going to post the component as a thread but then I found yours, so it felt like a duplicate) 
Hi, i configured your component, but i cannot see the icon… maybe i must download it and put inside the code?
I configured my card in this way:
But what i can see is this:
I cleared cache on my chrome but the result is the same…
Where am i wrong? And how to add more birthdays in one card?
You didn’t hijack anything. I’m always interested to see how other people approach the same problem. Plus, I’ve been planning on learning how to integrate Python with HA lately, so this is a good example. Thanks!
Your configuration looks right. I’m not sure why you’re not seeing the icon. You don’t have to download it - it’s actually embedded in the Javascript code. (Have a look; you’ll see one enormously huge line of what looks like nonsense - it’s actually the icon image data.)
It’s kind of a trick. I used it so you guys only had to download one file. Your browser simply might not be able to deal with it. I’m sorry. I built it using Chrome (on Linux) to test. Try refreshing the page a whole bunch of times, or using Shift + F5 to force it to reload.
Also, go into ui-lovelace.yaml and add ?v=1 to the line with the URL to the custom card. This will trick your browser into thinking it’s new code.
And, I’m sorry, this only handles one event at a time. Once you get it working, you should be able to have multiple cards with different dates.
Sorry, i tried all your tips but still no icon in the card. I am using chrome on my Mac OS X and i get no problems at all with the other cards…
Hoping you find a solution…
Edit: I tried changing the configuration:
- type: custom:day-countdown
date: 11 july 2019
title: Compleanno Fha
icon_size: large
And now i get this error:
2018-11-21 14:25:51 ERROR (MainThread) [frontend.js.latest.201811033] https://myduckdns.duckdns.org/local/day-countdown.js?v=1:31:14 Uncaught TypeError: Cannot read property 'slice' of undefined
It seems that it doesn’t like if i leave out the icon_url option…
Awesome card!
From a design perspective, might be cool if the remaining days were shown inside the calendar graphics, and then when the date has passed, you show the checkmark.
And possibly displaying relative time?
Example: 2 days remaining / tomorrow / today / yesterday / 2 days ago
Anyway, nice card!
That “slice” error definitely comes from the URL. Ir’s making sure it starts with “http://” or “https://”.
I tried it with the URL in your error message and it works fine (except that I don’t have DuckDNS set up, so I can’t get past that). Make sure you’ve got just one space between the colon and the URL. Quotes are not required around the URL.
I hate bug reports that come back with errors of “it works for me”, but in this case, it does…
Thanks, everyone, for all the awesome suggestions for additions and improvements. The truth is that I cranked this out in about three hours in a single evening. I just wanted to learn how the custom Javascript components worked. I didn’t plan for it to be anything complicated or sophisticated. And I certainly didn’t expect it to be so popular. I’m grateful for all the feedback. I’ll work on V2.0 soon, maybe over the weekend.
This I might be able to manage, but only if you’re running Hassbian and can install a particular Javascript library. It does date math spectacularly, including phrases like you’re asking for.
Thomas,
Can you take a moment and spell this part out for me? I don’t understand the “two halves” of the component (with the HTML block dividing them). Using the “hass” half is the only way I seem to be able to access the this.config.blahblah items.
If that hass block runs on a regular basis, I could think up some uses for it. But if the majority of my code is static, I’ll put it somewhere else.
Thanks a lot.
This is pretty cool,
For me, I would like to see multiple reminders so that the card would look like this:
John’s Birthday: 301 days
Mary’s Birthday: 17 days
Lucie’s Birthday: 227 days
Anniversary: 2 days
Christmas: 37 days
Winter: 5 days
Spring: 95 days
summer: 190 days
Fall: 280 days
Vacation: 200 day
That would likely be an entirely different card. It’s doable, but it’d be a separate project.
@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.