feat: implement internationalization with multi-language support and runtime language selection

src/app/components/calendar-month/calendar-month.ts

@@ -1,8 +1,9 @@
 import { Component, Input, OnInit, inject } from '@angular/core';
-import { CalendarService, Month, monthNames, SelectedDates } from '../../services/calendar-service';
+import { CalendarService, Month, SelectedDates } from '../../services/calendar-service';
 import { MatTooltip } from '@angular/material/tooltip';
 import { CalendarSettingsService } from '../../services/calendar-settings-service';
 import { DateCacheService } from '../../services/date-cache.service';
+import { TranslationService } from '../../services/translation-service';
 
 @Component({
 	selector: 'app-calendar-month',
@@ -13,6 +14,7 @@ import { DateCacheService } from '../../services/date-cache.service';
 export class CalendarMonth implements OnInit {
 	protected calendarSettingsService = inject(CalendarSettingsService);
 	private dateCache = inject(DateCacheService);
+	protected translationService = inject(TranslationService);
 
 	@Input({ required: true })
 	monthIndex!: number;
@@ -20,6 +22,10 @@ export class CalendarMonth implements OnInit {
 	@Input({ required: true })
 	year!: number;
 
+	get tr() {
+		return this.translationService.tr;
+	}
+
 	// Use DateCacheService instead of creating Date objects
 	getNow(): Date {
 		return this.dateCache.getNow();
@@ -33,7 +39,24 @@ export class CalendarMonth implements OnInit {
 	selectedDates!: SelectedDates;
 
 	getMonthName(): string {
-		return monthNames[this.monthIndex];
+		const locale = this.translationService.locale();
+		const tempDate = new Date(this.year, this.monthIndex, 1);
+		const monthName = tempDate.toLocaleString(locale, { month: 'long' });
+		return monthName.charAt(0).toUpperCase() + monthName.slice(1);
+	}
+
+	getWeekdayLetters(): string[] {
+		// January 5, 2026 is a Monday
+		const baseDate = new Date(2026, 0, 5);
+		const locale = this.translationService.locale();
+		const letters: string[] = [];
+		for (let i = 0; i < 7; i++) {
+			const date = new Date(baseDate);
+			date.setDate(baseDate.getDate() + i);
+			const letter = date.toLocaleString(locale, { weekday: 'narrow' });
+			letters.push(letter.toUpperCase());
+		}
+		return letters;
 	}
 
 	getWeekNumber(week: (Date | null)[]): number | null {
@@ -45,6 +68,13 @@ export class CalendarMonth implements OnInit {
 		return null;
 	}
 
+	getDayTooltip(day: Date): string | null {
+		const tooltips = this.selectedDates.datesSelected
+			.filter((dateSelected) => dateSelected.isSelected(day) && dateSelected.type)
+			.map((dateSelected) => this.translationService.getDayTypeLabel(dateSelected.type!));
+		return tooltips.length > 0 ? tooltips.join(' + ') : null;
+	}
+
 	ngOnInit(): void {
 		this.weeksInAMonth = CalendarService.weeksInMonth(this.monthIndex, this.year);
 	}