From 4e49fd6caa667049b6c0143ebd7549711af79fb2 Mon Sep 17 00:00:00 2001 From: Serios Date: Wed, 19 Jan 2022 23:28:46 +0200 Subject: [PATCH] Update README.md --- README.md | 87 ++++++++++++++++++++++++++++++++++++------------------- 1 file changed, 57 insertions(+), 30 deletions(-) diff --git a/README.md b/README.md index 44cb684..3a475ac 100644 --- a/README.md +++ b/README.md @@ -9,6 +9,7 @@ Custom card that helps you remember birthdays and other events that happen once | v1.0 | 2019.02.11 | First version | | v1.1 | 2019.02.16 | Fixed age for people whos birthday date has passed in current year| | v1.2 | 2019.03.10 | | +| v1.3 | 2022.01.19 | | ## How to install 1. Copy the script (birthday-card.js) to your local directory (I suggest to place all plugins in a directory "plugins" inside your www-folder and to add a new directory inside this for each custom card - if not: adjust the path to birthday-card.js). The file birthday-card.png is not necessary - it's just there so I can display the picture of the card above. @@ -16,7 +17,7 @@ Custom card that helps you remember birthdays and other events that happen once ``` resources: - - url: /local/plugins/birthday-card/birthday-card.js?v=1.2001 + - url: /local/plugins/birthday-card/birthday-card.js?v=1.3.0 type: js ``` @@ -29,43 +30,69 @@ views: - type: "custom:birthday-card" title: "Birthdays" numberofdays: 30 + ... ``` (or add it as a card to an existing view) ## How to update from previous version - Copy out your existing birthday list and string translations from the old birthday-card.js into an empty text-file. -- Replace all text in your existing birthday-card.js file with the new code from GitHub. -- Copy back your old birthday list and string translations into the new birthday-card.js. -- Remember to set 'numberofdays' in ui-lovelace (if not, numberofdays defaults to 14). -- Remember to set a higher version number for the card in resources under ui-lovelace.yaml - -## How to edit birthday list - -Open the js-file in a text editor. At the start of the file, you will see an array called "birthdayList". This array contains a series of objects. Each of these are one item in the birthday list, with this format: +- Use the new yaml structure of card config to add list records back. +- Use the new yaml structure of card config to add the translations. +- No need to touch birthday-card.js file anymore + +## Options + +| Option | Type | Default value | | +| :-----: | :---------: | :---------: | ------------- | +| title | str | Birthdays | Set title for the card | +| numberofdays | int | 14 | Set numberofdays to change the number of days ahead to display birthdays. Set this to 365 to display all birthdays for a full year. | +| date_locale | str | default (use browser locale) | Set local representation of the date for the record date, mostly used for month name. [Use BCP 47 Language Tag](https://www.techonthenet.com/js/language_tags.php) | +| events_list | object | | List of dates with name and type see below for more information about this | +| text_today | str | Today | Translation of card text. Use it to set your own translation | +| text_tomorrow | str | Tomorrow | Translation of card text. Use it to set your own translation | +| text_none | str | No birthdays in the next | Translation of card text. Use it to set your own translation | +| text_days | str | days | Translation of card text. Use it to set your own translation | +| text_years | str | years | Translation of card text. Use it to set your own translation | + +### events_list object +| Option | Type | Default value | | +| :-----: | :---------: | :---------: | ------------- | +| name | str | Required | Name of the date. ex Adam Smith | +| year | int | Optional | If you don't set this, age will not be displayed. | +| month | int | Required | Month number - 1 to 12 | +| day | int | Required | Day number - 1 to 31 | +| type | str | Optional | Shows icon for the event based on the type specified. Available types are: **b** - birthday, **m** - memorial, **e** - engadgment, **w** - wedding. If not specified, generic calendar icon will be used | + +## Examples ``` -{name:"Name", day:7, month:6, year:1990}, +views: + - title: "Example" + cards: + - type: "custom:birthday-card" + title: "Birthdays" + numberofdays: 30 + date_locale: "en-US" + events_list: + - name: 'Adam Smith' + day: 31 + month: 1 + year: 1980 + type: 'b' + + - name: 'Jane and Adam Smith' + day: 6 + month: 10 + year: 2005 + type: 'w' + + - name: 'Grandfather' + day: 3 + month: 4 + year: 1955 + type: 'm' ``` -Change the name, day, month and year to what suits you. - -Copy the line and change the information to add as many birthdays you want to the list. For easy management, I suggest keeping the list in alfabetical order, although this will not make any difference for the function of the card itself. - -### Options -`Year` is optional, but without this, age will of course not be displayed. - -Add `, s:1` after the year to add a cross symbol after the name (used for people who has passed on). The symbol can be changed by changing the string after `bdDeadSymbol` to another char. - -Add `, s:2` after the year to add a heart symbol after the name (used for wedding aniversaries, etc.). The symbol can be changed by changing the string after `bdMarriedSymbol` to another char. - -You can only set one of the two (s:1 or s:2). - -**Remember to increment the version number every time you edit the birthday list (V=1.002, 1.003, etc.).** -After incrementing the version number, reload the page where you display your Home Assistant page (usually by holding down command/control and reloading the page - might differ from browser to browser). - -### Settings in ui-lovelace.yaml -Set `numberofdays` to change the number of days ahead to display birthdays. Set this to 365 to display all birthdays for a full year. -### Settings in the birthday-card.js file -You may also translate the text used in the card to your own language, by changing the strings under "String translations" in birthday-card.js. +**After adding entries to the list, reload the page where you display your Home Assistant page (usually by holding down command/control and reloading the page - might differ from browser to browser).**