Added german translations

package.json

@@ -35,6 +35,7 @@
 		"beercss": "^3.8.0",
 		"ics": "^3.8.1",
 		"moment": "^2.30.1",
+		"sveltekit-i18n": "^2.4.2",
 		"validator": "^13.12.0"
 	}
 }

src/lib/dbdata.ts

@@ -5,6 +5,7 @@ export interface Appointment {
     description: string;
     dueDate: Date;
     place: string;
+    participants: number;
     duration: number;
     times: AppointmentDateTimes[];
     inputs: AppointmentInputs[];

src/lib/lang/de.json

@@ -0,0 +1,56 @@
+{
+    "app-title": "Booker",
+    "appointments": "Termine",
+    "bookings": "Buchungen",
+    "create-appointment": "Termin ertellen",
+    "share": "Teilen",
+    "lock": "Sperren",
+    "locked": "Gesperrt",
+    "edit": "Bearbeiten",
+    "delete": "Loeschen",
+    "participants": "Teilnehmer",
+    "topic": "Thema",
+    "location": "Ort",
+    "description": "Beschreibung",
+    "due-date": "Frist",
+    "participant-count": "Anzahl der Teilnehmer",
+    "week": "Woche",
+    "duration": "Dauer",
+    "monday": "Montag",
+    "tuesday": "Dienstag",
+    "wednesday": "Mittwoch",
+    "thursday": "Donnerstag",
+    "friday": "Freitag",
+    "saturday": "Samstag",
+    "sunday": "Sonntag",
+    "inputs": "Eingaben",
+    "input-field": "Eingabefeld",
+    "input-type": "Eingabeart",
+    "text-input": "Texteingabe",
+    "email": "E-Mail",
+    "phone-number": "Telefonnummer",
+    "save": "Speichern",
+    "minutes": "Minuten",
+    "hour": "Stunde",
+    "date": "Datum",
+    "time": "Zeit",
+    "sucess-creator-save": "Erfolgreich gespeichert",
+    "sucess-booking": "Terminbuchung erfolgreich",
+    "error-booking": "Terminbuchung ungueltig",
+    "error-server": "Fehler",
+    "error-parameters": "Nicht alle Eingaben ausgefuellt",
+    "error-invalid-parameters": "Nicht alle Eingaben sind gueltig",
+    "error-invalid-credentials": "Anmeldedaten ungueltig",
+    "410": "Registierung fuer diesen Termin ist nicht mehr verfuegbar",
+    "404": "Termin wurde nicht gefunden",
+    "register": "Registieren",
+    "login": "Anmelden",
+    "auth": "Authentifizierung",
+    "password": "Passwort",
+    "book": "Buchen",
+    "cancel": "Abbrechen",
+    "week-short": "KW",
+    "times": "Zeiten",
+    "actions": "Aktionen",
+    "action-confirm": "Bitte noch zweimal druecken zum Bestaetigen"
+}

src/lib/lang/en.json

@@ -0,0 +1,5 @@
+{
+    "appointments": "Appointments",
+    "bookings": "Bookings",
+    "create-appointment": "Create appointment"
+}

src/lib/modules/AppointmentRegisterInputs.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
 	import { api_host } from "$lib";
 	import type { AppointmentInputs, DynamicJson } from "$lib/dbdata";
+	import { t } from "$lib/translations";
     import validator from "validator";
 
     export let dynamicInputs: DynamicJson[] = [];
@@ -46,11 +47,11 @@
 
             if (response.status === 200) {
                 errorMessage = "";
-                successMessage = "successfully booked";
+                successMessage = $t("common.sucess-booking");
                 booked = true;
             } else {
                 successMessage = "";
-                errorMessage = "invalid booking";
+                errorMessage = $t("common.error-booking");
             }
 
             setTimeout(() => {
@@ -66,13 +67,13 @@
         let customInputs: DynamicJson[] = [];
         errorMessage = "";
         if (Object.keys(inputValues).length != dynamicInputs.length) {
-            errorMessage = "Not all inputs filled";
+            errorMessage = $t("common.error-parameters");
             return;
         }
         for (const dInput of dynamicInputs) {
             if (inputValues[dInput.name]) {
                 if (!validateInput(inputValues[dInput.name], dInput.type)) {
-                    errorMessage = "Invalid inputs";
+                    errorMessage = $t("common.error-invalid-parameters");
                     return;
                 }
                 customInputs = [...customInputs, {name: dInput.name, value: inputValues[dInput.name]}];
@@ -96,6 +97,6 @@
 {/each}
 
 <nav class="right-align">
-    <button on:click={submit}>Submit</button>
-    <button class="border" on:click={closeModal}>Close</button>
+    <button on:click={submit}>{$t("common.book")}</button>
+    <button class="border" on:click={closeModal}>{$t("common.cancel")}</button>
 </nav>

src/lib/modules/Auth.svelte

@@ -2,6 +2,7 @@
 	import { goto } from "$app/navigation";
 	import { api_host, authToken } from "$lib";
 	import type { AuthTokenResponse } from "$lib/dbdata";
+	import { t } from "$lib/translations";
 
 
     let email: string = "";
@@ -12,7 +13,7 @@
         errorMessage = "";
 
         if (!email || !password) {
-            errorMessage = "not all parameters provided"
+            errorMessage = $t("common.error-parameters");
             return;
         }
         try {
@@ -33,7 +34,7 @@
                 $authToken = data.token;
                 goto("/user/events");
             } else {
-                errorMessage = "invalid credentials";
+                errorMessage = $t("common.error-invalid-credentials");
             }
         } catch (error) {
             console.log(error);
@@ -54,20 +55,20 @@
 <article class="large no-padding center center-align middle-align auto-margin">
     <fieldset>
     <div class="padding top-margin">
-        <h5>Anmeldung</h5>
+        <h5>{$t("common.auth")}</h5>
         <div class="field border">
-            <h4 class="large-text left-align">Email</h4>
-            <input id="email" placeholder="Email" bind:value={email} type="email" />
+            <h4 class="large-text left-align">{$t("common.email")}</h4>
+            <input id="email" placeholder={$t("common.email")} bind:value={email} type="email" />
         </div>
 
         <div class="field suffix border">
-            <h4 class="large-text left-align">Password</h4>
-            <input id="password" placeholder="Password" bind:value={password} type="password" />
+            <h4 class="large-text left-align">{$t("common.password")}</h4>
+            <input id="password" placeholder={$t("common.password")} bind:value={password} type="password" />
         </div>
 
         <div class="grid">
-            <button on:click={login} class="s6">Anmelden</button>
-            <button on:click={register} class="s6 yellow">Registrierung</button>
+            <button on:click={login} class="s6">{$t("common.login")}</button>
+            <button on:click={register} class="s6 orange">{$t("common.register")}</button>
         </div>
         {#if errorMessage} 
             <h5 class="large-text error-text">{errorMessage}</h5>

src/lib/modules/CreatorBaseInputs.svelte

@@ -1,8 +1,10 @@
 <script lang="ts">
 	import type { WeekSelection } from "$lib/dbdata";
+	import { t } from "$lib/translations";
 
     export let topic: string;
     export let location: string;
+    export let participants: number;
     export let selectedWeek: number;
     export let duration: number;
     export let description: string;
@@ -15,41 +17,46 @@
 </script>
 
 <div class="field border">
-    <input bind:value={topic} id="topic" placeholder="Thema">
-    <label for="topic">Thema</label>
+    <input bind:value={topic} id="topic" placeholder={$t("common.topic")}>
+    <label for="topic">{$t("common.topic")}</label>
 </div>
 
 <div class="field textarea border">
-    <textarea id="description" bind:value={description} placeholder="Beschreibung"></textarea>
-    <label for="description">Beschreibung</label>
-  </div>  
+    <textarea id="description" bind:value={description} placeholder={$t("common.description")}></textarea>
+    <label for="description">{$t("common.description")}</label>
+</div>  
+
+<div class="field border">
+    <input type="number" id="participants" bind:value={participants} placeholder={$t("common.participant-count")}>
+    <label for="participants">{$t("common.participant-count")}</label>
+</div>  
 
 <div class="field border">
     <input bind:value={dueDate} type="date" id="due-date" placeholder="">
-    <label for="topic">Frist</label>
+    <label for="topic">{$t("common.due-date")}</label>
 </div>
 
 <div class="field border">
-    <input bind:value={location} id="location" placeholder="Ort">
-    <label for="location">Ort</label>
+    <input bind:value={location} id="location" placeholder={$t("common.location")}>
+    <label for="location">{$t("common.location")}</label>
 </div>
 
 <div class="field label border">
     <select bind:value={selectedWeek} on:change={changeWeek} id="week">
         {#each weeks as currentWeek}
-            <option value={currentWeek.yearWeek}>{currentWeek.week} KW ({currentWeek.start.toLocaleDateString()} - {currentWeek.end.toLocaleDateString()})</option>
+            <option value={currentWeek.yearWeek}>{currentWeek.week} {$t("common.week-short")} ({currentWeek.start.toLocaleDateString()} - {currentWeek.end.toLocaleDateString()})</option>
         {/each}
     </select>
-    <label for="week">Woche</label>
+    <label for="week">{$t("common.week")}</label>
 </div>
 
 <div class="field border label">
     <select bind:value={duration} id="duration">
-        <option value={15}>15 Minuten</option>
-        <option value={20}>20 Minuten</option>
-        <option value={30}>30 Minuten</option>
-        <option value={45}>45 Minuten</option>
-        <option value={60}>1 Stunde</option>
+        <option value={15}>15 {$t("common.minutes")}</option>
+        <option value={20}>20 {$t("common.minutes")}</option>
+        <option value={30}>30 {$t("common.minutes")}</option>
+        <option value={45}>45 {$t("common.minutes")}</option>
+        <option value={60}>1 {$t("common.hour")}</option>
     </select>
-    <label for="duration">Dauer</label>
+    <label for="duration">{$t("common.duration")}</label>
 </div>

src/lib/modules/CreatorInputs.svelte

@@ -3,6 +3,7 @@
 	import { onMount } from 'svelte';
 	import AppointmentInfo from './AppointmentInfo.svelte';
 	import { getTimeSlots } from '$lib/funcs';
+	import { t } from '$lib/translations';
 
 	export let creatorInputs: AppointmentInputs[] = [{ name: '', type: 'text' }];
 
@@ -21,7 +22,6 @@
 	<legend>Eingaben</legend>
 	<button on:click={addInput} class="large circle tertiary">
 		<i>add</i>
-		<span>Neues Feld</span>
 	</button>
 	<div class="grid">
 		{#each creatorInputs as customInput, index}
@@ -29,19 +29,18 @@
 				<div class="row bottom-margin">
 					<div class="max field border">
 						<input bind:value={customInput.name} id="custom-input" />
-						<label for="custom-input">Eingabefeld</label>
+						<label for="custom-input">{$t("common.input-field")}</label>
 					</div>
 					<div class="max field border">
 						<select bind:value={customInput.type} id="custom-type">
-							<option value="text">Texteingabe</option>
-							<option value="email">E-Mail</option>
-							<option value="tel">Telefonnummer</option>
+							<option value="text">{$t("common.text-input")}</option>
+							<option value="email">{$t("common.email")}</option>
+							<option value="tel">{$t("common.phone-number")}</option>
 						</select>
-						<label for="custom-type">Eingabeart</label>
+						<label for="custom-type">{$t("common.input-type")}</label>
 					</div>
 					<button on:click={() => removeInput(index)} class="circle error medium m1">
 						<i>delete</i>
-						<span>Button</span>
 					</button>
 				</div>
 			</div>

src/lib/modules/DatePicker.svelte

@@ -50,7 +50,7 @@
 
 		// Add days of the month
 		for (let day = 1; day <= daysInMonth; day++) {
-			days.push({ day, isActive: false, isAvailable: isDayAvailable(year, month, day) }); // Example: Make day 20 active
+			days.push({ day, isActive: false, isAvailable: isDayAvailable(year, month + 1, day) }); // Example: Make day 20 active
 		}
 	};
 

src/lib/modules/DateTimes.svelte

@@ -4,6 +4,7 @@
 	import moment from "moment";
 	import { onMount } from "svelte";
 	import AppointmentConfirmDialog from "./AppointmentConfirmDialog.svelte";
+	import { t } from "$lib/translations";
 
     export let availableTimes: AppointmentDateTimes[] = [];
     export let selectedDate: Date = new Date();
@@ -17,7 +18,7 @@
 </script>
 
 
-<h4 class="center-align top-margin">Times</h4>
+<h4 class="center-align top-margin">{$t("common.times")}</h4>
 
 <article>
     {#each availableTimes as time}

src/lib/modules/EventTables.svelte

@@ -3,6 +3,7 @@
 	import { api_host, authToken } from '$lib';
 	import type { Appointment } from '$lib/dbdata';
 	import { authFetch, isDueDatePassed } from '$lib/funcs';
+	import { t } from '$lib/translations';
 	import { onMount } from 'svelte';
 
 	let appointmentData: Appointment[] = [];
@@ -69,7 +70,7 @@
 
 			if (response.status === 404) {
 				console.log(`entry not found`);
-				errorMessage = `entry not found`;
+				errorMessage = $t("common.error-server");
 				await fetchAppointments();
 				setTimeout(() => errorMessage = "", 4000);
 			}
@@ -102,21 +103,26 @@
 {#each appointmentData as data}
 	<tr>
 		<td>{data.title}</td>
-		<td  class="center-align">
+		
+		<td class="center-align">
+			<span>{data.participants}</span>
+		</td>
+
+		<td class="center-align">
 			<a href={`/appointment?id=${data._id}`} class="button medium cyan">
-				<span>Teilen</span>
+				<span>{$t("common.share")}</span>
 			</a>
 		</td>
         {#if !isDueDatePassed(data.dueDate)}          
             <td on:click={() => lockAppointment(data._id)} class="center-align">
                 <button class="medium">
-                    <span>Sperren</span>
+                    <span>{$t("common.lock")}</span>
                 </button>
             </td>
         {:else}
             <td class="center-align">
                 <button class="medium secondary">
-                    <span>Gesperrt</span>
+                    <span>{$t("common.locked")}</span>
                 </button>
             </td>
         {/if}
@@ -124,14 +130,14 @@
 		<!-- load into the creator -->
         <td class="center-align">
             <a href={`/user/creator?id=${data._id}`} class="button medium secondary blue">
-                <span>Bearbeiten</span>
+                <span>{$t("common.edit")}</span>
 			</a>
         </td>
 
 		<!-- send a delete request -->
 		<td on:click={() => deleteEntry(data._id)} class="center-align">
 			<button class="medium red">
-				<span>Loeschen</span>
+				<span>{$t("common.delete")}</span>
 			</button>
 		</td>
 	</tr>
@@ -142,5 +148,5 @@
 {/if}
 
 {#if actionCounter > 0}
-    <div class="snackbar active">Click another two times to confirm</div>
+    <div class="snackbar active">{$t("common.action-confirm")}</div>
 {/if}

src/lib/translations.ts

@@ -0,0 +1,24 @@
+import i18n from 'sveltekit-i18n';
+
+/** @type {import('sveltekit-i18n').Config} */
+const config = ({
+  loaders: [
+    {
+      locale: 'en',
+      key: 'common',
+      loader: async () => (
+        await import('./lang/en.json')
+      ).default,
+    },
+    {
+      locale: 'de',
+      key: 'common',
+      loader: async () => (
+        await import('./lang/de.json')
+      ).default,
+    },
+  ],
+});
+
+export const { t, locale, locales, loading, loadTranslations } = new i18n(config);
+

src/routes/+layout.svelte

@@ -5,8 +5,12 @@
 <script lang="ts">
 	import { authToken } from "$lib";
 	import { onMount } from "svelte";
+    import { loadTranslations } from '$lib/translations';
+
+    onMount(async () => {
+
+        await loadTranslations
 
-    onMount(() => {
         if (localStorage) {
             console.log("execute");
             $authToken = localStorage.getItem("token") || "";

src/routes/+layout.ts

@@ -1,4 +1,16 @@
 import type { Config } from '@sveltejs/adapter-vercel';
+import { loadTranslations } from '$lib/translations';
+
+/** @type {import('@sveltejs/kit').Load} */
+export const load = async ({ url }) => {
+  const { pathname } = url;
+
+  const initLocale = 'de'; // get from cookie, user session, ...
+
+  await loadTranslations(initLocale, pathname); // keep this just before the `return`
+
+  return {};
+}
 
 export const config: Config = {
 	runtime: 'nodejs22.x'

src/routes/errors/404/+page.svelte

@@ -1 +1,5 @@
-<h2>404: Not found</h2>
+<script lang="ts">
+	import { t } from "$lib/translations";
+</script>
+
+<h2>{$t("common.404")}</h2>

src/routes/errors/410/+page.svelte

@@ -1 +1,5 @@
-<h2>This booking page is not available anymore</h2>
+<script lang="ts">
+	import { t } from "$lib/translations";
+</script>
+
+<h2>{$t("common.410")}</h2>

src/routes/user/+layout.svelte

@@ -1,6 +1,8 @@
 <script lang="ts">
 	import { browser } from "$app/environment";
 	import { goto } from "$app/navigation";
+    import { t } from '$lib/translations';
+	import { onMount } from "svelte";
 
     let path: string = "";
 
@@ -23,12 +25,15 @@
         if (browser) {
             path = window.location.pathname.substring(window.location.pathname.lastIndexOf('/') + 1);
         }
-        
     }
+
+    onMount(() => {
+        console.log($t("common.bookings"));
+    })
 </script>
 
 <nav>
-    <h5 class="max center-align">Booker</h5>
+    <h5 class="max center-align">{$t("common.app-title")}</h5>
 </nav>
 
 <slot />
@@ -36,14 +41,14 @@
 <nav class="bottom no-space large">
     <button on:click={navBookings} class="{path === "bookings" ? "" : "border"} left-round max vertical">
         <i>event_note</i>
-        <span>Buchungen</span>
+        <span>{$t("common.bookings")}</span>
     </button>
     <button on:click={navEvents} class="{path === "events" ? "" : "border"} no-round max vertical">
         <i>list</i>
-        <span>Termine</span>
+        <span>{$t("common.appointments")}</span>
     </button>
     <button on:click={navCreator} class="{path === "creator" ? "" : "border"} right-round max vertical">
         <i>library_add</i>
-        <span>Neue Termine</span>
+        <span>{$t("common.create-appointment")}</span>
     </button>
 </nav>

src/routes/user/bookings/+page.svelte

@@ -2,6 +2,7 @@
     import { api_host, authToken } from "$lib";
 	import type { Appointment } from "$lib/dbdata";
 	import { authFetch } from "$lib/funcs";
+	import { t } from "$lib/translations";
 	import { onMount } from "svelte";
 
     let appointmentData: Appointment[] = [];
@@ -38,8 +39,8 @@
 <table class="border large-space large-text">
     <thead>
         <tr>
-            <th class="min center-align">Veranstaltung</th>
-            <th class="min center-align">Teilnehmerliste</th>
+            <th class="min center-align">{$t("common.appointments")}</th>
+            <th class="min center-align">{$t("common.participants")}</th>
         </tr>
     </thead>
     <tbody>
@@ -48,7 +49,7 @@
                 <td>{data.title}</td>
                 <td class="center-align">
                     <a href={`/user/participants?id=${data._id}`} class="button medium secondary">
-                        <span>Teilnehmer</span>
+                        <span>{$t("common.participants")}</span>
                     </a>
                 </td>
             </tr> 

src/routes/user/creator/+page.svelte

@@ -8,12 +8,14 @@
 	import CreatorBaseInputs from '$lib/modules/CreatorBaseInputs.svelte';
 	import CreatorInputs from '$lib/modules/CreatorInputs.svelte';
 	import CreatorTimeInputs from '$lib/modules/CreatorTimeInputs.svelte';
+	import { t } from '$lib/translations';
 	import moment from 'moment';
 	import { onMount, tick } from 'svelte';
 
 	let creatorInputs: AppointmentInputs[] = [{ name: '', type: 'text' }];
 	let topic: string;
 	let location: string;
+	let participants: number = 0;
 	let selectedWeek: number = parseInt(moment().startOf("isoWeek").format("YYYYWW"), 10);
 	let previousWeek: number = selectedWeek;
 	let duration: number = 15;
@@ -48,7 +50,8 @@
 	 * @returns An array of objects representing the days of the given week.
 	 */
 	export function generateAppointments(weekNumber: number, year: number): WeekdayAppointment[] {
-		const weekdays = ['Montag', 'Dienstag', 'Mittwoch', 'Donnerstag', 'Freitag', 'Samstag', 'Sonntag'];
+		const weekdays = [$t("common.monday"), $t("common.tuesday"), $t("common.wednesday"), $t("common.thursday"), $t("common.friday"), $t("common.saturday"), $t("common.sunday")];
+		
 
 		// Get the first day of the given calendar week (Monday-based week system)
 		const startOfWeek = moment().year(year).isoWeek(weekNumber).startOf('isoWeek');
@@ -130,7 +133,7 @@
 
 	async function saveAppointment() {
 		if (!topic || !description || !dueDate || !location || !duration || !creatorInputs || !appointmentList) {
-			errorMessage = "not all parameters provided";
+			errorMessage = $t("common.error-parameters");
 			return;
 		}
 		console.log(appointmentList);
@@ -153,18 +156,19 @@
 					duration: duration,
 					times: convertedTimes,
 					inputs: creatorInputs,
-					timeSpans: appointmentList
+					timeSpans: appointmentList,
+					participants: participants
                 })
             });
 
 			appointmentSaved = response.status === 200;
 
 			if (response.status === 400) {
-				errorMessage = "not all parameters provided";
+				errorMessage = $t("common.error-parameters");
 			}
 
 			if (response.status === 500) {
-				errorMessage = "internal server error";
+				errorMessage = $t("common.error-server");
 			}
 
 			setTimeout(() => {
@@ -196,6 +200,7 @@
 		creatorInputs = js.inputs;
 		location = js.place;
 		duration = js.duration;
+		participants = js.participants;
 		dueDate = getDateString(js.dueDate);
 		console.log(js.dueDate);
 		description = js.description;
@@ -224,10 +229,10 @@
 	// get time slots before sending
 </script>
 
-<h3 class="center-align top-padding bottom-padding">Termine</h3>
+<h3 class="center-align top-padding bottom-padding">{$t("common.appointments")}</h3>
 
 <fieldset>
-	<CreatorBaseInputs changeWeek={changeWeek} bind:weeks={weekSelection} bind:description bind:dueDate bind:topic bind:location bind:selectedWeek bind:duration />
+	<CreatorBaseInputs changeWeek={changeWeek} bind:participants bind:weeks={weekSelection} bind:description bind:dueDate bind:topic bind:location bind:selectedWeek bind:duration />
 
 	{#if selectedWeekAppointments}
 		{#key renderTimeSelection}
@@ -240,11 +245,11 @@
 <CreatorInputs bind:creatorInputs />
 
 <div class="grid">
-	<button on:click={saveAppointment} class="top-margin s12 large">Speichern</button>
+	<button on:click={saveAppointment} class="top-margin s12 large">{$t("common.save")}</button>
 </div>
 
 {#if appointmentSaved}
-	<div class="snackbar green active">Erfolgreich gespeichert</div>
+	<div class="snackbar green active">{$t("common.sucess-creator-save")}</div>
 {/if}
 
 {#if errorMessage}

src/routes/user/events/+page.svelte

@@ -1,13 +1,15 @@
 <script lang="ts">
 	import EventTables from "$lib/modules/EventTables.svelte";
+	import { t } from "$lib/translations";
 </script>
 
-<h3 class="center-align top-padding bottom-padding">Termine</h3>
+<h3 class="center-align top-padding bottom-padding">{$t("common.appointments")}</h3>
 <table class="border large-space large-text">
     <thead>
         <tr>
-            <th class="min">Thema</th>
-            <th class="min center-align">Aktionen</th>
+            <th class="min">{$t("common.topic")}</th>
+            <th class="min center-align">{$t("common.participants")}</th>
+            <th class="min center-align">{$t("common.actions")}</th>
             <th class="min center-align"></th>
             <th class="min center-align"></th>
             <th class="min center-align"></th>

src/routes/user/participants/+page.svelte

@@ -5,6 +5,7 @@
 	import type { Appointment, AppointmentBooking } from "$lib/dbdata";
 	import { authFetch, extractDate, extractTime } from "$lib/funcs";
 	import AppointmentInfo from "$lib/modules/AppointmentInfo.svelte";
+	import { t } from "$lib/translations";
 	import { onMount } from "svelte";
 
     let bookingData: AppointmentBooking[] = [];
@@ -70,8 +71,8 @@
     <table class="border large-space large-text">
         <thead>
             <tr>
-                <th class="min center-align">Datum</th>
-                <th class="min center-align">Zeit</th>
+                <th class="min center-align">{$t("common.date")}</th>
+                <th class="min center-align">{$t("common.time")}</th>
                 {#if appointmentData}
                     {#each appointmentData.inputs as input}
                         <th class="min center-align">{input.name}</th>