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

@@ -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>

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: {}
+    },
 })

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"
+    }
+  }
 }

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"
+    }
+  }
 }