feat: holiday feature

Author: Bedram Tamang

.gitignore

@@ -1,3 +1,4 @@
+.idea
 .vscode
 .cache
 .DS_Store

__tests__/Calendar.test.ts

@@ -96,6 +96,58 @@ describe('CalendarPanel', () => {
     expect(mockFn).not.toHaveBeenCalled();
   });
 
+  [true, false].forEach((holidayClickable) => {
+    it('props: holidayClickable', () => {
+      const holidayDate = (date: Date) => {
+        return date === new Date(2019, 9, 1);
+      };
+      const mockFn = jest.fn();
+      wrapper = mount(Calendar, {
+        props: {
+          value: new Date(2019, 9, 1),
+          ['onUpdate:value']: mockFn,
+          holidayClickable: holidayClickable,
+          holidayDate: holidayDate,
+        },
+      });
+      wrapper.find('.mx-table-date td').trigger('click');
+
+      if (holidayClickable) {
+        expect(mockFn).toHaveBeenCalled();
+      } else {
+        expect(mockFn).not.toHaveBeenCalled();
+      }
+    });
+  });
+
+  it('prop: holidayDate', () => {
+    const holidayDate = (date: Date) => {
+      return date < new Date(2019, 9, 1) || date > new Date(2019, 9, 20);
+    };
+    const mockFn = jest.fn();
+    wrapper = mount(Calendar, {
+      props: {
+        value: new Date(2019, 9, 4),
+        ['onUpdate:value']: mockFn,
+        holidayClickable: false,
+        holidayDate: holidayDate,
+      },
+    });
+    const tds = wrapper.findAll('.mx-table-date td');
+    for (let i = 0; i < 42; i++) {
+      const td = tds[i];
+      const classes = td.classes();
+      if (i < 2 || i > 21) {
+        expect(classes).toContain('holiday');
+      } else {
+        expect(classes).not.toContain('holiday');
+      }
+    }
+
+    tds[1].trigger('click');
+    expect(mockFn).not.toHaveBeenCalled();
+  });
+
   const renderType = (type: 'date' | 'month' | 'year') => {
     it(`prop: type=${type}`, () => {
       wrapper = mount(Calendar, {

lib/calendar/Calendar.tsx

@@ -1,4 +1,5 @@
 import { computed, ref, watchEffect } from 'vue';
+import { PanelType, PickerType } from '../type';
 import {
   getValidDate,
   isValidDate,
@@ -8,18 +9,19 @@ import {
   startOfMonth,
   startOfYear,
 } from '../util/date';
+import { defineVueComponent, keys, withDefault } from '../vueUtil';
 import { TableDate } from './TableDate';
 import { TableMonth } from './TableMonth';
 import { TableYear } from './TableYear';
-import { PanelType, PickerType } from '../type';
-import { defineVueComponent, keys, withDefault } from '../vueUtil';
 
 export interface CalendarProps {
   type?: PickerType;
   value?: Date | Date[];
   defaultValue?: Date;
   defaultPanel?: PickerType;
   disabledDate?: (value: Date, innerValue?: Date[]) => boolean;
+  holidayClickable?: boolean;
+  holidayDate?: (value: Date, innerValue?: Date[]) => boolean;
   getClasses?: (value: Date, innerValue: Date[], classes: string) => string[] | string;
   calendar?: Date;
   multiple?: boolean;
@@ -40,6 +42,8 @@ function Calendar(originalProps: CalendarProps) {
     defaultValue: startOfDay(new Date()),
     type: 'date' as PickerType,
     disabledDate: () => false,
+    holidayClickable: () => false,
+    holidayDate: () => false,
     getClasses: () => [],
     titleFormat: 'YYYY-MM-DD',
   });
@@ -85,8 +89,22 @@ function Calendar(originalProps: CalendarProps) {
     return props.disabledDate(new Date(date), innerValue.value);
   };
 
+  const isHoliday = (date: Date) => {
+    return props.holidayDate(new Date(date), innerValue.value);
+  };
+
+  const isClickable = (date: Date) => {
+    if (isDisabled(date)) {
+      return false;
+    }
+    if (!props.holidayClickable && isHoliday(date)) {
+      return false;
+    }
+    return true;
+  };
+
   const emitDate = (date: Date, type: string) => {
-    if (!isDisabled(date)) {
+    if (isClickable(date)) {
       props.onPick?.(date);
       if (props.multiple === true) {
         const nextDates = innerValue.value.filter((v) => v.getTime() !== date.getTime());
@@ -133,6 +151,8 @@ function Calendar(originalProps: CalendarProps) {
   const getCellClasses = (cellDate: Date, classes: string[] = []) => {
     if (isDisabled(cellDate)) {
       classes.push('disabled');
+    } else if (isHoliday(cellDate)) {
+      classes.push('holiday');
     } else if (innerValue.value.some((v) => v.getTime() === cellDate.getTime())) {
       classes.push('active');
     }
@@ -222,6 +242,8 @@ export const calendarProps = keys<CalendarProps>()([
   'defaultValue',
   'defaultPanel',
   'disabledDate',
+  'holidayDate',
+  'holidayClickable',
   'getClasses',
   'calendar',
   'multiple',