show weekly total in calendar week view - #6097
Conversation
kevinpapst
left a comment
There was a problem hiding this comment.
The overall approach is sound and fits the existing code: it reuses the already-computed durations map instead of re-iterating events, and it tags the new node with fc-dailytotal so the existing cleanup at KimaiCalendar.js:767 removes it on every re-render — no duplicates when eventsSet fires repeatedly per event source. Good detail.
Issues
1. Total lands in the wrong cell when week numbers are disabled — blocking
document.querySelector('.fc-timegrid-axis-cushion') is not scoped, and FullCalendar renders that class in two places:
- the header axis cell — only when
options.weekNumbersis true (@fullcalendar/timegrid/main.js:120-127); otherwise the header<th>is just an empty.fc-timegrid-axis-framewith no cushion. - the all-day row axis cell — rendered unconditionally as a
<span>holding the "all-day" label (@fullcalendar/timegrid/main.js:148).allDaySlotis left at its default (true) in Kimai.
Kimai passes weekNumbers: this.options['showWeekNumbers'] (KimaiCalendar.js:128), backed by the calendar.week_numbers setting. With that set to false, the first match in document order becomes the all-day cushion, and the weekly total renders next to the "all-day" label instead. (It also puts a <div> inside a <span> — invalid nesting.)
Scope the lookup to the header table, which uniquely contains the head axis:
const weekCushion = document.querySelector('.fc-col-header .fc-timegrid-axis-cushion');
Worth considering whether the total should still render when week numbers are off — falling back to .fc-col-header .fc-timegrid-axis-frame would cover that, since the frame is always present.
2. Possible clipping in the axis cell
.fc-timegrid-axis-cushion is capped at max-width: 60px and its parent .fc-timegrid-axis-frame is overflow: hidden (timegrid main.css). Worth verifying with a three-digit hour total (>100h across a week is plausible for an admin viewing a team calendar) that nothing gets cut off.
3. text-align: center is a no-op
The new element is display: inline-block, so it shrinks to its text width — there's nothing to center. The parent frame is justify-content: flex-end, so the total right-aligns regardless. Either drop the rule or make the element display: block so it actually aligns under the week number.
4. Styling diverges from .fc-dailytotal
.fc-dailytotal has no CSS in the project at all — the daily totals are unstyled divs. Adding padding: 2px 4px only to the week total makes it sit slightly differently from the six daily totals on the same header row. Either drop the padding or apply it to both for a consistent header row.
Smaller notes
- The
headerCells.length > 0guard deserves a comment. Its effect is to exclude event dates that have no visible column — hidden weekends (weekends: false) and dates shifted out of range by the.toUTC()bucketing above. That's the right call (the weekly total then matches the sum of what's actually displayed), but the intent isn't obvious from the code. One sentence would help. - Accessibility: a bare
37:30underW32has no label. Same gap as the daily totals, but under a week number it reads as more ambiguous. Atitleattribute would be cheap.
Tests & verification
Manual matrix worth walking before merge:
calendar.week_numberson and off (issue 1)- weekends hidden (
calendar.weekends: false) - a week containing an all-day absence or public holiday
- RTL locale (the calendar honours a
directionoption) - switching month → week → day → week, to confirm no stale or duplicated totals
- Scope axis selector to .fc-col-header with fallback to axis-frame so week total lands in the header, not the all-day row (issue 1) - Drop no-op text-align and use display:block for proper centering - Add padding for breathing room, matching daily totals - Add title attribute for accessibility - Comment the headerCells.length > 0 guard
|
Thanks, addressed |
Codecov Report✅ All modified and coverable lines are covered by tests. Additional details and impacted files@@ Coverage Diff @@
## main #6097 +/- ##
============================================
+ Coverage 88.75% 89.05% +0.29%
- Complexity 10090 10114 +24
============================================
Files 889 890 +1
Lines 32152 32256 +104
============================================
+ Hits 28538 28726 +188
+ Misses 3614 3530 -84 🚀 New features to boost your workflow:
|
Closes #5841
Shows the total duration for the whole week below the week number in the first column of the calendar week view, matching the style of the existing daily totals in the column headers.