lelo/bethaus-app
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

improve calendar

Browse Source
This commit is contained in:
lelo 2025-12-19 09:42:07 +00:00
parent e959c83a0d
commit 1c71ea60a8
2 changed files with 43 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
static/app.css
View File

@ -656,7 +656,7 @@ footer {
border: 1px solid #ddd; border: 1px solid #ddd;
border-top: 0; border-top: 0;
border-radius: 0 0 6px 6px; border-radius: 0 0 6px 6px;
overflow: hidden; overflow: visible;
} }
.calendar-weekday-header { .calendar-weekday-header {
@ -712,6 +712,11 @@ footer {
border-bottom: none; border-bottom: none;
} }
.calendar-day-hidden {
visibility: hidden;
pointer-events: none;
}
@media (min-width: 992px) { @media (min-width: 992px) {
.calendar-grid { .calendar-grid {
grid-template-columns: repeat(7, minmax(0, 1fr)); grid-template-columns: repeat(7, minmax(0, 1fr));
@ -727,7 +732,12 @@ footer {
border: 1px solid #ddd; border: 1px solid #ddd;
border-bottom: 0; border-bottom: 0;
border-radius: 8px 8px 0 0; border-radius: 8px 8px 0 0;
overflow: hidden; overflow: visible;
position: sticky;
top: 70px;
z-index: 900;
background: var(--card-background, #fff);
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.04);
} }
.calendar-day { .calendar-day {

43
templates/calendar_section.html
View File

@ -24,15 +24,7 @@
</div> </div>
</div> </div>
<div class="calendar-weekday-header"> <div class="calendar-weekday-header"></div>
<div>Mo</div>
<div>Di</div>
<div>Mi</div>
<div>Do</div>
<div>Fr</div>
<div>Sa</div>
<div>So</div>
</div>
<div id="calendar-days" class="calendar-grid"> <div id="calendar-days" class="calendar-grid">
<!-- Populated via inline script below --> <!-- Populated via inline script below -->
@ -157,18 +149,40 @@
return holidays.get(toLocalISO(date)) || ''; return holidays.get(toLocalISO(date)) || '';
} }
function isDesktopView() {
return window.matchMedia && window.matchMedia('(min-width: 992px)').matches;
}
function getCalendarRange() { function getCalendarRange() {
const weeks = window._calendarIsAdmin ? 12 : 4; const weeks = window._calendarIsAdmin ? 12 : 4;
const start = new Date(); const start = new Date();
start.setHours(0, 0, 0, 0); start.setHours(0, 0, 0, 0);
// shift back to Monday (0 = Sunday)
const diffToMonday = (start.getDay() + 6) % 7; if (isDesktopView()) {
start.setDate(start.getDate() - diffToMonday); // shift back to Monday (0 = Sunday)
const diffToMonday = (start.getDay() + 6) % 7;
start.setDate(start.getDate() - diffToMonday);
}
const end = new Date(start); const end = new Date(start);
end.setDate(end.getDate() + (weeks * 7) - 1); end.setDate(end.getDate() + (weeks * 7) - 1);
return { start, end }; return { start, end };
} }
function renderWeekdayHeader(startDate) {
const header = document.querySelector('.calendar-weekday-header');
if (!header) return;
header.innerHTML = '';
const formatDayShort = new Intl.DateTimeFormat('de-DE', { weekday: 'short' });
for (let i = 0; i < 7; i++) {
const d = new Date(startDate);
d.setDate(startDate.getDate() + i);
const div = document.createElement('div');
div.textContent = formatDayShort.format(d);
header.appendChild(div);
}
}
(function renderInitialCalendarRange() { (function renderInitialCalendarRange() {
const daysContainer = document.getElementById('calendar-days'); const daysContainer = document.getElementById('calendar-days');
if (!daysContainer || daysContainer.childElementCount > 0) return; if (!daysContainer || daysContainer.childElementCount > 0) return;
@ -181,6 +195,8 @@
const formatDayName = new Intl.DateTimeFormat('de-DE', { weekday: 'long' }); const formatDayName = new Intl.DateTimeFormat('de-DE', { weekday: 'long' });
const formatDate = new Intl.DateTimeFormat('de-DE', { day: '2-digit', month: '2-digit', year: 'numeric' }); const formatDate = new Intl.DateTimeFormat('de-DE', { day: '2-digit', month: '2-digit', year: 'numeric' });
const { start, end } = getCalendarRange(); const { start, end } = getCalendarRange();
const todayIso = toLocalISO(new Date());
renderWeekdayHeader(start);
const dayCount = Math.round((end - start) / (1000 * 60 * 60 * 24)) + 1; const dayCount = Math.round((end - start) / (1000 * 60 * 60 * 24)) + 1;
for (let i = 0; i < dayCount; i++) { for (let i = 0; i < dayCount; i++) {
@ -203,6 +219,9 @@
if (holidayName) { if (holidayName) {
dayBlock.classList.add('calendar-day-holiday'); dayBlock.classList.add('calendar-day-holiday');
} }
if (isDesktopView() && isoDate < todayIso) {
dayBlock.classList.add('calendar-day-hidden');
}
dayBlock.innerHTML = ` dayBlock.innerHTML = `
<div class="calendar-day-header"> <div class="calendar-day-header">