Oliver/paraguay
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Calendar: drop month grid, show schedule-webhook event list directly; date format dd.mm.yyyy

Browse Source
This commit is contained in:
Kato
2026-09-05 19:08:25 +00:00
parent 3d1b577cb1
commit a4d8d623a5
3 changed files with 16 additions and 150 deletions
Download Patch File Download Diff File Expand all files Collapse all files
js/main.js
+12 -81
View File
@@ -1000,103 +1000,34 @@ function renderDates(events) {
}
// ========================================
// CALENDAR (next to newsletter) — month view from schedule webhook
// CALENDAR (next to newsletter) — plain event list from schedule webhook
// ========================================
const MONTH_NAMES_DE = ['Januar','Februar','März','April','Mai','Juni','Juli','August','September','Oktober','November','Dezember'];
const MONTH_NAMES_EN = ['January','February','March','April','May','June','July','August','September','October','November','December'];
let calendarDate = new Date();
function isoDay(d) {
return d.getFullYear() + '-' + String(d.getMonth() + 1).padStart(2, '0') + '-' + String(d.getDate()).padStart(2, '0');
}
function eventsByDay() {
const map = {};
scheduleData.forEach(ev => {
if (!ev || !ev.start) return;
const key = isoDay(new Date(ev.start));
(map[key] = map[key] || []).push(ev);
});
return map;
}
function pad2(n) { return String(n).padStart(2, '0'); }
function initCalendar() {
const prev = document.getElementById('calendar-prev');
const next = document.getElementById('calendar-next');
if (!prev || !next) return;
prev.addEventListener('click', () => {
calendarDate = new Date(calendarDate.getFullYear(), calendarDate.getMonth() - 1, 1);
renderCalendar();
});
next.addEventListener('click', () => {
calendarDate = new Date(calendarDate.getFullYear(), calendarDate.getMonth() + 1, 1);
renderCalendar();
});
renderCalendar();
}
function renderCalendar() {
const grid = document.getElementById('calendar-grid');
const title = document.getElementById('calendar-title');
if (!grid || !title) return;
const lang = isDE() ? MONTH_NAMES_DE : MONTH_NAMES_EN;
const year = calendarDate.getFullYear();
const month = calendarDate.getMonth();
title.innerHTML = '<span>' + escapeHtml(lang[month]) + ' ' + year + '</span>';
const firstDay = new Date(year, month, 1);
const daysInMonth = new Date(year, month + 1, 0).getDate();
// Monday as first weekday: JS getDay() -> 0=Sun..6=Sat
let startOffset = (firstDay.getDay() + 6) % 7;
const todayKey = isoDay(new Date());
const eventMap = eventsByDay();
let html = '';
for (let i = 0; i < startOffset; i++) {
html += '<div class="calendar-day empty"></div>';
}
for (let day = 1; day <= daysInMonth; day++) {
const key = isoDay(new Date(year, month, day));
const dayEvents = eventMap[key] || [];
const classes = ['calendar-day'];
if (key === todayKey) classes.push('today');
if (dayEvents.length > 0) classes.push('has-event');
let cell = '<div class="' + classes.join(' ') + '"' +
(dayEvents.length ? ' title="' + escapeHtml(dayEvents.map(e => e.headline || 'Event').join(', ')) + '"' : '') + '>';
cell += '<span class="calendar-day-number">' + day + '</span>';
if (dayEvents.length > 0) {
cell += '<span class="calendar-dots">' + '<i></i>'.repeat(Math.min(dayEvents.length, 3)) + '</span>';
}
cell += '</div>';
html += cell;
}
grid.innerHTML = html;
// Event list below: upcoming events from this month (or hint)
const eventsEl = document.getElementById('calendar-events');
if (!eventsEl) return;
const monthEvents = scheduleData
.filter(ev => {
const d = new Date(ev.start);
return d.getFullYear() === year && d.getMonth() === month;
})
.sort((a, b) => new Date(a.start) - new Date(b.start));
if (monthEvents.length === 0) {
if (scheduleData.length === 0) {
eventsEl.innerHTML = '<p class="calendar-events-hint">' +
(isDE() ? 'Keine Termine in diesem Monat.' : 'No events this month.') + '</p>';
(isDE() ? 'Keine Termine geplant.' : 'No events scheduled.') + '</p>';
return;
}
const sorted = [...scheduleData].sort((a, b) => new Date(a.start) - new Date(b.start));
let list = '<ul class="calendar-event-list">';
monthEvents.forEach(ev => {
sorted.forEach(ev => {
if (!ev || !ev.start) return;
const sd = new Date(ev.start);
const ed = ev.end ? new Date(ev.end) : null;
const timeStr = String(sd.getHours()).padStart(2, '0') + ':' + String(sd.getMinutes()).padStart(2, '0') +
(ed ? '–' + String(ed.getHours()).padStart(2, '0') + ':' + String(ed.getMinutes()).padStart(2, '0') : '');
list += '<li><span class="calendar-event-date">' + String(sd.getDate()).padStart(2, '0') + '. ' + escapeHtml(lang[month].slice(0, 2)) + '</span>' +
const dateStr = pad2(sd.getDate()) + '.' + pad2(sd.getMonth() + 1) + '.' + sd.getFullYear();
const timeStr = pad2(sd.getHours()) + ':' + pad2(sd.getMinutes()) +
(ed ? '–' + pad2(ed.getHours()) + ':' + pad2(ed.getMinutes()) : '');
list += '<li><span class="calendar-event-date">' + dateStr + '</span>' +
'<span class="calendar-event-headline">' + escapeHtml(ev.headline || 'Event') + '</span>' +
'<span class="calendar-event-time">' + timeStr + '</span></li>';
});