microsoft / microsoft/fluentui

[Bug]: WeeklyDayPicker showing incorrect week number when navigating to different weeks

Open Beginner friendly
#36,721 2 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

Component: CalendarDayGrid Component: WeeklyDayPicker Fluent UI react (v8) Type: Bug :bug:
Dominant language
TypeScript
Stars
20.3k
Forks
2.9k
Avg merge
2d 9h
Merged PRs (30d)
46

Description

Package

react

Package version

8.125.6

React version

17.0.2

Environment
System:
    OS: Windows 11 10.0.26200
    CPU: (12) arm64 Snapdragon(R) X 12-core X1E80100 @ 3.40 GHz
    Memory: 30.95 GB / 63.49 GB
  Browsers:
    Edge: Chromium (151.0.4129.107)
Current Behavior

In the WeeklyDayPicker, the week numbering inaccurately reflects the current week. Instead, the week number represents the start of the week.

Expected Behavior

The WeeklyDayPicker's sub-component, CalendarGridRow, should accurately parse the week number for the given week. The bug is in https://github.com/microsoft/fluentui/blob/master/packages/react/src/components/CalendarDayGrid/CalendarGridRow.tsx. The bug doesn't reproduce for a full calendar view, only the weekly view.

Reproduction

https://codepen.io/alorodriguez/pen/NPprpqx

Steps to reproduce
  1. Create an instance of the WeeklyDayPicker/CalendarDayGrid/CalendarGridRow component.
  2. In a collapsed state, navigate forward/backward weeks in the CalendarDayGrid.
  3. Observe that the week numbering for the collapsed single-week view of the CalendarDayGrid is incorrect. It will incorrectly show the week number associated with the start of the month. Then, when you get to the next month, it will suddenly increment by 4. In other words, sub-weeks within a month are being represented with a week number that represents only the first week of that month.
Are you reporting an Accessibility issue?

None

Suggested severity

Urgent - No workaround and Products/sites are affected

Products/sites affected

Microsoft Outlook

Are you willing to submit a PR to fix?

no

Validations
  • Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
  • The provided reproduction is a minimal reproducible example of the bug.

Contributor guide

No contributing guide indexed for this repository

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Start in packages/react/src/components/CalendarDayGrid/CalendarGridRow.tsx and use the linked CodePen reproduction to inspect the collapsed WeeklyDayPicker path. Reproduce navigation across weeks and months, then verify that the displayed week number matches the selected week rather than the month's starting week. Done means full calendar behavior remains correct while the collapsed weekly view reports each week accurately.

Written by the indexing model from the issue text.

Assessment

Tech stack
react, typescript
Domain
frontend
Issue type
Bug
Difficulty
2/5
Estimated time
1-3 hours
Activity status
Active
Clarity
Clearly specified
Newbie friendliness
82/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.