Marks holidays in the calendar

docs-site/src/components/Examples/index.js

@@ -31,6 +31,7 @@ import ExcludeDates from "../../examples/excludeDates";
 import ExcludeDateIntervals from "../../examples/excludeDateIntervals";
 import ExcludeDatesMonthPicker from "../../examples/excludeDatesMonthPicker";
 import HighlightDates from "../../examples/highlightDates";
+import HolidayDates from "../../examples/holidayDates";
 import HighlightDatesRanges from "../../examples/highlightDatesRanges";
 import IncludeDates from "../../examples/includeDates";
 import IncludeDateIntervals from "../../examples/includeDateIntervals";
@@ -289,6 +290,10 @@ export default class exampleComponents extends React.Component {
       title: "Highlight dates with custom class names and ranges",
       component: HighlightDatesRanges,
     },
+    {
+      title: "Holiday dates",
+      component: HolidayDates,
+    },
     {
       title: "Include dates",
       component: IncludeDates,
@@ -526,7 +531,7 @@ export default class exampleComponents extends React.Component {
                 onClick={(e) =>
                   this.handleAnchorClick(
                     e,
-                    `example-${slugify(example.title, { lower: true })}`
+                    `example-${slugify(example.title, { lower: true })}`,
                   )
                 }
               >

docs-site/src/examples/holidayDates.js

@@ -0,0 +1,18 @@
+() => {
+  const [startDate, setStartDate] = useState(new Date());
+  return (
+    <DatePicker
+      selected={startDate}
+      onChange={(date) => setStartDate(date)}
+      holidays={[
+        { date: "2023-08-15", holidayName: "India's Independence Day" },
+        { date: "2023-12-31", holidayName: "New Year's Eve" },
+        { date: "2023-12-25", holidayName: "Christmas" },
+        { date: "2024-01-01", holidayName: "New Year's Day" },
+        { date: "2023-11-23", holidayName: "Thanksgiving Day" },
+        { date: "2023-12-25", holidayName: "Fake holiday" },
+      ]}
+      placeholderText="This display holidays"
+    />
+  );
+};

docs/index.md

@@ -45,6 +45,7 @@
 | `formatWeekDay`                 | `func`                         |                            |             |
 | `formatWeekNumber`              | `func`                         |                            |             |
 | `highlightDates`                | `array`                        |                            |             |
+| `holidays`                      | `array`                        |                            |             |
 | `id`                            | `string`                       |                            |             |
 | `includeDateIntervals`          | `array`                        |                            |             |
 | `includeDates`                  | `array`                        |                            |             |

src/calendar.jsx

@@ -54,7 +54,7 @@ const DROPDOWN_FOCUS_CLASSNAMES = [
 const isDropdownSelect = (element = {}) => {
   const classNames = (element.className || "").split(/\s+/);
   return DROPDOWN_FOCUS_CLASSNAMES.some(
-    (testClassname) => classNames.indexOf(testClassname) >= 0
+    (testClassname) => classNames.indexOf(testClassname) >= 0,
   );
 };
 
@@ -98,18 +98,19 @@ export default class Calendar extends React.Component {
       PropTypes.shape({
         start: PropTypes.instanceOf(Date),
         end: PropTypes.instanceOf(Date),
-      })
+      }),
     ),
     filterDate: PropTypes.func,
     fixedHeight: PropTypes.bool,
     formatWeekNumber: PropTypes.func,
     highlightDates: PropTypes.instanceOf(Map),
+    holidays: PropTypes.instanceOf(Map),
     includeDates: PropTypes.array,
     includeDateIntervals: PropTypes.arrayOf(
       PropTypes.shape({
         start: PropTypes.instanceOf(Date),
         end: PropTypes.instanceOf(Date),
-      })
+      }),
     ),
     includeTimes: PropTypes.array,
     injectTimes: PropTypes.array,
@@ -241,13 +242,13 @@ export default class Calendar extends React.Component {
     ) {
       const hasMonthChanged = !isSameMonth(
         this.state.date,
-        this.props.preSelection
+        this.props.preSelection,
       );
       this.setState(
         {
           date: this.props.preSelection,
         },
-        () => hasMonthChanged && this.handleCustomMonthChange(this.state.date)
+        () => hasMonthChanged && this.handleCustomMonthChange(this.state.date),
       );
     } else if (
       this.props.openToDate &&
@@ -296,7 +297,7 @@ export default class Calendar extends React.Component {
       ({ date }) => ({
         date: addMonths(date, 1),
       }),
-      () => this.handleMonthChange(this.state.date)
+      () => this.handleMonthChange(this.state.date),
     );
   };
 
@@ -305,7 +306,7 @@ export default class Calendar extends React.Component {
       ({ date }) => ({
         date: subMonths(date, 1),
       }),
-      () => this.handleMonthChange(this.state.date)
+      () => this.handleMonthChange(this.state.date),
     );
   };
 
@@ -381,7 +382,7 @@ export default class Calendar extends React.Component {
       ({ date }) => ({
         date: setYear(date, year),
       }),
-      () => this.handleYearChange(this.state.date)
+      () => this.handleYearChange(this.state.date),
     );
   };
 
@@ -390,7 +391,7 @@ export default class Calendar extends React.Component {
       ({ date }) => ({
         date: setMonth(date, month),
       }),
-      () => this.handleMonthChange(this.state.date)
+      () => this.handleMonthChange(this.state.date),
     );
   };
 
@@ -399,23 +400,23 @@ export default class Calendar extends React.Component {
       ({ date }) => ({
         date: setYear(setMonth(date, getMonth(monthYear)), getYear(monthYear)),
       }),
-      () => this.handleMonthYearChange(this.state.date)
+      () => this.handleMonthYearChange(this.state.date),
     );
   };
 
   header = (date = this.state.date) => {
     const startOfWeek = getStartOfWeek(
       date,
       this.props.locale,
-      this.props.calendarStartDay
+      this.props.calendarStartDay,
     );
 
     const dayNames = [];
     if (this.props.showWeekNumbers) {
       dayNames.push(
         <div key="W" className="react-datepicker__day-name">
           {this.props.weekLabel || "#"}
-        </div>
+        </div>,
       );
     }
     return dayNames.concat(
@@ -432,13 +433,13 @@ export default class Calendar extends React.Component {
             key={offset}
             className={classnames(
               "react-datepicker__day-name",
-              weekDayClassName
+              weekDayClassName,
             )}
           >
             {weekDayName}
           </div>
         );
-      })
+      }),
     );
   };
 
@@ -456,10 +457,10 @@ export default class Calendar extends React.Component {
       ({ date }) => ({
         date: subYears(
           date,
-          this.props.showYearPicker ? this.props.yearItemNumber : 1
+          this.props.showYearPicker ? this.props.yearItemNumber : 1,
         ),
       }),
-      () => this.handleYearChange(this.state.date)
+      () => this.handleYearChange(this.state.date),
     );
   };
 
@@ -557,10 +558,10 @@ export default class Calendar extends React.Component {
       ({ date }) => ({
         date: addYears(
           date,
-          this.props.showYearPicker ? this.props.yearItemNumber : 1
+          this.props.showYearPicker ? this.props.yearItemNumber : 1,
         ),
       }),
-      () => this.handleYearChange(this.state.date)
+      () => this.handleYearChange(this.state.date),
     );
   };
 
@@ -780,22 +781,22 @@ export default class Calendar extends React.Component {
 
     const prevMonthButtonDisabled = monthDisabledBefore(
       this.state.date,
-      this.props
+      this.props,
     );
 
     const nextMonthButtonDisabled = monthDisabledAfter(
       this.state.date,
-      this.props
+      this.props,
     );
 
     const prevYearButtonDisabled = yearDisabledBefore(
       this.state.date,
-      this.props
+      this.props,
     );
 
     const nextYearButtonDisabled = yearDisabledAfter(
       this.state.date,
-      this.props
+      this.props,
     );
 
     const showDayNames =
@@ -904,6 +905,7 @@ export default class Calendar extends React.Component {
             excludeDates={this.props.excludeDates}
             excludeDateIntervals={this.props.excludeDateIntervals}
             highlightDates={this.props.highlightDates}
+            holidays={this.props.holidays}
             selectingDate={this.state.selectingDate}
             includeDates={this.props.includeDates}
             includeDateIntervals={this.props.includeDateIntervals}
@@ -944,7 +946,7 @@ export default class Calendar extends React.Component {
             monthShowsDuplicateDaysEnd={monthShowsDuplicateDaysEnd}
             monthShowsDuplicateDaysStart={monthShowsDuplicateDaysStart}
           />
-        </div>
+        </div>,
       );
     }
     return monthList;
@@ -1028,7 +1030,7 @@ export default class Calendar extends React.Component {
   renderAriaLiveRegion = () => {
     const { startPeriod, endPeriod } = getYearsPeriod(
       this.state.date,
-      this.props.yearItemNumber
+      this.props.yearItemNumber,
     );
     let ariaLiveMessage;
 
@@ -1042,7 +1044,7 @@ export default class Calendar extends React.Component {
     } else {
       ariaLiveMessage = `${getMonthInLocale(
         getMonth(this.state.date),
-        this.props.locale
+        this.props.locale,
       )} ${getYear(this.state.date)}`;
     }