add css class today

public/css/components/calendar.css

@@ -42,6 +42,9 @@
 	--fhc-calendar-bg-allday: var(--fhc-calendar-bg);
 	--fhc-calendar-bg-body: var(--fhc-calendar-bg);
 
+	--fhc-calendar-bg-month-today: var(--fhc-primary);
+	--fhc-calendar-color-month-today: var(--fhc-white-10);
+	
 	--fhc-calendar-bg-overlay1: var(--fhc-calendar-bg);
 	--fhc-calendar-bg-overlay2: var(--fhc-dark, #212529);
 	

public/css/components/calendar/frame.css

@@ -44,15 +44,21 @@
 	content: "/";
 }
 .fhc-calendar-mode-month .fhc-calendar-base-grid-line-event.event-header {
-	--event-bg: transparent;
-	font-weight: bold;
-	text-indent: 0;
-	font-size: var(--fhc-calendar-fontsize-month-day, 1rem);
+	height: 100%;
+}
+.fhc-calendar-mode-month .fhc-calendar-base-label-day {
+	width: 100%;
 	height: 100%;
 	display: flex;
 	justify-content: center;
 	align-items: center;
 }
+.fhc-calendar-mode-month .fhc-calendar-base-grid-line-event.event-header {
+	--event-bg: transparent;
+	font-weight: bold;
+	text-indent: 0;
+	font-size: var(--fhc-calendar-fontsize-month-day, 1rem);
+}
 .fhc-calendar-mode-month .fhc-calendar-base-grid-line-event.event-header .disabled {
 	opacity: .3;
 }
@@ -114,6 +120,15 @@
 	width: 100%;
 	border-left: solid 1px var(--fhc-calendar-gap);
 }
+.fhc-calendar-mode-day .today {
+	background-color: var(--fhc-calendar-bg-day-today);
+	color: var(--fhc-calendar-color-day-today);
+}
+/* Week */
+.fhc-calendar-mode-week .today {
+	background-color: var(--fhc-calendar-bg-week-today);
+	color: var(--fhc-calendar-color-week-today);
+}
 /* Month */
 .fhc-calendar-mode-month .fhc-calendar-base-grid-line {
 	overflow: hidden;
@@ -137,6 +152,15 @@
 	overflow: hidden;
 	text-overflow: ellipsis;
 }
+.fhc-calendar-mode-month .event > .today {
+	background-color: var(--fhc-calendar-bg-month-today);
+	color: var(--fhc-calendar-color-month-today);
+}
+/* List */
+.fhc-calendar-mode-list .today {
+	background-color: var(--fhc-calendar-bg-list-today);
+	color: var(--fhc-calendar-color-list-today);
+}
 
 /* Overlays */
 /* ======== */

public/js/components/Calendar/Mode/Day/View.js

@@ -13,7 +13,8 @@ export default {
 	},
 	inject: {
 		timeGrid: "timeGrid",
-		originalEvents: "events"
+		originalEvents: "events",
+		timezone: "timezone"
 	},
 	props: {
 		day: {
@@ -71,6 +72,9 @@ export default {
 				return null; // null => loading
 
 			return first;
+		},
+		isToday() {
+			return this.day.hasSame(luxon.DateTime.now().setZone(this.timezone), 'day');
 		}
 	},
 	watch: {
@@ -116,13 +120,15 @@ export default {
 			all-day-events
 		>
 			<template #main-header="{ date }">
-				<label-dow
-					@cal-click="evt => evt.detail.source = 'day'"
-					v-bind="{ date }"
-				/>
-				<label-day
-					v-bind="{ date }"
-				/>
+				<div :class="{ today: isToday }">
+					<label-dow
+						@cal-click="evt => evt.detail.source = 'day'"
+						v-bind="{ date }"
+					/>
+					<label-day
+						v-bind="{ date }"
+					/>
+				</div>
 			</template>
 			<template #part-header="{ part }">
 				<label-time v-bind="{ part }" />

public/js/components/Calendar/Mode/List/View.js

@@ -18,7 +18,8 @@ export default {
 	},
 	inject: {
 		draggableEvents: "draggableEvents",
-		events: "events"
+		events: "events",
+		timezone: "timezone"
 	},
 	props: {
 		day: {
@@ -55,20 +56,28 @@ export default {
 		draggable(event) {
 			return this.draggableEvents(event.orig, 'list');
 		},
+		isToday(date) {
+			return date.hasSame(luxon.DateTime.now().setZone(this.timezone), 'day');
+		}
 	},
 	template: /* html */`
 	<div class="fhc-calendar-mode-list-view h-100 overflow-auto">
 		<div v-if="!eventsPerDay.length" class="h-100">
 			<slot :event="undefined" mode="list" />
 		</div>
-		<div v-for="{ day, events } in eventsPerDay" class="text-center">
-			<label-dow
-				:date="day"
-				class="d-inline"
-				@cal-click="evt => evt.detail.source = 'day'"
-			/>
-			, 
-			<label-day :date="day" class="d-inline" />
+		<div v-for="{ day, events } in eventsPerDay">
+			<div
+				class="text-center"
+				:class="{ today: isToday(day) }"
+			>
+				<label-dow
+					:date="day"
+					class="d-inline"
+					@cal-click="evt => evt.detail.source = 'day'"
+				/>
+				, 
+				<label-day :date="day" class="d-inline" />
+			</div>
 			<div v-for="event in events">
  				<div v-if="event.type == 'loading'" class="placeholder-glow opacity-50">
 					<span class="placeholder w-100" />

public/js/components/Calendar/Mode/Month/View.js

@@ -40,7 +40,8 @@ export default {
 		};
 	},
 	inject: {
-		events: "events"
+		events: "events",
+		timezone: "timezone"
 	},
 	props: {
 		day: {
@@ -57,6 +58,11 @@ export default {
 			return Array.from({ length: 8 }, (e, i) => luxon.Duration.fromObject({ days: i }));
 		}
 	},
+	methods: {
+		isToday(date) {
+			return date.hasSame(luxon.DateTime.now().setZone(this.timezone), 'day');
+		}
+	},
 	template: /* html */`
 	<div class="fhc-calendar-mode-month-view h-100">
 		<calendar-grid
@@ -76,7 +82,7 @@ export default {
 				<label-day
 					v-if="slot.event.orig == 'header'"
 					:date="slot.event.start"
-					:class="{ disabled: day.month != slot.event.start.month }"
+					:class="{ disabled: !day.hasSame(slot.event.start, 'month'), today: isToday(slot.event.start) }"
 				/>
 				<div v-else-if="slot.event.type == 'loading'" class="placeholder-glow opacity-50">
 					<span class="placeholder w-100 fs-1" />

public/js/components/Calendar/Mode/Week/View.js

@@ -12,7 +12,8 @@ export default {
 		LabelTime
 	},
 	inject: {
-		timeGrid: "timeGrid"
+		timeGrid: "timeGrid",
+		timezone: "timezone"
 	},
 	props: {
 		day: {
@@ -43,6 +44,11 @@ export default {
 			}
 		}
 	},
+	methods: {
+		isToday(date) {
+			return date.hasSame(luxon.DateTime.now().setZone(this.timezone), 'day');
+		}
+	},
 	template: /* html */`
 	<div class="fhc-calendar-mode-week-view h-100">
 		<calendar-grid
@@ -54,13 +60,15 @@ export default {
 			all-day-events
 		>
 			<template #main-header="{ date }">
-				<label-dow
-					v-bind="{ date }"
-					@cal-click="evt => evt.detail.source = 'day'"
-				/>
-				<label-day
-					v-bind="{ date }"
-				/>
+				<div :class="{ today: isToday(date) }">
+					<label-dow
+						v-bind="{ date }"
+						@cal-click="evt => evt.detail.source = 'day'"
+					/>
+					<label-day
+						v-bind="{ date }"
+					/>
+				</div>
 			</template>
 			<template #part-header="{ part }">
 				<label-time v-bind="{ part }" />