Birthday reminder card for Lovelace

[Abeksis]

@Erlend

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

[Erlend]

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

[Silicon_Avatar]

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.

[Erlend]

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.

[SeLLeRoNe (Andrea Iannucci)]

That is a very nice looking card
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

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

Cheers
Andrea

[Erlend]

Hi Andrea,

Thanks, glad you like the card.

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.

Erlend

[SeLLeRoNe (Andrea Iannucci)]

Hi Erlend,

Thanks for your response

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

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

Thanks again
Andrea

[Erlend]

Hi again Andrea,

Thanks again for your kind words.

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

Erlend

[SeLLeRoNe (Andrea Iannucci)]

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

Much appreciated!!!

Andrea

[Rychuwit]

Hello! Nice work . How add background color in this card. Nice by rounded corners .
Thanks

Ryszard

[macce76 (marcus)]

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?..

[Erlend]

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

[Erlend]

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):

How to add rounded corners to lovelace cards - within a theme?

Good news, everyone! From 0.88 there will be two new variables for use in themes: ha-card-border-radius and ha-card-background.

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

My Lovelace Plugins

card-modder Finally, theres another card… kind of… The card-modder allows you to take any card and inject style it. [card-modder-styling] Think of the amazing stuff people have made with picture-elements over at sharethelove.io. That’s made possible - in part - because elements can be styled with custom css. And now any normal card can as well. It’s also a great way to produce atrocities such as: [card-modder] But I’m sure that in the hands of anyone even just a tiny bit more artistic tha…

[macce76 (marcus)]

Thank you!

[Silicon_Avatar]

What’s the number, in parenthesis, after the number of days?

Never mind. It’s the actual birthday, in the format of Day.Month I presume.
Odd way to present that, lol

[Erlend]

Yep, you are right. The odd European way…

[david1 (David)]

this can come in handy for when my next days off are (holidays)

[jimbob1001 (Jimbob100101)]

Hi, thanks for this great card!

I appear to have an issue though where the next event in my list says it is happening in 6 days time, however the next event is actually on SAT 02 MAR 2019 which is not 6 days from now.

Wondered if the logic in the code takes into account the fact that February only has 28 days (unless it is a leap year)?

Cheers,
James

[Erlend]

James: This is a strange error. I did get the same error when I tested the date you struggled with, but unfortunately I am not able to find a solution. To calculate the number of days, I ask Javascript for a timestamp (the number of milliseconds that have passed since January 1, 1970) for today and the same for the birthday. Then I calculate the difference by subtracting the timestamp for today from the birthday, and convert the difference from milliseconds to days. This seem to work fine for most dates, but for some reason did not work for 02 MAR when still in February. The function I use to calculate the timestamp is a native javascript function, and I really can’t figure out what went wrong. If anyone with better command of javascript can give me a hint, I would be grateful.

[jimbob1001 (Jimbob100101)]

Well thanks for having a look. Actually as soon as it got to 01 MAR it correctly said it was in “1 day” so it must be something to do with February having less days.