Add more calendar views (i.e., week view, year view, decade view)

[nmanumr]

🙋 Feature Request

Currently, the Adobe Spectrum React calendar component only supports a single view, which is the month view. This feature request proposes adding additional views to the calendar component, including year, decade, and week views.

🤔 Expected Behavior

There can a view prop which can be used to change the view of the calendar for example

<Calendar view="week" /> // a view with dates of a specific week
<Calendar view="month" /> // the default and current view, where all the dates of specific month are listed
<Calendar view="year" /> // a view with list of months
<Calendar view="decade" /> // a view with list of years in a decade

😯 Current Behavior

Currently calendar component only supports the month view.

💁 Possible Solution

I already implemented this feature internally for my team (detail in context section), and here's how I did it:

• I left the whole interaction logic as it is.
• and I only have to patch the rendering logic, which includes:
  • date formatting for calendar cells
  • state provided by useCalendarState and useRangeCalendarState
  • and some changes to make the Calendar logic more abstract, which will allow us to support more calendar views

Although the current implementation is quite cranky, I'm willing to contribute to this feature. Just let me know If what I did aligns with adobe spectrum design's philosophy.

🔦 Context

I had been working on a date picker component. The current implementation of the date picker component does not have a year or decade view. This means that users have to click through many months to select a date that is a few years from the past.

To fix this issue, I internally patched the current implementation of the calendar component for my team to add support for month, year, and week views. This allows users to select dates more easily, regardless of how far in the past or future they are.

For this, I had to patch:

• @react-stately/useCalendarState
• @react-stately/useRangeCalendarState
• @react-aria/useCalendar
• @react-aria/useRangeCalendar
• @react-aria/useCalendarCell
• @react-aria/useCalendarGrid
• and the whole calendar component from react-aria-components.

💻 Examples

These are the screenshots of my implementation.

🧢 Your Company/Team

CarteBlanche.tech / Hirecinch

[LFDanLu]

Thank you for your interest and contribution offer! Looking at the our internal Spectrum Design site, I'm not seeing any designs defining how we'd like these week/year/decade view to look or behave, so we'll have to bring this up with the design team first.

[devongovett]

btw you can already build a week view with the hooks by setting the visibleDuration option. There's an example linked from the docs.

[nmanumr]

@devongovett Exactly we don't need to change anything for the week view in the hooks but for the Calendar component from react-aria-components to work for the week view I guess we need to change a few things here. Meanwhile I can fix this if you want.

[cssinate]

Closely related to this discussion