Birthday reminder card for Lovelace

I have created a custom birthday reminder card for Lovelace.


Read more about it here:

I hope you will find it helpful.


local/custom_ui/birthday-card.js?v=1.1:36:46 Uncaught SyntaxError: Decimals with leading zeros are not allowed in strict mode.

You have to give more information if you want me to try to figure out what is wrong. Please also make sure that you follow all the instructions in the readme.

I haven’t tried this myself, but one thing that could possibly cause this error is if you pad the single number dates with a leading zero, like this:
{name:“Name”, day:07, month:06, year:1990},

Try this instead:
{name:“Name”, day:7, month:6, year:1990},

I added the birthday dates, everything matches your code and still has an error

Yes, I can see that this was not the problem. I really can’t see anything wrong with your setup. Are you sure that you have copied everything from the js-file? It may be something with your system that differs from mine? I run HA as hassio, with the latest version of HA.

Yes, everything was copied correctly. I run 0.87.0

I tested your birthday array in my setup, and it did not report any errors. Have you made any changes to the other settings?

Awesome job!

I just implemented it and it works great!

My only (very very minor) gripe is that the birthday list is stored with the card.
It would be nice if the list could be stored in a separate file (or somehow stored as a secret?) so I can keep the card in my github, but not leak personal information.

And the fact that you have to increment the version number to get it to pull any updates to the list, lol.

Thanks, glad you liked it.

I agree with you that it would be great to store the birthday list as a separate file, for the exact same reasons that you mention. I have tried to find a solution, but alas, my command over javascript and knowledge of how this works in HA has not been sufficient. I will keep trying to find a solution.

1 Like

That is a very nice looking card :slight_smile:
If i may, maybe make it calendar compatible (not only google, but any calendard) will make it more than a “birthday” card but rather a more generic “upcoming events” card driven by a calendar :slight_smile:

Not sure if it’s doable and how hardly, but I think it might be nice :slight_smile:


Hi Andrea,

Thanks, glad you like the card. :slight_smile:

I appreciate your suggestions, and there are a lot of things one could do to develop the card further, but I made this card for the particular reason that I didn’t want to use calendar services, like Google calendar. I just wanted a simple card that could help me remember my family and friends birthdays and other anniversaries.

If you would like a card to use in companion with Google calendar and the likes, there is already a card developed for this purpose: Lovelace Google Calendar.


Hi Erlend,

Thanks for your response :slight_smile:

I know about that other card, but I was looking for omething not google related since I use my own CalDAV Servers to manage my calendars, and your’s looks perfect too :slight_smile:

Anyway I guess I will just have to look until I find the one that fits my needs perfectly :slight_smile:

Thanks again :slight_smile:

Hi again Andrea,

Thanks again for your kind words. :slight_smile:

According to the page I linked, CalDAV was supported as of August 2018, so you may not have to look any further?


1 Like

Oh I must have missed that!
Thanks for looking at that for me!

Much appreciated!!!


Hello! Nice work :grinning:. How add background color in this card. Nice by rounded corners :wink:.


I love the card but why is the date: {name:“Robin”, day:1, month:1, year:2006},apper as he will be 13 year next time… it would be 14?..

[macce76] You are right. Thanks for pointing that out! :slight_smile: Age fixed in version 1.1

Thanks Ryszard!

This is probably best done through creating a theme for HA. It seems like rounded corners will be possible to control through a theme in next version of HA (0.88.0):

If you want to change just this one card, you can try this:

1 Like

Thank you!