feat: support excluding date

Author: jason89521

packages/react-use-calendar-component/src/app/components/CalendarCell.tsx

@@ -3,19 +3,30 @@ import type { DateCellInfo } from '../../lib/types';
 export default function CalendarCell({
   monthStatus,
   isSelected,
+  isExcluded,
   isToday,
   monthDay,
   selectThisDate,
 }: DateCellInfo) {
   const title = isToday ? 'today' : undefined;
   let className = 'rounded-full';
-  if (monthStatus !== 'current') className = `${className} text-slate-300`;
-  if (isSelected) className = `${className} bg-green-200 selected`;
-  if (isToday && !isSelected) className = `${className} bg-amber-200`;
-  if (!isToday && !isSelected) className = `${className} hover:bg-stone-100`;
+  if (monthStatus !== 'current' || isExcluded)
+    className = `${className} text-slate-300`;
+
+  // set background color
+  const decorator = (() => {
+    if (isSelected) return 'bg-green-200';
+    if (isToday) return 'bg-amber-200';
+    if (isExcluded) return 'bg-gray-100 cursor-not-allowed';
+    return '';
+  })();
+  className = `${className} ${decorator}`;
+  if (!isToday && !isSelected && !isExcluded)
+    className = `${className} hover:bg-stone-100`;
 
   return (
     <button
+      disabled={isExcluded}
       className={`${className} ${monthStatus}`}
       onClick={() => selectThisDate()}
       type='button'

packages/react-use-calendar-component/src/lib/hooks/useCalendarComponent.ts

@@ -8,15 +8,21 @@ import type {
   SelectType,
   Value,
 } from '../types';
-import { getDateInfoByIndex, isSameDate, noop } from '../utils';
-import { normalizeValue } from '../utils/normalizeValue';
+import {
+  getDateInfoByIndex,
+  isSameDate,
+  isExcludedDate,
+  noop,
+  normalizeValue,
+} from '../utils';
 import useDisplayedDate from './useDisplayedDate';
 
 export default function useCalendarComponent<S extends SelectType = 'single'>({
   initialDisplayedDate = new Date(),
   selectType,
   value: userValue,
   onChange = noop,
+  excludedDates = {},
 }: UseCalendarOptions<S> = {}) {
   const {
     displayedYear,
@@ -45,30 +51,23 @@ export default function useCalendarComponent<S extends SelectType = 'single'>({
       monthDay,
       ...info
     } = getDateInfoByIndex(year, month, cellIndex);
-
-    const isSelected = !!selectedDates.find(date =>
-      isSameDate(date, new Date(dateYear, dateMonth, monthDay))
-    );
+    const thisDate = new Date(dateYear, dateMonth, monthDay);
+    const isSelected = !!selectedDates.find(d => isSameDate(d, thisDate));
+    const isExcluded = isExcludedDate(thisDate, excludedDates);
     const selectThisDate = (options: SelectDateOptions = {}) => {
       const { changeDisplayedValues = true } = options;
       if (changeDisplayedValues) {
         setDisplayedYear(dateYear);
         setDisplayedMonth(dateMonth);
       }
-      const selectedDate = new Date(dateYear, dateMonth, monthDay);
       if (selectType === 'multiple') {
-        const newDates = selectedDates.filter(
-          date => !isSameDate(date, selectedDate)
-        );
-        if (newDates.length === selectedDates.length)
-          newDates.push(selectedDate);
-        newDates.sort((a, b) => a.getTime() - b.getTime());
+        const newDates = selectedDates.filter(d => !isSameDate(d, thisDate));
+        if (newDates.length === selectedDates.length) newDates.push(thisDate);
         handleValueChange(newDates as any);
 
         return;
       }
-
-      handleValueChange(selectedDate as any);
+      handleValueChange(thisDate as any);
     };
 
     return {
@@ -77,15 +76,13 @@ export default function useCalendarComponent<S extends SelectType = 'single'>({
       month: dateMonth,
       monthDay,
       isSelected,
+      isExcluded,
       selectThisDate,
       ...info,
     };
   };
 
-  const getDateCellInfos = (
-    year: number = displayedYear,
-    month: number = displayedMonth
-  ) => {
+  const getDateCellInfos = (year = displayedYear, month = displayedMonth) => {
     const arr: DateCellInfo[] = [];
     for (let i = 0; i < CALENDAR_CELLS_NUM; i++) {
       arr.push(getDateCellInfo(year, month, i));

packages/react-use-calendar-component/src/lib/types.ts

@@ -7,11 +7,18 @@ export type Value<S extends SelectType> = S extends 'single'
   ? Date[]
   : never;
 
+export type ExcludedDates = {
+  min?: Date;
+  max?: Date;
+  arbitrary?: Date[];
+};
+
 export type UseCalendarOptions<S extends SelectType = 'single'> = {
   initialDisplayedDate?: Date;
   selectType?: S;
   value?: Value<S>;
   onChange?: (value: Value<S>) => void;
+  excludedDates?: ExcludedDates;
 };
 
 export interface DateInfo {
@@ -26,6 +33,7 @@ export interface DateInfo {
 export interface DateCellInfo extends DateInfo {
   key: string;
   isSelected: boolean;
+  isExcluded: boolean;
   selectThisDate: (options?: SelectDateOptions) => void;
 }
 

packages/react-use-calendar-component/src/lib/utils/index.ts

@@ -4,3 +4,5 @@ export * from './locale';
 export * from './getDateInfoByIndex';
 export * from './noop';
 export * from './isSameDate';
+export * from './normalizeValue';
+export * from './isExcludedDate';

packages/react-use-calendar-component/src/lib/utils/isExcludedDate.ts

@@ -0,0 +1,17 @@
+import type { ExcludedDates } from '../types';
+import { isSameDate } from './isSameDate';
+
+function largerThan(a: Date, b: Date) {
+  return a.getTime() > b.getTime();
+}
+
+export function isExcludedDate(
+  date: Date,
+  { min, max, arbitrary }: ExcludedDates
+) {
+  if (min && !largerThan(date, min)) return true;
+  if (max && largerThan(date, max)) return true;
+  if (arbitrary && !!arbitrary.find(d => isSameDate(d, date))) return true;
+
+  return false;
+}