Merge pull request #112 from brd6/feature/enabled-dates-option

Add an option to allow only certain dates

Author: ManukMinasyan

src/Demo.vue

@@ -21,6 +21,13 @@
     </span>
     <table style="width: 100%">
       <tr>
+        <td>
+          <button class="btn" @click="enabledDates = ['28/10/2020', '29/10/2020']">Change</button>
+          <functional-calendar
+            :is-date-picker="true"
+            :enabled-dates="enabledDates"
+          ></functional-calendar>
+        </td>
         <td>
           <functional-calendar></functional-calendar>
         </td>
@@ -587,6 +594,7 @@ export default {
       ],
       markedDates2: [],
       disabledDates: [],
+      enabledDates: ['27/10/2020', '28/10/2020'],
       calendarConfigs: {
         isMultipleDatePicker: true,
         dayNames: ['Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa', 'Su']

src/components/Day.vue

@@ -248,15 +248,27 @@ export default {
       )
     },
     isDisabledDate(date) {
+      const datesCollection = this.fConfigs.disabledDates;
+
+      return !this.isEnabledDate(date) ||
+        this.isDateIncludedInDatesCollection(date, datesCollection);
+    },
+    isEnabledDate(date) {
+      const datesCollection = this.fConfigs.enabledDates;
+
+      return datesCollection.length === 0 ||
+        this.isDateIncludedInDatesCollection(date, datesCollection);
+    },
+    isDateIncludedInDatesCollection(date, datesCollection) {
       let today = new Date()
       today.setHours(0, 0, 0, 0)
       let dateObj = this.helpCalendar.getDateFromFormat(date)
 
       return (
-        this.fConfigs.disabledDates.includes(date) ||
-        (this.fConfigs.disabledDates.includes('beforeToday') &&
+        datesCollection.includes(date) ||
+        (datesCollection.includes('beforeToday') &&
           dateObj.getTime() < today.getTime()) ||
-        (this.fConfigs.disabledDates.includes('afterToday') &&
+        (datesCollection.includes('afterToday') &&
           dateObj.getTime() > today.getTime())
       )
     },

src/components/FunctionalCalendar.vue

@@ -378,6 +378,18 @@ export default {
     window.removeEventListener('click', this.hideMonthYearPicker)
   },
   watch: {
+    enabledDates: {
+      handler() {
+        this.fConfigs.enabledDates = this.enabledDates;
+      },
+      deep: true
+    },
+    'configs.enabledDates': {
+      handler() {
+        this.fConfigs.enabledDates = this.configs.enabledDates;
+      },
+      deep: true
+    },
     fConfigs: {
       handler() {
         this.markChooseDays()

src/mixins/propsAndData.js

@@ -104,6 +104,9 @@ export const propsAndData = {
     disabledDates: {
       type: Array
     },
+    enabledDates: {
+      type: Array
+    },
     limits: {
       type: [Object, Boolean],
       default: undefinedGenerator
@@ -223,6 +226,7 @@ export const propsAndData = {
         maxSelDays: false,
 
         disabledDates: [],
+        enabledDates: [],
         disabledDayNames: [],
 
         dayNames: ['Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa', 'Su'],