bugfix, date added

Author: atomic7777

README.md

@@ -1,4 +1,4 @@
-# atomic calendar card v0.7.1
+# atomic calendar card v0.7.2
 Advanced calendar card for Home Assistant with Lovelace
 
 Calendar card with advanced settings. It loads calendar events from Home Assistant - Google calendar component.
@@ -35,7 +35,7 @@ If you have any suggestions about design or functionality, please let me know, o
 
 ## 1. Installation
 1. You need to have the ![Google calendar](https://www.home-assistant.io/components/calendar.google/) component configured in Home Assistant.
-2. Download `atomic-calendar.js` file to `/www` directory in your Home Assistant - [latest release](https://github.com/atomic7777/atomic_calendar/releases/download/v0.7.1/atomic-calendar.js) - link not working (in development)
+2. Download `atomic-calendar.js` file to `/www` directory in your Home Assistant - [latest release](https://github.com/atomic7777/atomic_calendar/releases/download/v0.7.2/atomic-calendar.js) - link not working (in development)
 3. Add this reference to your `ui-lovelace.yaml` file:
   ```yaml
   resources:
@@ -60,6 +60,9 @@ If you have any suggestions about design or functionality, please let me know, o
 | showLocation | boolean | optional | v0.3.0 | `true` Show location link (right side)
 | showMonth | boolean | optional | v0.3.0 | `false` Show month under day (left side)
 | showLoader | boolean | optional | v0.7.0 | `true` Show animation, when events are being loaded from Google Calendar.
+| showDate | boolean | optional | v0.7.2 | `false` Show the date on the right side of the title
+| dateFormat | string | optional | v0.7.2 | `LL` Custom date format - see https://devhints.io/moment for examples
+
 
 ### Text colors and fonts
 | Name | Type | Since | Description |

app.js

@@ -56,7 +56,6 @@ class AtomicCalendar extends LitElement {
 				})()
 		}
 
-		var t0 = performance.now();
 		if (this.modeToggle == 1)
 			this.updateEventsHTML(this.events);
 		else
@@ -70,8 +69,18 @@ class AtomicCalendar extends LitElement {
 		<div class="cal-titleContainer">
 			<div  class="cal-title"  @click='${e => this.handleToggle(e)}'> 
 				${this.config.title}
-			</div> 
-				${(this.showLoader && this.config.showLoader) ? html`<div style="padding-top: 16px;padding-right: 16px;"><div class="loader" ></div> </div>` : ''}
+			</div>
+				
+				
+				${(this.showLoader && this.config.showLoader) ? html`
+					<div  class="loader" ></div>` : ''}
+		
+		
+				<div class="calDate">
+				${(this.config.showDate) ? this.getDate() : null}
+	
+			</div>
+			
 		</div>
 <div style="padding-top: 4px;">
 			
@@ -103,6 +112,7 @@ class AtomicCalendar extends LitElement {
 			}
 			.cal-title {
 				font-size: var(--paper-font-headline_-_font-size);
+
 				color: var(--primary-text-color);
 				padding: 4px 8px 12px 0px;
 				line-height: 40px;
@@ -113,8 +123,24 @@ class AtomicCalendar extends LitElement {
 				display: flex;
 				flex-direction: row;
 				justify-content: space-between; 
+			    vertical-align: middle;
+				align-items: center;
+				margin: 0 8px 0 8px;
 			}
 
+		
+
+			.calDate {
+			    font-size: var(--paper-font-headline_-_font-size);
+				    font-size: 1.3rem;
+    font-weight: 400;
+				color: var(--primary-text-color);
+				padding: 4px 8px 12px 0px;
+				line-height: 40px;
+				cursor: default;
+				float:right;
+				    opacity: .75;
+			}
 			
 			table{
 				color:black;
@@ -255,7 +281,7 @@ class AtomicCalendar extends LitElement {
 
 
 			table.cal{
-								color: ${this.config.titleColor}
+				color: ${this.config.titleColor}
 				margin-left: 0px;
 				margin-right: 0px;
 				border-spacing: 10px 5px;
@@ -293,17 +319,6 @@ class AtomicCalendar extends LitElement {
 				padding: 4px;
 			}
 
-			.calTitleContainer {
-				display: flex;
-				vertical-align: middle;
-				align-items: center;
-				justify-content: space-between;
-				margin: 0 8px 0 8px;
-			}
-			
-			.calTitle {
-	
-			}
 
 			.calTableContainer {
 				width: 100%;
@@ -318,6 +333,8 @@ class AtomicCalendar extends LitElement {
 				margin-left: -1px;
 			}	
 			
+			
+			
 			.loader {
 				border: 4px solid #f3f3f3;
 				border-top: 4px solid grey; 
@@ -340,6 +357,11 @@ class AtomicCalendar extends LitElement {
 
 		`
 	}
+	
+	getDate() {
+		const date=moment().format(this.config.dateFormat)
+		return html`${date}`
+	}
 
 	setConfig(config) {
 		if (!config.entities) {
@@ -360,7 +382,8 @@ class AtomicCalendar extends LitElement {
 			showMonth: false, // show month under day (left side)
 			fullTextTime: true, // show advanced time messages, like: All day, until Friday 12
 			showCurrentEventLine: false, // show a line between last and next event
-
+			showDate: false,
+			dateFormat: 'LL',
 
 			// color and font settings
 			dateColor: 'var(--primary-text-color)', // Date text color (left side)
@@ -543,7 +566,7 @@ class AtomicCalendar extends LitElement {
 					isEventNext) ? html `<div class="eventBar"><ha-icon icon="mdi:circle" class="event-circle"></ha-icon><hr class="event"/></div>` : ``
 
 				//show current event progress bar
-				const progressBar = ``
+				var progressBar = ``
 				if (di == 0 && this.config.showProgressBar && event.isEventRunning) {
 					let eventDuration = event.endTime.diff(event.startTime, 'minutes');
 					let eventProgress = moment().diff(event.startTime, 'minutes');
@@ -552,10 +575,9 @@ class AtomicCalendar extends LitElement {
 
 				}
 
-				const finishedEventsStyle = (event.isEventFinished && this.config.dimFinishedEvents) ? `opacity: ` + this.config.finishedEventOpacity + `; filter: ` + this.config.finishedEventFilter : ``
+				var finishedEventsStyle = (event.isEventFinished && this.config.dimFinishedEvents) ? `opacity: ` + this.config.finishedEventOpacity + `; filter: ` + this.config.finishedEventFilter : ``
 
 				const lastEventStyle = i == arr.length - 1 ? 'padding-bottom: 8px;' : ''
-
 				return html `
 					
 					<tr class="${dayWrap}">
@@ -582,7 +604,7 @@ class AtomicCalendar extends LitElement {
 			})
 
 			return htmlEvents
-		})
+		}) 
 		this.content = html `<table><tbody>${htmlDays}</tbody></table>`
 	}
 

atomic-calendar.js

@@ -29,6 +29,7 @@
     "rollup": "^1.2.2",
     "rollup-plugin-commonjs": "^9.2.0",
     "rollup-plugin-node-resolve": "^4.0.0",
+    "rollup-plugin-sourcemaps": "^0.4.2",
     "rollup-plugin-terser": "^4.0.4",
     "webpack": "^4.29.5",
     "webpack-cli": "^3.2.3",