#11 Week Numbers

src/components/calendar.tsx

@@ -105,6 +105,7 @@ export default function MyCalendar(params: { plugin: OZCalendarPlugin }) {
 				value={selectedDay}
 				maxDetail="month"
 				minDetail="month"
+				showWeekNumbers={plugin.settings.showWeekNumbers}
 				view="month"
 				tileContent={customTileContent}
 				tileClassName={customTileClass}

src/settings/settings.ts

@@ -25,6 +25,7 @@ export interface OZCalendarPluginSettings {
 	newNoteDate: NewNoteDateType;
 	newNoteCancelButtonReverse: boolean;
 	fileNameOverflowBehaviour: OverflowBehaviour;
+	showWeekNumbers: boolean;
 }
 
 export const DEFAULT_SETTINGS: OZCalendarPluginSettings = {
@@ -43,6 +44,7 @@ export const DEFAULT_SETTINGS: OZCalendarPluginSettings = {
 	newNoteDate: 'current-date',
 	newNoteCancelButtonReverse: false,
 	fileNameOverflowBehaviour: 'hide',
+	showWeekNumbers: false,
 };
 
 export class OZCalendarPluginSettingsTab extends PluginSettingTab {
@@ -114,6 +116,17 @@ export class OZCalendarPluginSettingsTab extends PluginSettingTab {
 					});
 			});
 
+		new Setting(containerEl)
+			.setName('Show Week Numbers')
+			.setDesc('Enable if you want to have week numbers within the calendar view')
+			.addToggle((toggle) => {
+				toggle.setValue(this.plugin.settings.showWeekNumbers).onChange((newValue) => {
+					this.plugin.settings.showWeekNumbers = newValue;
+					this.plugin.saveSettings();
+					this.plugin.calendarForceUpdate();
+				});
+			});
+
 		new Setting(containerEl)
 			.setName('Open File Behaviour')
 			.setDesc('Select the behaviour you want to have when you click on file name in the calendar view')

styles.css

@@ -39,6 +39,13 @@ settings:
         type: variable-color
         format: hex
         default: '#'
+    -
+        id: oz-calendar-weeknr-date-color
+        title: Week Number Text Color
+        description: Set the color of week numbers, defaulted to the interactive-accent
+        type: variable-color
+        format: hex
+        default: '#'
 */
 
 .theme-light,
@@ -48,6 +55,7 @@ settings:
 	--oz-calendar-selected-day-background: var(--interactive-accent);
 	--oz-calendar-header-date-color: var(--interactive-accent);
 	--oz-calendar-current-day-color: #74dd58;
+	--oz-calendar-weeknr-date-color: var(--color-accent-2);
 }
 
 .oz-cal-coffee-div,
@@ -270,6 +278,14 @@ settings:
 	vertical-align: top;
 }
 
+.oz-calendar-plugin-view .react-calendar__month-view__weekNumbers {
+	display: block !important;
+	color: var(--oz-calendar-weeknr-date-color);
+	flex-basis: auto !important;
+	background-color: var(--background-modifier-cover);
+	font-size: var(--nav-item-size);
+}
+
 /*  END - Fixed Calendar */
 
 .oz-calendar-modal-inputel {