diff --git a/css/styles.css b/css/styles.css index 9bfb183..abb6355 100644 --- a/css/styles.css +++ b/css/styles.css @@ -1479,65 +1479,7 @@ TELEGRAM BANNER font-weight: 700; color: #1c1e21; } -.calendar-nav { - background: #f0f2f5; - border: none; - border-radius: 8px; - width: 32px; - height: 32px; - font-size: 1.1rem; - line-height: 1; - color: #1c1e21; - cursor: pointer; - transition: background 0.2s ease; -} -.calendar-nav:hover { background: #e4e6eb; } -.calendar-weekdays { - display: grid; - grid-template-columns: repeat(7, 1fr); - text-align: center; - font-size: 0.75rem; - font-weight: 600; - color: #65676b; - margin-bottom: 4px; -} -.calendar-grid { - display: grid; - grid-template-columns: repeat(7, 1fr); - gap: 2px; -} -.calendar-day { - aspect-ratio: 1; - display: flex; - flex-direction: column; - align-items: center; - justify-content: center; - border-radius: 8px; - font-size: 0.85rem; - color: #1c1e21; - position: relative; -} -.calendar-day.empty { visibility: hidden; } -.calendar-day.today { - background: #e7f3ff; - color: #1877f2; - font-weight: 700; -} -.calendar-day.has-event { font-weight: 700; } -.calendar-dots { - display: flex; - gap: 2px; - position: absolute; - bottom: 3px; -} -.calendar-dots i { - width: 5px; - height: 5px; - border-radius: 50%; - background: #1877f2; - display: inline-block; -} -.calendar-events { margin-top: 12px; border-top: 1px solid #e4e6eb; padding-top: 10px; } +.calendar-events { border-top: 1px solid #e4e6eb; padding-top: 10px; } .calendar-events-hint { color: #65676b; font-size: 0.85rem; text-align: center; margin: 0; } .calendar-event-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; } .calendar-event-list li { diff --git a/index.html b/index.html index f099bc8..800f2b5 100644 --- a/index.html +++ b/index.html @@ -428,18 +428,11 @@
- -
- Kalender - Calendar +
+ Termine + Upcoming Dates
-
-
- MoDiMiDoFrSaSo - MoTuWeThFrSaSu -
-

Termine werden geladen... diff --git a/js/main.js b/js/main.js index 4708f70..ba9a6c2 100644 --- a/js/main.js +++ b/js/main.js @@ -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 = '' + escapeHtml(lang[month]) + ' ' + year + ''; - - 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 += '

'; - } - 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 = '
'; - cell += '' + day + ''; - if (dayEvents.length > 0) { - cell += '' + ''.repeat(Math.min(dayEvents.length, 3)) + ''; - } - cell += '
'; - 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 = '

' + - (isDE() ? 'Keine Termine in diesem Monat.' : 'No events this month.') + '

'; + (isDE() ? 'Keine Termine geplant.' : 'No events scheduled.') + '

'; return; } + + const sorted = [...scheduleData].sort((a, b) => new Date(a.start) - new Date(b.start)); let 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 += '
  • ' + String(sd.getDate()).padStart(2, '0') + '. ' + escapeHtml(lang[month].slice(0, 2)) + '' + + 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 += '
  • ' + dateStr + '' + '' + escapeHtml(ev.headline || 'Event') + '' + '' + timeStr + '
    • '; });