@@ -315,6 +315,12 @@ function openBirthdayModal({ mode, birthday = null }) {
preview.insertAdjacentHTML('beforeend', birthdayPreviewHtml(nameInput.value.trim(), photoData));
};
nameInput.addEventListener('input', renderPreview);
+ panel.querySelectorAll('.js-date-input').forEach((input) => {
+ input.addEventListener('blur', () => {
+ const parsed = parseDateInput(input.value);
+ if (parsed) input.value = formatDateInput(parsed);
+ });
+ });
panel.querySelector('#bd-photo').addEventListener('change', async (e) => {
const file = e.target.files?.[0];
if (!file) return;
@@ -337,14 +343,16 @@ function openBirthdayModal({ mode, birthday = null }) {
});
panel.querySelector('#bd-save').addEventListener('click', async () => {
const saveBtn = panel.querySelector('#bd-save');
+ const birthDateRaw = panel.querySelector('#bd-birth-date').value;
+ const birthDate = parseDateInput(birthDateRaw);
const body = {
name: panel.querySelector('#bd-name').value.trim(),
- birth_date: panel.querySelector('#bd-birth-date').value,
+ birth_date: birthDate,
notes: panel.querySelector('#bd-notes').value.trim(),
photo_data: photoData,
};
- if (!body.name || !body.birth_date) {
+ if (!body.name || !body.birth_date || !isDateInputValid(birthDateRaw)) {
window.oikos?.showToast(t('birthdays.requiredFields'), 'warning');
return;
}
diff --git a/public/pages/budget.js b/public/pages/budget.js
index db71031..00dfda6 100644
--- a/public/pages/budget.js
+++ b/public/pages/budget.js
@@ -8,7 +8,7 @@
import { api } from '/api.js';
import { openModal as openSharedModal, closeModal } from '/components/modal.js';
import { stagger, vibrate } from '/utils/ux.js';
-import { t, formatDate, getLocale } from '/i18n.js';
+import { t, formatDate, getLocale, dateInputPlaceholder, formatDateInput, parseDateInput, isDateInputValid } from '/i18n.js';
import { esc } from '/utils/html.js';
// --------------------------------------------------------
@@ -494,8 +494,8 @@ function openBudgetModal({ mode, entry = null }) {
-
+
@@ -604,6 +604,12 @@ function openBudgetModal({ mode, entry = null }) {
panel.querySelector('#bm-category').addEventListener('change', () => updateSubcategoryOptions());
panel.querySelector('#bm-add-category').addEventListener('click', addCategory);
panel.querySelector('#bm-add-subcategory').addEventListener('click', addSubcategory);
+ panel.querySelectorAll('.js-date-input').forEach((input) => {
+ input.addEventListener('blur', () => {
+ const parsed = parseDateInput(input.value);
+ if (parsed) input.value = formatDateInput(parsed);
+ });
+ });
panel.querySelector('#bm-cancel').addEventListener('click', closeModal);
@@ -618,12 +624,13 @@ function openBudgetModal({ mode, entry = null }) {
const absVal = parseFloat(panel.querySelector('#bm-amount').value);
const category = panel.querySelector('#bm-category').value;
const subcategory = currentType === 'expense' ? panel.querySelector('#bm-subcategory').value : '';
- const date = panel.querySelector('#bm-date').value;
+ const dateRaw = panel.querySelector('#bm-date').value;
+ const date = parseDateInput(dateRaw);
const recurring = panel.querySelector('#bm-recurring').checked ? 1 : 0;
if (!title) { window.oikos?.showToast(t('common.titleRequired'), 'error'); return; }
if (isNaN(absVal) || absVal <= 0) { window.oikos?.showToast(t('budget.validAmountRequired'), 'error'); return; }
- if (!date) { window.oikos?.showToast(t('budget.dateRequired'), 'error'); return; }
+ if (!date || !isDateInputValid(dateRaw)) { window.oikos?.showToast(t('calendar.invalidDate'), 'error'); return; }
const amount = currentType === 'expense' ? -absVal : absVal;
diff --git a/public/pages/calendar.js b/public/pages/calendar.js
index 7e86cf4..e61a478 100644
--- a/public/pages/calendar.js
+++ b/public/pages/calendar.js
@@ -8,7 +8,7 @@ import { api } from '/api.js';
import { renderRRuleFields, bindRRuleEvents, getRRuleValues } from '/rrule-ui.js';
import { openModal as openSharedModal, closeModal } from '/components/modal.js';
import { stagger } from '/utils/ux.js';
-import { t, formatTime } from '/i18n.js';
+import { t, formatDate as formatPreferredDate, formatTime, dateInputPlaceholder, formatDateInput, parseDateInput, isDateInputValid } from '/i18n.js';
import { esc, fmtLocation } from '/utils/html.js';
import { refresh as refreshReminders } from '/reminders.js';
@@ -59,6 +59,29 @@ const EVENT_COLOR_NAMES = () => ({
'#30B0C7': t('calendar.colorCyan'),
});
+const EVENT_ICONS = [
+ { value: 'calendar', label: 'Calendar' },
+ { value: 'tooth', label: 'Dentist' },
+ { value: 'stethoscope', label: 'Doctor' },
+ { value: 'heart-pulse', label: 'Health' },
+ { value: 'briefcase', label: 'Work' },
+ { value: 'plane', label: 'Travel' },
+ { value: 'utensils', label: 'Meal' },
+ { value: 'cake', label: 'Birthday' },
+ { value: 'car', label: 'Car' },
+ { value: 'graduation-cap', label: 'School' },
+ { value: 'dumbbell', label: 'Sports' },
+ { value: 'home', label: 'Home' },
+ { value: 'shopping-bag', label: 'Shopping' },
+ { value: 'music', label: 'Music' },
+ { value: 'party-popper', label: 'Party' },
+ { value: 'paw-print', label: 'Pet' },
+ { value: 'scissors', label: 'Haircut' },
+ { value: 'book-open', label: 'Reading' },
+ { value: 'users', label: 'Family' },
+ { value: 'bell', label: 'Reminder' },
+];
+
const HOUR_HEIGHT = 56; // px pro Stunde in Wochen-/Tagesansicht
/**
@@ -136,14 +159,12 @@ function getMondayOf(dateStr) {
}
function formatDate(dateStr, { long = false, weekday = false } = {}) {
- const d = new Date(dateStr + 'T00:00:00');
- const day = d.getDate();
- const mon = MONTH_NAMES()[d.getMonth()];
if (weekday) {
+ const d = new Date(dateStr + 'T00:00:00');
const wd = long ? DAY_NAMES_LONG()[d.getDay()] : DAY_NAMES_SHORT()[d.getDay()];
- return `${wd}, ${day}. ${mon}`;
+ return `${wd}, ${formatPreferredDate(dateStr)}`;
}
- return `${day}. ${mon} ${d.getFullYear()}`;
+ return formatPreferredDate(dateStr);
}
function formatDateTime(datetimeStr) {
@@ -154,6 +175,27 @@ function formatDateTime(datetimeStr) {
return time ? `${formatDate(date)} ${time} ${t('calendar.timeSuffix')}`.trimEnd() : formatDate(date);
}
+function eventIconName(icon) {
+ return EVENT_ICONS.some((item) => item.value === icon) ? icon : 'calendar';
+}
+
+function eventIconHtml(icon, className = 'event-icon') {
+ return ``;
+}
+
+function bindDateInputs(root) {
+ root.querySelectorAll('.js-date-input').forEach((input) => {
+ input.addEventListener('blur', () => {
+ const parsed = parseDateInput(input.value);
+ if (parsed) input.value = formatDateInput(parsed);
+ });
+ });
+}
+
+function readDateInput(root, selector) {
+ return parseDateInput(root.querySelector(selector)?.value || '');
+}
+
function getMonthRange(dateStr) {
const d = new Date(dateStr + 'T00:00:00');
const year = d.getFullYear();
@@ -358,6 +400,7 @@ function renderView() {
if (state.view === 'week') renderWeekView(body);
if (state.view === 'day') renderDayView(body);
if (state.view === 'agenda') renderAgendaView(body);
+ if (window.lucide) lucide.createIcons();
}
// --------------------------------------------------------
@@ -432,7 +475,7 @@ function renderMonthDay(date, inMonth) {
data-id="${ev.id}"
style="background-color:${esc(bg)};${fg ? `color:${fg};` : ''}"
title="${esc(ev.title)}${ev.cal_name ? ' · ' + ev.cal_name : ''}"
- >${esc(ev.title)}
+ >${eventIconHtml(ev.icon, 'event-icon event-icon--compact')}
${esc(ev.title)}
`;
}).join('');
@@ -481,7 +524,7 @@ function renderWeekView(container) {
${alldayEvs[i].map((ev) => `