From 783e2cf233dc3954ea5e532d9b336507562134dd Mon Sep 17 00:00:00 2001
From: James Geiger <james-geiger@users.noreply.github.com>
Date: Thu, 10 Jul 2025 11:55:38 -0500
Subject: [PATCH] Implement localization in calendar component (#386)

* Updates calendar component to use localized months/weekdays

Leverages svelte-i18n date formatter to localize the month name of the calendar.

For weekdays, to remain consistent with the two-letter format, implement custom i18n locale keys.

* Adds locale translations for weekday abbreviations in en and de
---
 web/src/lib/components/base/calendar.svelte | 24 +++++----------------
 web/src/lib/i18n/index.ts                   |  7 ++++++
 web/src/lib/i18n/locales/de.json            | 13 ++++++++++-
 web/src/lib/i18n/locales/en.json            | 13 ++++++++++-
 4 files changed, 36 insertions(+), 21 deletions(-)

diff --git a/web/src/lib/components/base/calendar.svelte b/web/src/lib/components/base/calendar.svelte
index 3af2120d..fd886e59 100644
--- a/web/src/lib/components/base/calendar.svelte
+++ b/web/src/lib/components/base/calendar.svelte
@@ -1,7 +1,8 @@
 <script lang="ts">
 	import type { SummitLog } from "$lib/models/summit_log";
+    import { range } from "$lib/util/array_util";
 	import { isSameDay, isToday } from "../../util/date_util";
-	import { _ } from "svelte-i18n";
+	import { _, date } from "svelte-i18n";
 	interface Props {
 		logs?: SummitLog[];
 		colorMap?: Record<string, string>;
@@ -18,21 +19,6 @@
 		onclick,
 	}: Props = $props();
 
-	const weekdays = ["Mo", "Di", "Mi", "Do", "Fr", "Sa", "So"];
-	const months = [
-		"Januar",
-		"Februar",
-		"März",
-		"April",
-		"Mai",
-		"Juni",
-		"Juli",
-		"August",
-		"September",
-		"Oktober",
-		"November",
-		"Dezember",
-	];
 	const today = new Date();
 	let currentMonth = $state(today.getMonth());
 	let currentYear = $state(today.getFullYear());
@@ -126,7 +112,7 @@
 
 <div class="calendar-header w-full flex items-center justify-between mb-6">
 	<div class="calendar-month-year basis-full">
-		<span class="text-lg">{months[currentMonth]}</span>
+		<span class="text-lg">{$date(new Date(currentYear, currentMonth, 1, 0, 0), { format: 'monthName' } )}</span>
 		<span>{currentYear}</span>
 	</div>
 	<button
@@ -140,11 +126,11 @@
 </div>
 <div class="calendar-body">
 	<div class="grid grid-cols-7">
-		{#each weekdays as weekday, i}
+		{#each range(7), i}
 			<div
 				class="calendar-weekday flex items-center justify-center h-10 text-gray-500"
 			>
-				{weekday}
+				{$_("calendar.weekdays." + i)}
 			</div>
 		{/each}
 	</div>
diff --git a/web/src/lib/i18n/index.ts b/web/src/lib/i18n/index.ts
index f19da181..d87cf327 100644
--- a/web/src/lib/i18n/index.ts
+++ b/web/src/lib/i18n/index.ts
@@ -17,4 +17,11 @@ register('zh', () => import('./locales/zh.json'))
 init({
     fallbackLocale: defaultLocale,
     initialLocale: browser ? getPb().authStore.record?.language ?? window.navigator.language : defaultLocale,
+    formats: {
+        date: {
+            monthName: { month: 'long' }
+        },
+        number: {},
+        time: {}
+    },
 })
\ No newline at end of file
diff --git a/web/src/lib/i18n/locales/de.json b/web/src/lib/i18n/locales/de.json
index 0b83c25b..b65a1e65 100644
--- a/web/src/lib/i18n/locales/de.json
+++ b/web/src/lib/i18n/locales/de.json
@@ -361,5 +361,16 @@
   "welcome_to": "Willkommen bei",
   "width": "Breite",
   "wrong-username-or-password": "Falscher Nutzername oder falsches Passwort",
-  "you-can": "Du kannst"
+  "you-can": "Du kannst",
+  "calendar": {
+    "weekdays": {
+      "0": "Mo",
+      "1": "Di",
+      "2": "Mi",
+      "3": "Do",
+      "4": "Fr",
+      "5": "Sa",
+      "6": "So"
+    }
+  }
 }
diff --git a/web/src/lib/i18n/locales/en.json b/web/src/lib/i18n/locales/en.json
index 68c37ea0..2b6858b0 100644
--- a/web/src/lib/i18n/locales/en.json
+++ b/web/src/lib/i18n/locales/en.json
@@ -361,5 +361,16 @@
   "welcome_to": "Welcome to",
   "width": "Width",
   "wrong-username-or-password": "Wrong username or password",
-  "you-can": "You can"
+  "you-can": "You can",
+  "calendar": {
+    "weekdays": {
+      "0": "Mo",
+      "1": "Tu",
+      "2": "We",
+      "3": "Th",
+      "4": "Fr",
+      "5": "Sa",
+      "6": "Su"
+    }
+  }
 }