[RFC] Add optional Month/Year Quick Jump Picker
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 renderHeader prop and a custom Modal.
Key logic implemented:
- Dynamic Month Generation: Uses locale-aware month names for i18n.
- Range Constraints: Respects
minDateandmaxDateprops. - State Sync: Triggers a calendar jump by updating the
currentprop.
Visual Example
https://github.com/user-attachments/assets/eb231f2e-366f-4b20-891f-44301966ae63
Questions for Maintainers
- Would you be open to a PR that integrates this directly into the
Calendarcomponent? - 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
Headercomponent or a separate utility?
I am happy to contribute my implementation back to the library if this aligns with your roadmap.
Source: wix/react-native-calendars