diff --git a/frontend/js/calendar.js b/frontend/js/calendar.js
index 27f6fb4..4ddb9da 100644
--- a/frontend/js/calendar.js
+++ b/frontend/js/calendar.js
@@ -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 { openDatePicker, formatDtDisplay } from './date-picker.js';
import { t, setLang, getLang } from './i18n.js';
// Fetch avatar image as blob URL (with auth header)
@@ -540,12 +541,13 @@ function bindTopbar() {
document.getElementById('btn-settings').onclick = openSettingsModal;
document.getElementById('btn-create-event').onclick = () => openNewEventModal(new Date());
- // Mouse wheel / trackpad scroll navigation
- let _wheelTimer = null;
+ // Mouse wheel / trackpad scroll navigation (500ms cooldown = 1 nav per gesture)
+ let _wheelLast = 0;
document.getElementById('view-container').addEventListener('wheel', e => {
e.preventDefault();
- if (_wheelTimer) return;
- _wheelTimer = setTimeout(() => { _wheelTimer = null; }, 80);
+ const now = Date.now();
+ if (now - _wheelLast < 500) return;
+ _wheelLast = now;
const dir = e.deltaY > 0 ? 1 : -1;
if (state.currentView === 'agenda') return;
if (state.currentView === 'month') {
@@ -710,6 +712,17 @@ function populateCalendarSelect(selectedId) {
});
}
+// ── Date field helpers ────────────────────────────────────
+function setDtValue(id, isoStr, mode) {
+ const input = document.getElementById(id);
+ if (input) input.value = isoStr || '';
+ const display = document.getElementById(id + '-display');
+ if (display) {
+ display.querySelector('.dt-display-text').textContent =
+ formatDtDisplay(isoStr, mode, getLang());
+ }
+}
+
function openNewEventModal(date) {
state.editingEvent = null;
state.selectedEventColor = '';
@@ -723,10 +736,10 @@ function openNewEventModal(date) {
const start = new Date(date);
const end = new Date(date);
end.setHours(end.getHours() + 1);
- document.getElementById('ev-start').value = toLocalDatetimeInput(start);
- document.getElementById('ev-end').value = toLocalDatetimeInput(end);
- document.getElementById('ev-start-date').value = toDateInput(start);
- document.getElementById('ev-end-date').value = toDateInput(start);
+ setDtValue('ev-start', toLocalDatetimeInput(start), 'datetime');
+ setDtValue('ev-end', toLocalDatetimeInput(end), 'datetime');
+ setDtValue('ev-start-date', toDateInput(start), 'date');
+ setDtValue('ev-end-date', toDateInput(start), 'date');
toggleAlldayFields(false);
populateCalendarSelect(null);
@@ -746,14 +759,14 @@ function openEditEventModal(ev) {
document.getElementById('ev-allday').checked = ev.allDay;
if (ev.allDay) {
- document.getElementById('ev-start-date').value = ev.start.slice(0, 10);
- document.getElementById('ev-end-date').value = ev.end.slice(0, 10);
+ setDtValue('ev-start-date', ev.start.slice(0, 10), 'date');
+ setDtValue('ev-end-date', ev.end.slice(0, 10), 'date');
toggleAlldayFields(true);
} else {
const s = new Date(ev.start);
const e = new Date(ev.end);
- document.getElementById('ev-start').value = toLocalDatetimeInput(s);
- document.getElementById('ev-end').value = toLocalDatetimeInput(e);
+ setDtValue('ev-start', toLocalDatetimeInput(s), 'datetime');
+ setDtValue('ev-end', toLocalDatetimeInput(e), 'datetime');
toggleAlldayFields(false);
}
@@ -781,6 +794,24 @@ function bindEventModal() {
toggleAlldayFields(e.target.checked);
});
+ // Date/time pickers
+ [
+ { displayId: 'ev-start-display', inputId: 'ev-start', mode: 'datetime' },
+ { displayId: 'ev-end-display', inputId: 'ev-end', mode: 'datetime' },
+ { displayId: 'ev-start-date-display', inputId: 'ev-start-date', mode: 'date' },
+ { displayId: 'ev-end-date-display', inputId: 'ev-end-date', mode: 'date' },
+ ].forEach(({ displayId, inputId, mode }) => {
+ const disp = document.getElementById(displayId);
+ if (!disp) return;
+ const open = async () => {
+ const current = document.getElementById(inputId)?.value || '';
+ const result = await openDatePicker(disp, current, mode);
+ if (result !== null) setDtValue(inputId, result, mode);
+ };
+ disp.addEventListener('click', open);
+ disp.addEventListener('keydown', e => { if (e.key === 'Enter' || e.key === ' ') open(); });
+ });
+
// Color picker: click preview to open gradient picker
const evColorPreview = document.getElementById('ev-color-preview');
const evColorHex = document.getElementById('ev-color-hex');
diff --git a/frontend/js/date-picker.js b/frontend/js/date-picker.js
new file mode 100644
index 0000000..80678dd
--- /dev/null
+++ b/frontend/js/date-picker.js
@@ -0,0 +1,271 @@
+/**
+ * Custom dark date/time picker
+ * openDatePicker(anchor, value, mode) → Promise
+ * anchor : DOM element to position near
+ * value : ISO string ("YYYY-MM-DDTHH:MM" | "YYYY-MM-DD") or ""
+ * mode : 'datetime' | 'date'
+ */
+import { t } from './i18n.js';
+
+const ITEM_H = 40; // px per scroll item
+const VISIBLE = 3; // visible items in time scroller
+
+export function openDatePicker(anchor, value, mode = 'datetime') {
+ return new Promise(resolve => {
+ // ── Parse initial value ───────────────────────────────
+ let selDate = new Date();
+ selDate.setHours(0, 0, 0, 0);
+ let selHour = selDate.getHours();
+ let selMin = 0;
+
+ if (value) {
+ try {
+ const raw = mode === 'datetime'
+ ? value.replace(' ', 'T')
+ : value + 'T00:00:00';
+ const d = new Date(raw);
+ if (!isNaN(d)) {
+ selDate = new Date(d.getFullYear(), d.getMonth(), d.getDate());
+ if (mode === 'datetime') { selHour = d.getHours(); selMin = d.getMinutes(); }
+ }
+ } catch (_) {}
+ }
+
+ let viewYear = selDate.getFullYear();
+ let viewMonth = selDate.getMonth();
+
+ // ── Build DOM ─────────────────────────────────────────
+ const overlay = document.createElement('div');
+ overlay.className = 'dtp-overlay';
+ document.body.appendChild(overlay);
+
+ const card = document.createElement('div');
+ card.className = 'dtp-card';
+ overlay.appendChild(card);
+
+ function done(result) {
+ overlay.remove();
+ resolve(result);
+ }
+
+ // Click outside → cancel
+ overlay.addEventListener('mousedown', e => {
+ if (e.target === overlay) done(null);
+ });
+
+ // ── Calendar builder ──────────────────────────────────
+ function buildCalendar() {
+ const months = t('months');
+ const dowKeys = t('dow_monday'); // always Monday-first in calendar
+
+ const firstDay = new Date(viewYear, viewMonth, 1);
+ const gridStart = new Date(firstDay);
+ let dow = firstDay.getDay();
+ dow = dow === 0 ? 6 : dow - 1; // 0=Mon…6=Sun
+ gridStart.setDate(gridStart.getDate() - dow);
+
+ const cells = [];
+ const iter = new Date(gridStart);
+ for (let i = 0; i < 42; i++) {
+ cells.push(new Date(iter));
+ iter.setDate(iter.getDate() + 1);
+ }
+
+ const today = new Date(); today.setHours(0, 0, 0, 0);
+
+ const dowHtml = dowKeys.map(d => `${d}
`).join('');
+ const daysHtml = cells.map(cell => {
+ const isOther = cell.getMonth() !== viewMonth;
+ const isToday = cell.getTime() === today.getTime();
+ const isSelected = cell.getTime() === selDate.getTime();
+ let cls = 'dtp-day';
+ if (isOther) cls += ' other';
+ if (isToday) cls += ' today';
+ if (isSelected) cls += ' selected';
+ return `${cell.getDate()}
`;
+ }).join('');
+
+ return `
+
+ ${dowHtml}
+ ${daysHtml}
+
`;
+ }
+
+ // ── Time scroll builder ───────────────────────────────
+ function buildTime() {
+ if (mode !== 'datetime') return '';
+ const hItems = Array.from({ length: 24 }, (_, i) =>
+ `${String(i).padStart(2,'0')}
`
+ ).join('');
+ const mItems = Array.from({ length: 60 }, (_, i) =>
+ `${String(i).padStart(2,'0')}
`
+ ).join('');
+ return ``;
+ }
+
+ // ── Render ────────────────────────────────────────────
+ function render() {
+ card.innerHTML =
+ buildCalendar() +
+ buildTime() +
+ `
+
+
+
`;
+
+ bindEvents();
+ if (mode === 'datetime') initScrollers();
+ positionCard();
+ }
+
+ // ── Event bindings ────────────────────────────────────
+ function bindEvents() {
+ card.querySelector('#dtp-prev').onclick = () => {
+ viewMonth--;
+ if (viewMonth < 0) { viewMonth = 11; viewYear--; }
+ render();
+ };
+ card.querySelector('#dtp-next').onclick = () => {
+ viewMonth++;
+ if (viewMonth > 11) { viewMonth = 0; viewYear++; }
+ render();
+ };
+
+ // Day click
+ card.querySelectorAll('.dtp-day').forEach(el => {
+ el.addEventListener('click', () => {
+ selDate = new Date(parseInt(el.dataset.ts));
+ if (el.classList.contains('other')) {
+ viewYear = selDate.getFullYear();
+ viewMonth = selDate.getMonth();
+ }
+ render();
+ });
+ });
+
+ card.querySelector('#dtp-cancel').onclick = () => done(null);
+ card.querySelector('#dtp-ok').onclick = () => done(buildResult());
+ }
+
+ // ── Time scroll initialisation ────────────────────────
+ function initScrollers() {
+ const hCol = card.querySelector('#dtp-h');
+ const mCol = card.querySelector('#dtp-m');
+ if (!hCol || !mCol) return;
+
+ // Scroll to selected value (padding-top = ITEM_H, so scrollTop = val * ITEM_H)
+ hCol.scrollTop = selHour * ITEM_H;
+ mCol.scrollTop = selMin * ITEM_H;
+ highlightItems(hCol, selHour);
+ highlightItems(mCol, selMin);
+
+ let hTimer, mTimer;
+
+ hCol.addEventListener('scroll', () => {
+ clearTimeout(hTimer);
+ hTimer = setTimeout(() => {
+ selHour = Math.max(0, Math.min(23, Math.round(hCol.scrollTop / ITEM_H)));
+ hCol.scrollTop = selHour * ITEM_H;
+ highlightItems(hCol, selHour);
+ }, 80);
+ });
+
+ mCol.addEventListener('scroll', () => {
+ clearTimeout(mTimer);
+ mTimer = setTimeout(() => {
+ selMin = Math.max(0, Math.min(59, Math.round(mCol.scrollTop / ITEM_H)));
+ mCol.scrollTop = selMin * ITEM_H;
+ highlightItems(mCol, selMin);
+ }, 80);
+ });
+
+ // Click item to select
+ hCol.querySelectorAll('.dtp-ti').forEach((el, i) => {
+ el.addEventListener('click', () => {
+ selHour = i;
+ hCol.scrollTo({ top: i * ITEM_H, behavior: 'smooth' });
+ highlightItems(hCol, i);
+ });
+ });
+ mCol.querySelectorAll('.dtp-ti').forEach((el, i) => {
+ el.addEventListener('click', () => {
+ selMin = i;
+ mCol.scrollTo({ top: i * ITEM_H, behavior: 'smooth' });
+ highlightItems(mCol, i);
+ });
+ });
+ }
+
+ function highlightItems(col, val) {
+ col.querySelectorAll('.dtp-ti').forEach((el, i) => {
+ el.classList.toggle('selected', i === val);
+ });
+ }
+
+ // ── Result builder ────────────────────────────────────
+ function buildResult() {
+ const y = selDate.getFullYear();
+ const mo = String(selDate.getMonth() + 1).padStart(2, '0');
+ const dd = String(selDate.getDate()).padStart(2, '0');
+ if (mode === 'date') return `${y}-${mo}-${dd}`;
+ const h = String(selHour).padStart(2, '0');
+ const mi = String(selMin).padStart(2, '0');
+ return `${y}-${mo}-${dd}T${h}:${mi}`;
+ }
+
+ // ── Positioning ───────────────────────────────────────
+ function positionCard() {
+ const r = anchor.getBoundingClientRect();
+ const cw = card.offsetWidth || 280;
+ const ch = card.offsetHeight || 420;
+ let left = r.left;
+ let top = r.bottom + 6;
+ if (left + cw > window.innerWidth - 8) left = window.innerWidth - cw - 8;
+ if (top + ch > window.innerHeight - 8) top = r.top - ch - 6;
+ if (left < 8) left = 8;
+ if (top < 8) top = 8;
+ card.style.left = left + 'px';
+ card.style.top = top + 'px';
+ }
+
+ render();
+ });
+}
+
+/**
+ * Format an ISO value for display in the UI
+ * mode: 'datetime' | 'date'
+ * lang: 'de' | 'en'
+ */
+export function formatDtDisplay(isoStr, mode, lang = 'de') {
+ if (!isoStr) return '—';
+ try {
+ const d = mode === 'datetime'
+ ? new Date(isoStr.replace(' ', 'T'))
+ : new Date(isoStr + 'T00:00:00');
+ if (isNaN(d)) return isoStr;
+ const locale = lang === 'en' ? 'en-GB' : 'de-CH';
+ if (mode === 'datetime') {
+ return d.toLocaleString(locale, {
+ day: '2-digit', month: '2-digit', year: 'numeric',
+ hour: '2-digit', minute: '2-digit', hour12: false,
+ });
+ }
+ return d.toLocaleDateString(locale, {
+ day: '2-digit', month: '2-digit', year: 'numeric',
+ });
+ } catch (_) { return isoStr; }
+}
diff --git a/frontend/js/views/month.js b/frontend/js/views/month.js
index 9775537..1d9de77 100644
--- a/frontend/js/views/month.js
+++ b/frontend/js/views/month.js
@@ -1,8 +1,8 @@
import { isToday, isPast, dayOfWeek, getISOWeekNumber } from '../utils.js';
import { t } from '../i18n.js';
-const LANE_H = 20; // px per lane (height 18px + 2px gap)
-const MAX_LANES = 3; // max visible event lanes per row
+const LANE_H = 20; // px per lane (event height 18px + 2px gap)
+const MAX_LANES = 3; // max visible lanes per row
export function renderMonth(container, currentDate, events, onDayClick, onEventClick, weekStartDay = 'monday') {
const year = currentDate.getFullYear();
@@ -24,10 +24,8 @@ export function renderMonth(container, currentDate, events, onDayClick, onEventC
// Normalize each event's date range once
const normed = events.map(ev => {
- const s = new Date(ev.start);
- s.setHours(0, 0, 0, 0);
- const e = new Date(ev.end);
- e.setHours(0, 0, 0, 0);
+ const s = new Date(ev.start); s.setHours(0, 0, 0, 0);
+ const e = new Date(ev.end); e.setHours(0, 0, 0, 0);
if (ev.allDay && e > s) e.setDate(e.getDate() - 1); // exclusive → inclusive
return { ev, ns: s, ne: e };
});
@@ -52,11 +50,10 @@ export function renderMonth(container, currentDate, events, onDayClick, onEventC
const colStart = Math.max(0, daysBetween(rowStart, ns));
const colEnd = Math.min(6, daysBetween(rowStart, ne));
if (colEnd < colStart) return;
- const span = colEnd - colStart + 1;
rowItems.push({
ev,
colStart,
- span,
+ span: colEnd - colStart + 1,
continuesLeft: ns < rowStart,
continuesRight: ne > rowEnd,
});
@@ -71,7 +68,7 @@ export function renderMonth(container, currentDate, events, onDayClick, onEventC
});
// Assign lanes (greedy interval packing)
- const lanes = []; // { colEnd }
+ const lanes = [];
rowItems.forEach(item => {
let laneIdx = lanes.findIndex(l => item.colStart >= l.colEnd);
if (laneIdx === -1) { laneIdx = lanes.length; lanes.push({ colEnd: 0 }); }
@@ -89,7 +86,7 @@ export function renderMonth(container, currentDate, events, onDayClick, onEventC
}
});
- // Render event spans
+ // Render event spans HTML (placed in overlay)
let eventsHtml = '';
rowItems.forEach(item => {
if (item.lane >= MAX_LANES) return;
@@ -110,25 +107,23 @@ export function renderMonth(container, currentDate, events, onDayClick, onEventC
title="${escAttr(ev.title)}">${escHtml(label)}
+ colsHtml += `
`;
});
@@ -136,8 +131,8 @@ export function renderMonth(container, currentDate, events, onDayClick, onEventC
bodyHtml += `
${kw}
-
${dayCellsHtml}
-
${eventsHtml}
+ ${colsHtml}
+
${eventsHtml}
`;
}
@@ -147,7 +142,7 @@ export function renderMonth(container, currentDate, events, onDayClick, onEventC
${bodyHtml}