feat(DateRangePicker/RangeCalendar): add isDateHighlightable property (#1816)

JSahrhage · beon-sahrhage · web-flow · commit 5933508db3e1 · 2025-04-14T17:13:51.000+03:00
* feat: implement isDateHighlightable

* docs: add docs

* fix: move isDateHighlightable from useCalendar.ts to useRangeCalendar.ts

---------

Co-authored-by: Jan Sahrhage &lt;sahrhage@be-on.de&gt;
diff --git a/docs/content/meta/DateRangePickerRoot.md b/docs/content/meta/DateRangePickerRoot.md
@@ -97,6 +97,12 @@
     'type': 'Matcher',
     'required': false
   },
+  {
+    'name': 'isDateHighlightable',
+    'description': '<p>A function that returns whether or not a date is highlightable</p>\n',
+    'type': 'Matcher',
+    'required': false
+  },
   {
     'name': 'locale',
     'description': '<p>The locale to use for formatting dates</p>\n',
@@ -243,5 +249,10 @@
     'name': 'isDateUnavailable',
     'description': '<p>A function that returns whether or not a date is unavailable</p>\n',
     'type': 'Matcher'
-  }
+  },
+  {
+    'name': 'isDateHighlightable',
+    'description': '<p>A function that returns whether or not a date is highlightable</p>\n',
+    'type': 'Matcher'
+  },
 ]" />
diff --git a/docs/content/meta/RangeCalendarRoot.md b/docs/content/meta/RangeCalendarRoot.md
@@ -79,6 +79,12 @@
     'type': 'Matcher',
     'required': false
   },
+  {
+    'name': 'isDateHighlightable',
+    'description': '<p>A function that returns whether or not a date is highlightable</p>\n',
+    'type': 'Matcher',
+    'required': false
+  },
   {
     'name': 'locale',
     'description': '<p>The locale to use for formatting dates</p>\n',
@@ -231,5 +237,10 @@
     'name': 'isDateUnavailable',
     'description': '<p>A function that returns whether or not a date is unavailable</p>\n',
     'type': 'Matcher'
-  }
+  },
+  {
+    'name': 'isDateHighlightable',
+    'description': '<p>A function that returns whether or not a date is highlightable</p>\n',
+    'type': 'Matcher'
+  },
 ]" />
diff --git a/packages/core/src/DateRangePicker/DateRangePickerCalendar.vue b/packages/core/src/DateRangePicker/DateRangePickerCalendar.vue
@@ -15,6 +15,7 @@ const rootContext = injectDateRangePickerRootContext()
       allowNonContiguousRanges: rootContext.allowNonContiguousRanges.value,
       isDateDisabled: rootContext.isDateDisabled,
       isDateUnavailable: rootContext.isDateUnavailable,
+      isDateHighlightable: rootContext.isDateHighlightable,
       locale: rootContext.locale.value,
       disabled: rootContext.disabled.value,
       pagedNavigation: rootContext.pagedNavigation.value,
diff --git a/packages/core/src/DateRangePicker/DateRangePickerRoot.vue b/packages/core/src/DateRangePicker/DateRangePickerRoot.vue
@@ -32,6 +32,7 @@ type DateRangePickerRootContext = {
   readonly: Ref<boolean>
   isDateDisabled?: Matcher
   isDateUnavailable?: Matcher
+  isDateHighlightable?: Matcher
   defaultOpen: Ref<boolean>
   open: Ref<boolean>
   modal: Ref<boolean>
@@ -42,7 +43,7 @@ type DateRangePickerRootContext = {
   allowNonContiguousRanges: Ref<boolean>
 }
 
-export type DateRangePickerRootProps = DateRangeFieldRootProps & PopoverRootProps & Pick<RangeCalendarRootProps, 'isDateDisabled' | 'pagedNavigation' | 'weekStartsOn' | 'weekdayFormat' | 'fixedWeeks' | 'numberOfMonths' | 'preventDeselect' | 'isDateUnavailable' | 'allowNonContiguousRanges'>
+export type DateRangePickerRootProps = DateRangeFieldRootProps & PopoverRootProps & Pick<RangeCalendarRootProps, 'isDateDisabled' | 'pagedNavigation' | 'weekStartsOn' | 'weekdayFormat' | 'fixedWeeks' | 'numberOfMonths' | 'preventDeselect' | 'isDateUnavailable' | 'isDateHighlightable' | 'allowNonContiguousRanges'>
 
 export type DateRangePickerRootEmits = {
   /** Event handler called whenever the model value changes */
@@ -82,6 +83,7 @@ const props = withDefaults(defineProps<DateRangePickerRootProps>(), {
   locale: 'en',
   isDateDisabled: undefined,
   isDateUnavailable: undefined,
+  isDateHighlightable: undefined,
   allowNonContiguousRanges: false,
 })
 const emits = defineEmits<DateRangePickerRootEmits & PopoverRootEmits>()
@@ -97,6 +99,7 @@ const {
   preventDeselect,
   isDateDisabled: propsIsDateDisabled,
   isDateUnavailable: propsIsDateUnavailable,
+  isDateHighlightable: propsIsDateHighlightable,
   defaultOpen,
   modal,
   id,
@@ -147,6 +150,7 @@ provideDateRangePickerRootContext({
   allowNonContiguousRanges,
   isDateUnavailable: propsIsDateUnavailable.value,
   isDateDisabled: propsIsDateDisabled.value,
+  isDateHighlightable: propsIsDateHighlightable.value,
   locale,
   disabled,
   pagedNavigation,
diff --git a/packages/core/src/RangeCalendar/RangeCalendarRoot.vue b/packages/core/src/RangeCalendar/RangeCalendarRoot.vue
@@ -35,6 +35,7 @@ type RangeCalendarRootContext = {
   isInvalid: Ref<boolean>
   isDateDisabled: Matcher
   isDateUnavailable?: Matcher
+  isDateHighlightable?: Matcher
   isOutsideVisibleView: (date: DateValue) => boolean
   highlightedRange: Ref<{ start: DateValue, end: DateValue } | null>
   focusedValue: Ref<DateValue | undefined>
@@ -93,6 +94,8 @@ export interface RangeCalendarRootProps extends PrimitiveProps {
   isDateDisabled?: Matcher
   /** A function that returns whether or not a date is unavailable */
   isDateUnavailable?: Matcher
+  /** A function that returns whether or not a date is hightable */
+  isDateHighlightable?: Matcher
   /** The reading direction of the calendar when applicable. <br> If omitted, inherits globally from `ConfigProvider` or assumes LTR (left-to-right) reading mode. */
   dir?: Direction
   /** A function that returns the next page of the calendar. It receives the current placeholder as an argument inside the component. */
@@ -134,6 +137,7 @@ const props = withDefaults(defineProps<RangeCalendarRootProps>(), {
   placeholder: undefined,
   isDateDisabled: undefined,
   isDateUnavailable: undefined,
+  isDateHighlightable: undefined,
   allowNonContiguousRanges: false,
 })
 const emits = defineEmits<RangeCalendarRootEmits>()
@@ -168,6 +172,7 @@ const {
   numberOfMonths,
   preventDeselect,
   isDateUnavailable: propsIsDateUnavailable,
+  isDateHighlightable: propsIsDateHighlightable,
   isDateDisabled: propsIsDateDisabled,
   calendarLabel,
   maxValue,
@@ -247,6 +252,7 @@ const {
 const {
   isInvalid,
   isSelected,
+  isDateHighlightable,
   highlightedRange,
   isSelectionStart,
   isSelectionEnd,
@@ -257,6 +263,7 @@ const {
   end: endValue,
   isDateDisabled,
   isDateUnavailable,
+  isDateHighlightable: propsIsDateHighlightable.value,
   focusedValue,
   allowNonContiguousRanges,
 })
@@ -323,6 +330,7 @@ useEventListener('keydown', (ev) => {
 
 provideRangeCalendarRootContext({
   isDateUnavailable,
+  isDateHighlightable,
   startValue,
   endValue,
   formatter,
diff --git a/packages/core/src/RangeCalendar/useRangeCalendar.ts b/packages/core/src/RangeCalendar/useRangeCalendar.ts
@@ -11,6 +11,7 @@ export type UseRangeCalendarProps = {
   end: Ref<DateValue | undefined>
   isDateDisabled: Matcher
   isDateUnavailable: Matcher
+  isDateHighlightable?: Matcher
   focusedValue: Ref<DateValue | undefined>
   allowNonContiguousRanges: Ref<boolean>
 }
@@ -65,6 +66,12 @@ export function useRangeCalendarState(props: UseRangeCalendarProps) {
     return false
   }
 
+  const isDateHighlightable = (date: DateValue) => {
+    if (props.isDateHighlightable?.(date))
+      return true
+    return false
+  }
+
   const highlightedRange = computed(() => {
     if (props.start.value && props.end.value)
       return null
@@ -82,7 +89,7 @@ export function useRangeCalendarState(props: UseRangeCalendarProps) {
       }
     }
 
-    const isValid = props.allowNonContiguousRanges.value || areAllDaysBetweenValid(start, end, props.isDateUnavailable, props.isDateDisabled)
+    const isValid = areAllDaysBetweenValid(start, end, props.allowNonContiguousRanges.value ? () => false : props.isDateUnavailable, props.isDateDisabled, props.isDateHighlightable)
     if (isValid) {
       return {
         start,
@@ -107,6 +114,7 @@ export function useRangeCalendarState(props: UseRangeCalendarProps) {
   return {
     isInvalid,
     isSelected,
+    isDateHighlightable,
     highlightedRange,
     isSelectionStart,
     isSelectionEnd,
diff --git a/packages/core/src/date/comparators.ts b/packages/core/src/date/comparators.ts
@@ -175,19 +175,24 @@ export function areAllDaysBetweenValid(
   end: DateValue,
   isUnavailable: Matcher | undefined,
   isDisabled: Matcher | undefined,
+  isHighlightable?: Matcher | undefined,
 ) {
-  if (isUnavailable === undefined && isDisabled === undefined)
+  if (isUnavailable === undefined && isDisabled === undefined && isHighlightable === undefined)
     return true
 
   let dCurrent = start.add({ days: 1 })
-  if (isDisabled?.(dCurrent) || isUnavailable?.(dCurrent))
+  if ((isDisabled?.(dCurrent) || isUnavailable?.(dCurrent))
+    && !isHighlightable?.(dCurrent)) {
     return false
+  }
 
   const dEnd = end
   while (dCurrent.compare(dEnd) < 0) {
     dCurrent = dCurrent.add({ days: 1 })
-    if (isDisabled?.(dCurrent) || isUnavailable?.(dCurrent))
+    if ((isDisabled?.(dCurrent) || isUnavailable?.(dCurrent))
+      && !isHighlightable?.(dCurrent)) {
       return false
+    }
   }
   return true
 }
