@@ -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..12d1fb3 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,115 @@ const EVENT_COLOR_NAMES = () => ({
'#30B0C7': t('calendar.colorCyan'),
});
+const EVENT_ICON_ALIASES = {
+ tooth: 'drill',
+};
+
+const EVENT_ICONS = [
+ { value: 'calendar', label: 'Calendar' },
+ { value: 'drill', label: 'Dentist' },
+ { value: 'alarm-clock', label: 'Alarm' },
+ { value: 'clock', label: 'Time' },
+ { value: 'bell', label: 'Reminder' },
+ { value: 'map-pin', label: 'Location' },
+ { value: 'home', label: 'Home' },
+ { value: 'house', label: 'House' },
+ { value: 'building', label: 'Building' },
+ { value: 'hospital', label: 'Hospital' },
+ { value: 'stethoscope', label: 'Doctor' },
+ { value: 'syringe', label: 'Vaccine' },
+ { value: 'pill', label: 'Medicine' },
+ { value: 'tablets', label: 'Tablets' },
+ { value: 'bandage', label: 'Bandage' },
+ { value: 'ambulance', label: 'Ambulance' },
+ { value: 'heart-pulse', label: 'Health' },
+ { value: 'activity', label: 'Activity' },
+ { value: 'cross', label: 'Care' },
+ { value: 'scissors', label: 'Haircut' },
+ { value: 'shower-head', label: 'Personal care' },
+ { value: 'dumbbell', label: 'Sports' },
+ { value: 'trophy', label: 'Competition' },
+ { value: 'car', label: 'Car' },
+ { value: 'bus', label: 'Bus' },
+ { value: 'train', label: 'Train' },
+ { value: 'tram-front', label: 'Transit' },
+ { value: 'fuel', label: 'Fuel' },
+ { value: 'parking-meter', label: 'Parking' },
+ { value: 'traffic-cone', label: 'Traffic' },
+ { value: 'navigation', label: 'Navigation' },
+ { value: 'route', label: 'Route' },
+ { value: 'briefcase', label: 'Work' },
+ { value: 'laptop', label: 'Laptop' },
+ { value: 'monitor', label: 'Computer' },
+ { value: 'presentation', label: 'Presentation' },
+ { value: 'plane', label: 'Travel' },
+ { value: 'plane-takeoff', label: 'Flight' },
+ { value: 'school', label: 'School' },
+ { value: 'graduation-cap', label: 'Education' },
+ { value: 'book-open', label: 'Reading' },
+ { value: 'library', label: 'Library' },
+ { value: 'pencil', label: 'Study' },
+ { value: 'notebook-pen', label: 'Notes' },
+ { value: 'calculator', label: 'Calculator' },
+ { value: 'utensils', label: 'Meal' },
+ { value: 'cooking-pot', label: 'Cooking' },
+ { value: 'coffee', label: 'Coffee' },
+ { value: 'cake', label: 'Birthday' },
+ { value: 'croissant', label: 'Bakery' },
+ { value: 'pizza', label: 'Pizza' },
+ { value: 'ice-cream', label: 'Dessert' },
+ { value: 'beer', label: 'Bar' },
+ { value: 'wine', label: 'Wine' },
+ { value: 'popcorn', label: 'Cinema' },
+ { value: 'sandwich', label: 'Snack' },
+ { value: 'salad', label: 'Salad' },
+ { value: 'shopping-bag', label: 'Shopping' },
+ { value: 'shopping-cart', label: 'Groceries' },
+ { value: 'gift', label: 'Gift' },
+ { value: 'package', label: 'Package' },
+ { value: 'shirt', label: 'Clothing' },
+ { value: 'tag', label: 'Tag' },
+ { value: 'credit-card', label: 'Card' },
+ { value: 'wallet', label: 'Wallet' },
+ { value: 'banknote', label: 'Cash' },
+ { value: 'coins', label: 'Coins' },
+ { value: 'piggy-bank', label: 'Savings' },
+ { value: 'receipt', label: 'Receipt' },
+ { value: 'landmark', label: 'Bank' },
+ { value: 'music', label: 'Music' },
+ { value: 'guitar', label: 'Guitar' },
+ { value: 'film', label: 'Movie' },
+ { value: 'theater', label: 'Theater' },
+ { value: 'ticket', label: 'Ticket' },
+ { value: 'gamepad-2', label: 'Game' },
+ { value: 'camera', label: 'Photo' },
+ { value: 'party-popper', label: 'Party' },
+ { value: 'users', label: 'Family' },
+ { value: 'baby', label: 'Baby' },
+ { value: 'dog', label: 'Dog' },
+ { value: 'cat', label: 'Cat' },
+ { value: 'paw-print', label: 'Pet' },
+ { value: 'wrench', label: 'Repair' },
+ { value: 'hammer', label: 'Maintenance' },
+ { value: 'paintbrush', label: 'Decoration' },
+ { value: 'lightbulb', label: 'Idea' },
+ { value: 'sofa', label: 'Furniture' },
+ { value: 'bed', label: 'Bed' },
+ { value: 'bath', label: 'Bath' },
+ { value: 'washing-machine', label: 'Laundry' },
+ { value: 'refrigerator', label: 'Fridge' },
+ { value: 'star', label: 'Favorite' },
+ { value: 'flag', label: 'Flag' },
+ { value: 'target', label: 'Goal' },
+ { value: 'flame', label: 'Important' },
+ { value: 'leaf', label: 'Nature' },
+ { value: 'tree-pine', label: 'Outdoors' },
+ { value: 'flower', label: 'Flower' },
+ { value: 'sun', label: 'Day' },
+ { value: 'moon', label: 'Night' },
+ { value: 'cloud-sun', label: 'Weather' },
+];
+
const HOUR_HEIGHT = 56; // px pro Stunde in Wochen-/Tagesansicht
/**
@@ -136,14 +245,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 +261,28 @@ function formatDateTime(datetimeStr) {
return time ? `${formatDate(date)} ${time} ${t('calendar.timeSuffix')}`.trimEnd() : formatDate(date);
}
+function eventIconName(icon) {
+ const normalized = EVENT_ICON_ALIASES[icon] || icon;
+ return EVENT_ICONS.some((item) => item.value === normalized) ? normalized : '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 +487,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 +562,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 +611,7 @@ function renderWeekView(container) {
${alldayEvs[i].map((ev) => `