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

Skip to content

feat(react-calendar-compat): Add onNavigateDate callback to CalendarYear decade selector#35804

Draft
Copilot wants to merge 3 commits intomasterfrom
copilot/add-decade-selector-handlers
Draft

feat(react-calendar-compat): Add onNavigateDate callback to CalendarYear decade selector#35804
Copilot wants to merge 3 commits intomasterfrom
copilot/add-decade-selector-handlers

Conversation

Copy link
Contributor

Copilot AI commented Mar 2, 2026

The decade selector's Previous/Next arrow buttons had no external callback, unlike the year selector's equivalent buttons which fire onNavigateDate. This made it impossible for consumers to react to decade navigation — e.g., updating custom day markers when the visible year range changes.

Changes

  • CalendarYear.types.ts — Added onNavigateDate?: (year: number) => void to CalendarYearProps. Receives the fromYear of the newly-displayed decade range.
  • CalendarYear.tsx — Updated useYearRangeState to call onNavigateDate with the new fromYear on both previous and next navigation.
  • react-calendar-compat.api.md — Updated API surface to reflect the new prop.

Usage

<CalendarYear
  navigatedYear={2025}
  navigationIcons={defaultNavigationIcons}
  onNavigateDate={(fromYear) => {
    // Called with 2013 when navigating back from 2025-2036
    // Called with 2037 when navigating forward from 2025-2036
    updateMarkersForRange(fromYear, fromYear + 11);
  }}
/>
Original prompt

This section details on the original issue you should resolve

<issue_title>[Feature]: Decade Selector on Calendar should have handlers for Next and Previous Arrow Buttons</issue_title>
<issue_description>### Area

React Components (@fluentui/react-components)

Describe the feature that you would like added

Image

In the year selector, these arrow buttons trigger the onNavigateDate handler. These arrow buttons on the decade selector do not, and there doesn't seem to be another handler which will handle a click on these buttons. I understand why the selector does not trigger onNavigateDate since moving to a different decade does not change the navigated date in the day selector, but there should still be a field in the props for which we can register handlers on those buttons.

Additional context

We are building custom marking on the week, month, and year, and without a handler on those buttons the UI does not update the markers for the decade selector.

Have you discussed this feature with our team

@ValentinaKozlova @khmakoto

Validations

  • Check that there isn't already an issue that requests the same feature to avoid creating a duplicate.

Priority

High</issue_description>

<agent_instructions>Add onNavigateDate handler to decade selector in react-calendar-compat component.</agent_instructions>

Comments on the Issue (you are @copilot in this section)

@gouttierre Hello @timothyhan-msft Thank you for submitting this request. Please be aware that the team is currently focused on urgent priorities and will be able to address this in a later sprint when capacity allows.

~cc @tudorpopams , @ValentinaKozlova


✨ Let Copilot coding agent set things up for you — coding agent works faster and does higher quality work when set up for your repo.

Copilot AI changed the title [WIP] Add handlers for decade selector arrow buttons feat(react-calendar-compat): Add onNavigateDate callback to CalendarYear decade selector Mar 2, 2026
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.

[Feature]: Decade Selector on Calendar should have handlers for Next and Previous Arrow Buttons

2 participants