translate calendar elements from app init

src/app/app.component.ts

@@ -13,6 +13,8 @@ import { ShortcutEventOutput, ShortcutInput } from 'ng-keyboard-shortcuts';
 import { PollService } from './core/services/poll.service';
 import { Poll } from './core/models/poll.model';
 import { PollDTO } from './core/models/poll.DTO.model';
+import { PrimeNGConfig } from 'primeng/api';
+import { Language } from './core/enums/language.enum';
 
 @Component({
 	selector: 'app-root',
@@ -37,6 +39,7 @@ export class AppComponent implements OnInit, OnDestroy, AfterViewInit {
 		private titleService: Title,
 		private themeService: ThemeService,
 		private pollService: PollService,
+		private config: PrimeNGConfig,
 		private languageService: LanguageService // private mockingService: MockingService
 	) {}
 
@@ -51,6 +54,10 @@ export class AppComponent implements OnInit, OnDestroy, AfterViewInit {
 	}
 
 	ngOnInit(): void {
+		this.languageService.getPrimeNgStrings().subscribe((resp) => {
+			this.config.setTranslation(resp);
+		});
+
 		this.printpath('', this.router.config);
 		this.router.events.subscribe((evt) => {
 			if (!(evt instanceof NavigationEnd)) {

src/app/core/services/language.service.ts

@@ -37,6 +37,10 @@ export class LanguageService {
 		this.setLanguageOnInit();
 	}
 
+	public getPrimeNgStrings() {
+		return this.translate.get('calendar_widget');
+	}
+
 	private setLanguageOnInit(): void {
 		// set language from storage
 		if (!this.translate.currentLang) {

src/app/features/administration/form/steps/step-three/step-three.component.html

@@ -74,12 +74,17 @@
 				selectionMode="multiple"
 				inputId="multiple"
 				showButtonBar="true"
+				[locale]="'calendar_widget' | translate"
 				[inline]="true"
 				[showWeek]="true"
 			></p-calendar>
 		</div>
+		<div class="day-time">
+			<app-time-list></app-time-list>
+		</div>
 		<div class="debug">
 			<pre>{{ pollService.calendar | json }}</pre>
+			<pre>{{ 'calendar_widget' | translate }}</pre>
 		</div>
 	</div>
 </div>

src/assets/i18n/FR.json

@@ -576,8 +576,7 @@
 		"the-administrator-locked-this-poll-votes-and-comments-are-frozen-it-is-no-longer-possible-to-partici": "L'administrateur·rice a verrouillé ce sondage. Les votes et commentaires sont gelés, il n'est plus possible de participer",
 		"the-poll-has-expired-it-will-soon-be-deleted": "Le sondage a expiré, il sera bientôt supprimé.",
 		"your-vote-has-been-saved-but-please-note-you-need-to-keep-this-personalised-link-to-be-able-to-edit-": "Votre vote a bien été pris en compte, mais faites attention : ce sondage n'autorise l'édition de votre vote qu'avec le lien personnalisé suivant ; conservez-le précieusement !"
-	}
-,
+	},
 	"LANGUAGES": {
 		"DE": "Allemand",
 		"FR": "Français",
@@ -620,11 +619,61 @@
 		"choose": "Choose",
 		"upload": "Upload",
 		"cancel": "Cancel",
-	"dayNames": ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"],
-	"dayNamesShort": ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"],
-	"dayNamesMin": ["Su","Mo","Tu","We","Th","Fr","Sa"],
-	"monthNames": ["Janvier","Février","Mars","Avril","Mai","Juin","Juillet","Août","Septembre","Octobre","Novembre","Décembre"],
-	"monthNamesShort": ["Jan", "Feb", "Mar", "Apr", "May", "Jun","Jul", "Aug", "Sep", "Oct", "Nov", "Dec"],
+		"dayNames": [
+			"Sunday",
+			"Monday",
+			"Tuesday",
+			"Wednesday",
+			"Thursday",
+			"Friday",
+			"Saturday"
+		],
+		"dayNamesShort": [
+			"Sun",
+			"Mon",
+			"Tue",
+			"Wed",
+			"Thu",
+			"Fri",
+			"Sat"
+		],
+		"dayNamesMin": [
+			"Su",
+			"Mo",
+			"Tu",
+			"We",
+			"Th",
+			"Fr",
+			"Sa"
+		],
+		"monthNames": [
+			"Janvier",
+			"Février",
+			"Mars",
+			"Avril",
+			"Mai",
+			"Juin",
+			"Juillet",
+			"Août",
+			"Septembre",
+			"Octobre",
+			"Novembre",
+			"Décembre"
+		],
+		"monthNamesShort": [
+			"Jan",
+			"Feb",
+			"Mar",
+			"Apr",
+			"May",
+			"Jun",
+			"Jul",
+			"Aug",
+			"Sep",
+			"Oct",
+			"Nov",
+			"Dec"
+		],
 		"today": "Aujourd'hui",
 		"weekHeader": "Wk"
 	}

src/styles/partials/_forms.scss

@@ -241,6 +241,12 @@ mat-checkbox {
 	border: solix 1px $logo_color;
 	margin: 1em auto;
 
+	.pi-chevron-left:after {
+		content: '<';
+	}
+	.pi-chevron-right:after {
+		content: '>';
+	}
 	.p-datepicker-month {
 		margin-right: 1em;
 	}