Thanks to visit codestin.com
Credit goes to github.com

Skip to content

show weekly total in calendar week view - #6097

Open
JoeJoeflyn wants to merge 2 commits into
kimai:mainfrom
JoeJoeflyn:feature/calendar-weekly-total
Open

show weekly total in calendar week view#6097
JoeJoeflyn wants to merge 2 commits into
kimai:mainfrom
JoeJoeflyn:feature/calendar-weekly-total

Conversation

@JoeJoeflyn

@JoeJoeflyn JoeJoeflyn commented Aug 2, 2026

Copy link
Copy Markdown
Contributor

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.

screenshot-2026-08-03_04-52-22

@kevinpapst kevinpapst left a comment

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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.weekNumbers is true (@fullcalendar/timegrid/main.js:120-127); otherwise the header <th> is just an empty .fc-timegrid-axis-frame with no cushion.
  • the all-day row axis cell — rendered unconditionally as a <span> holding the "all-day" label (@fullcalendar/timegrid/main.js:148). allDaySlot is 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 > 0 guard 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:30 under W32 has no label. Same gap as the daily totals, but under a week number it reads as more ambiguous. A title attribute would be cheap.

Tests & verification

Manual matrix worth walking before merge:

  • calendar.week_numbers on 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 direction option)
  • 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
@JoeJoeflyn

Copy link
Copy Markdown
Contributor Author

Thanks, addressed

@codecov

codecov Bot commented Aug 15, 2026

Copy link
Copy Markdown

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ Project coverage is 89.05%. Comparing base (8f0514a) to head (5035c6b).
⚠️ Report is 28 commits behind head on main.

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     

see 33 files with indirect coverage changes

🚀 New features to boost your workflow:
  • ❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
  • 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Show weekly total in Calendar's week view

2 participants