[Feature Request]: Allow Calendar header to be clicked

[its-felix]

Description

Currently, the Calendar component can be either have granularity of day or month, but it can't be switched without an "external" component controlling the state.

I would like to be able to click on the Calendar header (like November 2024) to switch the granularity to month to allow the user to navigate to a different month or year quicker.

This could be solved either by supported an optional onHeaderClick handler or by allowing a custom component for the header.

Code of Conduct

• I agree to follow this project's Code of Conduct
• I checked the current issues for duplicate requests

[YueyingLu]

Hi @its-felix
thanks for the request.
Selecting a date in calendar is suitable for selecting relatively close dates. If you need to select a date far in the past or future, it is recommended to Date picker component https://cloudscape.design/components/date-picker/, enabling users to directly type the date in the input.

[its-felix]

I can see that makes sense on Desktop, but in my (subjective) opinion I think a quick navigation between dates that doesn't require keyboard input is preferable on mobile.

There are of course many ways to solve this. Maybe the native input type of the text-field for a DatePicker can be changed to type="date" then, so that it opens the native date picker of the browser instead?