feat: add year month selector to calendar component

src/hooks/internal/useNavigation.ts

@@ -1,6 +1,9 @@
 import { Temporal } from '@js-temporal/polyfill'
 import { Dispatch, SetStateAction, useMemo } from 'react'
-import { PickerOptions } from '../../types'
+import {
+    PickerOptionsWithResolvedCalendar,
+    SupportedCalendar,
+} from '../../types'
 import localisationHelpers from '../../utils/localisationHelpers'
 
 export type UseNavigationReturnType = {
@@ -10,6 +13,7 @@ export type UseNavigationReturnType = {
     }
     currYear: {
         label: string | number
+        value: string | number
     }
     nextYear: {
         label: string | number
@@ -26,11 +30,61 @@ export type UseNavigationReturnType = {
         label: string | undefined
         navigateTo: () => void
     }
+    months: Array<{
+        label: string
+        value: number
+    }>
+    navigateToMonth: (month: number) => void
+    navigateToYear: (year: number) => void
 }
+
+type Month = {
+    value: number
+    dateForLabel?: Temporal.PlainDate
+}
+
+const getAvailableMonths = (calendarSystem = 'iso8601'): Month[] => {
+    try {
+        const calendar = new Temporal.Calendar(calendarSystem)
+        const referenceDate = calendar.dateFromFields({
+            year: 2000,
+            month: 1,
+            day: 1,
+        })
+
+        const months: Month[] = []
+        let monthIndex = 1
+
+        while (monthIndex <= 13) {
+            try {
+                const date = calendar.dateFromFields({
+                    year: referenceDate.year,
+                    month: monthIndex,
+                    day: 1,
+                })
+                const monthInfo = calendar.monthsInYear(date)
+                if (monthIndex > monthInfo) {
+                    break
+                }
+                months.push({
+                    value: monthIndex,
+                    dateForLabel: date,
+                })
+                monthIndex++
+            } catch (e) {
+                break
+            }
+        }
+        return months
+    } catch (e) {
+        return getAvailableMonths('iso8601')
+    }
+}
+
 type UseNavigationHook = (
     firstZdtOfVisibleMonth: Temporal.ZonedDateTime,
     setFirstZdtOfVisibleMonth: Dispatch<SetStateAction<Temporal.ZonedDateTime>>,
-    localeOptions: PickerOptions
+    localeOptions: PickerOptionsWithResolvedCalendar
 ) => UseNavigationReturnType
 /**
  * internal hook used by useDatePicker to build the navigation of the calendar
@@ -62,7 +116,9 @@ export const useNavigation: UseNavigationHook = (
 
         const options = {
             locale: localeOptions.locale,
-            calendar: localeOptions.calendar,
+            calendar: localeOptions.calendar.id as
+                | SupportedCalendar
+                | undefined,
             numberingSystem: localeOptions.numberingSystem,
         }
 
@@ -76,53 +132,108 @@ export const useNavigation: UseNavigationHook = (
             month: 'long' as const,
         }
 
+        const monthsData = getAvailableMonths(options.calendar)
+        const months = monthsData
+            .map((month) => ({
+                value: month.value,
+                label:
+                    (month.dateForLabel &&
+                        localisationHelpers.localiseMonth(
+                            month.dateForLabel.toZonedDateTime({
+                                timeZone: firstZdtOfVisibleMonth.timeZone,
+                            }),
+                            { ...localeOptions, calendar: options.calendar },
+                            monthFormat
+                        )) ||
+                    '',
+            }))
+            .filter((month): month is { label: string; value: number } =>
+                Boolean(month.label)
+            )
+
+        const navigateToMonth = (monthNum: number) => {
+            try {
+                setFirstZdtOfVisibleMonth(
+                    firstZdtOfVisibleMonth.with({ month: monthNum, day: 1 })
+                )
+            } catch (e) {
+                console.error('Invalid month navigation:', e)
+            }
+        }
+
+        const navigateToYear = (year: number) => {
+            try {
+                setFirstZdtOfVisibleMonth(firstZdtOfVisibleMonth.with({ year }))
+            } catch (e) {
+                console.error('Invalid year navigation:', e)
+            }
+        }
+
         return {
             prevYear: {
                 label: localisationHelpers.localiseYear(
                     prevYear,
-                    localeOptions,
+                    { ...localeOptions, calendar: options.calendar },
                     yearNumericFormat
                 ),
                 navigateTo: () => setFirstZdtOfVisibleMonth(prevYear),
             },
             currYear: {
                 label: localisationHelpers.localiseYear(
                     firstZdtOfVisibleMonth,
-                    localeOptions,
+                    { ...localeOptions, calendar: options.calendar },
                     yearNumericFormat
                 ),
+                value:
+                    options.calendar === 'ethiopic'
+                        ? firstZdtOfVisibleMonth.eraYear ??
+                          String(
+                              localisationHelpers.localiseYear(
+                                  firstZdtOfVisibleMonth,
+                                  {
+                                      ...localeOptions,
+                                      calendar: options.calendar,
+                                  },
+                                  yearNumericFormat
+                              )
+                              // Ethiopic years - when localised to English - add the era (i.e. 2015 ERA1)
+                          ).split(' ')[0]
+                        : firstZdtOfVisibleMonth.year,
             },
             nextYear: {
                 label: localisationHelpers.localiseYear(
                     nextYear,
-                    localeOptions,
+                    { ...localeOptions, calendar: options.calendar },
                     yearNumericFormat
                 ),
                 navigateTo: () => setFirstZdtOfVisibleMonth(nextYear),
             },
             prevMonth: {
                 label: localisationHelpers.localiseMonth(
                     prevMonth,
-                    localeOptions,
+                    { ...localeOptions, calendar: options.calendar },
                     monthFormat
                 ),
                 navigateTo: () => setFirstZdtOfVisibleMonth(prevMonth),
             },
             currMonth: {
                 label: localisationHelpers.localiseMonth(
                     firstZdtOfVisibleMonth,
-                    localeOptions,
+                    { ...localeOptions, calendar: options.calendar },
                     monthFormat
                 ),
             },
             nextMonth: {
                 label: localisationHelpers.localiseMonth(
                     nextMonth,
-                    localeOptions,
+                    { ...localeOptions, calendar: options.calendar },
                     monthFormat
                 ),
                 navigateTo: () => setFirstZdtOfVisibleMonth(nextMonth),
             },
+            months,
+            navigateToMonth,
+            navigateToYear,
         }
     }, [firstZdtOfVisibleMonth, localeOptions, setFirstZdtOfVisibleMonth])
 }

src/hooks/internal/useWeekDayLabels.ts

@@ -1,9 +1,11 @@
 import { Temporal } from '@js-temporal/polyfill'
 import { useMemo } from 'react'
-import { PickerOptions } from '../../types'
+import { PickerOptionsWithResolvedCalendar } from '../../types'
 import localisationHelpers from '../../utils/localisationHelpers'
 
-export const useWeekDayLabels = (localeOptions: PickerOptions) =>
+export const useWeekDayLabels = (
+    localeOptions: PickerOptionsWithResolvedCalendar
+) =>
     useMemo(() => {
         if (!localeOptions.calendar) {
             throw new Error('a calendar must be provided to useWeekDayLabels')
@@ -29,7 +31,7 @@ export const useWeekDayLabels = (localeOptions: PickerOptions) =>
 
 const getWeekDayString: (
     date: Temporal.ZonedDateTime,
-    localeOptions: PickerOptions
+    localeOptions: PickerOptionsWithResolvedCalendar
 ) => string = (date, localeOptions) => {
     return localisationHelpers.localiseWeekDayLabel(date, localeOptions)
 }

src/hooks/useDatePicker.ts

@@ -130,7 +130,7 @@ export const useDatePicker: UseDatePickerHookType = ({
     const localeOptions = useMemo(
         () => ({
             locale: resolvedOptions.locale,
-            calendar: temporalCalendar as unknown as SupportedCalendar,
+            calendar: temporalCalendar,
             timeZone: temporalTimeZone,
             weekDayFormat: resolvedOptions.weekDayFormat,
             numberingSystem: resolvedOptions.numberingSystem,
@@ -191,7 +191,7 @@ export const useDatePicker: UseDatePickerHookType = ({
                 dateValue: formatDate(weekDayZdt, undefined, format),
                 label: localisationHelpers.localiseWeekLabel(
                     weekDayZdt.withCalendar(localeOptions.calendar),
-                    localeOptions
+                    {...localeOptions, calendar: resolvedOptions.calendar}
                 ),
                 onClick: () => selectDate(weekDayZdt),
                 isSelected: selectedDateZdt

src/types.ts

@@ -9,6 +9,10 @@ export type WeekDayFormat = 'narrow' | 'short' | 'long'
 
 export type PickerOptions = Partial<ResolvedLocaleOptions>
 
+export type PickerOptionsWithResolvedCalendar = Omit<PickerOptions, 'calendar'> & {
+    calendar: Temporal.CalendarProtocol 
+}
+
 export type ResolvedLocaleOptions = {
     calendar: SupportedCalendar
     locale: string

src/utils/localisationHelpers.ts

@@ -5,7 +5,11 @@ import {
     customCalendars,
     CustomCalendarTypes,
 } from '../custom-calendars'
-import { PickerOptions, SupportedCalendar } from '../types'
+import {
+    PickerOptions,
+    PickerOptionsWithResolvedCalendar,
+    SupportedCalendar,
+} from '../types'
 import { formatDate, isCustomCalendar } from './helpers'
 
 const getPartialLocaleMatch: (
@@ -137,7 +141,7 @@ const localiseMonth = (
 
 export const localiseWeekDayLabel = (
     zdt: Temporal.ZonedDateTime,
-    localeOptions: PickerOptions
+    localeOptions: PickerOptionsWithResolvedCalendar
 ) => {
     if (!localeOptions.calendar) {
         throw new Error('no calendar provided to localise function')