feat: Custom calendar support #7949

devongovett · 2025-03-17T23:27:03Z

Refactored version of #7803 that implements a different approach that doesn't require as many new Calendar methods. See #7803 (comment)

Question: do we need to pass add the createCalendar prop to DatePicker as well?

… the type checker

Finally learned how to run `make check-examples` myself

…ian dates

rspbot · 2025-03-17T23:38:19Z

Build successful! 🎉

rspbot · 2025-03-17T23:42:18Z

Build successful! 🎉

snowystinger

pretty cool!

snowystinger · 2025-03-18T02:31:19Z

packages/@internationalized/date/src/queries.ts

+}
+
+export function isSameCalendar(a: Calendar, b: Calendar): boolean {
+  return Object.getPrototypeOf(a) === Object.getPrototypeOf(b);


going to be problematic for MFE's? this will only work for a single copy of the library

…lendar-support

LFDanLu

Behavior looks sound to me. As for whether or not DatePicker should also support createCalendar, would it just be passing that option down through to the Calendar within? Would be nice to support but if its a bunch of work I'm happy making it a followup for later

LFDanLu · 2025-03-20T00:02:59Z

packages/@internationalized/date/tests/customCalendarImpl.ts

+
+  #getCurrentYear(year: number): [CalendarDate, boolean] {
+    let anchor = this.#anchorDate.set({year});
+    let startOfYear = startOfWeek(anchor, 'en', 'sun');


Maybe non important since this work is to support any type of custom calendar but I was curious during testing:
if someone wanted to make their 454 calendar work in whatever locale, they would just need to make sure their implementation has a variable locale here instead of hard coding it? Or would the expectation be that a 454 calendar doesn't actually change with respect to locale and should always have the same week start day, thus they should hardcode the firstDayOfWeek in the Calendar?

…-custom-calendar-support

rspbot · 2025-03-25T19:22:44Z

Build successful! 🎉

rspbot · 2025-03-25T19:22:46Z

## API Changes

react-aria-components

/react-aria-components:Calendar

 Calendar <T extends DateValue> {
   aria-describedby?: string
   aria-details?: string
   aria-label?: string
   aria-labelledby?: string
   autoFocus?: boolean = false
   children?: ReactNode | ((CalendarRenderProps & {
     defaultChildren: ReactNode | undefined
 })) => ReactNode
   className?: string | ((CalendarRenderProps & {
     defaultClassName: string | undefined
 })) => string
+  createCalendar?: (CalendarIdentifier) => Calendar
   defaultFocusedValue?: DateValue | null
   defaultValue?: DateValue | null
   firstDayOfWeek?: 'sun' | 'mon' | 'tue' | 'wed' | 'thu' | 'fri' | 'sat'
   focusedValue?: DateValue | null
   isDateUnavailable?: (DateValue) => boolean
   isDisabled?: boolean = false
   isInvalid?: boolean
   isReadOnly?: boolean = false
   maxValue?: DateValue | null
   minValue?: DateValue | null
   onChange?: (MappedDateValue<DateValue>) => void
   onFocusChange?: (CalendarDate) => void
   pageBehavior?: PageBehavior = visible
   slot?: string | null
   style?: CSSProperties | ((CalendarRenderProps & {
     defaultStyle: CSSProperties
 })) => CSSProperties | undefined
   value?: DateValue | null
   visibleDuration?: DateDuration = {months: 1}
 }

/react-aria-components:RangeCalendar

 RangeCalendar <T extends DateValue> {
   allowsNonContiguousRanges?: boolean
   aria-describedby?: string
   aria-details?: string
   aria-label?: string
   aria-labelledby?: string
   autoFocus?: boolean = false
   children?: ReactNode | ((RangeCalendarRenderProps & {
     defaultChildren: ReactNode | undefined
 })) => ReactNode
   className?: string | ((RangeCalendarRenderProps & {
     defaultClassName: string | undefined
 })) => string
+  createCalendar?: (CalendarIdentifier) => Calendar
   defaultFocusedValue?: DateValue | null
   defaultValue?: RangeValue<DateValue> | null
   firstDayOfWeek?: 'sun' | 'mon' | 'tue' | 'wed' | 'thu' | 'fri' | 'sat'
   focusedValue?: DateValue | null
   isDateUnavailable?: (DateValue) => boolean
   isDisabled?: boolean = false
   isInvalid?: boolean
   isReadOnly?: boolean = false
   maxValue?: DateValue | null
   minValue?: DateValue | null
   onChange?: (RangeValue<MappedDateValue<DateValue>>) => void
   onFocusChange?: (CalendarDate) => void
   pageBehavior?: PageBehavior = visible
   slot?: string | null
   style?: CSSProperties | ((RangeCalendarRenderProps & {
     defaultStyle: CSSProperties
 })) => CSSProperties | undefined
   value?: RangeValue<DateValue> | null
   visibleDuration?: DateDuration = {months: 1}
 }

/react-aria-components:CalendarProps

 CalendarProps <T extends DateValue> {
   aria-describedby?: string
   aria-details?: string
   aria-label?: string
   aria-labelledby?: string
   autoFocus?: boolean = false
   children?: ReactNode | ((CalendarRenderProps & {
     defaultChildren: ReactNode | undefined
 })) => ReactNode
   className?: string | ((CalendarRenderProps & {
     defaultClassName: string | undefined
 })) => string
+  createCalendar?: (CalendarIdentifier) => Calendar
   defaultFocusedValue?: DateValue | null
   defaultValue?: DateValue | null
   firstDayOfWeek?: 'sun' | 'mon' | 'tue' | 'wed' | 'thu' | 'fri' | 'sat'
   focusedValue?: DateValue | null
   isDateUnavailable?: (DateValue) => boolean
   isDisabled?: boolean = false
   isInvalid?: boolean
   isReadOnly?: boolean = false
   maxValue?: DateValue | null
   minValue?: DateValue | null
   onChange?: (MappedDateValue<DateValue>) => void
   onFocusChange?: (CalendarDate) => void
   pageBehavior?: PageBehavior = visible
   slot?: string | null
   style?: CSSProperties | ((CalendarRenderProps & {
     defaultStyle: CSSProperties
 })) => CSSProperties | undefined
   value?: DateValue | null
   visibleDuration?: DateDuration = {months: 1}
 }

/react-aria-components:RangeCalendarProps

 RangeCalendarProps <T extends DateValue> {
   allowsNonContiguousRanges?: boolean
   aria-describedby?: string
   aria-details?: string
   aria-label?: string
   aria-labelledby?: string
   autoFocus?: boolean = false
   children?: ReactNode | ((RangeCalendarRenderProps & {
     defaultChildren: ReactNode | undefined
 })) => ReactNode
   className?: string | ((RangeCalendarRenderProps & {
     defaultClassName: string | undefined
 })) => string
+  createCalendar?: (CalendarIdentifier) => Calendar
   defaultFocusedValue?: DateValue | null
   defaultValue?: RangeValue<DateValue> | null
   firstDayOfWeek?: 'sun' | 'mon' | 'tue' | 'wed' | 'thu' | 'fri' | 'sat'
   focusedValue?: DateValue | null
   isDateUnavailable?: (DateValue) => boolean
   isDisabled?: boolean = false
   isInvalid?: boolean
   isReadOnly?: boolean = false
   maxValue?: DateValue | null
   minValue?: DateValue | null
   onChange?: (RangeValue<MappedDateValue<DateValue>>) => void
   onFocusChange?: (CalendarDate) => void
   pageBehavior?: PageBehavior = visible
   slot?: string | null
   style?: CSSProperties | ((RangeCalendarRenderProps & {
     defaultStyle: CSSProperties
 })) => CSSProperties | undefined
   value?: RangeValue<DateValue> | null
   visibleDuration?: DateDuration = {months: 1}
 }

@internationalized/date

/@internationalized/date:Calendar

 Calendar {
   fromJulianDay: (number) => CalendarDate
   getDaysInMonth: (AnyCalendarDate) => number
   getEras: () => Array<string>
+  getFormattableMonth: (AnyCalendarDate) => CalendarDate
   getMinimumDayInMonth: (AnyCalendarDate) => number
   getMinimumMonthInYear: (AnyCalendarDate) => number
   getMonthsInYear: (AnyCalendarDate) => number
   getYearsInEra: (AnyCalendarDate) => number
-  identifier: string
+  identifier: CalendarIdentifier
+  isEqual: (Calendar) => boolean
   toJulianDay: (AnyCalendarDate) => number
 }

/@internationalized/date:GregorianCalendar

 GregorianCalendar {
   balanceDate: (Mutable<AnyCalendarDate>) => void
   fromJulianDay: (number) => CalendarDate
   getDaysInMonth: (AnyCalendarDate) => number
   getDaysInYear: (AnyCalendarDate) => number
   getEras: () => Array<string>
   getMonthsInYear: (AnyCalendarDate) => number
   getYearsInEra: (AnyCalendarDate) => number
-  identifier: any
+  identifier: CalendarIdentifier
   isInverseEra: (AnyCalendarDate) => boolean
   toJulianDay: (AnyCalendarDate) => number
 }

/@internationalized/date:JapaneseCalendar

 JapaneseCalendar {
   balanceDate: (Mutable<AnyCalendarDate>) => void
   constrainDate: (Mutable<AnyCalendarDate>) => void
   fromJulianDay: (number) => CalendarDate
   getDaysInMonth: (AnyCalendarDate) => number
   getDaysInYear: (AnyCalendarDate) => number
   getEras: () => Array<string>
   getMinimumDayInMonth: (AnyCalendarDate) => number
   getMinimumMonthInYear: (AnyCalendarDate) => number
   getMonthsInYear: (AnyCalendarDate) => number
   getYearsInEra: (AnyCalendarDate) => number
-  identifier: any
+  identifier: CalendarIdentifier
   isInverseEra: (AnyCalendarDate) => boolean
   toJulianDay: (AnyCalendarDate) => number
 }

/@internationalized/date:BuddhistCalendar

 BuddhistCalendar {
   balanceDate: () => void
   fromJulianDay: (number) => CalendarDate
   getDaysInMonth: (AnyCalendarDate) => number
   getDaysInYear: (AnyCalendarDate) => number
   getEras: () => Array<string>
   getMonthsInYear: (AnyCalendarDate) => number
   getYearsInEra: (AnyCalendarDate) => number
-  identifier: any
+  identifier: CalendarIdentifier
   isInverseEra: (AnyCalendarDate) => boolean
   toJulianDay: (AnyCalendarDate) => number
 }

/@internationalized/date:TaiwanCalendar

 TaiwanCalendar {
   balanceDate: (Mutable<AnyCalendarDate>) => void
   fromJulianDay: (number) => CalendarDate
   getDaysInMonth: (AnyCalendarDate) => number
   getDaysInYear: (AnyCalendarDate) => number
   getEras: () => Array<string>
   getMonthsInYear: (AnyCalendarDate) => number
   getYearsInEra: (AnyCalendarDate) => number
-  identifier: any
+  identifier: CalendarIdentifier
   isInverseEra: (AnyCalendarDate) => boolean
   toJulianDay: (AnyCalendarDate) => number
 }

/@internationalized/date:PersianCalendar

 PersianCalendar {
   fromJulianDay: (number) => CalendarDate
   getDaysInMonth: (AnyCalendarDate) => number
   getEras: () => Array<string>
   getMonthsInYear: () => number
   getYearsInEra: () => number
-  identifier: any
+  identifier: CalendarIdentifier
   toJulianDay: (AnyCalendarDate) => number
 }

/@internationalized/date:IndianCalendar

 IndianCalendar {
   balanceDate: () => void
   fromJulianDay: (number) => CalendarDate
   getDaysInMonth: (AnyCalendarDate) => number
   getDaysInYear: (AnyCalendarDate) => number
   getEras: () => Array<string>
   getMonthsInYear: (AnyCalendarDate) => number
   getYearsInEra: () => number
-  identifier: any
+  identifier: CalendarIdentifier
   isInverseEra: (AnyCalendarDate) => boolean
   toJulianDay: (AnyCalendarDate) => number
 }

/@internationalized/date:IslamicCivilCalendar

 IslamicCivilCalendar {
   fromJulianDay: (number) => CalendarDate
   getDaysInMonth: (AnyCalendarDate) => number
   getDaysInYear: (AnyCalendarDate) => number
   getEras: () => Array<string>
   getMonthsInYear: () => number
   getYearsInEra: () => number
-  identifier: any
+  identifier: CalendarIdentifier
   toJulianDay: (AnyCalendarDate) => number
 }

/@internationalized/date:IslamicTabularCalendar

 IslamicTabularCalendar {
   fromJulianDay: (number) => CalendarDate
   getDaysInMonth: (AnyCalendarDate) => number
   getDaysInYear: (AnyCalendarDate) => number
   getEras: () => Array<string>
   getMonthsInYear: () => number
   getYearsInEra: () => number
-  identifier: any
+  identifier: CalendarIdentifier
   toJulianDay: (AnyCalendarDate) => number
 }

/@internationalized/date:IslamicUmalquraCalendar

 IslamicUmalquraCalendar {
   constructor: () => void
   fromJulianDay: (number) => CalendarDate
   getDaysInMonth: (AnyCalendarDate) => number
   getDaysInYear: (AnyCalendarDate) => number
   getEras: () => Array<string>
   getMonthsInYear: () => number
   getYearsInEra: () => number
-  identifier: any
+  identifier: CalendarIdentifier
   toJulianDay: (AnyCalendarDate) => number
 }

/@internationalized/date:HebrewCalendar

 HebrewCalendar {
   balanceYearMonth: (Mutable<AnyCalendarDate>, AnyCalendarDate) => void
   fromJulianDay: (number) => CalendarDate
   getDaysInMonth: (AnyCalendarDate) => number
   getDaysInYear: (AnyCalendarDate) => number
   getEras: () => Array<string>
   getMonthsInYear: (AnyCalendarDate) => number
   getYearsInEra: () => number
-  identifier: any
+  identifier: CalendarIdentifier
   toJulianDay: (AnyCalendarDate) => number
 }

/@internationalized/date:EthiopicCalendar

 EthiopicCalendar {
   fromJulianDay: (number) => CalendarDate
   getDaysInMonth: (AnyCalendarDate) => number
   getDaysInYear: (AnyCalendarDate) => number
   getEras: () => Array<string>
   getMonthsInYear: () => number
   getYearsInEra: (AnyCalendarDate) => number
-  identifier: any
+  identifier: CalendarIdentifier
   toJulianDay: (AnyCalendarDate) => number
 }

/@internationalized/date:EthiopicAmeteAlemCalendar

 EthiopicAmeteAlemCalendar {
   fromJulianDay: (number) => CalendarDate
   getDaysInMonth: (AnyCalendarDate) => number
   getDaysInYear: (AnyCalendarDate) => number
   getEras: () => Array<string>
   getMonthsInYear: () => number
   getYearsInEra: () => number
-  identifier: any
+  identifier: CalendarIdentifier
   toJulianDay: (AnyCalendarDate) => number
 }

/@internationalized/date:CopticCalendar

 CopticCalendar {
   balanceDate: (Mutable<AnyCalendarDate>) => void
   fromJulianDay: (number) => CalendarDate
   getDaysInMonth: (AnyCalendarDate) => number
   getDaysInYear: (AnyCalendarDate) => number
   getEras: () => Array<string>
   getMonthsInYear: () => number
   getYearsInEra: (AnyCalendarDate) => number
-  identifier: any
+  identifier: CalendarIdentifier
   isInverseEra: (AnyCalendarDate) => boolean
   toJulianDay: (AnyCalendarDate) => number
 }

/@internationalized/date:createCalendar

 createCalendar {
-  name: string
+  name: CalendarIdentifier
   returnVal: undefined
 }

/@internationalized/date:CalendarIdentifier

+CalendarIdentifier {
+  C: undefined
+}

/@internationalized/date:isEqualCalendar

+isEqualCalendar {
+  a: Calendar
+  b: Calendar
+  returnVal: undefined
+}

@react-aria/calendar

/@react-aria/calendar:CalendarGridAria

 CalendarGridAria {
   gridProps: DOMAttributes
   headerProps: DOMAttributes
   weekDays: Array<string>
+  weeksInMonth: number
 }

@react-spectrum/calendar

/@react-spectrum/calendar:Calendar

 Calendar <T extends DateValue> {
   UNSAFE_className?: string
   UNSAFE_style?: CSSProperties
   alignSelf?: Responsive<'auto' | 'normal' | 'start' | 'end' | 'center' | 'flex-start' | 'flex-end' | 'self-start' | 'self-end' | 'stretch'>
   aria-describedby?: string
   aria-details?: string
   aria-label?: string
   aria-labelledby?: string
   autoFocus?: boolean = false
   bottom?: Responsive<DimensionValue>
+  createCalendar?: (CalendarIdentifier) => Calendar
   defaultFocusedValue?: DateValue | null
   defaultValue?: DateValue | null
   end?: Responsive<DimensionValue>
   errorMessage?: ReactNode
   flex?: Responsive<string | number | boolean>
   flexBasis?: Responsive<number | string>
   flexGrow?: Responsive<number>
   flexShrink?: Responsive<number>
   focusedValue?: DateValue | null
   gridArea?: Responsive<string>
   gridColumn?: Responsive<string>
   gridColumnEnd?: Responsive<string>
   gridColumnStart?: Responsive<string>
   gridRow?: Responsive<string>
   gridRowEnd?: Responsive<string>
   gridRowStart?: Responsive<string>
   height?: Responsive<DimensionValue>
   id?: string
   isDateUnavailable?: (DateValue) => boolean
   isDisabled?: boolean = false
   isHidden?: Responsive<boolean>
   isInvalid?: boolean
   isReadOnly?: boolean = false
   justifySelf?: Responsive<'auto' | 'normal' | 'start' | 'end' | 'flex-start' | 'flex-end' | 'self-start' | 'self-end' | 'center' | 'left' | 'right' | 'stretch'>
   left?: Responsive<DimensionValue>
   margin?: Responsive<DimensionValue>
   marginBottom?: Responsive<DimensionValue>
   marginEnd?: Responsive<DimensionValue>
   marginStart?: Responsive<DimensionValue>
   marginTop?: Responsive<DimensionValue>
   marginX?: Responsive<DimensionValue>
   marginY?: Responsive<DimensionValue>
   maxHeight?: Responsive<DimensionValue>
   maxValue?: DateValue | null
   maxWidth?: Responsive<DimensionValue>
   minHeight?: Responsive<DimensionValue>
   minValue?: DateValue | null
   minWidth?: Responsive<DimensionValue>
   onChange?: (MappedDateValue<DateValue>) => void
   onFocusChange?: (CalendarDate) => void
   order?: Responsive<number>
   pageBehavior?: PageBehavior = visible
   position?: Responsive<'static' | 'relative' | 'absolute' | 'fixed' | 'sticky'>
   right?: Responsive<DimensionValue>
   start?: Responsive<DimensionValue>
   top?: Responsive<DimensionValue>
   value?: DateValue | null
   visibleMonths?: number = 1
   width?: Responsive<DimensionValue>
   zIndex?: Responsive<number>
 }

/@react-spectrum/calendar:RangeCalendar

 RangeCalendar <T extends DateValue> {
   UNSAFE_className?: string
   UNSAFE_style?: CSSProperties
   alignSelf?: Responsive<'auto' | 'normal' | 'start' | 'end' | 'center' | 'flex-start' | 'flex-end' | 'self-start' | 'self-end' | 'stretch'>
   allowsNonContiguousRanges?: boolean
   aria-describedby?: string
   aria-details?: string
   aria-label?: string
   aria-labelledby?: string
   autoFocus?: boolean = false
   bottom?: Responsive<DimensionValue>
+  createCalendar?: (CalendarIdentifier) => Calendar
   defaultFocusedValue?: DateValue | null
   defaultValue?: RangeValue<DateValue> | null
   end?: Responsive<DimensionValue>
   errorMessage?: ReactNode
   flex?: Responsive<string | number | boolean>
   flexBasis?: Responsive<number | string>
   flexGrow?: Responsive<number>
   flexShrink?: Responsive<number>
   focusedValue?: DateValue | null
   gridArea?: Responsive<string>
   gridColumn?: Responsive<string>
   gridColumnEnd?: Responsive<string>
   gridColumnStart?: Responsive<string>
   gridRow?: Responsive<string>
   gridRowEnd?: Responsive<string>
   gridRowStart?: Responsive<string>
   height?: Responsive<DimensionValue>
   id?: string
   isDateUnavailable?: (DateValue) => boolean
   isDisabled?: boolean = false
   isHidden?: Responsive<boolean>
   isInvalid?: boolean
   isReadOnly?: boolean = false
   justifySelf?: Responsive<'auto' | 'normal' | 'start' | 'end' | 'flex-start' | 'flex-end' | 'self-start' | 'self-end' | 'center' | 'left' | 'right' | 'stretch'>
   left?: Responsive<DimensionValue>
   margin?: Responsive<DimensionValue>
   marginBottom?: Responsive<DimensionValue>
   marginEnd?: Responsive<DimensionValue>
   marginStart?: Responsive<DimensionValue>
   marginTop?: Responsive<DimensionValue>
   marginX?: Responsive<DimensionValue>
   marginY?: Responsive<DimensionValue>
   maxHeight?: Responsive<DimensionValue>
   maxValue?: DateValue | null
   maxWidth?: Responsive<DimensionValue>
   minHeight?: Responsive<DimensionValue>
   minValue?: DateValue | null
   minWidth?: Responsive<DimensionValue>
   onChange?: (RangeValue<MappedDateValue<DateValue>>) => void
   onFocusChange?: (CalendarDate) => void
   order?: Responsive<number>
   pageBehavior?: PageBehavior = visible
   position?: Responsive<'static' | 'relative' | 'absolute' | 'fixed' | 'sticky'>
   right?: Responsive<DimensionValue>
   start?: Responsive<DimensionValue>
   top?: Responsive<DimensionValue>
   value?: RangeValue<DateValue> | null
   visibleMonths?: number = 1
   width?: Responsive<DimensionValue>
   zIndex?: Responsive<number>
 }

/@react-spectrum/calendar:SpectrumCalendarProps

 SpectrumCalendarProps <T extends DateValue> {
   UNSAFE_className?: string
   UNSAFE_style?: CSSProperties
   alignSelf?: Responsive<'auto' | 'normal' | 'start' | 'end' | 'center' | 'flex-start' | 'flex-end' | 'self-start' | 'self-end' | 'stretch'>
   aria-describedby?: string
   aria-details?: string
   aria-label?: string
   aria-labelledby?: string
   autoFocus?: boolean = false
   bottom?: Responsive<DimensionValue>
+  createCalendar?: (CalendarIdentifier) => Calendar
   defaultFocusedValue?: DateValue | null
   defaultValue?: DateValue | null
   end?: Responsive<DimensionValue>
   errorMessage?: ReactNode
   flex?: Responsive<string | number | boolean>
   flexBasis?: Responsive<number | string>
   flexGrow?: Responsive<number>
   flexShrink?: Responsive<number>
   focusedValue?: DateValue | null
   gridArea?: Responsive<string>
   gridColumn?: Responsive<string>
   gridColumnEnd?: Responsive<string>
   gridColumnStart?: Responsive<string>
   gridRow?: Responsive<string>
   gridRowEnd?: Responsive<string>
   gridRowStart?: Responsive<string>
   height?: Responsive<DimensionValue>
   id?: string
   isDateUnavailable?: (DateValue) => boolean
   isDisabled?: boolean = false
   isHidden?: Responsive<boolean>
   isInvalid?: boolean
   isReadOnly?: boolean = false
   justifySelf?: Responsive<'auto' | 'normal' | 'start' | 'end' | 'flex-start' | 'flex-end' | 'self-start' | 'self-end' | 'center' | 'left' | 'right' | 'stretch'>
   left?: Responsive<DimensionValue>
   margin?: Responsive<DimensionValue>
   marginBottom?: Responsive<DimensionValue>
   marginEnd?: Responsive<DimensionValue>
   marginStart?: Responsive<DimensionValue>
   marginTop?: Responsive<DimensionValue>
   marginX?: Responsive<DimensionValue>
   marginY?: Responsive<DimensionValue>
   maxHeight?: Responsive<DimensionValue>
   maxValue?: DateValue | null
   maxWidth?: Responsive<DimensionValue>
   minHeight?: Responsive<DimensionValue>
   minValue?: DateValue | null
   minWidth?: Responsive<DimensionValue>
   onChange?: (MappedDateValue<DateValue>) => void
   onFocusChange?: (CalendarDate) => void
   order?: Responsive<number>
   pageBehavior?: PageBehavior = visible
   position?: Responsive<'static' | 'relative' | 'absolute' | 'fixed' | 'sticky'>
   right?: Responsive<DimensionValue>
   start?: Responsive<DimensionValue>
   top?: Responsive<DimensionValue>
   value?: DateValue | null
   visibleMonths?: number = 1
   width?: Responsive<DimensionValue>
   zIndex?: Responsive<number>
 }

/@react-spectrum/calendar:SpectrumRangeCalendarProps

 SpectrumRangeCalendarProps <T extends DateValue> {
   UNSAFE_className?: string
   UNSAFE_style?: CSSProperties
   alignSelf?: Responsive<'auto' | 'normal' | 'start' | 'end' | 'center' | 'flex-start' | 'flex-end' | 'self-start' | 'self-end' | 'stretch'>
   allowsNonContiguousRanges?: boolean
   aria-describedby?: string
   aria-details?: string
   aria-label?: string
   aria-labelledby?: string
   autoFocus?: boolean = false
   bottom?: Responsive<DimensionValue>
+  createCalendar?: (CalendarIdentifier) => Calendar
   defaultFocusedValue?: DateValue | null
   defaultValue?: RangeValue<DateValue> | null
   end?: Responsive<DimensionValue>
   errorMessage?: ReactNode
   flex?: Responsive<string | number | boolean>
   flexBasis?: Responsive<number | string>
   flexGrow?: Responsive<number>
   flexShrink?: Responsive<number>
   focusedValue?: DateValue | null
   gridArea?: Responsive<string>
   gridColumn?: Responsive<string>
   gridColumnEnd?: Responsive<string>
   gridColumnStart?: Responsive<string>
   gridRow?: Responsive<string>
   gridRowEnd?: Responsive<string>
   gridRowStart?: Responsive<string>
   height?: Responsive<DimensionValue>
   id?: string
   isDateUnavailable?: (DateValue) => boolean
   isDisabled?: boolean = false
   isHidden?: Responsive<boolean>
   isInvalid?: boolean
   isReadOnly?: boolean = false
   justifySelf?: Responsive<'auto' | 'normal' | 'start' | 'end' | 'flex-start' | 'flex-end' | 'self-start' | 'self-end' | 'center' | 'left' | 'right' | 'stretch'>
   left?: Responsive<DimensionValue>
   margin?: Responsive<DimensionValue>
   marginBottom?: Responsive<DimensionValue>
   marginEnd?: Responsive<DimensionValue>
   marginStart?: Responsive<DimensionValue>
   marginTop?: Responsive<DimensionValue>
   marginX?: Responsive<DimensionValue>
   marginY?: Responsive<DimensionValue>
   maxHeight?: Responsive<DimensionValue>
   maxValue?: DateValue | null
   maxWidth?: Responsive<DimensionValue>
   minHeight?: Responsive<DimensionValue>
   minValue?: DateValue | null
   minWidth?: Responsive<DimensionValue>
   onChange?: (RangeValue<MappedDateValue<DateValue>>) => void
   onFocusChange?: (CalendarDate) => void
   order?: Responsive<number>
   pageBehavior?: PageBehavior = visible
   position?: Responsive<'static' | 'relative' | 'absolute' | 'fixed' | 'sticky'>
   right?: Responsive<DimensionValue>
   start?: Responsive<DimensionValue>
   top?: Responsive<DimensionValue>
   value?: RangeValue<DateValue> | null
   visibleMonths?: number = 1
   width?: Responsive<DimensionValue>
   zIndex?: Responsive<number>
 }

@react-spectrum/datepicker

/@react-spectrum/datepicker:DatePicker

 DatePicker <T extends DateValue> {
   UNSAFE_className?: string
   UNSAFE_style?: CSSProperties
   alignSelf?: Responsive<'auto' | 'normal' | 'start' | 'end' | 'center' | 'flex-start' | 'flex-end' | 'self-start' | 'self-end' | 'stretch'>
   aria-describedby?: string
   aria-details?: string
   aria-label?: string
   aria-labelledby?: string
   autoFocus?: boolean
   bottom?: Responsive<DimensionValue>
   contextualHelp?: ReactNode
+  createCalendar?: (CalendarIdentifier) => Calendar
   defaultOpen?: boolean
   defaultValue?: DateValue | null
   description?: ReactNode
   end?: Responsive<DimensionValue>
   firstDayOfWeek?: 'sun' | 'mon' | 'tue' | 'wed' | 'thu' | 'fri' | 'sat'
   flex?: Responsive<string | number | boolean>
   flexBasis?: Responsive<number | string>
   flexGrow?: Responsive<number>
   flexShrink?: Responsive<number>
   granularity?: Granularity
   gridArea?: Responsive<string>
   gridColumn?: Responsive<string>
   gridColumnEnd?: Responsive<string>
   gridColumnStart?: Responsive<string>
   gridRow?: Responsive<string>
   gridRowEnd?: Responsive<string>
   gridRowStart?: Responsive<string>
   height?: Responsive<DimensionValue>
   hideTimeZone?: boolean = false
   hourCycle?: number | number
   id?: string
   isDateUnavailable?: (DateValue) => boolean
   isDisabled?: boolean
   isHidden?: Responsive<boolean>
   isOpen?: boolean
   isQuiet?: boolean = false
   isReadOnly?: boolean
   isRequired?: boolean
   justifySelf?: Responsive<'auto' | 'normal' | 'start' | 'end' | 'flex-start' | 'flex-end' | 'self-start' | 'self-end' | 'center' | 'left' | 'right' | 'stretch'>
   label?: ReactNode
   labelAlign?: Alignment = 'start'
   labelPosition?: LabelPosition = 'top'
   left?: Responsive<DimensionValue>
   margin?: Responsive<DimensionValue>
   marginBottom?: Responsive<DimensionValue>
   marginEnd?: Responsive<DimensionValue>
   marginStart?: Responsive<DimensionValue>
   marginTop?: Responsive<DimensionValue>
   marginX?: Responsive<DimensionValue>
   marginY?: Responsive<DimensionValue>
   maxHeight?: Responsive<DimensionValue>
   maxValue?: DateValue | null
   maxVisibleMonths?: number = 1
   maxWidth?: Responsive<DimensionValue>
   minHeight?: Responsive<DimensionValue>
   minValue?: DateValue | null
   minWidth?: Responsive<DimensionValue>
   name?: string
   necessityIndicator?: NecessityIndicator = 'icon'
   onBlur?: (FocusEvent<Target>) => void
   onChange?: (MappedDateValue<DateValue> | null) => void
   onFocus?: (FocusEvent<Target>) => void
   onFocusChange?: (boolean) => void
   onKeyDown?: (KeyboardEvent) => void
   onKeyUp?: (KeyboardEvent) => void
   onOpenChange?: (boolean) => void
   order?: Responsive<number>
   pageBehavior?: PageBehavior = visible
   placeholderValue?: DateValue | null
   position?: Responsive<'static' | 'relative' | 'absolute' | 'fixed' | 'sticky'>
   right?: Responsive<DimensionValue>
   shouldFlip?: boolean = true
   shouldForceLeadingZeros?: boolean
   showFormatHelpText?: boolean = false
   start?: Responsive<DimensionValue>
   top?: Responsive<DimensionValue>
   validate?: (MappedDateValue<DateValue>) => ValidationError | boolean | null | undefined
   validationBehavior?: 'aria' | 'native' = 'aria'
   validationState?: ValidationState
   value?: DateValue | null
   width?: Responsive<DimensionValue>
   zIndex?: Responsive<number>
 }

/@react-spectrum/datepicker:DateRangePicker

 DateRangePicker <T extends DateValue> {
   UNSAFE_className?: string
   UNSAFE_style?: CSSProperties
   alignSelf?: Responsive<'auto' | 'normal' | 'start' | 'end' | 'center' | 'flex-start' | 'flex-end' | 'self-start' | 'self-end' | 'stretch'>
   allowsNonContiguousRanges?: boolean
   aria-describedby?: string
   aria-details?: string
   aria-label?: string
   aria-labelledby?: string
   autoFocus?: boolean
   bottom?: Responsive<DimensionValue>
   contextualHelp?: ReactNode
+  createCalendar?: (CalendarIdentifier) => Calendar
   defaultOpen?: boolean
   defaultValue?: RangeValue<DateValue> | null
   description?: ReactNode
   end?: Responsive<DimensionValue>
   errorMessage?: ReactNode | (ValidationResult) => ReactNode
   firstDayOfWeek?: 'sun' | 'mon' | 'tue' | 'wed' | 'thu' | 'fri' | 'sat'
   flex?: Responsive<string | number | boolean>
   flexBasis?: Responsive<number | string>
   flexGrow?: Responsive<number>
   flexShrink?: Responsive<number>
   granularity?: Granularity
   gridArea?: Responsive<string>
   gridColumn?: Responsive<string>
   gridColumnEnd?: Responsive<string>
   gridColumnStart?: Responsive<string>
   gridRow?: Responsive<string>
   gridRowEnd?: Responsive<string>
   gridRowStart?: Responsive<string>
   height?: Responsive<DimensionValue>
   hideTimeZone?: boolean = false
   hourCycle?: number | number
   id?: string
   isDateUnavailable?: (DateValue) => boolean
   isDisabled?: boolean
   isHidden?: Responsive<boolean>
   isOpen?: boolean
   isQuiet?: boolean = false
   isReadOnly?: boolean
   isRequired?: boolean
   justifySelf?: Responsive<'auto' | 'normal' | 'start' | 'end' | 'flex-start' | 'flex-end' | 'self-start' | 'self-end' | 'center' | 'left' | 'right' | 'stretch'>
   label?: ReactNode
   labelAlign?: Alignment = 'start'
   labelPosition?: LabelPosition = 'top'
   left?: Responsive<DimensionValue>
   margin?: Responsive<DimensionValue>
   marginBottom?: Responsive<DimensionValue>
   marginEnd?: Responsive<DimensionValue>
   marginStart?: Responsive<DimensionValue>
   marginTop?: Responsive<DimensionValue>
   marginX?: Responsive<DimensionValue>
   marginY?: Responsive<DimensionValue>
   maxHeight?: Responsive<DimensionValue>
   maxValue?: DateValue | null
   maxVisibleMonths?: number = 1
   maxWidth?: Responsive<DimensionValue>
   minHeight?: Responsive<DimensionValue>
   minValue?: DateValue | null
   minWidth?: Responsive<DimensionValue>
   necessityIndicator?: NecessityIndicator = 'icon'
   onBlur?: (FocusEvent<Target>) => void
   onChange?: (RangeValue<MappedDateValue<DateValue>> | null) => void
   onFocus?: (FocusEvent<Target>) => void
   onFocusChange?: (boolean) => void
   onKeyDown?: (KeyboardEvent) => void
   onKeyUp?: (KeyboardEvent) => void
   onOpenChange?: (boolean) => void
   order?: Responsive<number>
   pageBehavior?: PageBehavior = visible
   placeholderValue?: DateValue | null
   position?: Responsive<'static' | 'relative' | 'absolute' | 'fixed' | 'sticky'>
   right?: Responsive<DimensionValue>
   shouldFlip?: boolean = true
   shouldForceLeadingZeros?: boolean
   showFormatHelpText?: boolean = false
   start?: Responsive<DimensionValue>
   startName?: string
   top?: Responsive<DimensionValue>
   validate?: (RangeValue<MappedDateValue<DateValue>>) => ValidationError | boolean | null | undefined
   validationBehavior?: 'aria' | 'native' = 'aria'
   validationState?: ValidationState
   value?: RangeValue<DateValue> | null
   width?: Responsive<DimensionValue>
   zIndex?: Responsive<number>
 }

/@react-spectrum/datepicker:SpectrumDatePickerProps

 SpectrumDatePickerProps <T extends DateValue> {
   UNSAFE_className?: string
   UNSAFE_style?: CSSProperties
   alignSelf?: Responsive<'auto' | 'normal' | 'start' | 'end' | 'center' | 'flex-start' | 'flex-end' | 'self-start' | 'self-end' | 'stretch'>
   aria-describedby?: string
   aria-details?: string
   aria-label?: string
   aria-labelledby?: string
   autoFocus?: boolean
   bottom?: Responsive<DimensionValue>
   contextualHelp?: ReactNode
+  createCalendar?: (CalendarIdentifier) => Calendar
   defaultOpen?: boolean
   defaultValue?: DateValue | null
   description?: ReactNode
   end?: Responsive<DimensionValue>
   firstDayOfWeek?: 'sun' | 'mon' | 'tue' | 'wed' | 'thu' | 'fri' | 'sat'
   flex?: Responsive<string | number | boolean>
   flexBasis?: Responsive<number | string>
   flexGrow?: Responsive<number>
   flexShrink?: Responsive<number>
   granularity?: Granularity
   gridArea?: Responsive<string>
   gridColumn?: Responsive<string>
   gridColumnEnd?: Responsive<string>
   gridColumnStart?: Responsive<string>
   gridRow?: Responsive<string>
   gridRowEnd?: Responsive<string>
   gridRowStart?: Responsive<string>
   height?: Responsive<DimensionValue>
   hideTimeZone?: boolean = false
   hourCycle?: number | number
   id?: string
   isDateUnavailable?: (DateValue) => boolean
   isDisabled?: boolean
   isHidden?: Responsive<boolean>
   isOpen?: boolean
   isQuiet?: boolean = false
   isReadOnly?: boolean
   isRequired?: boolean
   justifySelf?: Responsive<'auto' | 'normal' | 'start' | 'end' | 'flex-start' | 'flex-end' | 'self-start' | 'self-end' | 'center' | 'left' | 'right' | 'stretch'>
   label?: ReactNode
   labelAlign?: Alignment = 'start'
   labelPosition?: LabelPosition = 'top'
   left?: Responsive<DimensionValue>
   margin?: Responsive<DimensionValue>
   marginBottom?: Responsive<DimensionValue>
   marginEnd?: Responsive<DimensionValue>
   marginStart?: Responsive<DimensionValue>
   marginTop?: Responsive<DimensionValue>
   marginX?: Responsive<DimensionValue>
   marginY?: Responsive<DimensionValue>
   maxHeight?: Responsive<DimensionValue>
   maxValue?: DateValue | null
   maxVisibleMonths?: number = 1
   maxWidth?: Responsive<DimensionValue>
   minHeight?: Responsive<DimensionValue>
   minValue?: DateValue | null
   minWidth?: Responsive<DimensionValue>
   name?: string
   necessityIndicator?: NecessityIndicator = 'icon'
   onBlur?: (FocusEvent<Target>) => void
   onChange?: (MappedDateValue<DateValue> | null) => void
   onFocus?: (FocusEvent<Target>) => void
   onFocusChange?: (boolean) => void
   onKeyDown?: (KeyboardEvent) => void
   onKeyUp?: (KeyboardEvent) => void
   onOpenChange?: (boolean) => void
   order?: Responsive<number>
   pageBehavior?: PageBehavior = visible
   placeholderValue?: DateValue | null
   position?: Responsive<'static' | 'relative' | 'absolute' | 'fixed' | 'sticky'>
   right?: Responsive<DimensionValue>
   shouldFlip?: boolean = true
   shouldForceLeadingZeros?: boolean
   showFormatHelpText?: boolean = false
   start?: Responsive<DimensionValue>
   top?: Responsive<DimensionValue>
   validate?: (MappedDateValue<DateValue>) => ValidationError | boolean | null | undefined
   validationBehavior?: 'aria' | 'native' = 'aria'
   validationState?: ValidationState
   value?: DateValue | null
   width?: Responsive<DimensionValue>
   zIndex?: Responsive<number>
 }

/@react-spectrum/datepicker:SpectrumDateRangePickerProps

 SpectrumDateRangePickerProps <T extends DateValue> {
   UNSAFE_className?: string
   UNSAFE_style?: CSSProperties
   alignSelf?: Responsive<'auto' | 'normal' | 'start' | 'end' | 'center' | 'flex-start' | 'flex-end' | 'self-start' | 'self-end' | 'stretch'>
   allowsNonContiguousRanges?: boolean
   aria-describedby?: string
   aria-details?: string
   aria-label?: string
   aria-labelledby?: string
   autoFocus?: boolean
   bottom?: Responsive<DimensionValue>
   contextualHelp?: ReactNode
+  createCalendar?: (CalendarIdentifier) => Calendar
   defaultOpen?: boolean
   defaultValue?: RangeValue<DateValue> | null
   description?: ReactNode
   end?: Responsive<DimensionValue>
   errorMessage?: ReactNode | (ValidationResult) => ReactNode
   firstDayOfWeek?: 'sun' | 'mon' | 'tue' | 'wed' | 'thu' | 'fri' | 'sat'
   flex?: Responsive<string | number | boolean>
   flexBasis?: Responsive<number | string>
   flexGrow?: Responsive<number>
   flexShrink?: Responsive<number>
   granularity?: Granularity
   gridArea?: Responsive<string>
   gridColumn?: Responsive<string>
   gridColumnEnd?: Responsive<string>
   gridColumnStart?: Responsive<string>
   gridRow?: Responsive<string>
   gridRowEnd?: Responsive<string>
   gridRowStart?: Responsive<string>
   height?: Responsive<DimensionValue>
   hideTimeZone?: boolean = false
   hourCycle?: number | number
   id?: string
   isDateUnavailable?: (DateValue) => boolean
   isDisabled?: boolean
   isHidden?: Responsive<boolean>
   isOpen?: boolean
   isQuiet?: boolean = false
   isReadOnly?: boolean
   isRequired?: boolean
   justifySelf?: Responsive<'auto' | 'normal' | 'start' | 'end' | 'flex-start' | 'flex-end' | 'self-start' | 'self-end' | 'center' | 'left' | 'right' | 'stretch'>
   label?: ReactNode
   labelAlign?: Alignment = 'start'
   labelPosition?: LabelPosition = 'top'
   left?: Responsive<DimensionValue>
   margin?: Responsive<DimensionValue>
   marginBottom?: Responsive<DimensionValue>
   marginEnd?: Responsive<DimensionValue>
   marginStart?: Responsive<DimensionValue>
   marginTop?: Responsive<DimensionValue>
   marginX?: Responsive<DimensionValue>
   marginY?: Responsive<DimensionValue>
   maxHeight?: Responsive<DimensionValue>
   maxValue?: DateValue | null
   maxVisibleMonths?: number = 1
   maxWidth?: Responsive<DimensionValue>
   minHeight?: Responsive<DimensionValue>
   minValue?: DateValue | null
   minWidth?: Responsive<DimensionValue>
   necessityIndicator?: NecessityIndicator = 'icon'
   onBlur?: (FocusEvent<Target>) => void
   onChange?: (RangeValue<MappedDateValue<DateValue>> | null) => void
   onFocus?: (FocusEvent<Target>) => void
   onFocusChange?: (boolean) => void
   onKeyDown?: (KeyboardEvent) => void
   onKeyUp?: (KeyboardEvent) => void
   onOpenChange?: (boolean) => void
   order?: Responsive<number>
   pageBehavior?: PageBehavior = visible
   placeholderValue?: DateValue | null
   position?: Responsive<'static' | 'relative' | 'absolute' | 'fixed' | 'sticky'>
   right?: Responsive<DimensionValue>
   shouldFlip?: boolean = true
   shouldForceLeadingZeros?: boolean
   showFormatHelpText?: boolean = false
   start?: Responsive<DimensionValue>
   startName?: string
   top?: Responsive<DimensionValue>
   validate?: (RangeValue<MappedDateValue<DateValue>>) => ValidationError | boolean | null | undefined
   validationBehavior?: 'aria' | 'native' = 'aria'
   validationState?: ValidationState
   value?: RangeValue<DateValue> | null
   width?: Responsive<DimensionValue>
   zIndex?: Responsive<number>
 }

@react-stately/calendar

/@react-stately/calendar:CalendarStateOptions

 CalendarStateOptions <T extends DateValue = DateValue> {
   autoFocus?: boolean = false
-  createCalendar: (string) => Calendar
+  createCalendar: (CalendarIdentifier) => Calendar
   defaultFocusedValue?: DateValue | null
   defaultValue?: DateValue | null
   errorMessage?: ReactNode
   firstDayOfWeek?: 'sun' | 'mon' | 'tue' | 'wed' | 'thu' | 'fri' | 'sat'
   isDateUnavailable?: (DateValue) => boolean
   isDisabled?: boolean = false
   isInvalid?: boolean
   isReadOnly?: boolean = false
   locale: string
   maxValue?: DateValue | null
   minValue?: DateValue | null
   onChange?: (MappedDateValue<DateValue>) => void
   onFocusChange?: (CalendarDate) => void
   pageBehavior?: PageBehavior = visible
   selectionAlignment?: 'start' | 'center' | 'end'
   value?: DateValue | null
   visibleDuration?: DateDuration = {months: 1}
 }

/@react-stately/calendar:RangeCalendarStateOptions

 RangeCalendarStateOptions <T extends DateValue = DateValue> {
   allowsNonContiguousRanges?: boolean
   autoFocus?: boolean = false
-  createCalendar: (string) => Calendar
+  createCalendar: (CalendarIdentifier) => Calendar
   defaultFocusedValue?: DateValue | null
   defaultValue?: RangeValue<DateValue> | null
   errorMessage?: ReactNode
   firstDayOfWeek?: 'sun' | 'mon' | 'tue' | 'wed' | 'thu' | 'fri' | 'sat'
   isDateUnavailable?: (DateValue) => boolean
   isDisabled?: boolean = false
   isInvalid?: boolean
   isReadOnly?: boolean = false
   locale: string
   maxValue?: DateValue | null
   minValue?: DateValue | null
   onChange?: (RangeValue<MappedDateValue<DateValue>>) => void
   onFocusChange?: (CalendarDate) => void
   pageBehavior?: PageBehavior = visible
   value?: RangeValue<DateValue> | null
   visibleDuration?: DateDuration = {months: 1}
 }

@react-stately/datepicker

/@react-stately/datepicker:DateFieldStateOptions

 DateFieldStateOptions <T extends DateValue = DateValue> {
   autoFocus?: boolean
-  createCalendar: (string) => Calendar
+  createCalendar: (CalendarIdentifier) => Calendar
   defaultOpen?: boolean
   defaultValue?: DateValue | null
   description?: ReactNode
   errorMessage?: ReactNode | (ValidationResult) => ReactNode
   granularity?: Granularity
   hideTimeZone?: boolean = false
   hourCycle?: number | number
   isDateUnavailable?: (DateValue) => boolean
   isDisabled?: boolean
   isInvalid?: boolean
   isOpen?: boolean
   isReadOnly?: boolean
   isRequired?: boolean
   label?: ReactNode
   locale: string
   maxGranularity?: 'year' | 'month' | Granularity = 'year'
   maxValue?: DateValue | null
   minValue?: DateValue | null
   onBlur?: (FocusEvent<Target>) => void
   onChange?: (MappedDateValue<DateValue> | null) => void
   onFocus?: (FocusEvent<Target>) => void
   onFocusChange?: (boolean) => void
   onKeyDown?: (KeyboardEvent) => void
   onKeyUp?: (KeyboardEvent) => void
   onOpenChange?: (boolean) => void
   pageBehavior?: PageBehavior = visible
   placeholderValue?: DateValue | null
   shouldForceLeadingZeros?: boolean
   validate?: (MappedDateValue<DateValue>) => ValidationError | boolean | null | undefined
   validationBehavior?: 'aria' | 'native' = 'aria'
   value?: DateValue | null
 }

devongovett · 2025-03-26T00:22:56Z

Closing in favor of #7803.

ToyWalrus and others added 24 commits February 11, 2025 11:22

Add createCalendar prop to Calendar/RangeCalendar

ddcb1fd

Update date math for adding/subtracting months

2ca395a

Add doc comments

6172fd6

Simplify isEqualDay/Month/Year

f48fcf1

Display the calendar month name based on the result of getCurrentMonth()

d86e283

Format aria labels based on current month

15f2b0d

Refactor to return weeksInMonth from useCalendarGrid hook

0ae33ff

Fix month's year display in calendar header for custom calendars

82a262b

Update Calendar and RangeCalendar docs to talk about custom calendars

729600c

Add custom calendar stories to Calendar and RangeCalendar

d880b79

Fix range selection styles for custom calendar

a265261

Write tests for custom calendar date math

471db7f

Write tests for changes to queries.ts

79ee152

Use customCalendarImpl in stories

dce90a9

Write tests for visible range description with custom calendar

a30b47a

Update calendar docs to use jsx syntax

ede8d9e

Merge branch 'main' into custom-calendar-support

7b54cbb

Update calendar docs to fully implement Calendar interface to satisfy…

a617fca

… the type checker

Update calendar docs

5191f42

Finally learned how to run `make check-examples` myself

Merge branch 'main' into custom-calendar-support

e9ae17a

wip

cee9ee5

fix

348dba1

feat: use suggestion from @devongovett to implement custom cal w/ jul…

648b8d6

…ian dates

chore: remove unnecessary code in queries & manipulation

d6c5e56

devongovett mentioned this pull request Mar 17, 2025

feat: custom calendar support #7803

Open

5 tasks

snowystinger previously approved these changes Mar 18, 2025

View reviewed changes

ToyWalrus added 2 commits March 18, 2025 09:41

feat: zero-index the week pattern in 454 calendar impl

8fe7e49

chore: remove unused code in utils

f736857

ToyWalrus and others added 12 commits March 18, 2025 09:42

test: update useCalendar tests for custom calendar

c1357af

test: verify conversion for end of big year

efe3924

feat: update createCalendar prop types

e8eac82

feat: add createCalendar prop to DatePicker and DateRangePicker

27d3355

Update docs

360b56b

update examples

fd6815d

ts

743ad29

docs: update docs for DatePicker and DateRangePicker

615f719

Merge branch 'main' of github.com:adobe/react-spectrum into custom-ca…

71392e2

…lendar-support

docs: remove custom calendar system section in useCalendar hooks

933937b

chore: more code cleanup

df2b1b0

fix: mdx example

23dc0f0

devongovett added the in sprint label Mar 19, 2025

snowystinger self-assigned this Mar 19, 2025

LFDanLu self-assigned this Mar 19, 2025

LFDanLu previously approved these changes Mar 20, 2025

View reviewed changes

devongovett added 3 commits March 25, 2025 10:40

Merge branch 'main' of github.com:adobe/react-spectrum into toywalrus…

fbf0ed0

…-custom-calendar-support

Add isEqualCalendar function

9a04084

Update docs

c960800

devongovett dismissed stale reviews from LFDanLu and snowystinger via c960800 March 25, 2025 19:11

devongovett force-pushed the custom-calendar-support branch from 2661cf8 to c960800 Compare March 25, 2025 19:11

devongovett closed this Mar 26, 2025

devongovett deleted the custom-calendar-support branch March 26, 2025 00:23

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat: Custom calendar support #7949

feat: Custom calendar support #7949

devongovett commented Mar 17, 2025 •

edited

Loading

rspbot commented Mar 17, 2025

rspbot commented Mar 17, 2025

snowystinger left a comment

snowystinger Mar 18, 2025

LFDanLu left a comment

LFDanLu Mar 20, 2025

rspbot commented Mar 25, 2025

rspbot commented Mar 25, 2025

devongovett commented Mar 26, 2025

feat: Custom calendar support #7949

feat: Custom calendar support #7949

Conversation

devongovett commented Mar 17, 2025 • edited Loading

rspbot commented Mar 17, 2025

rspbot commented Mar 17, 2025

snowystinger left a comment

Choose a reason for hiding this comment

snowystinger Mar 18, 2025

Choose a reason for hiding this comment

LFDanLu left a comment

Choose a reason for hiding this comment

LFDanLu Mar 20, 2025

Choose a reason for hiding this comment

rspbot commented Mar 25, 2025

rspbot commented Mar 25, 2025

react-aria-components

/react-aria-components:Calendar

/react-aria-components:RangeCalendar

/react-aria-components:CalendarProps

/react-aria-components:RangeCalendarProps

@internationalized/date

/@internationalized/date:Calendar

/@internationalized/date:GregorianCalendar

/@internationalized/date:JapaneseCalendar

/@internationalized/date:BuddhistCalendar

/@internationalized/date:TaiwanCalendar

/@internationalized/date:PersianCalendar

/@internationalized/date:IndianCalendar

/@internationalized/date:IslamicCivilCalendar

/@internationalized/date:IslamicTabularCalendar

/@internationalized/date:IslamicUmalquraCalendar

/@internationalized/date:HebrewCalendar

/@internationalized/date:EthiopicCalendar

/@internationalized/date:EthiopicAmeteAlemCalendar

/@internationalized/date:CopticCalendar

/@internationalized/date:createCalendar

/@internationalized/date:CalendarIdentifier

/@internationalized/date:isEqualCalendar

@react-aria/calendar

/@react-aria/calendar:CalendarGridAria

@react-spectrum/calendar

/@react-spectrum/calendar:Calendar

/@react-spectrum/calendar:RangeCalendar

/@react-spectrum/calendar:SpectrumCalendarProps

/@react-spectrum/calendar:SpectrumRangeCalendarProps

@react-spectrum/datepicker

/@react-spectrum/datepicker:DatePicker

/@react-spectrum/datepicker:DateRangePicker

/@react-spectrum/datepicker:SpectrumDatePickerProps

/@react-spectrum/datepicker:SpectrumDateRangePickerProps

@react-stately/calendar

/@react-stately/calendar:CalendarStateOptions

/@react-stately/calendar:RangeCalendarStateOptions

@react-stately/datepicker

/@react-stately/datepicker:DateFieldStateOptions

devongovett commented Mar 26, 2025

devongovett commented Mar 17, 2025 •

edited

Loading