You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Navigating to a distant date (e.g., planning a trip 12+ months away) currently requires the user to tap the "Next" arrow repeatedly. This is a high-friction experience for any app that involves long-term scheduling or historical data entry.
Add an optional prop (e.g., enableMonthYearPicker) that makes the month/year header label clickable. Tapping the label would open a picker, allowing the user to jump directly to a specific month or year.
Current Workaround
I have implemented a working version of this using the renderHeader prop and a custom Modal.
Key logic implemented:
Dynamic Month Generation: Uses locale-aware month names for i18n.
Range Constraints: Respects minDate and maxDate props.
State Sync: Triggers a calendar jump by updating the current prop.
Visual Example
Screen.Recording.2026-04-02.at.3.27.28.PM.mov
Questions for Maintainers
Would you be open to a PR that integrates this directly into the Calendar component?
Do you have a preferred UI pattern for pickers (e.g., vertical list, grid, or native wheel) to ensure it aligns with the library's design language?
Should this be part of the core Header component or a separate utility?
I am happy to contribute my implementation back to the library if this aligns with your roadmap.
Problem
Navigating to a distant date (e.g., planning a trip 12+ months away) currently requires the user to tap the "Next" arrow repeatedly. This is a high-friction experience for any app that involves long-term scheduling or historical data entry.
Community discussions show that many developers rely on custom workarounds for this common requirement. Example: r/reactnative: How to Add Year and Month Selection in react-native-calendars.
Proposed Feature
Add an optional prop (e.g.,
enableMonthYearPicker) that makes the month/year header label clickable. Tapping the label would open a picker, allowing the user to jump directly to a specific month or year.Current Workaround
I have implemented a working version of this using the
renderHeaderprop and a customModal.Key logic implemented:
minDateandmaxDateprops.currentprop.Visual Example
Screen.Recording.2026-04-02.at.3.27.28.PM.mov
Questions for Maintainers
Calendarcomponent?Headercomponent or a separate utility?I am happy to contribute my implementation back to the library if this aligns with your roadmap.