feat(Calendar/RangeCalendar): add disableDaysOutsideCurrentView property (#1799)

epr3 · zernonia · web-flow · commit 028785b781d3 · 2025-05-24T14:01:20.000+03:00
* feat(Calendar/RangeCalendar): add disable days outside view prop

* chore(Calendar): generate docs

* fix(Calendar): prevent select if date is disabled through outside month prop

* fix(Calendar): only check disabled if outside current view

---------

Co-authored-by: zernonia &lt;zernonia@gmail.com&gt;
diff --git a/docs/content/meta/RangeCalendarRoot.md b/docs/content/meta/RangeCalendarRoot.md
@@ -54,6 +54,11 @@
     'default': 'false'
   },
   {
+    'name': 'disableDaysOutsideCurrentView',
+    'description': '<p>Whether or not to disable days outside the current view.</p>\n',
+    'type': 'boolean',
+    'required': false,
+    'default': 'false'
     'name': 'fixedDate',
     'description': '<p>Which part of the range should be fixed</p>\n',
     'type': '\'start\' | \'end\'',
diff --git a/packages/core/src/Calendar/CalendarCell.vue b/packages/core/src/Calendar/CalendarCell.vue
@@ -22,8 +22,8 @@ const rootContext = injectCalendarRootContext()
     :as-child="asChild"
     role="gridcell"
     :aria-selected="rootContext.isDateSelected(date) ? true : undefined"
-    :aria-disabled="rootContext.isDateDisabled(date) || rootContext.isDateUnavailable?.(date)"
-    :data-disabled="rootContext.isDateDisabled(date) ? '' : undefined"
+    :aria-disabled="rootContext.isDateDisabled(date) || rootContext.isDateUnavailable?.(date) || rootContext.disableDaysOutsideCurrentView.value"
+    :data-disabled="rootContext.isDateDisabled(date) || rootContext.disableDaysOutsideCurrentView.value ? '' : undefined"
   >
     <slot />
   </Primitive>
diff --git a/packages/core/src/Calendar/CalendarCellTrigger.vue b/packages/core/src/Calendar/CalendarCellTrigger.vue
@@ -66,7 +66,6 @@ const labelText = computed(() => {
   })
 })
 
-const isDisabled = computed(() => rootContext.isDateDisabled(props.day))
 const isUnavailable = computed(() =>
   rootContext.isDateUnavailable?.(props.day) ?? false,
 )
@@ -76,10 +75,13 @@ const isDateToday = computed(() => {
 const isOutsideView = computed(() => {
   return !isSameMonth(props.day, props.month)
 })
+
 const isOutsideVisibleView = computed(() =>
   rootContext.isOutsideVisibleView(props.day),
 )
 
+const isDisabled = computed(() => rootContext.isDateDisabled(props.day) || (rootContext.disableDaysOutsideCurrentView.value && isOutsideView.value))
+
 const isFocusedDate = computed(() => {
   return !rootContext.disabled.value && isSameDay(props.day, rootContext.placeholder.value)
 })
@@ -95,10 +97,14 @@ function changeDate(date: DateValue) {
 }
 
 function handleClick() {
+  if (isDisabled.value)
+    return
   changeDate(props.day)
 }
 
 function handleArrowKey(e: KeyboardEvent) {
+  if (isDisabled.value)
+    return
   e.preventDefault()
   e.stopPropagation()
   const parentElement = rootContext.parentElement.value!
diff --git a/packages/core/src/Calendar/CalendarRoot.vue b/packages/core/src/Calendar/CalendarRoot.vue
@@ -44,6 +44,7 @@ type CalendarRootContext = {
   isPrevButtonDisabled: (prevPageFunc?: (date: DateValue) => DateValue) => boolean
   formatter: Formatter
   dir: Ref<Direction>
+  disableDaysOutsideCurrentView: Ref<boolean>
 }
 
 interface BaseCalendarRootProps extends PrimitiveProps {
@@ -89,6 +90,8 @@ interface BaseCalendarRootProps extends PrimitiveProps {
   nextPage?: (placeholder: DateValue) => DateValue
   /** A function that returns the previous page of the calendar. It receives the current placeholder as an argument inside the component. */
   prevPage?: (placeholder: DateValue) => DateValue
+  /** Whether or not to disable days outside the current view. */
+  disableDaysOutsideCurrentView?: boolean
 }
 
 export interface MultipleCalendarRootProps extends BaseCalendarRootProps {
@@ -139,6 +142,7 @@ const props = withDefaults(defineProps<CalendarRootProps>(), {
   placeholder: undefined,
   isDateDisabled: undefined,
   isDateUnavailable: undefined,
+  disableDaysOutsideCurrentView: false,
 })
 const emits = defineEmits<CalendarRootEmits>()
 defineSlots<{
@@ -181,6 +185,7 @@ const {
   prevPage: propsPrevPage,
   dir: propDir,
   locale: propLocale,
+  disableDaysOutsideCurrentView,
 } = toRefs(props)
 
 const { primitiveElement, currentElement: parentElement }
@@ -329,6 +334,7 @@ provideCalendarRootContext({
   parentElement,
   onPlaceholderChange,
   onDateChange,
+  disableDaysOutsideCurrentView,
 })
 </script>
 
diff --git a/packages/core/src/PinInput/PinInputInput.vue b/packages/core/src/PinInput/PinInputInput.vue
@@ -1,8 +1,9 @@
 <script lang="ts">
 import type { PrimitiveProps } from '@/Primitive'
+import type { PinInputValue } from './PinInputRoot.vue'
 import { Primitive, usePrimitiveElement } from '@/Primitive'
 import { getActiveElement, useArrowNavigation } from '@/shared'
-import { type PinInputValue, injectPinInputRootContext } from './PinInputRoot.vue'
+import { injectPinInputRootContext } from './PinInputRoot.vue'
 
 export interface PinInputInputProps extends PrimitiveProps {
   /** Position of the value this input binds to. */
diff --git a/packages/core/src/RangeCalendar/RangeCalendarCell.vue b/packages/core/src/RangeCalendar/RangeCalendarCell.vue
@@ -21,8 +21,8 @@ const rootContext = injectRangeCalendarRootContext()
     :as-child="asChild"
     role="gridcell"
     :aria-selected="rootContext.isSelected(date) ? true : undefined"
-    :aria-disabled="rootContext.isDateDisabled(date) || rootContext.isDateUnavailable?.(date)"
-    :data-disabled="rootContext.isDateDisabled(date) ? '' : undefined"
+    :aria-disabled="rootContext.isDateDisabled(date) || rootContext.isDateUnavailable?.(date) || rootContext.disableDaysOutsideCurrentView.value"
+    :data-disabled="rootContext.isDateDisabled(date) || rootContext.disableDaysOutsideCurrentView.value ? '' : undefined"
   >
     <slot />
   </Primitive>
diff --git a/packages/core/src/RangeCalendar/RangeCalendarCellTrigger.vue b/packages/core/src/RangeCalendar/RangeCalendarCellTrigger.vue
@@ -69,7 +69,6 @@ const labelText = computed(() => rootContext.formatter.custom(toDate(props.day),
   year: 'numeric',
 }))
 
-const isDisabled = computed(() => rootContext.isDateDisabled(props.day))
 const isUnavailable = computed(() => rootContext.isDateUnavailable?.(props.day) ?? false)
 const isSelectedDate = computed(() => rootContext.isSelected(props.day))
 const isSelectionStart = computed(() => rootContext.isSelectionStart(props.day))
@@ -91,6 +90,8 @@ const isOutsideVisibleView = computed(() =>
   rootContext.isOutsideVisibleView(props.day),
 )
 
+const isDisabled = computed(() => rootContext.isDateDisabled(props.day) || (rootContext.disableDaysOutsideCurrentView.value && isOutsideView.value))
+
 const dayValue = computed(() => props.day.day.toLocaleString(rootContext.locale.value))
 
 const isFocusedDate = computed(() => {
@@ -157,16 +158,20 @@ function changeDate(e: MouseEvent | KeyboardEvent, date: DateValue) {
 }
 
 function handleClick(e: MouseEvent) {
+  if (isDisabled.value)
+    return
   changeDate(e, props.day)
 }
 
 function handleFocus() {
-  if (rootContext.isDateDisabled(props.day) || rootContext.isDateUnavailable?.(props.day))
+  if (isDisabled.value || rootContext.isDateUnavailable?.(props.day))
     return
   rootContext.focusedValue.value = props.day.copy()
 }
 
 function handleArrowKey(e: KeyboardEvent) {
+  if (isDisabled.value)
+    return
   e.preventDefault()
   e.stopPropagation()
   const parentElement = rootContext.parentElement.value!
diff --git a/packages/core/src/RangeCalendar/RangeCalendarRoot.vue b/packages/core/src/RangeCalendar/RangeCalendarRoot.vue
@@ -55,6 +55,7 @@ type RangeCalendarRootContext = {
   isPrevButtonDisabled: (prevPageFunc?: (date: DateValue) => DateValue) => boolean
   formatter: Formatter
   dir: Ref<Direction>
+  disableDaysOutsideCurrentView: Ref<boolean>
   fixedDate: Ref<'start' | 'end' | undefined>
 }
 
@@ -107,6 +108,8 @@ export interface RangeCalendarRootProps extends PrimitiveProps {
   nextPage?: (placeholder: DateValue) => DateValue
   /** A function that returns the previous page of the calendar. It receives the current placeholder as an argument inside the component. */
   prevPage?: (placeholder: DateValue) => DateValue
+  /** Whether or not to disable days outside the current view. */
+  disableDaysOutsideCurrentView?: boolean
   /** Which part of the range should be fixed */
   fixedDate?: 'start' | 'end'
 }
@@ -146,6 +149,7 @@ const props = withDefaults(defineProps<RangeCalendarRootProps>(), {
   isDateUnavailable: undefined,
   isDateHighlightable: undefined,
   allowNonContiguousRanges: false,
+  disableDaysOutsideCurrentView: false,
 })
 const emits = defineEmits<RangeCalendarRootEmits>()
 
@@ -189,6 +193,7 @@ const {
   nextPage: propsNextPage,
   prevPage: propsPrevPage,
   allowNonContiguousRanges,
+  disableDaysOutsideCurrentView,
   fixedDate,
 } = toRefs(props)
 
@@ -378,6 +383,7 @@ provideRangeCalendarRootContext({
   dir,
   isHighlightedStart,
   isHighlightedEnd,
+  disableDaysOutsideCurrentView,
   fixedDate,
 })
 
diff --git a/packages/core/src/shared/useId.ts b/packages/core/src/shared/useId.ts
@@ -19,7 +19,7 @@ export function useId(deterministicId?: string | null | undefined, prefix = 'rek
   const configProviderContext = injectConfigProviderContext({ useId: undefined })
 
   if (Object.hasOwn(vue, 'useId')) {
-    return `${prefix}-${vue['useId']?.()}`
+    return `${prefix}-${vue.useId?.()}`
   }
   else if (configProviderContext.useId) {
     return `${prefix}-${configProviderContext.useId()}`

Original file line number	Diff line number	Diff line change
`@@ -19,7 +19,7 @@ export function useId(deterministicId?: string \| null \| undefined, prefix = 'rek`
`19`	`19`	`const configProviderContext = injectConfigProviderContext({ useId: undefined })`
`20`	`20`
`21`	`21`	`if (Object.hasOwn(vue, 'useId')) {`
`22`		- return `${prefix}-${vue['useId']?.()}`
	`22`	+ return `${prefix}-${vue.useId?.()}`
`23`	`23`	`}`
`24`	`24`	`else if (configProviderContext.useId) {`
`25`	`25`	return `${prefix}-${configProviderContext.useId()}`