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

src/app/components/calendar-settings/calendar-settings.html

@@ -1,4 +1,4 @@
 <button matFab extended (click)="openDialog()">
 	<mat-icon>settings</mat-icon>
-	Calendar Settings
+	{{ tr().settings.title }}
 </button>

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

@@ -1,9 +1,10 @@
-import { Component } from '@angular/core';
+import { Component, inject } from '@angular/core';
 import { MatButtonModule } from '@angular/material/button';
 import { MatDialog } from '@angular/material/dialog';
 import { MatIconModule } from '@angular/material/icon';
 import { CalendarSettingsDialog } from '../dialog/calendar-settings-dialog/calendar-settings-dialog';
 import { MatDividerModule } from '@angular/material/divider';
+import { TranslationService } from '../../services/translation-service';
 
 @Component({
 	selector: 'app-calendar-settings',
@@ -12,6 +13,12 @@ import { MatDividerModule } from '@angular/material/divider';
 	styleUrl: './calendar-settings.scss',
 })
 export class CalendarSettings {
+	private readonly translationService = inject(TranslationService);
+
+	get tr() {
+		return this.translationService.tr;
+	}
+
 	constructor(private dialog: MatDialog) {}
 
 	openDialog() {