Skip to content

[WC-3492]: fix(calendar-web): apply custom Header day format to column headers#2312

Open
rahmanunver wants to merge 2 commits into
mainfrom
fix/calendar-custom-header-day-format
Open

[WC-3492]: fix(calendar-web): apply custom Header day format to column headers#2312
rahmanunver wants to merge 2 commits into
mainfrom
fix/calendar-custom-header-day-format

Conversation

@rahmanunver

Copy link
Copy Markdown
Contributor

Pull request type

Bug fix (non-breaking change which fixes an issue)


Description

What: In the Calendar widget's Custom view, the "Header day format" property now applies to the day, week, and month column headers — not just the toolbar title.

Why: A customer (Mendix 10.24.19, Calendar module 2.4.0) set Header day format: EE dd-MM but the day-column header still rendered the default 07 Tue.

react-big-calendar uses two distinct sets of format keys:

  • dayHeaderFormat / monthHeaderFormat — the toolbar navigation title
  • dayFormat (week/day columns) and weekdayFormat (month weekday headers) — the per-column headers, the "07 Tue" text the user actually sees

CalendarPropsBuilder.buildFormats wired customViewHeaderDayFormat only into the toolbar-title keys, so the column headers kept RBC's date-fns default dayFormat: 'dd eee' and the user's pattern was silently dropped.

Fix: buildFormats now also sets formats.dayFormat (day/week columns) and formats.weekdayFormat (month) from the same customViewHeaderDayFormat pattern. RBC exposes a single shared dayFormat for day and week, so when both items set different patterns the week pattern wins (consistent with the existing timeGutterFormat precedence) and a console.warn is logged on collision. The custom work_week view spreads formats into RBC's TimeGrid, so it inherits the new dayFormat automatically.

Added unit tests for both formats, the collision precedence + warning, the no-format regression, and the existing time-gutter wiring (21/21 pass).

What should be covered while testing?

  1. Calendar in Custom view with day and week toolbar items.
  2. Set Header day format = EE dd-MM and Time gutter format = HH:mm.
  3. Day/week column headers should render e.g. Tue 07-07 (not 07 Tue); time gutter shows 24h 14:00.
  4. Switch to month view — weekday headers reflect the pattern.
  5. Regression: with no custom format set, headers fall back to RBC defaults unchanged.

In Custom view the Header day format was only wired into react-big-calendar's
toolbar-title keys (dayHeaderFormat/monthHeaderFormat), so the day/week/month
column headers still used RBC's default dayFormat (dd eee, rendering "07 Tue")
and the user's pattern was silently dropped.

Wire customViewHeaderDayFormat into RBC's per-column keys: dayFormat (day/week
columns) and weekdayFormat (month weekday headers). RBC shares a single global
dayFormat across day and week, so when both items set different patterns the week
pattern wins (matching the existing timeGutterFormat precedence) and a warning is
logged. Add unit tests covering both formats, the collision precedence, and the
no-format regression.
@rahmanunver rahmanunver requested a review from a team as a code owner July 7, 2026 14:49
@github-actions

This comment has been minimized.

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.

2 participants