Skip to content

[RFC] Add optional Month/Year Quick Jump Picker #2776

@yuan3y

Description

@yuan3y

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 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

  1. Would you be open to a PR that integrates this directly into the Calendar component?
  2. 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?
  3. 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.

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions