hnzio/mood-tracking
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 7 Wiki Activity

Fix calendar layout sizing and responsive grid rendering

Browse Source
This commit is contained in:
Florian Heinz
2026-04-11 19:38:25 +02:00
parent a3b24ccac1
commit 291e98fb5a
2 changed files with 25 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files
assets/js/app.js
+18 -7
View File
@@ -397,9 +397,19 @@
const start = new Date(end);
start.setDate(end.getDate() - 364);
const gridStart = new Date(start);
const startWeekday = gridStart.getDay();
const startOffset = startWeekday === 0 ? 6 : startWeekday - 1;
gridStart.setDate(gridStart.getDate() - startOffset);
const gridEnd = new Date(end);
const endWeekday = gridEnd.getDay();
const endOffset = endWeekday === 0 ? 0 : 7 - endWeekday;
gridEnd.setDate(gridEnd.getDate() + endOffset);
const days = [];
const cursor = new Date(start);
while (cursor <= end) {
const cursor = new Date(gridStart);
while (cursor <= gridEnd) {
const iso = toLocalIso(cursor);
const entry = map.get(iso) || null;
days.push({
@@ -413,12 +423,13 @@
}
const totalWeeks = Math.floor((days.length - 1) / 7) + 1;
const height = 148;
const cellSize = 12;
const cellGap = 5;
const xOffset = 34;
const yOffset = 24;
const width = xOffset + ((totalWeeks - 1) * (cellSize + cellGap)) + cellSize + 28;
const yOffset = 22;
const gridHeight = (7 * cellSize) + (6 * cellGap);
const height = yOffset + gridHeight + 8;
const width = xOffset + ((totalWeeks - 1) * (cellSize + cellGap)) + cellSize + 12;
const monthLabels = [];
let lastMonth = -1;
@@ -429,7 +440,7 @@
const y = yOffset + (row * (cellSize + cellGap));
const fill = calendarColor(item.entry);
if (item.day <= 7 && item.month !== lastMonth) {
if (item.day <= 7 && item.month !== lastMonth && item.entry !== null) {
monthLabels.push({
x,
label: new Intl.DateTimeFormat("de-DE", { month: "short" }).format(new Date(`${item.date}T12:00:00`)),
@@ -454,7 +465,7 @@
}).join("");
container.innerHTML = `
<svg class="calendar-svg" viewBox="0 0 ${width} ${height}" role="img" aria-label="Kalender">
<svg class="calendar-svg" width="${width}" height="${height}" viewBox="0 0 ${width} ${height}" role="img" aria-label="Kalender">
${monthLabels.map(item => `<text class="calendar-tooltip" x="${item.x}" y="14">${item.label}</text>`).join("")}
<text class="calendar-tooltip" x="0" y="34">Mo</text>
<text class="calendar-tooltip" x="0" y="68">Mi</text>