feat(calendar): added weekendSat, weekendSun and differentMonth classes

closes #1362

Author: marksie1988

src/defaults.ts

@@ -84,8 +84,6 @@ export default {
 	calEventBackgroundColor: 'rgba(86, 100, 86, .35)',
 
 	calActiveEventBackgroundColor: 'rgba(86, 128, 86, .35)',
-	calEventSatColor: 'rgba(255, 255, 255, .05)',
-	calEventSunColor: 'rgba(255, 255, 255, .15)',
 
 	calEventTime: false, // show calendar event summary time
 

src/index.ts

@@ -583,10 +583,10 @@ export class AtomicCalendarRevive extends LitElement {
 
 		return month.map((day: CalendarDay, i) => {
 			const dayDate = dayjs(day.date);
-			const dayStyleOtherMonth = dayDate.isSame(this.selectedMonth, 'month') ? '' : `opacity: .35;`;
+			const dayStyleOtherMonth = dayDate.isSame(this.selectedMonth, 'month') ? '' : `differentMonth`;
 			const dayClassToday = dayDate.isSame(dayjs(), 'day') ? `currentDay` : ``;
-			const dayStyleSat = dayDate.isoWeekday() == 6 ? `background-color: ${this._config.calEventSatColor};` : ``;
-			const dayStyleSun = dayDate.isoWeekday() == 7 ? `background-color: ${this._config.calEventSunColor};` : ``;
+			const dayStyleSat = dayDate.isoWeekday() == 6 ? `weekendSat` : ``;
+			const dayStyleSun = dayDate.isoWeekday() == 7 ? `weekendSun` : ``;
 			const dayStyleClicked = dayDate.isSame(dayjs(this.clickedDate), 'day')
 				? `background-color: ${this._config.calActiveEventBackgroundColor};`
 				: ``;
@@ -599,8 +599,8 @@ export class AtomicCalendarRevive extends LitElement {
 					${i % 7 === 0 ? html`<tr class="cal"></tr>` : ''}
 					<td
 						@click="${() => this.handleCalendarEventSummary(day, true)}"
-						class="cal"
-						style="${dayStyleOtherMonth}${dayStyleSat}${dayStyleSun}${dayStyleClicked} --cal-grid-color: ${this._config
+						class="cal ${dayStyleSat} ${dayStyleSun} ${dayStyleOtherMonth}"
+						style="${dayStyleClicked} --cal-grid-color: ${this._config
 							.calGridColor}; --cal-day-color: ${this._config.calDayColor}"
 					>
 						<div class="calDay">

src/style.ts

@@ -278,6 +278,18 @@ export const styles: CSSResultGroup = css`
 		display: inline-block;
 	}
 
+	.weekendSat {
+		background-color: rgba(255, 255, 255, .05);
+	}
+
+	.weekendSun {
+		background-color: rgba(255, 255, 255, .15);
+	}
+
+	.differentMonth {
+		opacity: .35;
+	}
+
 	tr.cal {
 		width: 100%;
 	}

src/types/config.ts

@@ -82,8 +82,6 @@ export interface atomicCardConfig extends LovelaceCardConfig {
 	calEventBackgroundFilter?: string;
 	calActiveEventBackgroundColor?: string;
 	calActiveEventBackgroundFilter?: string;
-	calEventSatColor?: string;
-	calEventSunColor?: string;
 	calEventHolidayColor?: string;
 	calEventHolidayFilter?: string;
 	calEventIcon1?: string;