Scarriffle/Calendarr
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Web: enhance overflow popup with styled all-day bars and continuation arrows

Browse Source 
All-day events in the "+N weitere" popup now render as colored bars matching
the month-grid style: continues-left/right arrows when the event spans beyond
the selected day. Timed events keep dot+time+title format. Version bump v50.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Scarriffle
2026-06-11 20:02:04 +02:00
parent 900abcdb7a
commit 70aaec3401
3 changed files with 66 additions and 19 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
frontend/js/version.js
View File

@@ -1,2 +1,2 @@
// Increment APP_VERSION with every code change
export const APP_VERSION = 'v49';
export const APP_VERSION = 'v50';

61
frontend/js/views/month.js
View File

@@ -277,28 +277,53 @@ function showOverflowPopup(anchor, date, events, onEventClick) {
popup.appendChild(header);
events.forEach(ev => {
const row = document.createElement('div');
row.className = 'mop-row';
const evStart = new Date(ev.start); evStart.setHours(0, 0, 0, 0);
const evEnd = new Date(ev.end); evEnd.setHours(0, 0, 0, 0);
// allDay end from API is exclusive → actual last day = evEnd - 1d
const lastDay = ev.allDay ? new Date(evEnd.getTime() - 86400000) : evEnd;
const continuesLeft = evStart < date;
const continuesRight = lastDay > date;
const color = ev.color || ev.calendarColor || '#4285f4';
const dot = document.createElement('span');
dot.className = 'mop-dot';
dot.style.background = ev.color || ev.calendarColor || '#4285f4';
if (ev.allDay) {
// All-day events → colored bar with continuation arrows
const bar = document.createElement('div');
bar.className = 'mop-bar'
+ (continuesLeft ? ' continues-left' : '')
+ (continuesRight ? ' continues-right' : '');
bar.style.background = color;
bar.textContent = ev.title;
bar.addEventListener('click', e => {
e.stopPropagation();
popup.remove();
onEventClick(ev, bar);
});
popup.appendChild(bar);
} else {
// Timed events → dot + time + title
const row = document.createElement('div');
row.className = 'mop-row';
const time = document.createElement('span');
time.className = 'mop-time';
time.textContent = ev.allDay ? t('allday_cap') : fmtTime(new Date(ev.start));
const dot = document.createElement('span');
dot.className = 'mop-dot';
dot.style.background = color;
const title = document.createElement('span');
title.className = 'mop-title';
title.textContent = ev.title;
const time = document.createElement('span');
time.className = 'mop-time';
time.textContent = fmtTime(new Date(ev.start));
row.append(dot, time, title);
row.addEventListener('click', e => {
e.stopPropagation();
popup.remove();
onEventClick(ev, row);
});
popup.appendChild(row);
const title = document.createElement('span');
title.className = 'mop-title';
title.textContent = ev.title;
row.append(dot, time, title);
row.addEventListener('click', e => {
e.stopPropagation();
popup.remove();
onEventClick(ev, row);
});
popup.appendChild(row);
}
});
document.body.appendChild(popup);