Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/flixlix/energy-period-selector-plus
An upgraded Energy Date Selection Card for Home Assistant, with added customizability, while maintaining the Energy Dashboard's original design.
https://github.com/flixlix/energy-period-selector-plus
automation dashboard date datepicker home-assistant picker plus time
Last synced: about 3 hours ago
JSON representation
An upgraded Energy Date Selection Card for Home Assistant, with added customizability, while maintaining the Energy Dashboard's original design.
- Host: GitHub
- URL: https://github.com/flixlix/energy-period-selector-plus
- Owner: flixlix
- Created: 2023-05-12T15:56:36.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2024-02-20T08:28:28.000Z (12 months ago)
- Last Synced: 2025-01-30T13:12:40.484Z (7 days ago)
- Topics: automation, dashboard, date, datepicker, home-assistant, picker, plus, time
- Language: TypeScript
- Homepage:
- Size: 88.9 KB
- Stars: 72
- Watchers: 2
- Forks: 6
- Open Issues: 24
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- Funding: .github/FUNDING.yml
Awesome Lists containing this project
README
# Energy Period Selector Plus
[](https://ko-fi.com/flixlix)
## Goal
The main goal of this card is to expand the functionality and customizability of the official [Energy Date Picker Card](https://www.home-assistant.io/dashboards/energy/#energy-date-picker) from Home Assistant.
The goal is to deliver a card that fits in the overall design of the Energy Dashboard, while providing more features.
## Features & Bugfixes
- UI Editor
- Change style or hide Compare Button.
- Use Background to fit other cards.
- Choose which Periods are shown.
- Make Compare work.
## Install
### HACS (recommended)
This card is direclty available in [HACS](https://hacs.xyz/) (Home Assistant Community Store).
_HACS is a third party community store and is not included in Home Assistant out of the box._
To install this:
- Go to HACS
- Click on `Frontend`
- Search for `Energy Period Selector Plus`
- Install via UI
Manual Install
1. Download and copy `energy-period-selector-plus.js` from the [latest release](https://github.com/flixlix/energy-period-selector-plus/releases/latest) into your `config/www` directory.
2. Add the resource reference as decribed below.
### Add resource reference
If you configure Dashboards via YAML, add a reference to `energy-period-selector-plus.js` inside your `configuration.yaml`:
```yaml
resources:
- url: /local/energy-period-selector-plus.js
type: module
```
Else, if you prefer the graphical editor, use the menu to add the resource:
1. Make sure, advanced mode is enabled in your user profile (click on your user name to get there)
2. Navigate to Settings -> Dashboards
3. Click three dot icon
4. Select Resources
5. Hit (+ ADD RESOURCE) icon
6. Enter URL `/local/energy-period-selector-plus.js` and select type "JavaScript Module".
(Use `/hacsfiles/energy-period-selector-plus/energy-period-selector-plus.js` and select "JavaScript Module" for HACS install if HACS didn't do it already)
## Using the card
To configure this card, only the type is required, making it very easy to get started.
In addition to that, I developed a UI Editor, making it even easier to change the card according to your preferences. 🥳
The UI Editor looks like this:
### Options
#### Card options
| Name | Type | Default | Description |
|---------------------| --------- |:------------:|------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
| type | `string` | **required** | `custom:energy-period-selector-plus`. |
| card_background | `boolean` | false | If set to `true`, a card will be added to the background of the card. |
| title | `string` | undefined | If set, a title will be added to the card. |
| today_button_type | `boolean` | true | If set to `true`, a button will be added to select today. |
| prev_next_buttons | `boolean` | true | If set to `true`, buttons will be added to control the previous and next period. |
| compare_button_type | `string` | undefined | If set, a button will be added to toggle the compare mode. Supported values are `icon` and `text`. |
| period_buttons | `array` | undefined | If set, only buttons inside this array will be displayed. Supported values are `day`, `week`, `month`, `year` and `custom`. Order of your array will be applied. |
| custom_period_label | `string` | undefined | If set, the label of the custom period button will be changed to this value. Otherwise will be synced to your HA language (If not, consider submitting a PR, adding your language to the localize function.) |
### Example Configurations
```yaml
type: custom:energy-period-selector-plus
card_background: true
```
```yaml
type: custom:energy-period-selector-plus
card_background: true
title: No Previous or Next Controls
prev_next_buttons: false
```
```yaml
type: custom:energy-period-selector-plus
card_background: true
title: No Today Button
today_button_type: false
```
```yaml
type: custom:energy-period-selector-plus
card_background: true
title: Text Compare Button
compare_button_type: text
```
```yaml
type: custom:energy-period-selector-plus
card_background: true
title: Icon Compare Button
compare_button_type: icon
```
```yaml
type: custom:energy-period-selector-plus
card_background: true
title: No Week Button
period_buttons:
- day
- month
- year
```
```yaml
type: custom:energy-period-selector-plus
card_background: true
title: Custom Period Picker
period_buttons:
- day
- week
- month
- year
- custom
```
```yaml
type: custom:energy-period-selector-plus
card_background: true
title: Custom Period Picker
period_buttons:
- day
- week
- month
- year
- custom
custom_period_label: |\>
```
#### Real world Demo
