#9 Highlight Current Day ignoring Selected Day

src/components/calendar.tsx

@@ -87,6 +87,16 @@ export default function MyCalendar(params: { plugin: OZCalendarPlugin }) {
 		return null;
 	};
 
+	const customTileClass = ({ activeStartDate, date, view }: CalendarTileProperties) => {
+		// Assign a custom class in case the day is the current day
+		let today = new Date();
+		return date.getFullYear() === today.getFullYear() &&
+			date.getMonth() === today.getMonth() &&
+			date.getDate() === today.getDate()
+			? 'oz-calendar-plugin-today'
+			: '';
+	};
+
 	const fixedCalendarClass = plugin.settings.fixedCalendar ? 'fixed' : '';
 
 	return (
@@ -98,6 +108,7 @@ export default function MyCalendar(params: { plugin: OZCalendarPlugin }) {
 				minDetail="month"
 				view="month"
 				tileContent={customTileContent}
+				tileClassName={customTileClass}
 				calendarType={plugin.settings.calendarType}
 				showFixedNumberOfWeeks={plugin.settings.fixedCalendar}
 				activeStartDate={activeStartDate}

styles.css

@@ -18,6 +18,13 @@ settings:
         type: variable-color
         format: hex
         default: '#'
+    -
+        id: oz-calendar-current-day-color
+        title: Current Day (Today) Text Color
+        description: Set the color of the current day in the month view
+        type: variable-color
+        format: hex
+        default: '#'
     -
         id: oz-calendar-selected-day-background
         title: Selected Day Background Color
@@ -40,6 +47,7 @@ settings:
 	--oz-calendar-selected-daycolor: var(--text-normal);
 	--oz-calendar-selected-day-background: var(--interactive-accent);
 	--oz-calendar-header-date-color: var(--interactive-accent);
+	--oz-calendar-current-day-color: #74dd58;
 }
 
 .oz-cal-coffee-div,
@@ -229,6 +237,11 @@ settings:
 	margin-right: 3px;
 }
 
+.oz-calendar-plugin-today abbr {
+	color: var(--oz-calendar-current-day-color);
+	font-weight: bold;
+}
+
 /* START - Fixed Calendar Except Note List - Scroll */
 
 .oz-calendar-plugin-view.fixed {