[feature] implement short syntax for clock week (#3775)

Hello and thank you for wanting to contribute to the MagicMirror²
project!

**Please make sure that you have followed these 4 rules before
submitting your Pull Request:**

> 1. Base your pull requests against the `develop` branch.
> 2. Include these infos in the description: implement short syntax for
clock week
>
> - Does the pull request solve a **related** issue? n/a
> - If so, can you reference the issue like this `Fixes
#<issue_number>`?
> - What does the pull request accomplish? Use a list if needed.
> - If it includes major visual changes please add screenshots.
>
> 3. Please run `npm run lint:prettier` before submitting so that
>    style issues are fixed.
> 4. Don't forget to add an entry about your changes to
>    the CHANGELOG.md file.


![image](https://github.com/user-attachments/assets/e6c16981-de0a-45be-b553-7a7a67977d55)


![image](https://github.com/user-attachments/assets/ebae32e7-e6fb-41aa-971a-908880acc7b9)


**Note**: Sometimes the development moves very fast. It is highly
recommended that you update your branch of `develop` before creating a
pull request to send us your changes. This makes everyone's lives
easier (including yours) and helps us out on the development team.

Thanks again and have a nice day!

---------

Co-authored-by: BugHaver <43462320+lsaadeh@users.noreply.github.com>

CHANGELOG.md

@@ -15,6 +15,7 @@ planned for 2025-07-01
 
 - [config] Allow to change module order for final renderer (or dynamically with CSS): Feature `order` in config (#3762)
 - [clock] Added option 'disableNextEvent' to hide next sun event (#3769)
+- [clock] Implement short syntax for clock week (#3775)
 
 ### Changed
 

modules/default/clock/clock.js

@@ -14,7 +14,7 @@ Module.register("clock", {
 		clockBold: false,
 		showDate: true,
 		showTime: true,
-		showWeek: false,
+		showWeek: false, // options: true, false, 'short'
 		dateFormat: "dddd, LL",
 		sendNotifications: false,
 
@@ -224,7 +224,12 @@ Module.register("clock", {
 		}
 
 		if (this.config.showWeek) {
-			weekWrapper.innerHTML = this.translate("WEEK", { weekNumber: now.week() });
+			if (this.config.showWeek === "short") {
+				weekWrapper.innerHTML = this.translate("WEEK_SHORT", { weekNumber: now.week() });
+			} else {
+				weekWrapper.innerHTML = this.translate("WEEK", { weekNumber: now.week() });
+			}
+
 			digitalWrapper.appendChild(weekWrapper);
 		}
 

tests/configs/modules/clock/clock_showWeek_short.js

@@ -0,0 +1,20 @@
+let config = {
+	address: "0.0.0.0",
+	ipWhitelist: [],
+	timeFormat: 12,
+
+	modules: [
+		{
+			module: "clock",
+			position: "middle_center",
+			config: {
+				showWeek: "short"
+			}
+		}
+	]
+};
+
+/*************** DO NOT EDIT THE LINE BELOW ***************/
+if (typeof module !== "undefined") {
+	module.exports = config;
+}

tests/configs/modules/clock/de/clock_showWeek.js

@@ -0,0 +1,21 @@
+let config = {
+	address: "0.0.0.0",
+	ipWhitelist: [],
+	language: "de",
+	timeFormat: 12,
+
+	modules: [
+		{
+			module: "clock",
+			position: "middle_center",
+			config: {
+				showWeek: true
+			}
+		}
+	]
+};
+
+/*************** DO NOT EDIT THE LINE BELOW ***************/
+if (typeof module !== "undefined") {
+	module.exports = config;
+}

tests/configs/modules/clock/de/clock_showWeek_short.js

@@ -0,0 +1,21 @@
+let config = {
+	address: "0.0.0.0",
+	ipWhitelist: [],
+	language: "de",
+	timeFormat: 12,
+
+	modules: [
+		{
+			module: "clock",
+			position: "middle_center",
+			config: {
+				showWeek: "short"
+			}
+		}
+	]
+};
+
+/*************** DO NOT EDIT THE LINE BELOW ***************/
+if (typeof module !== "undefined") {
+	module.exports = config;
+}

tests/configs/modules/clock/es/clock_showWeek_short.js

@@ -0,0 +1,21 @@
+let config = {
+	address: "0.0.0.0",
+	ipWhitelist: [],
+	language: "es",
+	timeFormat: 12,
+
+	modules: [
+		{
+			module: "clock",
+			position: "middle_center",
+			config: {
+				showWeek: "short"
+			}
+		}
+	]
+};
+
+/*************** DO NOT EDIT THE LINE BELOW ***************/
+if (typeof module !== "undefined") {
+	module.exports = config;
+}

tests/e2e/modules/clock_de_spec.js

@@ -0,0 +1,31 @@
+const helpers = require("../helpers/global-setup");
+
+describe("Clock set to german language module", () => {
+	afterAll(async () => {
+		await helpers.stopApplication();
+	});
+
+	describe("with showWeek config enabled", () => {
+		beforeAll(async () => {
+			await helpers.startApplication("tests/configs/modules/clock/de/clock_showWeek.js");
+			await helpers.getDocument();
+		});
+
+		it("shows week with correct format", async () => {
+			const weekRegex = /^[0-9]{1,2}. Kalenderwoche$/;
+			await expect(helpers.testMatch(".clock .week", weekRegex)).resolves.toBe(true);
+		});
+	});
+
+	describe("with showWeek short config enabled", () => {
+		beforeAll(async () => {
+			await helpers.startApplication("tests/configs/modules/clock/de/clock_showWeek_short.js");
+			await helpers.getDocument();
+		});
+
+		it("shows week with correct format", async () => {
+			const weekRegex = /^[0-9]{1,2}KW$/;
+			await expect(helpers.testMatch(".clock .week", weekRegex)).resolves.toBe(true);
+		});
+	});
+});

tests/e2e/modules/clock_es_spec.js

@@ -62,4 +62,16 @@ describe("Clock set to spanish language module", () => {
 			await expect(helpers.testMatch(".clock .week", weekRegex)).resolves.toBe(true);
 		});
 	});
+
+	describe("with showWeek short config enabled", () => {
+		beforeAll(async () => {
+			await helpers.startApplication("tests/configs/modules/clock/es/clock_showWeek_short.js");
+			await helpers.getDocument();
+		});
+
+		it("shows week with correct format", async () => {
+			const weekRegex = /^S[0-9]{1,2}$/;
+			await expect(helpers.testMatch(".clock .week", weekRegex)).resolves.toBe(true);
+		});
+	});
 });

tests/e2e/modules/clock_spec.js

@@ -138,6 +138,26 @@ describe("Clock module", () => {
 		});
 	});
 
+	describe("with showWeek short config enabled", () => {
+		beforeAll(async () => {
+			await helpers.startApplication("tests/configs/modules/clock/clock_showWeek_short.js");
+			await helpers.getDocument();
+		});
+
+		it("should show the week in the correct format", async () => {
+			const weekRegex = /^W[0-9]{1,2}$/;
+			await expect(helpers.testMatch(".clock .week", weekRegex)).resolves.toBe(true);
+		});
+
+		it("should show the week with the correct number of week of year", async () => {
+			const currentWeekNumber = moment().week();
+			const weekToShow = `W${currentWeekNumber}`;
+			const elem = await helpers.waitForElement(".clock .week");
+			expect(elem).not.toBeNull();
+			expect(elem.textContent).toBe(weekToShow);
+		});
+	});
+
 	describe("with analog clock face enabled", () => {
 		beforeAll(async () => {
 			await helpers.startApplication("tests/configs/modules/clock/clock_analog.js");

translations/de.json

@@ -9,6 +9,7 @@
 	"RUNNING": "noch",
 	"EMPTY": "Keine Termine.",
 	"WEEK": "{weekNumber}. Kalenderwoche",
+	"WEEK_SHORT": "{weekNumber}KW",
 
 	"N": "N",
 	"NNE": "NNO",

translations/en.json

@@ -7,6 +7,7 @@
 	"RUNNING": "Ends in",
 	"EMPTY": "No upcoming events.",
 	"WEEK": "Week {weekNumber}",
+	"WEEK_SHORT": "W{weekNumber}",
 
 	"N": "N",
 	"NNE": "NNE",

translations/es.json

@@ -9,6 +9,7 @@
 	"RUNNING": "Termina en",
 	"EMPTY": "No hay eventos programados.",
 	"WEEK": "Semana {weekNumber}",
+	"WEEK_SHORT": "S{weekNumber}",
 
 	"N": "N",
 	"NNE": "NNE",

translations/fr.json

@@ -9,6 +9,7 @@
 	"RUNNING": "Se termine dans",
 	"EMPTY": "Aucun RDV à venir.",
 	"WEEK": "Semaine {weekNumber}",
+	"WEEK_SHORT": "S{weekNumber}",
 
 	"N": "N",
 	"NNE": "NNE",