Scarriffle/Calendarr
1
0
Fork 0
Code Issues Pull Requests 1 Actions Packages Projects Releases Wiki Activity

Multilanguage: Deutsch / English, umschaltbar in Einstellungen

Browse Source 
- i18n.js: Übersetzungsmodul mit t(), setLang(), applyLang() + vollst. DE/EN Wörterbuch
- Backend: language-Feld in UserSettings, Migration, Settings-API
- calendar.js: alle deutschen Strings auf t()-Aufrufe umgestellt, setLang() beim Start
- app.js, api.js, color-picker.js, views/*.js: alle UI-Strings übersetzt
- Sprach-Dropdown in Einstellungen > Darstellung, data-i18n-Attribute in index.html
This commit is contained in:
Scarriffle
2026-03-27 15:15:07 +01:00
parent e4a14e6927
commit cd5d866cb1
12 changed files with 544 additions and 129 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
backend/main.py
View File

@@ -58,6 +58,11 @@ def _migrate():
conn.commit()
except Exception:
pass
try:
conn.execute(text("ALTER TABLE user_settings ADD COLUMN language VARCHAR(5) DEFAULT 'de'"))
conn.commit()
except Exception:
pass
_migrate()

1
backend/models.py
View File

@@ -78,6 +78,7 @@ class UserSettings(Base):
text_contrast = Column(Integer, default=3)
line_contrast = Column(Integer, default=3)
hour_height = Column(Integer, default=60)
language = Column(String(5), default="de")
user = relationship("User", back_populates="settings")

2
backend/routers/settings_router.py
View File

@@ -21,6 +21,7 @@ class SettingsUpdate(BaseModel):
text_contrast: Optional[int] = None
line_contrast: Optional[int] = None
hour_height: Optional[int] = None
language: Optional[str] = None
def _settings_dict(s: models.UserSettings) -> dict:
@@ -34,6 +35,7 @@ def _settings_dict(s: models.UserSettings) -> dict:
"text_contrast": s.text_contrast or 3,
"line_contrast": s.line_contrast or 3,
"hour_height": s.hour_height or 60,
"language": s.language or "de",
}

92
frontend/index.html
View File

@@ -400,98 +400,106 @@
<!-- Einstellungen (merged: Darstellung + Ansicht & Raster + Ausgeblendete Kalender) -->
<div class="settings-panel active" id="settings-panel-general">
<h4 class="panel-title">Farben</h4>
<h4 class="panel-title" data-i18n="settings_colors">Farben</h4>
<div class="form-group">
<label>Primärfarbe</label>
<label data-i18n="settings_primary_color">Primärfarbe</label>
<div class="ev-color-row">
<input type="text" id="cfg-primary-hex" class="ev-color-hex" maxlength="7" spellcheck="false" />
<div class="ev-color-preview" id="cfg-primary-preview" title="Farbe wählen"></div>
<div class="ev-color-preview" id="cfg-primary-preview" data-i18n-title="color_pick" title="Farbe wählen"></div>
</div>
</div>
<div class="form-group">
<label>Akzentfarbe</label>
<label data-i18n="settings_accent_color">Akzentfarbe</label>
<div class="ev-color-row">
<input type="text" id="cfg-accent-hex" class="ev-color-hex" maxlength="7" spellcheck="false" />
<div class="ev-color-preview" id="cfg-accent-preview" title="Farbe wählen"></div>
<div class="ev-color-preview" id="cfg-accent-preview" data-i18n-title="color_pick" title="Farbe wählen"></div>
</div>
</div>
<div class="form-group">
<label>Heutige-Tag-Farbe</label>
<label data-i18n="settings_today_color">Heutige-Tag-Farbe</label>
<div class="ev-color-row">
<input type="text" id="cfg-today-hex" class="ev-color-hex" maxlength="7" spellcheck="false" />
<div class="ev-color-preview" id="cfg-today-preview" title="Farbe wählen"></div>
<div class="ev-color-preview" id="cfg-today-preview" data-i18n-title="color_pick" title="Farbe wählen"></div>
</div>
</div>
<h4 class="panel-title" style="margin-top:24px">Schriftkontrast</h4>
<p class="panel-desc">Helligkeit der Beschriftungen und Texte</p>
<h4 class="panel-title" style="margin-top:24px" data-i18n="settings_text_contrast">Schriftkontrast</h4>
<p class="panel-desc" data-i18n="settings_text_contrast_desc">Helligkeit der Beschriftungen und Texte</p>
<div class="contrast-selector" id="cfg-text-contrast" data-setting="text_contrast">
<button class="contrast-btn" data-val="1"><span style="color:#606070">Aa</span><span class="contrast-lbl">Dunkel</span></button>
<button class="contrast-btn" data-val="2"><span style="color:#9090a8">Aa</span><span class="contrast-lbl">Mittel</span></button>
<button class="contrast-btn" data-val="3"><span style="color:#c8c8d8">Aa</span><span class="contrast-lbl">Hell</span></button>
<button class="contrast-btn" data-val="4"><span style="color:#ffffff">Aa</span><span class="contrast-lbl">Maximum</span></button>
<button class="contrast-btn" data-val="1"><span style="color:#606070">Aa</span><span class="contrast-lbl" data-i18n="contrast_dark">Dunkel</span></button>
<button class="contrast-btn" data-val="2"><span style="color:#9090a8">Aa</span><span class="contrast-lbl" data-i18n="contrast_medium">Mittel</span></button>
<button class="contrast-btn" data-val="3"><span style="color:#c8c8d8">Aa</span><span class="contrast-lbl" data-i18n="contrast_light">Hell</span></button>
<button class="contrast-btn" data-val="4"><span style="color:#ffffff">Aa</span><span class="contrast-lbl" data-i18n="contrast_max">Maximum</span></button>
</div>
<h4 class="panel-title" style="margin-top:24px">Linienkontrast</h4>
<p class="panel-desc">Sichtbarkeit von Trennlinien und Rahmen</p>
<h4 class="panel-title" style="margin-top:24px" data-i18n="settings_line_contrast">Linienkontrast</h4>
<p class="panel-desc" data-i18n="settings_line_contrast_desc">Sichtbarkeit von Trennlinien und Rahmen</p>
<div class="contrast-selector" id="cfg-line-contrast" data-setting="line_contrast">
<button class="contrast-btn" data-val="1"><span class="line-preview" style="border-color:#1e1e2c"></span><span class="contrast-lbl">Kaum</span></button>
<button class="contrast-btn" data-val="2"><span class="line-preview" style="border-color:#2a2a3c"></span><span class="contrast-lbl">Subtil</span></button>
<button class="contrast-btn" data-val="3"><span class="line-preview" style="border-color:#3a3a52"></span><span class="contrast-lbl">Normal</span></button>
<button class="contrast-btn" data-val="4"><span class="line-preview" style="border-color:#5a5a78"></span><span class="contrast-lbl">Stark</span></button>
<button class="contrast-btn" data-val="1"><span class="line-preview" style="border-color:#1e1e2c"></span><span class="contrast-lbl" data-i18n="line_barely">Kaum</span></button>
<button class="contrast-btn" data-val="2"><span class="line-preview" style="border-color:#2a2a3c"></span><span class="contrast-lbl" data-i18n="line_subtle">Subtil</span></button>
<button class="contrast-btn" data-val="3"><span class="line-preview" style="border-color:#3a3a52"></span><span class="contrast-lbl" data-i18n="line_normal">Normal</span></button>
<button class="contrast-btn" data-val="4"><span class="line-preview" style="border-color:#5a5a78"></span><span class="contrast-lbl" data-i18n="line_strong">Stark</span></button>
</div>
<h4 class="panel-title" style="margin-top:24px">Kalenderansicht</h4>
<h4 class="panel-title" style="margin-top:24px" data-i18n="settings_calendar_view">Kalenderansicht</h4>
<div class="form-group">
<label>Standardansicht</label>
<label data-i18n="settings_default_view">Standardansicht</label>
<select id="cfg-default-view">
<option value="month">Monat</option>
<option value="week">Woche</option>
<option value="day">Tag</option>
<option value="agenda">Termine</option>
<option value="month" data-i18n="view_month">Monat</option>
<option value="week" data-i18n="view_week">Woche</option>
<option value="day" data-i18n="view_day">Tag</option>
<option value="agenda" data-i18n="view_agenda">Termine</option>
</select>
</div>
<div class="form-group">
<label>Erster Wochentag</label>
<label data-i18n="settings_week_start">Erster Wochentag</label>
<select id="cfg-week-start">
<option value="monday">Montag</option>
<option value="sunday">Sonntag</option>
<option value="monday" data-i18n="week_start_monday">Montag</option>
<option value="sunday" data-i18n="week_start_sunday">Sonntag</option>
</select>
</div>
<div class="form-group">
<label class="toggle-label">
<input type="checkbox" id="cfg-dim-past" />
Vergangene Termine ausgrauen
<span data-i18n="settings_dim_past">Vergangene Termine ausgrauen</span>
</label>
</div>
<h4 class="panel-title" style="margin-top:24px">Stundenhöhe (Wochen- &amp; Tagesansicht)</h4>
<p class="panel-desc">Wie viel Platz eine Stunde in der Zeitrasteransicht einnimmt</p>
<h4 class="panel-title" style="margin-top:24px" data-i18n="settings_hour_height">Stundenhöhe (Wochen- &amp; Tagesansicht)</h4>
<p class="panel-desc" data-i18n="settings_hour_height_desc">Wie viel Platz eine Stunde in der Zeitrasteransicht einnimmt</p>
<div class="contrast-selector" id="cfg-hour-height" data-setting="hour_height">
<button class="contrast-btn" data-val="40"><span class="hour-preview">━━</span><span class="contrast-lbl">Kompakt</span></button>
<button class="contrast-btn" data-val="60"><span class="hour-preview">━━━</span><span class="contrast-lbl">Normal</span></button>
<button class="contrast-btn" data-val="80"><span class="hour-preview">━━━━</span><span class="contrast-lbl">Komfort</span></button>
<button class="contrast-btn" data-val="100"><span class="hour-preview">━━━━━</span><span class="contrast-lbl">Gross</span></button>
<button class="contrast-btn" data-val="40"><span class="hour-preview">━━</span><span class="contrast-lbl" data-i18n="hour_compact">Kompakt</span></button>
<button class="contrast-btn" data-val="60"><span class="hour-preview">━━━</span><span class="contrast-lbl" data-i18n="hour_normal">Normal</span></button>
<button class="contrast-btn" data-val="80"><span class="hour-preview">━━━━</span><span class="contrast-lbl" data-i18n="hour_comfort">Komfort</span></button>
<button class="contrast-btn" data-val="100"><span class="hour-preview">━━━━━</span><span class="contrast-lbl" data-i18n="hour_large">Gross</span></button>
</div>
<h4 class="panel-title" style="margin-top:24px">Ausgeblendete Kalender</h4>
<div id="hidden-cals-list"><span style="font-size:13px;color:var(--text-3)">Keine ausgeblendeten Kalender</span></div>
<h4 class="panel-title" style="margin-top:24px" data-i18n="settings_language">Sprache</h4>
<div class="form-group">
<select id="cfg-language">
<option value="de">Deutsch</option>
<option value="en">English</option>
</select>
</div>
<h4 class="panel-title" style="margin-top:24px" data-i18n="settings_hidden_cals">Ausgeblendete Kalender</h4>
<div id="hidden-cals-list"><span style="font-size:13px;color:var(--text-3)" data-i18n="settings_no_hidden_cals">Keine ausgeblendeten Kalender</span></div>
</div>
<!-- Google Konten -->
<div class="settings-panel" id="settings-panel-google">
<h4 class="panel-title">Google Konten</h4>
<div id="google-accounts-list"><span style="font-size:13px;color:var(--text-3)">Keine Google-Konten verbunden</span></div>
<h4 class="panel-title" data-i18n="settings_nav_google">Google Konten</h4>
<div id="google-accounts-list"><span style="font-size:13px;color:var(--text-3)" data-i18n="settings_no_google">Keine Google-Konten verbunden</span></div>
</div>
<!-- Benutzerverwaltung -->
<div class="settings-panel" id="settings-panel-users">
<h4 class="panel-title">Benutzerverwaltung <span class="badge-admin">Admin</span></h4>
<h4 class="panel-title"><span data-i18n="settings_nav_users">Benutzerverwaltung</span> <span class="badge-admin">Admin</span></h4>
<div id="users-list"></div>
<button class="btn btn-secondary" id="btn-add-user" style="margin-top:12px">Benutzer hinzufügen</button>
<button class="btn btn-secondary" id="btn-add-user" style="margin-top:12px" data-i18n="users_add">Benutzer hinzufügen</button>
<div id="add-user-form" class="hidden" style="margin-top:12px">
<div class="form-group">
<label>Benutzername</label>
<label data-i18n="username">Benutzername</label>
<input type="text" id="new-username" />
</div>
<div class="form-group">

5
frontend/js/api.js
View File

@@ -1,3 +1,4 @@
import { t } from './i18n.js';
const BASE = '/api';
async function request(method, path, body = null, formEncoded = false) {
@@ -27,7 +28,7 @@ async function request(method, path, body = null, formEncoded = false) {
}
if (!res.ok) {
const err = await res.json().catch(() => ({ detail: 'Unbekannter Fehler' }));
const err = await res.json().catch(() => ({ detail: t('unknown_error') }));
throw new Error(err.detail || `HTTP ${res.status}`);
}
@@ -49,7 +50,7 @@ async function uploadRequest(path, formData) {
return null;
}
if (!res.ok) {
const err = await res.json().catch(() => ({ detail: 'Unbekannter Fehler' }));
const err = await res.json().catch(() => ({ detail: t('unknown_error') }));
throw new Error(err.detail || `HTTP ${res.status}`);
}
if (res.status === 204) return null;

5
frontend/js/app.js
View File

@@ -1,5 +1,6 @@
import { api } from './api.js';
import { initCalendar, showToast, openProfileModal } from './calendar.js';
import { t } from './i18n.js';
// ── Bootstrap ─────────────────────────────────────────────
async function boot() {
@@ -109,12 +110,12 @@ function bindSetupForm() {
errEl.classList.add('hidden');
if (pw1 !== pw2) {
errEl.textContent = 'Passwörter stimmen nicht überein';
errEl.textContent = t('setup_pw_mismatch');
errEl.classList.remove('hidden');
return;
}
if (pw1.length < 6) {
errEl.textContent = 'Passwort muss mindestens 6 Zeichen haben';
errEl.textContent = t('setup_pw_short');
errEl.classList.remove('hidden');
return;
}

133
frontend/js/calendar.js
View File

@@ -4,6 +4,7 @@ import { renderMonth } from './views/month.js';
import { renderWeek } from './views/week.js';
import { renderAgenda } from './views/agenda.js';
import { openColorPicker } from './color-picker.js';
import { t, setLang, applyLang } from './i18n.js';
// Fetch avatar image as blob URL (with auth header)
function fetchAvatarBlob() {
@@ -19,8 +20,7 @@ function fetchAvatarBlob() {
// week start day global (loaded from settings)
let weekStartDay = 'monday';
const MONTHS = ['Januar','Februar','März','April','Mai','Juni',
'Juli','August','September','Oktober','November','Dezember'];
// month names come from i18n: t('months')
let state = {
currentDate: new Date(),
@@ -55,6 +55,7 @@ export async function initCalendar() {
state.dimPast = settings.dim_past_events;
weekStartDay = settings.week_start_day || 'monday';
setLang(settings.language || 'de');
applyTheme(settings);
updateViewButtons();
renderCalendarList();
@@ -78,7 +79,7 @@ async function fetchAndRender() {
const events = await api.get(`/caldav/events?start=${start.toISOString()}&end=${end.toISOString()}`);
state.events = events;
} catch (e) {
showToast('Fehler beim Laden der Termine: ' + e.message, true);
showToast(t('error_load_events') + ': ' + e.message, true);
state.events = [];
}
renderView();
@@ -161,20 +162,21 @@ function showLoading() {
function updateTitle() {
const d = state.currentDate;
let title = '';
const M = t('months');
if (state.currentView === 'month') {
title = `${MONTHS[d.getMonth()]} ${d.getFullYear()}`;
title = `${M[d.getMonth()]} ${d.getFullYear()}`;
} else if (state.currentView === 'week') {
const mon = weekStart(d, weekStartDay);
const sun = new Date(mon);
sun.setDate(mon.getDate() + 6);
const sameMonth = mon.getMonth() === sun.getMonth();
title = sameMonth
? `${mon.getDate()}. – ${sun.getDate()}. ${MONTHS[sun.getMonth()]} ${sun.getFullYear()}`
: `${mon.getDate()}. ${MONTHS[mon.getMonth()]} – ${sun.getDate()}. ${MONTHS[sun.getMonth()]} ${sun.getFullYear()}`;
? `${mon.getDate()}. – ${sun.getDate()}. ${M[sun.getMonth()]} ${sun.getFullYear()}`
: `${mon.getDate()}. ${M[mon.getMonth()]} – ${sun.getDate()}. ${M[sun.getMonth()]} ${sun.getFullYear()}`;
} else if (state.currentView === 'day') {
title = `${d.getDate()}. ${MONTHS[d.getMonth()]} ${d.getFullYear()}`;
title = `${d.getDate()}. ${M[d.getMonth()]} ${d.getFullYear()}`;
} else {
title = `Ab ${d.getDate()}. ${MONTHS[d.getMonth()]} ${d.getFullYear()}`;
title = `${d.getDate()}. ${M[d.getMonth()]} ${d.getFullYear()}`;
}
document.getElementById('view-title').textContent = title;
document.title = `Calendarr - ${title}`;
@@ -191,7 +193,7 @@ function renderMiniCal() {
const d = state.currentDate;
const miniD = new Date(d.getFullYear(), d.getMonth(), 1);
document.getElementById('mini-title').textContent =
`${MONTHS[miniD.getMonth()]} ${miniD.getFullYear()}`;
`${t('months')[miniD.getMonth()]} ${miniD.getFullYear()}`;
const firstDay = new Date(miniD.getFullYear(), miniD.getMonth(), 1);
const gridStart = new Date(firstDay);
@@ -270,9 +272,9 @@ function renderCalendarList() {
visibleCals.map(cal =>
`<div class="cal-item" data-cal-id="${cal.id}" data-source="caldav">
<input type="checkbox" ${cal.enabled ? 'checked' : ''} data-cal-id="${cal.id}" data-source="caldav" />
<div class="cal-item-dot" style="background:${cal.color}" data-cal-id="${cal.id}" data-source="caldav" title="Farbe ändern"></div>
<div class="cal-item-dot" style="background:${cal.color}" data-cal-id="${cal.id}" data-source="caldav" title="${t('change_color')}"></div>
<span class="cal-item-name" data-source="caldav">${escHtml(cal.name)}</span>
<button class="icon-btn mini-btn cal-item-remove" data-cal-id="${cal.id}" data-source="caldav" title="Kalender ausblenden">
<button class="icon-btn mini-btn cal-item-remove" data-cal-id="${cal.id}" data-source="caldav" title="${t('hide_cal')}">
<svg viewBox="0 0 24 24" fill="currentColor" width="14" height="14"><path d="M12 7c2.76 0 5 2.24 5 5 0 .65-.13 1.26-.36 1.83l2.92 2.92c1.51-1.26 2.7-2.89 3.43-4.75-1.73-4.39-6-7.5-11-7.5-1.4 0-2.74.25-3.98.7l2.16 2.16C10.74 7.13 11.35 7 12 7zM2 4.27l2.28 2.28.46.46C3.08 8.3 1.78 10.02 1 12c1.73 4.39 6 7.5 11 7.5 1.55 0 3.03-.3 4.38-.84l.42.42L19.73 22 21 20.73 3.27 3 2 4.27zM7.53 9.8l1.55 1.55c-.05.21-.08.43-.08.65 0 1.66 1.34 3 3 3 .22 0 .44-.03.65-.08l1.55 1.55c-.67.33-1.41.53-2.2.53-2.76 0-5-2.24-5-5 0-.79.2-1.53.53-2.2zm4.31-.78l3.15 3.15.02-.16c0-1.66-1.34-3-3-3l-.17.01z"/></svg>
</button>
</div>`
@@ -282,13 +284,13 @@ function renderCalendarList() {
// ── Local calendars ────────────────────────────────────
if (state.localCalendars.length) {
html += `<div class="cal-account-name">Lokale Kalender</div>`;
html += `<div class="cal-account-name">${t('cal_local')}</div>`;
html += state.localCalendars.map(cal =>
`<div class="cal-item" data-cal-id="${cal.id}" data-source="local">
<input type="checkbox" ${cal.enabled ? 'checked' : ''} data-cal-id="${cal.id}" data-source="local" />
<div class="cal-item-dot" style="background:${cal.color}" data-cal-id="${cal.id}" data-source="local" title="Farbe ändern"></div>
<div class="cal-item-dot" style="background:${cal.color}" data-cal-id="${cal.id}" data-source="local" title="${t('change_color')}"></div>
<span class="cal-item-name" data-source="local">${escHtml(cal.name)}</span>
<button class="icon-btn mini-btn cal-item-remove" data-cal-id="${cal.id}" data-source="local" title="Kalender entfernen">
<button class="icon-btn mini-btn cal-item-remove" data-cal-id="${cal.id}" data-source="local" title="${t('remove_cal')}">
<svg viewBox="0 0 24 24" fill="currentColor" width="14" height="14"><path d="M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z"/></svg>
</button>
</div>`
@@ -297,13 +299,13 @@ function renderCalendarList() {
// ── iCal subscriptions ─────────────────────────────────
if (state.icalSubscriptions.length) {
html += `<div class="cal-account-name">Abonnements</div>`;
html += `<div class="cal-account-name">${t('cal_ical')}</div>`;
html += state.icalSubscriptions.map(sub =>
`<div class="cal-item" data-sub-id="${sub.id}" data-source="ical">
<input type="checkbox" ${sub.enabled ? 'checked' : ''} data-sub-id="${sub.id}" data-source="ical" />
<div class="cal-item-dot" style="background:${sub.color}" data-sub-id="${sub.id}" data-source="ical" title="Farbe ändern"></div>
<div class="cal-item-dot" style="background:${sub.color}" data-sub-id="${sub.id}" data-source="ical" title="${t('change_color')}"></div>
<span class="cal-item-name" data-source="ical">${escHtml(sub.name)}</span>
<button class="icon-btn mini-btn cal-item-remove" data-sub-id="${sub.id}" data-source="ical" title="Abo entfernen">
<button class="icon-btn mini-btn cal-item-remove" data-sub-id="${sub.id}" data-source="ical" title="${t('remove_ical_sub')}">
<svg viewBox="0 0 24 24" fill="currentColor" width="14" height="14"><path d="M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z"/></svg>
</button>
</div>`
@@ -319,9 +321,9 @@ function renderCalendarList() {
visibleCals.map(cal =>
`<div class="cal-item" data-cal-id="${cal.id}" data-source="google">
<input type="checkbox" ${cal.enabled ? 'checked' : ''} data-cal-id="${cal.id}" data-source="google" />
<div class="cal-item-dot" style="background:${cal.color || '#4285f4'}" data-cal-id="${cal.id}" data-source="google" title="Farbe ändern"></div>
<div class="cal-item-dot" style="background:${cal.color || '#4285f4'}" data-cal-id="${cal.id}" data-source="google" title="${t('change_color')}"></div>
<span class="cal-item-name" data-source="google">${escHtml(cal.name)}</span>
<button class="icon-btn mini-btn cal-item-remove" data-cal-id="${cal.id}" data-source="google" title="Kalender ausblenden">
<button class="icon-btn mini-btn cal-item-remove" data-cal-id="${cal.id}" data-source="google" title="${t('hide_cal')}">
<svg viewBox="0 0 24 24" fill="currentColor" width="14" height="14"><path d="M12 7c2.76 0 5 2.24 5 5 0 .65-.13 1.26-.36 1.83l2.92 2.92c1.51-1.26 2.7-2.89 3.43-4.75-1.73-4.39-6-7.5-11-7.5-1.4 0-2.74.25-3.98.7l2.16 2.16C10.74 7.13 11.35 7 12 7zM2 4.27l2.28 2.28.46.46C3.08 8.3 1.78 10.02 1 12c1.73 4.39 6 7.5 11 7.5 1.55 0 3.03-.3 4.38-.84l.42.42L19.73 22 21 20.73 3.27 3 2 4.27zM7.53 9.8l1.55 1.55c-.05.21-.08.43-.08.65 0 1.66 1.34 3 3 3 .22 0 .44-.03.65-.08l1.55 1.55c-.67.33-1.41.53-2.2.53-2.76 0-5-2.24-5-5 0-.79.2-1.53.53-2.2zm4.31-.78l3.15 3.15.02-.16c0-1.66-1.34-3-3-3l-.17.01z"/></svg>
</button>
</div>`
@@ -330,7 +332,7 @@ function renderCalendarList() {
}
if (!html) {
container.innerHTML = `<div style="padding:8px 16px;font-size:12px;color:var(--text-3)">Keine Kalender</div>`;
container.innerHTML = `<div style="padding:8px 16px;font-size:12px;color:var(--text-3)">${t('error_no_calendars')}</div>`;
return;
}
@@ -476,12 +478,12 @@ function renderCalendarList() {
}
}
} else if (source === 'local') {
if (!confirm('Lokalen Kalender wirklich löschen?')) return;
if (!confirm(t('confirm_delete_local_cal'))) return;
const calId = parseInt(btn.dataset.calId);
await api.delete(`/local/calendars/${calId}`);
state.localCalendars = state.localCalendars.filter(c => c.id !== calId);
} else if (source === 'ical') {
if (!confirm('Abonnement wirklich entfernen?')) return;
if (!confirm(t('confirm_remove_ical'))) return;
const subId = parseInt(btn.dataset.subId);
await api.delete(`/ical/subscriptions/${subId}`);
state.icalSubscriptions = state.icalSubscriptions.filter(s => s.id !== subId);
@@ -576,13 +578,13 @@ function bindSidebar() {
try {
const { configured } = await api.get('/google/configured');
if (!configured) {
showToast('Google OAuth ist nicht konfiguriert (Admin muss GOOGLE_CLIENT_ID/SECRET setzen)', true);
showToast(t('google_not_configured'), true);
return;
}
const { url } = await api.get('/google/auth-url');
window.location.href = url;
} catch (e) {
showToast('Fehler: ' + e.message, true);
showToast(t('error_prefix') + e.message, true);
}
};
}
@@ -627,7 +629,7 @@ function showEventPopup(ev, anchor) {
openEditEventModal(ev);
};
document.getElementById('popup-delete').onclick = async () => {
if (!confirm(`"${ev.title}" wirklich löschen?`)) return;
if (!confirm(t("confirm_delete_event", {title: ev.title}))) return;
popup.classList.add('hidden');
try {
if (ev.source === 'google') {
@@ -641,7 +643,7 @@ function showEventPopup(ev, anchor) {
} else {
await api.delete(`/caldav/events/${encodeURIComponent(ev.id)}?event_url=${encodeURIComponent(ev.url)}`);
}
showToast('Termin gelöscht');
showToast(t('event_deleted'));
fetchAndRender();
} catch (e) { showToast(e.message, true); }
};
@@ -782,7 +784,7 @@ function bindEventModal() {
document.getElementById('ev-save').onclick = async () => {
const title = document.getElementById('ev-title').value.trim();
if (!title) { showToast('Bitte Titel eingeben', true); return; }
if (!title) { showToast(t('error_enter_title'), true); return; }
const allDay = document.getElementById('ev-allday').checked;
const calVal = document.getElementById('ev-calendar').value;
@@ -796,12 +798,12 @@ function bindEventModal() {
if (allDay) {
start = document.getElementById('ev-start-date').value;
end = document.getElementById('ev-end-date').value;
if (!start) { showToast('Bitte Datum eingeben', true); return; }
if (!start) { showToast(t('error_enter_date'), true); return; }
if (!end || end < start) end = start;
} else {
const sv = document.getElementById('ev-start').value;
const ev2 = document.getElementById('ev-end').value;
if (!sv) { showToast('Bitte Start-Zeit eingeben', true); return; }
if (!sv) { showToast(t('error_enter_start'), true); return; }
start = new Date(sv).toISOString();
end = ev2 ? new Date(ev2).toISOString() : new Date(new Date(sv).getTime() + 3600000).toISOString();
}
@@ -829,28 +831,28 @@ function bindEventModal() {
{ title, start, end, allDay, location: loc, description: desc, color: color || null }
);
}
showToast('Termin aktualisiert');
showToast(t('event_updated'));
} else if (isGoogle) {
const calDbId = parseInt(calVal.replace('google-', ''));
await api.post('/google/events', {
calendar_db_id: calDbId, title, start, end, allDay,
location: loc, description: desc,
});
showToast('Termin erstellt');
showToast(t('event_created'));
} else if (isLocal) {
const calId = parseInt(calVal.replace('local-', ''));
await api.post('/local/events', {
calendar_id: calId, title, start, end, allDay,
location: loc, description: desc, color: color || null,
});
showToast('Termin erstellt');
showToast(t('event_created'));
} else {
const calId = parseInt(calVal);
await api.post('/caldav/events', {
calendar_id: calId, title, start, end, allDay,
location: loc, description: desc, color: color || null,
});
showToast('Termin erstellt');
showToast(t('event_created'));
}
closeModal('modal-event');
fetchAndRender();
@@ -862,7 +864,7 @@ function bindEventModal() {
document.getElementById('ev-delete').onclick = async () => {
const ev = state.editingEvent;
if (!ev) return;
if (!confirm(`"${ev.title}" wirklich löschen?`)) return;
if (!confirm(t("confirm_delete_event", {title: ev.title}))) return;
try {
if (ev.source === 'google') {
const accId = ev.calendar_id.replace('google-', '');
@@ -875,7 +877,7 @@ function bindEventModal() {
} else {
await api.delete(`/caldav/events/${encodeURIComponent(ev.id)}?event_url=${encodeURIComponent(ev.url)}`);
}
showToast('Termin gelöscht');
showToast(t('event_deleted'));
closeModal('modal-event');
fetchAndRender();
} catch (e) { showToast(e.message, true); }
@@ -929,7 +931,7 @@ function bindAccountModal() {
state.accounts.push(acc);
renderCalendarList();
closeModal('modal-account');
showToast(`Konto "${name}" hinzugefügt`);
showToast(t("account_added", {name}));
fetchAndRender();
} catch (e) {
errEl.textContent = e.message;
@@ -964,14 +966,14 @@ function bindLocalCalModal() {
document.getElementById('local-cal-save').onclick = async () => {
const name = document.getElementById('local-cal-name').value.trim();
if (!name) { showToast('Bitte Name eingeben', true); return; }
if (!name) { showToast(t('error_enter_name'), true); return; }
const color = hex.value;
try {
const cal = await api.post('/local/calendars', { name, color });
state.localCalendars.push(cal);
renderCalendarList();
closeModal('modal-local-cal');
showToast(`Kalender "${name}" erstellt`);
showToast(t("calendar_created", {name}));
} catch (e) { showToast(e.message, true); }
};
}
@@ -1017,7 +1019,7 @@ function bindICalSubModal() {
state.icalSubscriptions.push(sub);
renderCalendarList();
closeModal('modal-ical-sub');
showToast(`"${name}" abonniert`);
showToast(t("ical_subscribed", {name}));
fetchAndRender();
} catch (e) {
errEl.textContent = e.message;
@@ -1044,6 +1046,7 @@ function openSettingsModal() {
document.getElementById(id + '-preview').style.background = val;
});
document.getElementById('cfg-dim-past').checked = !!s.dim_past_events;
document.getElementById('cfg-language').value = s.language || 'de';
// Set active contrast/hour-height buttons
[
@@ -1084,15 +1087,15 @@ function renderGoogleAccounts() {
const list = document.getElementById('google-accounts-list');
if (!list) return;
if (!state.googleAccounts.length) {
list.innerHTML = '<span style="font-size:13px;color:var(--text-3)">Keine Google-Konten verbunden</span>';
list.innerHTML = `<span style="font-size:13px;color:var(--text-3)">${t('settings_no_google')}</span>`;
return;
}
list.innerHTML = state.googleAccounts.map(acc =>
`<div style="display:flex;align-items:center;justify-content:space-between;padding:4px 0">
<span style="font-size:13px">${escHtml(acc.email)}</span>
<div style="display:flex;gap:6px">
<button class="btn btn-secondary btn-sm" data-sync-acc="${acc.id}">Sync</button>
<button class="btn btn-ghost btn-sm" data-disconnect-acc="${acc.id}">Trennen</button>
<button class="btn btn-secondary btn-sm" data-sync-acc="${acc.id}">${t('sync')}</button>
<button class="btn btn-ghost btn-sm" data-disconnect-acc="${acc.id}">${t('disconnect')}</button>
</div>
</div>`
).join('');
@@ -1107,20 +1110,20 @@ function renderGoogleAccounts() {
renderGoogleAccounts();
renderCalendarList();
fetchAndRender();
showToast('Kalender synchronisiert');
showToast(t('google_synced'));
} catch (e) { showToast(e.message, true); }
});
});
list.querySelectorAll('[data-disconnect-acc]').forEach(btn => {
btn.addEventListener('click', async () => {
if (!confirm('Google-Konto wirklich trennen?')) return;
if (!confirm(t('confirm_google_disconnect'))) return;
try {
await api.delete(`/google/accounts/${btn.dataset.disconnectAcc}`);
state.googleAccounts = state.googleAccounts.filter(a => a.id !== parseInt(btn.dataset.disconnectAcc));
renderGoogleAccounts();
renderCalendarList();
fetchAndRender();
showToast('Google-Konto getrennt');
showToast(t('google_disconnected'));
} catch (e) { showToast(e.message, true); }
});
});
@@ -1140,13 +1143,13 @@ function renderHiddenCalendars() {
}
}
if (!hidden.length) {
list.innerHTML = '<span style="font-size:13px;color:var(--text-3)">Keine ausgeblendeten Kalender</span>';
list.innerHTML = `<span style="font-size:13px;color:var(--text-3)">${t('settings_no_hidden_cals')}</span>`;
return;
}
list.innerHTML = hidden.map(c =>
`<div style="display:flex;align-items:center;justify-content:space-between;padding:4px 0">
<span style="font-size:13px">${escHtml(c.acc)} / ${escHtml(c.name)}</span>
<button class="btn btn-secondary btn-sm" data-restore-cal="${c.id}" data-restore-source="${c.source}">Einblenden</button>
<button class="btn btn-secondary btn-sm" data-restore-cal="${c.id}" data-restore-source="${c.source}">${t('show_cal')}</button>
</div>`
).join('');
list.querySelectorAll('[data-restore-cal]').forEach(btn => {
@@ -1196,7 +1199,7 @@ async function loadUsers() {
list.querySelectorAll('[data-del-user]').forEach(btn => {
btn.addEventListener('click', async () => {
if (!confirm('Benutzer löschen?')) return;
if (!confirm(t('confirm_delete_user'))) return;
try {
await api.delete(`/users/${btn.dataset.delUser}`);
loadUsers();
@@ -1244,10 +1247,10 @@ function bindSettingsModal() {
const username = document.getElementById('new-username').value.trim();
const password = document.getElementById('new-password').value;
const is_admin = document.getElementById('new-is-admin').checked;
if (!username || !password) { showToast('Benutzername und Passwort erforderlich', true); return; }
if (!username || !password) { showToast(t('error_username_password'), true); return; }
try {
await api.post('/users/', { username, password, is_admin });
showToast(`Benutzer "${username}" erstellt`);
showToast(t("user_created", {name: username}));
document.getElementById('add-user-form').classList.add('hidden');
document.getElementById('new-username').value = '';
document.getElementById('new-password').value = '';
@@ -1270,14 +1273,16 @@ function bindSettingsModal() {
text_contrast: getActive('cfg-text-contrast') || 3,
line_contrast: getActive('cfg-line-contrast') || 3,
hour_height: getActive('cfg-hour-height') || 60,
language: document.getElementById('cfg-language').value,
};
try {
await api.put('/settings/', settings);
state.settings = { ...state.settings, ...settings };
state.dimPast = settings.dim_past_events;
weekStartDay = settings.week_start_day;
setLang(settings.language);
applyTheme(state.settings);
showToast('Einstellungen gespeichert');
showToast(t('settings_saved'));
closeModal('modal-settings');
renderMiniCal();
fetchAndRender();
@@ -1341,7 +1346,7 @@ export function openProfileModal() {
function renderProfileCalendars() {
const container = document.getElementById('profile-calendars');
if (!state.accounts.length) {
container.innerHTML = '<p class="text-muted">Keine CalDAV-Konten verbunden.</p>';
container.innerHTML = `<p class="text-muted">${t('no_caldav')}</p>`;
return;
}
const html = state.accounts.map(acc =>
@@ -1364,7 +1369,7 @@ function bindProfileModal() {
const email = document.getElementById('profile-email').value.trim();
try {
await api.put('/profile/', { email: email || null });
showToast('Profil gespeichert');
showToast(t('profile_saved'));
} catch (e) { showToast(e.message, true); }
};
@@ -1383,7 +1388,7 @@ function bindProfileModal() {
document.getElementById('profile-avatar-remove').onclick = async () => {
try {
await api.delete('/profile/avatar');
showToast('Profilbild entfernt');
showToast(t('avatar_removed'));
document.getElementById('profile-avatar-img').classList.add('hidden');
document.getElementById('profile-avatar-letter').classList.remove('hidden');
document.getElementById('profile-avatar-remove').classList.add('hidden');
@@ -1396,12 +1401,12 @@ function bindProfileModal() {
const current = document.getElementById('profile-pw-current').value;
const newPw = document.getElementById('profile-pw-new').value;
const confirm = document.getElementById('profile-pw-confirm').value;
if (!current || !newPw) { showToast('Bitte alle Felder ausfüllen', true); return; }
if (newPw !== confirm) { showToast('Passwörter stimmen nicht überein', true); return; }
if (newPw.length < 6) { showToast('Mindestens 6 Zeichen', true); return; }
if (!current || !newPw) { showToast(t('error_fill_all'), true); return; }
if (newPw !== confirm) { showToast(t('error_pw_mismatch'), true); return; }
if (newPw.length < 6) { showToast(t('error_pw_length'), true); return; }
try {
await api.post('/profile/password', { current_password: current, new_password: newPw });
showToast('Passwort geändert');
showToast(t('password_changed'));
document.getElementById('profile-pw-current').value = '';
document.getElementById('profile-pw-new').value = '';
document.getElementById('profile-pw-confirm').value = '';
@@ -1421,15 +1426,15 @@ function bindProfileModal() {
document.getElementById('2fa-copy-secret').onclick = () => {
const secret = document.getElementById('2fa-secret-code').textContent;
navigator.clipboard.writeText(secret).then(() => showToast('Schlüssel kopiert'));
navigator.clipboard.writeText(secret).then(() => showToast(t('key_copied')));
};
document.getElementById('2fa-enable-btn').onclick = async () => {
const code = document.getElementById('2fa-verify-code').value.trim();
if (!code || code.length !== 6) { showToast('Bitte 6-stelligen Code eingeben', true); return; }
if (!code || code.length !== 6) { showToast(t('error_enter_6digit'), true); return; }
try {
await api.post('/profile/2fa/enable', { code });
showToast('2FA aktiviert');
showToast(t('totp_enabled'));
document.getElementById('2fa-setup-section').classList.add('hidden');
document.getElementById('2fa-enabled-section').classList.remove('hidden');
} catch (e) { showToast(e.message, true); }
@@ -1442,10 +1447,10 @@ function bindProfileModal() {
document.getElementById('2fa-disable-btn').onclick = async () => {
const pw = document.getElementById('2fa-disable-pw').value;
if (!pw) { showToast('Bitte Passwort eingeben', true); return; }
if (!pw) { showToast(t('error_enter_password'), true); return; }
try {
await api.post('/profile/2fa/disable', { password: pw });
showToast('2FA deaktiviert');
showToast(t('totp_disabled'));
document.getElementById('2fa-enabled-section').classList.add('hidden');
document.getElementById('2fa-disabled-section').classList.remove('hidden');
document.getElementById('2fa-disable-pw').value = '';
@@ -1557,7 +1562,7 @@ document.getElementById('crop-save').onclick = async () => {
form.append('file', blob, 'avatar.jpg');
try {
await api.upload('/profile/avatar', form);
showToast('Profilbild hochgeladen');
showToast(t('avatar_uploaded'));
// Update profile modal avatar
const img = document.getElementById('profile-avatar-img');
fetchAvatarBlob().then(blobUrl => {

4
frontend/js/color-picker.js
View File

@@ -3,6 +3,8 @@
Returns hex string or null if cancelled.
────────────────────────────────────────────────────────── */
import { t } from './i18n.js';
// ── HSV ↔ RGB helpers ─────────────────────────────────────
function hsvToRgb(h, s, v) {
h = h / 360 * 6;
@@ -80,7 +82,7 @@ export function openColorPicker(anchorEl, currentColor = '#4285f4') {
<div class="gcp-preview"></div>
<input class="gcp-hex" type="text" maxlength="7" spellcheck="false" />
</div>
<button class="gcp-select">Auswählen</button>
<button class="gcp-select">${t('color_select')}</button>
`;
const svCanvas = picker.querySelector('.gcp-sv');

395
frontend/js/i18n.js Normal file
View File

@@ -0,0 +1,395 @@
const translations = {
de: {
// Common
save: 'Speichern', cancel: 'Abbrechen', close: 'Schliessen',
create: 'Erstellen', delete: 'Löschen', edit: 'Bearbeiten',
name: 'Name', username: 'Benutzername', password: 'Passwort',
email: 'E-Mail', color: 'Farbe', color_pick: 'Farbe wählen',
loading: 'Lade…', connecting: 'Verbinde…',
unknown_error: 'Unbekannter Fehler',
// Setup
setup_title: 'Ersteinrichtung',
setup_subtitle: 'Erstelle den Administrator-Account',
setup_email: 'E-Mail (optional)',
setup_pw_confirm: 'Passwort wiederholen',
setup_submit: 'Admin-Account erstellen',
setup_pw_mismatch: 'Passwörter stimmen nicht überein',
setup_pw_short: 'Passwort muss mindestens 6 Zeichen haben',
// Login
login_tagline: 'das minimalistische Kalender Frontend',
login_submit: 'Anmelden',
login_2fa_ph: '6-stelliger Code',
// Topbar
btn_today: 'Heute',
view_month: 'Monat', view_week: 'Woche', view_day: 'Tag', view_agenda: 'Termine',
// Sidebar
btn_create: 'Erstellen',
my_calendars: 'Meine Kalender',
add_calendar: 'Kalender hinzufügen',
cal_local: 'Lokaler Kalender', cal_caldav: 'CalDAV-Konto',
cal_ical: 'iCal-URL abonnieren', cal_google: 'Google Kalender',
// Event modal
event_create_title: 'Termin erstellen', event_edit_title: 'Termin bearbeiten',
event_title_ph: 'Titel hinzufügen', event_allday: 'Ganztägig',
event_start: 'Start', event_end: 'Ende', event_calendar: 'Kalender',
event_location: 'Ort', event_location_ph: 'Ort hinzufügen',
event_description: 'Beschreibung', event_description_ph: 'Beschreibung hinzufügen',
// CalDAV modal
caldav_add_title: 'CalDAV-Konto hinzufügen',
caldav_display_name: 'Anzeigename', caldav_display_name_ph: 'z.B. Mein Nextcloud',
caldav_url: 'CalDAV-URL', caldav_connect: 'Verbinden',
// Local calendar modal
localcal_create_title: 'Lokalen Kalender erstellen',
localcal_name_ph: 'z.B. Persönlich',
// iCal modal
ical_title: 'iCal-URL abonnieren', ical_name_ph: 'z.B. Feiertage',
ical_url_label: 'iCal-URL', ical_refresh: 'Aktualisierung',
ical_15min: 'Alle 15 Minuten', ical_30min: 'Alle 30 Minuten',
ical_hourly: 'Stündlich', ical_6h: 'Alle 6 Stunden', ical_daily: 'Täglich',
ical_subscribe: 'Abonnieren',
// Settings
settings_title: 'Einstellungen',
settings_nav_appearance: 'Darstellung',
settings_nav_google: 'Google Konten',
settings_nav_users: 'Benutzerverwaltung',
settings_colors: 'Farben',
settings_primary_color: 'Primärfarbe', settings_accent_color: 'Akzentfarbe',
settings_today_color: 'Heutige-Tag-Farbe',
settings_text_contrast: 'Schriftkontrast',
settings_text_contrast_desc: 'Helligkeit der Beschriftungen und Texte',
contrast_dark: 'Dunkel', contrast_medium: 'Mittel',
contrast_light: 'Hell', contrast_max: 'Maximum',
settings_line_contrast: 'Linienkontrast',
settings_line_contrast_desc: 'Sichtbarkeit von Trennlinien und Rahmen',
line_barely: 'Kaum', line_subtle: 'Subtil',
line_normal: 'Normal', line_strong: 'Stark',
settings_calendar_view: 'Kalenderansicht',
settings_default_view: 'Standardansicht',
settings_week_start: 'Erster Wochentag',
week_start_monday: 'Montag', week_start_sunday: 'Sonntag',
settings_dim_past: 'Vergangene Termine ausgrauen',
settings_hour_height: 'Stundenhöhe (Wochen- & Tagesansicht)',
settings_hour_height_desc: 'Wie viel Platz eine Stunde in der Zeitrasteransicht einnimmt',
hour_compact: 'Kompakt', hour_normal: 'Normal',
hour_comfort: 'Komfort', hour_large: 'Gross',
settings_language: 'Sprache',
settings_hidden_cals: 'Ausgeblendete Kalender',
settings_no_hidden_cals: 'Keine ausgeblendeten Kalender',
settings_no_google: 'Keine Google-Konten verbunden',
// User management
users_add: 'Benutzer hinzufügen', users_is_admin: 'Administrator',
// Profile
profile_title: 'Profil', profile_upload: 'Bild hochladen',
profile_remove_avatar: 'Entfernen', profile_account: 'Konto',
profile_email_ph: 'Keine E-Mail hinterlegt',
profile_change_pw: 'Passwort ändern',
profile_pw_current: 'Aktuelles Passwort', profile_pw_new: 'Neues Passwort',
profile_pw_confirm: 'Neues Passwort wiederholen',
profile_2fa: 'Zwei-Faktor-Authentifizierung',
profile_2fa_disabled_text: '2FA ist deaktiviert. Schütze dein Konto mit einem Authenticator.',
profile_2fa_setup: '2FA einrichten',
profile_2fa_scan: 'Scanne den QR-Code mit deiner Authenticator-App (z.B. Bitwarden, Google Authenticator).',
profile_2fa_manual: 'Oder gib diesen Schlüssel manuell ein',
profile_2fa_copy: 'Kopieren', profile_2fa_code_label: 'Bestätigungscode eingeben',
profile_2fa_ph: '6-stelliger Code', profile_2fa_activate: 'Aktivieren',
profile_2fa_enabled_text: '2FA ist aktiviert.',
profile_2fa_pw_disable: 'Passwort zum Deaktivieren',
profile_2fa_disable: '2FA deaktivieren',
profile_my_calendars: 'Meine Kalender',
// Avatar crop
crop_title: 'Bildausschnitt wählen', crop_submit: 'Zuschneiden & Hochladen',
// Impressum
impressum_title: 'Impressum',
impressum_desc: 'Software & Webentwicklung',
impressum_about: 'Diese Software wurde von Scarriffleservices mit grösster Sorgfalt entwickelt und bereitgestellt. Alle Rechte vorbehalten\u00a0© 2026 Scarriffleservices.',
impressum_data_title: 'Datenspeicherung',
impressum_data_text: 'Alle Anwendungsdaten werden ausschliesslich in der Schweiz gespeichert und verarbeitet. Bei Nutzung der Google Kalender-Anbindung werden Daten über die Google API abgerufen, welche von Google auf deren Infrastruktur ausserhalb der Schweiz verarbeitet werden. Für diese Daten gelten die Datenschutzbestimmungen von Google.',
impressum_disclaimer_title: 'Haftungsausschluss',
impressum_disclaimer_text: 'Trotz sorgfältiger Erstellung wird keine Haftung für die Richtigkeit, Vollständigkeit oder Aktualität der bereitgestellten Inhalte übernommen. Die Nutzung erfolgt auf eigene Verantwortung.',
impressum_contact: 'Kontakt',
// Toast / confirms
error_load_events: 'Fehler beim Laden der Termine',
error_no_calendars: 'Keine Kalender',
confirm_delete_local_cal: 'Lokalen Kalender wirklich löschen?',
confirm_remove_ical: 'Abonnement wirklich entfernen?',
google_not_configured: 'Google OAuth ist nicht konfiguriert (Admin muss GOOGLE_CLIENT_ID/SECRET setzen)',
error_enter_title: 'Bitte Titel eingeben',
error_enter_date: 'Bitte Datum eingeben',
error_enter_start: 'Bitte Start-Zeit eingeben',
event_updated: 'Termin aktualisiert', event_created: 'Termin erstellt',
confirm_delete_event: '"{title}" wirklich löschen?',
event_deleted: 'Termin gelöscht',
error_fill_all: 'Bitte alle Felder ausfüllen',
account_added: 'Konto "{name}" hinzugefügt',
error_enter_name: 'Bitte Name eingeben',
calendar_created: 'Kalender "{name}" erstellt',
error_name_url: 'Bitte Name und URL eingeben',
ical_subscribed: '"{name}" abonniert',
google_synced: 'Kalender synchronisiert',
confirm_google_disconnect: 'Google-Konto wirklich trennen?',
google_disconnected: 'Google-Konto getrennt',
error_username_password: 'Benutzername und Passwort erforderlich',
user_created: 'Benutzer "{name}" erstellt',
settings_saved: 'Einstellungen gespeichert',
no_caldav: 'Keine CalDAV-Konten verbunden.',
profile_saved: 'Profil gespeichert',
avatar_removed: 'Profilbild entfernt',
avatar_uploaded: 'Profilbild hochgeladen',
error_pw_mismatch: 'Passwörter stimmen nicht überein',
error_pw_length: 'Mindestens 6 Zeichen',
password_changed: 'Passwort geändert',
key_copied: 'Schlüssel kopiert',
error_enter_6digit: 'Bitte 6-stelligen Code eingeben',
totp_enabled: '2FA aktiviert', totp_disabled: '2FA deaktiviert',
error_enter_password: 'Bitte Passwort eingeben',
confirm_delete_user: 'Benutzer löschen?',
show_cal: 'Einblenden', hide_cal: 'Ausblenden',
remove_cal: 'Kalender entfernen', remove_ical_sub: 'Abo entfernen',
change_color: 'Farbe ändern',
sync: 'Sync', disconnect: 'Trennen',
// Calendar / date
months: ['Januar','Februar','März','April','Mai','Juni','Juli','August','September','Oktober','November','Dezember'],
months_short: ['Jan','Feb','Mär','Apr','Mai','Jun','Jul','Aug','Sep','Okt','Nov','Dez'],
days_long: ['Sonntag','Montag','Dienstag','Mittwoch','Donnerstag','Freitag','Samstag'],
dow_monday: ['Mo','Di','Mi','Do','Fr','Sa','So'],
dow_sunday: ['So','Mo','Di','Mi','Do','Fr','Sa'],
dow_index: ['So','Mo','Di','Mi','Do','Fr','Sa'],
week_abbr: 'KW',
allday: 'ganztägig', allday_cap: 'Ganztägig',
no_events: 'Keine Termine im angezeigten Zeitraum',
more_events: '+{n} weitere',
// Color picker
color_select: 'Auswählen',
// Locale for time formatting
locale: 'de',
},
en: {
// Common
save: 'Save', cancel: 'Cancel', close: 'Close',
create: 'Create', delete: 'Delete', edit: 'Edit',
name: 'Name', username: 'Username', password: 'Password',
email: 'Email', color: 'Color', color_pick: 'Choose color',
loading: 'Loading…', connecting: 'Connecting…',
unknown_error: 'Unknown error',
// Setup
setup_title: 'Initial Setup',
setup_subtitle: 'Create the administrator account',
setup_email: 'Email (optional)',
setup_pw_confirm: 'Confirm password',
setup_submit: 'Create admin account',
setup_pw_mismatch: 'Passwords do not match',
setup_pw_short: 'Password must be at least 6 characters',
// Login
login_tagline: 'the minimalist calendar frontend',
login_submit: 'Sign in',
login_2fa_ph: '6-digit code',
// Topbar
btn_today: 'Today',
view_month: 'Month', view_week: 'Week', view_day: 'Day', view_agenda: 'Events',
// Sidebar
btn_create: 'Create',
my_calendars: 'My Calendars',
add_calendar: 'Add calendar',
cal_local: 'Local calendar', cal_caldav: 'CalDAV account',
cal_ical: 'Subscribe to iCal URL', cal_google: 'Google Calendar',
// Event modal
event_create_title: 'Create event', event_edit_title: 'Edit event',
event_title_ph: 'Add title', event_allday: 'All day',
event_start: 'Start', event_end: 'End', event_calendar: 'Calendar',
event_location: 'Location', event_location_ph: 'Add location',
event_description: 'Description', event_description_ph: 'Add description',
// CalDAV modal
caldav_add_title: 'Add CalDAV account',
caldav_display_name: 'Display name', caldav_display_name_ph: 'e.g. My Nextcloud',
caldav_url: 'CalDAV URL', caldav_connect: 'Connect',
// Local calendar modal
localcal_create_title: 'Create local calendar',
localcal_name_ph: 'e.g. Personal',
// iCal modal
ical_title: 'Subscribe to iCal URL', ical_name_ph: 'e.g. Holidays',
ical_url_label: 'iCal URL', ical_refresh: 'Refresh interval',
ical_15min: 'Every 15 minutes', ical_30min: 'Every 30 minutes',
ical_hourly: 'Every hour', ical_6h: 'Every 6 hours', ical_daily: 'Daily',
ical_subscribe: 'Subscribe',
// Settings
settings_title: 'Settings',
settings_nav_appearance: 'Appearance',
settings_nav_google: 'Google Accounts',
settings_nav_users: 'User Management',
settings_colors: 'Colors',
settings_primary_color: 'Primary color', settings_accent_color: 'Accent color',
settings_today_color: 'Today highlight color',
settings_text_contrast: 'Text contrast',
settings_text_contrast_desc: 'Brightness of labels and text',
contrast_dark: 'Dark', contrast_medium: 'Medium',
contrast_light: 'Light', contrast_max: 'Maximum',
settings_line_contrast: 'Line contrast',
settings_line_contrast_desc: 'Visibility of borders and dividers',
line_barely: 'Barely', line_subtle: 'Subtle',
line_normal: 'Normal', line_strong: 'Strong',
settings_calendar_view: 'Calendar view',
settings_default_view: 'Default view',
settings_week_start: 'First day of week',
week_start_monday: 'Monday', week_start_sunday: 'Sunday',
settings_dim_past: 'Dim past events',
settings_hour_height: 'Hour height (week & day view)',
settings_hour_height_desc: 'How much space one hour takes in the time grid',
hour_compact: 'Compact', hour_normal: 'Normal',
hour_comfort: 'Comfort', hour_large: 'Large',
settings_language: 'Language',
settings_hidden_cals: 'Hidden calendars',
settings_no_hidden_cals: 'No hidden calendars',
settings_no_google: 'No Google accounts connected',
// User management
users_add: 'Add user', users_is_admin: 'Administrator',
// Profile
profile_title: 'Profile', profile_upload: 'Upload image',
profile_remove_avatar: 'Remove', profile_account: 'Account',
profile_email_ph: 'No email set',
profile_change_pw: 'Change password',
profile_pw_current: 'Current password', profile_pw_new: 'New password',
profile_pw_confirm: 'Confirm new password',
profile_2fa: 'Two-Factor Authentication',
profile_2fa_disabled_text: '2FA is disabled. Protect your account with an authenticator.',
profile_2fa_setup: 'Set up 2FA',
profile_2fa_scan: 'Scan the QR code with your authenticator app (e.g. Bitwarden, Google Authenticator).',
profile_2fa_manual: 'Or enter this key manually',
profile_2fa_copy: 'Copy', profile_2fa_code_label: 'Enter verification code',
profile_2fa_ph: '6-digit code', profile_2fa_activate: 'Activate',
profile_2fa_enabled_text: '2FA is enabled.',
profile_2fa_pw_disable: 'Password to disable',
profile_2fa_disable: 'Disable 2FA',
profile_my_calendars: 'My Calendars',
// Avatar crop
crop_title: 'Crop image', crop_submit: 'Crop & Upload',
// Impressum
impressum_title: 'Legal Notice',
impressum_desc: 'Software & Web Development',
impressum_about: 'This software was developed and provided by Scarriffleservices with the utmost care. All rights reserved\u00a0© 2026 Scarriffleservices.',
impressum_data_title: 'Data Storage',
impressum_data_text: 'All application data is stored and processed exclusively in Switzerland. When using the Google Calendar integration, data is retrieved via the Google API, which Google processes on their infrastructure outside Switzerland. Google\'s privacy policy applies to this data.',
impressum_disclaimer_title: 'Disclaimer',
impressum_disclaimer_text: 'Despite careful preparation, no liability is assumed for the accuracy, completeness or timeliness of the content provided. Use is at your own risk.',
impressum_contact: 'Contact',
// Toast / confirms
error_load_events: 'Error loading events',
error_no_calendars: 'No calendars',
confirm_delete_local_cal: 'Really delete local calendar?',
confirm_remove_ical: 'Really remove subscription?',
google_not_configured: 'Google OAuth is not configured (admin must set GOOGLE_CLIENT_ID/SECRET)',
error_enter_title: 'Please enter a title',
error_enter_date: 'Please enter a date',
error_enter_start: 'Please enter a start time',
event_updated: 'Event updated', event_created: 'Event created',
confirm_delete_event: 'Really delete "{title}"?',
event_deleted: 'Event deleted',
error_fill_all: 'Please fill in all fields',
account_added: 'Account "{name}" added',
error_enter_name: 'Please enter a name',
calendar_created: 'Calendar "{name}" created',
error_name_url: 'Please enter a name and URL',
ical_subscribed: '"{name}" subscribed',
google_synced: 'Calendar synced',
confirm_google_disconnect: 'Really disconnect Google account?',
google_disconnected: 'Google account disconnected',
error_username_password: 'Username and password required',
user_created: 'User "{name}" created',
settings_saved: 'Settings saved',
no_caldav: 'No CalDAV accounts connected.',
profile_saved: 'Profile saved',
avatar_removed: 'Profile picture removed',
avatar_uploaded: 'Profile picture uploaded',
error_pw_mismatch: 'Passwords do not match',
error_pw_length: 'At least 6 characters required',
password_changed: 'Password changed',
key_copied: 'Key copied',
error_enter_6digit: 'Please enter a 6-digit code',
totp_enabled: '2FA enabled', totp_disabled: '2FA disabled',
error_enter_password: 'Please enter your password',
confirm_delete_user: 'Delete user?',
show_cal: 'Show', hide_cal: 'Hide',
remove_cal: 'Remove calendar', remove_ical_sub: 'Remove subscription',
change_color: 'Change color',
sync: 'Sync', disconnect: 'Disconnect',
// Calendar / date
months: ['January','February','March','April','May','June','July','August','September','October','November','December'],
months_short: ['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec'],
days_long: ['Sunday','Monday','Tuesday','Wednesday','Thursday','Friday','Saturday'],
dow_monday: ['Mon','Tue','Wed','Thu','Fri','Sat','Sun'],
dow_sunday: ['Sun','Mon','Tue','Wed','Thu','Fri','Sat'],
dow_index: ['Sun','Mon','Tue','Wed','Thu','Fri','Sat'],
week_abbr: 'CW',
allday: 'all day', allday_cap: 'All day',
no_events: 'No events in the displayed period',
more_events: '+{n} more',
// Color picker
color_select: 'Select',
// Locale for time formatting
locale: 'en',
},
};
let currentLang = 'de';
export function getLang() { return currentLang; }
export function setLang(lang) {
currentLang = (lang && translations[lang]) ? lang : 'de';
document.documentElement.lang = currentLang;
applyLang();
}
export function t(key, vars = {}) {
const dict = translations[currentLang] ?? translations.de;
const val = dict[key] ?? translations.de[key] ?? key;
if (typeof val !== 'string') return val;
return val.replace(/\{(\w+)\}/g, (_, k) => vars[k] ?? '');
}
export function applyLang() {
document.querySelectorAll('[data-i18n]').forEach(el => {
const v = t(el.dataset.i18n);
if (typeof v === 'string') el.textContent = v;
});
document.querySelectorAll('[data-i18n-ph]').forEach(el => {
el.placeholder = t(el.dataset.i18nPh);
});
document.querySelectorAll('[data-i18n-title]').forEach(el => {
el.title = t(el.dataset.i18nTitle);
});
}

14
frontend/js/views/agenda.js
View File

@@ -1,11 +1,9 @@
import { isPast } from '../utils.js';
const DOW = ['Sonntag','Montag','Dienstag','Mittwoch','Donnerstag','Freitag','Samstag'];
const MON = ['Jan','Feb','Mär','Apr','Mai','Jun','Jul','Aug','Sep','Okt','Nov','Dez'];
import { t, getLang } from '../i18n.js';
export function renderAgenda(container, currentDate, events, onEventClick) {
if (!events.length) {
container.innerHTML = `<div class="agenda-view"><div class="agenda-empty">Keine Termine im angezeigten Zeitraum</div></div>`;
container.innerHTML = `<div class="agenda-view"><div class="agenda-empty">${t('no_events')}</div></div>`;
return;
}
@@ -35,7 +33,7 @@ export function renderAgenda(container, currentDate, events, onEventClick) {
.map(ev => {
const color = ev.color || ev.calendarColor || '#4285f4';
const pastCls = isPast(ev) ? 'past' : '';
let timeStr = 'Ganztägig';
let timeStr = t('allday_cap');
if (!ev.allDay) {
const s = new Date(ev.start);
const e = new Date(ev.end);
@@ -57,8 +55,8 @@ export function renderAgenda(container, currentDate, events, onEventClick) {
<div class="agenda-date ${todayCls}">
<div class="agenda-date-num">${date.getDate()}</div>
<div class="agenda-date-label">
<span class="wd">${DOW[date.getDay()]}</span>
<span class="mo">${MON[date.getMonth()]} ${date.getFullYear()}</span>
<span class="wd">${t('days_long')[date.getDay()]}</span>
<span class="mo">${t('months_short')[date.getMonth()]} ${date.getFullYear()}</span>
</div>
</div>
${evHtml}
@@ -83,7 +81,7 @@ function isTodayDate(d) {
}
function fmtTime(d) {
return d.toLocaleTimeString('de', { hour: '2-digit', minute: '2-digit' });
return d.toLocaleTimeString(getLang(), { hour: '2-digit', minute: '2-digit' });
}
function escHtml(s) {

8
frontend/js/views/month.js
View File

@@ -1,12 +1,10 @@
import { formatDate, isSameDay, isToday, isPast, dayOfWeek, getISOWeekNumber } from '../utils.js';
const DOW_MONDAY = ['Mo', 'Di', 'Mi', 'Do', 'Fr', 'Sa', 'So'];
const DOW_SUNDAY = ['So', 'Mo', 'Di', 'Mi', 'Do', 'Fr', 'Sa'];
import { t } from '../i18n.js';
export function renderMonth(container, currentDate, events, onDayClick, onEventClick, weekStartDay = 'monday') {
const year = currentDate.getFullYear();
const month = currentDate.getMonth();
const DOW = weekStartDay === 'sunday' ? DOW_SUNDAY : DOW_MONDAY;
const DOW = weekStartDay === 'sunday' ? t('dow_sunday') : t('dow_monday');
const firstDay = new Date(year, month, 1);
const lastDay = new Date(year, month + 1, 0);
@@ -82,7 +80,7 @@ export function renderMonth(container, currentDate, events, onDayClick, onEventC
}).join('');
const moreHtml = hiddenCount > 0
? `<div class="month-more" data-date="${key}">+${hiddenCount} weitere</div>`
? `<div class="month-more" data-date="${key}">${t('more_events', {n: hiddenCount})}</div>`
: '';
cellsHtml += `<div class="month-cell ${todayClass} ${otherClass}" data-date="${key}">

9
frontend/js/views/week.js
View File

@@ -1,6 +1,5 @@
import { isToday, isPast, dayOfWeek, weekStart, getISOWeekNumber } from '../utils.js';
const DOW_SHORT = ['So', 'Mo', 'Di', 'Mi', 'Do', 'Fr', 'Sa'];
import { t } from '../i18n.js';
export function renderWeek(container, currentDate, events, onSlotClick, onEventClick, isSingleDay = false, weekStartDay = 'monday', hourH = 60) {
// Build the days array (7 days for week, 1 for day)
@@ -23,14 +22,14 @@ export function renderWeek(container, currentDate, events, onSlotClick, onEventC
// ── KW Badge ──────────────────────────────────────────
const kwNum = getISOWeekNumber(days[0]);
const kwBadge = !isSingleDay
? `<div class="week-kw-badge">KW ${kwNum}</div>`
? `<div class="week-kw-badge">${t('week_abbr')} ${kwNum}</div>`
: '';
// ── Header ────────────────────────────────────────────
const headerCols = days.map(day => {
const todayCls = isToday(day) ? 'today' : '';
return `<div class="week-day-header ${todayCls}" data-date="${dayKey(day)}">
<div class="day-name">${DOW_SHORT[day.getDay()]}</div>
<div class="day-name">${t('dow_index')[day.getDay()]}</div>
<div class="day-num">${day.getDate()}</div>
</div>`;
}).join('');
@@ -105,7 +104,7 @@ export function renderWeek(container, currentDate, events, onSlotClick, onEventC
${headerCols}
</div>
<div class="week-allday-row">
<div class="allday-gutter">ganztägig</div>
<div class="allday-gutter">${t('allday')}</div>
<div class="allday-cols">${alldayCols}</div>
</div>
<div class="week-body">