Merge pull request #890 from totaldebug/issue-846-Ability_to_add_the_date_in_front_of_every_events

feat: add option to show date next to all events

Author: marksie1988

dist/atomic-calendar-revive.js

@@ -17,4 +17,5 @@ Event Mode Options
  showCalendarName        boolean    v7.0.0   ``false`` Show the calendar name in Event Mode
  showWeekNumber          boolean    v7.0.0   ``false`` Show the year week number at the beginning of each week
  showEventDate           boolean    v7.1.0   ``true`` Show the event date
+ showDatePerEvent        boolean    v7.2.0   ``false`` Show the date next to each event entry
 ======================= ========== ======== ===========================================================================================================

docs/configuration/event.rst

@@ -1,7 +1,7 @@
 {
 	"name": "atomic-calendar-revive",
-	"version": "7.1.2",
-	"editor_version": "2.1.0",
+	"version": "7.2.0",
+	"editor_version": "2.2.0",
 	"description": "Calendar Card for Home Assistant",
 	"main": "atomic-calendar-revive.js",
 	"scripts": {

package.json

@@ -109,4 +109,5 @@ export default {
 	showWeekNumber: false,
 	showDescription: false,
 	showEventDate: true,
+	showDatePerEvent: false,
 };

src/defaults.ts

@@ -217,6 +217,10 @@ export class AtomicCalendarReviveEditor extends LitElement implements LovelaceCa
 	get _showEventDate(): boolean {
 		return this._config?.showEventDate || false;
 	}
+	get _showDatePerEvent(): boolean {
+		return this._config?.showDatePerEvent || false;
+	}
+
 	// EVENT SETTINGS END
 
 	// CALENDAR SETTINGS
@@ -772,6 +776,19 @@ export class AtomicCalendarReviveEditor extends LitElement implements LovelaceCa
 										<label class="mdc-label">${localize('event.fields.showEventDate')}</label>
 									</div>
 								</div>
+								<div class="side-by-side">
+									<div>
+										<ha-switch
+											aria-label=${`Toggle ${this._showDatePerEvent ? 'on' : 'off'}`}
+											.checked=${this._showDatePerEvent !== false}
+											.configValue=${'showDatePerEvent'}
+											@change=${this._valueChanged}
+										></ha-switch>
+										<label class="mdc-label">${localize('event.fields.showDatePerEvent')}</label>
+									</div>
+									<div>
+								</div>
+
 							</div>
 					  `
 				: ''}

src/index-editor.ts

@@ -382,10 +382,6 @@ class AtomicCalendarRevive extends LitElement {
 					const eventDuration = event.endDateTime.diff(event.startDateTime, 'minutes');
 					const eventProgress = dayjs().diff(event.startDateTime, 'minutes');
 					const eventPercentProgress = (eventProgress * 100) / eventDuration / 100;
-					/**progressBar = html`<mwc-linear-progress
-            class="progress-bar"
-
-            progress="${eventPercentProgress}"></mwc-linear-progress>`;*/
 					progressBar = html`<progress
 						style="--progress-bar: ${this._config.progressBarColor}; --progress-bar-bg: ${this._config
 							.progressBarBackgroundColor};"
@@ -420,13 +416,18 @@ class AtomicCalendarRevive extends LitElement {
 					: '';
 
 				const lastEventStyle = i == arr.length - 1 ? 'padding-bottom: 8px;' : '';
+
+				const showDatePer = this._config.showDatePerEvent
+					? true
+					: i === 0 ? true : false;
+
 				// check and set the date format
 				const eventDateFormat =
 					this._config.europeanDate == true
-						? html`${i === 0 ? event.startTimeToShow.format('DD') + ' ' : ''}${i === 0 && this._config.showMonth
+						? html`${showDatePer ? event.startTimeToShow.format('DD') + ' ' : ''}${showDatePer && this._config.showMonth
 								? event.startTimeToShow.format('MMM')
 								: ''}`
-						: html`${i === 0 && this._config.showMonth ? event.startTimeToShow.format('MMM') + ' ' : ''}${i === 0
+						: html`${showDatePer && this._config.showMonth ? event.startTimeToShow.format('MMM') + ' ' : ''}${showDatePer
 								? event.startTimeToShow.format('DD')
 								: ''}`;
 
@@ -436,7 +437,7 @@ class AtomicCalendarRevive extends LitElement {
 				const eventLeft = this._config.showEventDate == true
 							? html`<td class="event-left" style="color: ${this._config.dateColor};font-size: ${this._config.dateSize}%;">
 							<div class=${dayClassTodayEvent}>
-								${i === 0 && this._config.showWeekDay ? event.startTimeToShow.format('ddd') : ''}
+								${showDatePer && this._config.showWeekDay ? event.startTimeToShow.format('ddd') : ''}
 							</div><div class=${dayClassTodayEvent}>${eventDateFormat}</div>
 							</td>`
 							: html``;

src/index.ts

@@ -74,7 +74,8 @@
 			"hiddenEventText": "Text for hidden events:",
 			"showCalendarName": "Show calendar name",
 			"showWeekNumber": "Show week numbers",
-			"showEventDate": "Show date for events"
+			"showEventDate": "Show date for events",
+			"showDatePerEvent": "Show date next to each event"
 		}
 	},
 	"calendar": {

src/localize/languages/en.json

@@ -44,7 +44,8 @@ export interface atomicCardConfig extends LovelaceCardConfig {
 	refreshInterval: number;
 	showDescription: boolean;
 	showEventIcon: boolean;
-	showEventDate?: boolean;
+	showEventDate: boolean;
+	showDatePerEvent: boolean;
 
 	// color and font settings
 	nameColor?: string;