fix(dashboard): show external calendar name and location in upcoming events

Imports fmtLocation; renderUpcomingEvents adds event-item__cal span for
cal_name and shows location with normalized ICS escapes via fmtLocation().
Event color dot gets filter: saturate(0.4) to match calendar view style.
This commit is contained in:
Konrad M.
2026-04-21 21:56:41 +02:00
parent e729bc9c4e
commit c6c02f0f30
2 changed files with 12 additions and 3 deletions
+4 -3
View File
@@ -6,7 +6,7 @@
import { api } from '/api.js';
import { t, formatDate, formatTime, getLocale } from '/i18n.js';
import { esc } from '/utils/html.js';
import { esc, fmtLocation } from '/utils/html.js';
import { openModal, closeModal } from '/components/modal.js';
// Hält den AbortController des aktuellen FAB-Listeners - wird bei jedem render() erneuert.
@@ -236,13 +236,14 @@ function renderUpcomingEvents(events) {
const timeStr = e.all_day ? t('dashboard.allDay') : `${formatTime(d)}${_suffix ? ' ' + _suffix : ''}`.trim();
return `
<div class="event-item" data-route="/calendar" role="button" tabindex="0">
<div class="event-item__bar" style="background-color:${esc(e.color) || 'var(--color-accent)'}"></div>
<div class="event-item__bar" style="background-color:${esc(e.cal_color || e.color) || 'var(--color-accent)'}"></div>
<div class="event-item__content">
<div class="event-item__title">${esc(e.title)}</div>
<div class="event-item__time">
<span class="event-time-badge ${isToday ? 'event-time-badge--today' : ''}">${isToday ? t('common.today') : formatDateTime(e.start_datetime).split(',')[0]}</span>
${timeStr}
${e.location ? ` · ${esc(e.location)}` : ''}
${e.location ? ` · ${esc(fmtLocation(e.location))}` : ''}
${e.cal_name ? `<span class="event-item__cal">${esc(e.cal_name)}</span>` : ''}
</div>
</div>
</div>
+8
View File
@@ -369,6 +369,7 @@
border-radius: var(--radius-full);
flex-shrink: 0;
background-color: var(--color-accent);
filter: saturate(0.4);
}
.event-item__content {
@@ -392,9 +393,16 @@
margin-top: 1px;
display: flex;
align-items: center;
flex-wrap: wrap;
gap: var(--space-1);
}
.event-item__cal {
width: 100%;
font-size: var(--text-xs);
color: var(--color-text-disabled);
}
.event-time-badge {
font-size: var(--text-xs);
font-weight: var(--font-weight-semibold);