diff --git a/src/components/calendar.tsx b/src/components/calendar.tsx index 0c0e20e..695219f 100644 --- a/src/components/calendar.tsx +++ b/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} diff --git a/styles.css b/styles.css index 3a1b74c..961bbc3 100644 --- a/styles.css +++ b/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 {