If you like you can support my work.
**How much time does it take to install this. ? **
It takes about 20 - 30 minutes. It depends on how many people's birthday you want to display on your dashboard. But remember, you only do it once. 🎉
How do I install this theme?
This not a python or anything else coded software but just a code.
This is hard because I don't have any code knowledge.
Don't worry. I have a manual for setup. Everything is explained there and it is super easy to install.
**Where are the codes ? **
Everything you need including the setup manual is in this page. 🎉
**I don't have the multimedia files you used. ? **
For this project you do not need any multimedia files. Because it is a birthday card you have to create your own. Instructions are in the manual. 🎉
- Displays 4 upcoming birthdays. The number can also be increased further with the help of a swiper card
- Shows the remaining time for birthdays.
- Ready for White and Dark Theme.
- Highlights the birthday person in a white frame.
- Birthday icon at the very first card let's HA to remind you the birthday in various ways. In my example a notification through telegram.
- Full screen tablet version
- Info on creating a sensor that displays multiple birthdays
- Info on creating the template sensors from the UI
- Info on how to shorten state attribute messages.
- Info on creatşng full screen pages on tablet and pc view.
- Full code explanation line by line
You will also need the Google Calendar integration to be installed in Home Assistant. Link:
##Templates and Automations:
Wen need some templates and 1 single automation for the code to function properly. You use yaml to create templates but if you want to use my method which explained in the manual you must have at least Home Assistant version 2023.09.
Templates:
Automations:
#Mobile
To install the page you need this code: Page Code
#Tablet
To install the page you need this code: Page Code
Ok let's start. First of all we need to have a google calendar integrtion ready for the birthdays to appear in Home Assistant. You can find various videos on Youtube for the installation.
If you have installed google calendar a birthday calendar calendar should be visible in your entegrations page.
When you enter the integration you will see that a birthday calendar is there.
In my case it is called calendar.dogumgunleri. Okay it is in Turkish but generally it is the calendar for the birthdays. When you click the calendar :
You will see that it will only give you on - off state. If you check for the details from HA menu developers tools > state you will see that state attributes will give you only a single birthday information which is the current or upcoming birthday from your calendar.
Now we need to create a new sensor which will display next 4 birthdays from this Google Calendar. But before doing I am going to show you how you can create a new birthday info for any person .
- click on this address
- Click upper left "Create a new Person" icon.
- Enter the necessary information and don't forget to complete birthday section.
- Now go back to HA integrations page and refresh Google Calendar
- When you check your HA calendar(on left menu). The newly created person birthday will be shown there.
Okay now let's get back to our code. Now as I said we need to create a new template for next 4 upcoming birthdays. So put down below code to your configuration.yaml
Restart Home Assistant. After reboot you will see that a new sensor is being created.
Now as you see from the developers menu a bunch of people's next birthday information is listed in state attributes. So we need to extract only 4. If you plan to show more then 4 then there is a way too but I will show you that later.
Now we need to extract the name of the birthday person first.
As you can see the name is "Emre Bora Kiztan adlı kişinin doğum günü". So this means "Birthday of Emre Bora Kiztan " Sorry I couldn't find a way to convert it to English and that is because HA is displaying the data from Google in my local language. But I will show you the way to shorten this sentence.
We need a template for this. The template is quite simple.
{{ state_attr('sensor.calendar_scheduled_events', 'scheduled_events')[0].summary | replace("adlı kişinin doğum günü", "") }}So I will explain this code. It is very simple. "sensor.calendar_scheduled_events" is the new sensor we just created which displays multiple people's birthday.
The name we should derive is on state's attribute which is "Summary" so next line in the code "[0].summary" takes the very first person's birthday.
Remember the newly created sensor displays birthdays to date order. So "0" means the first birthday.
"| replace("adlı kişinin doğum günü", "")" this code replaces sentence "adlı kişinin doğumgünü" with and empty(""). So as a result, normally the very first birthday atrrbute message was "Emre Bora Kiztan adlı kişinin doğum günü" but "| replace("adlı kişinin doğum günü", "")" this little part cuts off "adlı kişinin doğum günü" sentence so the new outcome appears as only the name is displayed which is "Emre Bora Kiztan". So if in English it is the as "Birthday of Merve Koç" try the replace line like this, "| replace("Birthday of", "")" this will cut the "Birthday of" sentence and only the name will be displayed.
So now we need to create a sensor for that. With Home Assistant 2023.09 wen can now create sensors inside helpers section shortly from the UI.
So go to helpers menu.
Click plus icon(Create Helper) on the bottom right and choose "Template" and then "Template a sensor"
Put the above code into "state template*" area and save it.
the outcome should be like this. If everything is ok our sensor will give you below infotmation.
As you can see only the name is being displayed.
So now we have created our first birthday card sensor. But we need to display 4 person. So 3 more left. Do the same process above and create 3 more templates. But be careful. you need to change 0 in the code :
0 here displays the first birthday data from the sensor. But in our second card we should change zero with 1.
{{ state_attr('sensor.calendar_scheduled_events', 'scheduled_events')[1].summary | replace("adlı kişinin doğum günü", "") }}1 is the second upcoming birthday from the list which is Volkan Aksoy.
So second template sould look like this.
Ok now do it for 3rd and the last sensor. Don't forget the change the number to 2 for the third and 3 for the last one.
Now we have 4 sensors ready
So now let's move on to date sensors. Again we create 4 sensors from the helpers section.
{{ state_attr('sensor.calendar_scheduled_events', 'scheduled_events')[0].start }}This will take the starting date from the very first birthday person.
When you create sensors ıt will display the time. Again as a reminder. "0" is the first birthday person in our sensor.
Do the same process for other three sensors.
{{ state_attr('sensor.calendar_scheduled_events', 'scheduled_events')[1].start }}{{ state_attr('sensor.calendar_scheduled_events', 'scheduled_events')[2].start }}{{ state_attr('sensor.calendar_scheduled_events', 'scheduled_events')[3].start }}So next 4 date sensors is as follows :
Now and last we need to create date remaing sensors. We do it from the same spot "helpers section".
{% set midnight = now().replace(hour=0, minute=0, second=0, microsecond=0).timestamp() %}
{% set event = as_timestamp(states('sensor.calendar_birthday_schedules_date_1')) %}
{% set delta = ((event - midnight) // 86400) | int %}
{% if delta == 0 %}
Today
{% elif delta == 1 %}
Tomorrow
{% elif delta == 2 %}
2 days
{% elif delta == 3 %}
3 days
{% elif delta == 4 %}
4 days
{% elif delta == 5 %}
5 days
{% elif delta == 6 %}
6 days
{% elif delta == 7 %}
7 days
{% elif delta == 8 %}
8 days
{% elif delta == 9 %}
9 days
{% elif delta == 10 %}
10 days
{% else %}
Far Away
{% endif %}This part will give us the remaing days in numbers for the person who has a birthday.
Again place the above sensor into the template sensors as we have done before.
This time this template takes the date from previously created "date sensors" and displays the remaing days. Again we need 4 of them and we have onlu created first one. So we have to repeat the same process 3 times.
Rmeaing sensors are :
{% set midnight = now().replace(hour=0, minute=0, second=0, microsecond=0).timestamp() %}
{% set event = as_timestamp(states('sensor.calendar_birthday_schedules_date_2')) %}
{% set delta = ((event - midnight) // 86400) | int %}
{% if delta == 0 %}
Today
{% elif delta == 1 %}
Tomorrow
{% elif delta == 2 %}
2 days
{% elif delta == 3 %}
3 days
{% elif delta == 4 %}
4 days
{% elif delta == 5 %}
5 days
{% elif delta == 6 %}
6 days
{% elif delta == 7 %}
7 days
{% elif delta == 8 %}
8 days
{% elif delta == 9 %}
9 days
{% elif delta == 10 %}
10 days
{% else %}
Far Away
{% endif %}{% set midnight = now().replace(hour=0, minute=0, second=0, microsecond=0).timestamp() %}
{% set event = as_timestamp(states('sensor.calendar_birthday_schedules_date_2')) %}
{% set delta = ((event - midnight) // 86400) | int %}
{% if delta == 0 %}
Today
{% elif delta == 1 %}
Tomorrow
{% elif delta == 2 %}
2 days
{% elif delta == 3 %}
3 days
{% elif delta == 4 %}
4 days
{% elif delta == 5 %}
5 days
{% elif delta == 6 %}
6 days
{% elif delta == 7 %}
7 days
{% elif delta == 8 %}
8 days
{% elif delta == 9 %}
9 days
{% elif delta == 10 %}
10 days
{% else %}
Far Away
{% endif %}{% set midnight = now().replace(hour=0, minute=0, second=0, microsecond=0).timestamp() %}
{% set event = as_timestamp(states('sensor.calendar_birthday_schedules_date_3')) %}
{% set delta = ((event - midnight) // 86400) | int %}
{% if delta == 0 %}
Today
{% elif delta == 1 %}
Tomorrow
{% elif delta == 2 %}
2 days
{% elif delta == 3 %}
3 days
{% elif delta == 4 %}
4 days
{% elif delta == 5 %}
5 days
{% elif delta == 6 %}
6 days
{% elif delta == 7 %}
7 days
{% elif delta == 8 %}
8 days
{% elif delta == 9 %}
9 days
{% elif delta == 10 %}
10 days
{% else %}
Far Away
{% endif %}So everything is set. We have succesfully created the remaing day sensors.
So lets explain our code line by line Line 11 - 34 is where the little crown icon stands. With this you can turn on and off notifications for the birthdays. Below you can find the automation code.
In this automation I used telegram notification for reminders. Birthdays are saved as "All day events" so this automation sends a notification 30 minutes before midnight(previous day at 23:30) reminding me that a birthday will be active in 30 minutes. You can use anything you like for the reminder. For example you can let specific lights turn on or get an email. I also used a boolean to be turned on for this automation to work. The boolean is named "input_boolean.live_tiles_birthday_automation". You have to create it from helpers section choosing "Toggle". So when we press the "crown" icon at top left this automation becomes active.
Line 35 - 94 is for 2 little information on the birthday card. The name of the birthday person and the days left to his birthday in numbers.
You can tweak this area by playing ".primary" and ".secondary" settings which is located at line 51 and line 65. For example you can the color background of "Days remaing" at line 73. You can also play with font size at Line 53 and Line 66. Also font family can be changed at Line 58 nad Line 71.
Line 95 - 144 is the part where our first cards inside picture and other properties are written. Now this part is important. For example at Line 114 card takes the birthday person name and checks with the data starting from Line 115. If there is a match it displays the photo on entire card.
Let's look at our example
Line 114 checks the state from "sensor.calendar_birthday_schedules_msg_1" and the result of that sensor is :
Line 117 contains information of a person named Emre Bora Kiztan. So because the sensor "sensor.calendar_birthday_schedules_msg_1" result is "Emre Bora Kiztan", the photo at Line 118 will be used in the card until "sensor.calendar_birthday_schedules_msg_1" displays another name. In other words until the birthday is over.
Line 119 will also check "time remaining" to the birthday. If the state is "Today" it will highlght entire card. This way you will know that there is a birthday on the current day.
So
{% elif state=='Emre Bora Kiztan' %}
background: url( '/local/png/birthday/emrebora.png' ) no-repeat center 0px;This code is for one person only. Below is the position of that person's photo inside the home assistant. To add a new one you have to create another "elif state" like the this.
{% elif state=='Emre Bora Kiztan' %}
background: url( '/local/png/birthday/emrebora.png' ) no-repeat center 0px;
{% elif state=='Berkan Sezer' %}
background: url( '/local/png/birthday/berkan.png' ) no-repeat center 0px;Be careful:
-
The name written here should exactly be the same with "sensor.calendar_birthday_schedules_msg_1" result. Case sensitivity is also important. For example "Emre Bora Kiztan" should not be "Emre Bora kiztan" otherwise the photo will not be displayed.
-
Local characters are also important. like lets say if you use "ı" instead of "i" the photo again won't be displayed.
Tips:
-Try to copy the name from "sensor.calendar_birthday_schedules_msg_1" and paste it into the name area at the code. With this way you won't make any mistake.
- To get a persons photo use their social media. Find a proper picture and take a screenshot and save into your HA birthday folder(Or if you gave a different folder name for the photos, put them in that folder.)
Line 145 - 262 is the second card. The process is exactly the same with the first one. You need to add all the names you entered on the first card to the second card. So for a simple way when you finish adding names to the first card copy them and paste into the second card.
Line 263 - 380 is the third card.
Line 381 - 499 is the last and final card.
I have also added a tablet view with full screen photos.
To display the card properly we need "Layout Card" and some adjustments.
- Create a separate tab in your dashboard.
Enter below code into "Subview section"
grid-template-columns: auto 0px 0%
grid-template-rows: auto
grid-template-areas: |
"header header header"
"main . sidebar"
"footer footer footer"
mediaquery:
"(max-width: 600px)":
grid-template-columns: 100%
grid-template-areas: |
"header"
"sidebar"
"main"
"footer"
"(max-width: 800px)":
grid-template-columns: 50% 50%
grid-template-areas: |
"header sidebar"
"main main"
"footer footer"After that just copy and paste the code into the page. The structure is exactly the same with mobile only some modifications has been made in order to display the photos with full size.