feat: added cardHeight option (#442)

Author: marksie1988

dist/atomic-calendar-revive.js

@@ -17,6 +17,7 @@ nav_order: 4
 | disableCalLocationLink | boolean | v1.5.0 | `false` If true the link will be disabled on the event location icon for the selected day             |
 | calShowDescription     | boolean | v2.5.0 | `false` If true this will display the description in calendar mode                                    |
 | disableCalLink         | boolean | v3.0.0 | `false` If true the link to google calendar will be removed                                           |
+| cardHeight             | string  | v4.3.0 | `100%` Change to `px` or `%` to set the height of the card, this will add scroll if it is too small   |
 
 ## Color Options
 

docs/options/calendar-mode-options.md

@@ -1,7 +1,7 @@
 {
 	"name": "atomic-calendar-revive",
-	"version": "4.2.1",
-	"editor_version": "1.5.0",
+	"version": "4.3.0",
+	"editor_version": "1.6.0",
 	"description": "Calendar Card for Home Assistant",
 	"main": "atomic-calendar-revive.js",
 	"scripts": {

package.json

@@ -1,6 +1,8 @@
 import { localize } from './localize/localize';
 
 export default {
+	cardHeight: "100%",
+
 	// text translations
 	fullDayEventText: localize('common.fullDayEventText'), // "All day" custom text
 	untilText: localize('common.untilText'), // "Until" custom text

src/defaults.ts

@@ -87,6 +87,12 @@ export class AtomicCalendarReviveEditor extends LitElement implements LovelaceCa
 		}
 		return 'Events';
 	}
+	get _cardHeight(): string {
+		if (this._config) {
+			return this._config.cardHeight || '100%';
+		}
+		return '100%';
+	}
 
 	get _showLocation(): boolean {
 		if (this._config) {
@@ -413,6 +419,18 @@ export class AtomicCalendarReviveEditor extends LitElement implements LovelaceCa
 				})}
 									</paper-listbox> </paper-dropdown-menu
 								><br />
+								<div class="side-by-side">
+									<div>
+										<paper-input
+											label="${localize('main.fields.cardHeight')}"
+											.value=${this._cardHeight}
+											.configValue=${'cardHeight'}
+											@value-changed=${this._valueChanged}
+										></paper-input>
+									</div>
+									<div>
+									</div>
+								</div>
 								<div class="side-by-side">
 									<div>
 										<ha-switch

src/index-editor.ts

@@ -294,6 +294,8 @@ class AtomicCalendarRevive extends LitElement {
 				.cal-card {
 					cursor: default;
 					padding: 16px;
+					height: ${this._config.cardHeight};
+					overflow: auto;
 				}
 
 				.cal-name {
@@ -671,6 +673,7 @@ class AtomicCalendarRevive extends LitElement {
 	// The height of your card. Home Assistant uses this to automatically
 	// distribute all cards over the available columns.
 	getCardSize() {
+
 		return this._config.entities.length + 1;
 	}
 

src/index.ts

@@ -44,7 +44,8 @@
 			"linkTarget": "Link target",
 			"refreshInterval": "Refresh Interval",
 			"showRelativeTime": "Show Relative Time",
-			"firstDayOfWeek": "First Day of Week 0-6"
+			"firstDayOfWeek": "First Day of Week 0-6",
+			"cardHeight": "Card Height"
 		}
 	},
 	"event": {

src/localize/languages/en.json

@@ -1,7 +1,7 @@
 {
 	"atomic-calendar-revive": {
-		"updated_at": "2021-06-09",
-		"version": "4.2.1",
+		"updated_at": "2021-06-11",
+		"version": "4.3.0",
 		"remote_location": "https://github.com/marksie1988/atomic-calendar-revive/releases/latest/dist/atomic-calendar-revive.js",
 		"visit_repo": "https://github.com/marksie1988/atomic-calendar-revive",
 		"changelog": "https://github.com/marksie1988/atomic-calendar-revive/releases/latest"