Merge pull request #109 from iM-GeeKy/disabled-dates

Introduce disabled dates prop.

Author: RichardLindhout

README.md

@@ -95,6 +95,7 @@ export default function ReadMeExampleSingle() {
         // validRange={{
         //   startDate: new Date(2021, 1, 2),  // optional
         //   endDate: new Date(), // optional
+        //   disabledDates: [new Date()] // optional
         // }}
         // onChange={} // same props as onConfirm but triggered without confirmed by user
         // saveLabel="Save" // optional
@@ -149,6 +150,7 @@ export default function ReadMeExampleRange() {
         // validRange={{
         //   startDate: new Date(2021, 1, 2),  // optional
         //   endDate: new Date(), // optional
+        //   disabledDates: [new Date()] // optional
         // }}
         // onChange={} // same props as onConfirm but triggered without confirmed by user
         // locale={'nl'} // optional
@@ -203,6 +205,7 @@ export default function ReadMeExampleMultiple() {
         // validRange={{
         //   startDate: new Date(2021, 1, 2),  // optional
         //   endDate: new Date(), // optional
+        //   disabledDates: [new Date()] // optional
         // }}
         // locale={'nl'} // optional
         // saveLabel="Save" // optional

src/Date/Calendar.tsx

@@ -25,6 +25,7 @@ export type ScrollModeType = 'horizontal' | 'vertical'
 export type ValidRangeType = {
   startDate?: Date
   endDate?: Date
+  disabledDates?: Date[]
 }
 
 export type BaseCalendarProps = {

src/Date/Month.tsx

@@ -120,6 +120,10 @@ function Month(props: MonthSingleProps | MonthRangeProps | MonthMultiProps) {
         )
       : undefined
 
+  const validDisabledDates = validRange?.disabledDates
+    ? validRange?.disabledDates
+    : undefined
+
   const { monthName, month, year } = React.useMemo(() => {
     const md = addMonths(new Date(), realIndex)
     const y = md.getFullYear()
@@ -153,11 +157,22 @@ function Month(props: MonthSingleProps | MonthRangeProps | MonthMultiProps) {
           let inRange = false
           let disabled = false
           let selected = false
+          let inDisabledDates = false
           let leftCrop = dayOfMonth === 1
           let rightCrop = dayOfMonth === daysInMonth
 
           const isFirstDayOfMonth = dayOfMonth === 1
           const isLastDayOfMonth = dayOfMonth === daysInMonth
+
+          inDisabledDates = validDisabledDates
+            ? validDisabledDates.some((disabledDate) =>
+                areDatesOnSameDay(disabledDate, day)
+              )
+            : false
+          if (inDisabledDates) {
+            disabled = true
+          }
+
           if (mode === 'range') {
             const selectedStartDay = areDatesOnSameDay(day, startDate)
             const selectedEndDay = areDatesOnSameDay(day, endDate)
@@ -237,7 +252,7 @@ function Month(props: MonthSingleProps | MonthRangeProps | MonthMultiProps) {
             endUnix: validRangeEnd,
           })
 
-          if (inRange) {
+          if (inRange && !inDisabledDates) {
             disabled = false
           }
 
@@ -273,6 +288,7 @@ function Month(props: MonthSingleProps | MonthRangeProps | MonthMultiProps) {
     dates,
     validRangeStart,
     validRangeEnd,
+    validDisabledDates,
     mode,
   ])