Feature/week day class name (#2113)

* Add week day class name feature * Extend docs for week day class name feature * Add test to week day class name feature
Hacker0x01 · Apr 16, 2020 · b21bf47 · b21bf47
1 parent 279f9ff
commit b21bf47
Show file tree

Hide file tree

Showing 6 changed files with 36 additions and 2 deletions.
diff --git a/docs/datepicker.md b/docs/datepicker.md
@@ -17,6 +17,7 @@ General datepicker component.
 | `dateFormat`                 | `union(string\|array)`         | `'MM/dd/yyyy'`  |                                            |
 | `dateFormatCalendar`         | `string`                       | `'LLLL yyyy'`   |                                            |
 | `dayClassName`               | `func`                         |                 |                                            |
+| `weekDayClassName`           | `func`                         |                 |                                            |
 | `disabled`                   | `bool`                         | `false`         |                                            |
 | `disabledKeyboardNavigation` | `bool`                         | `false`         |                                            |
 | `dropdownMode` (required)    | `enum('scroll'\|'select')`     | `'scroll'`      |                                            |

diff --git a/docs/index.md b/docs/index.md
@@ -20,6 +20,7 @@
 | `dateFormat`                 | `union(string\|array)`         | `"MM/dd/yyyy"`     |             |
 | `dateFormatCalendar`         | `string`                       | `"LLLL yyyy"`      |             |
 | `dayClassName`               | `func`                         |                    |             |
+| `weekDayClassName`           | `func`                         |                    |             |
 | `disabled`                   | `bool`                         | `false`            |             |
 | `disabledDayAriaLabelPrefix` | `string`                       |                    |             |
 | `disabledKeyboardNavigation` | `bool`                         | `false`            |             |

diff --git a/package.json b/package.json
@@ -2,7 +2,7 @@
   "author": "HackerOne",
   "name": "react-datepicker",
   "description": "A simple and reusable datepicker component for React",
-  "version": "2.14.1",
+  "version": "2.14.2-SNAPSHOT",
   "license": "MIT",
   "homepage": "https://github.com/Hacker0x01/react-datepicker",
   "main": "dist/index.js",

diff --git a/src/calendar.jsx b/src/calendar.jsx
@@ -75,6 +75,7 @@ export default class Calendar extends React.Component {
     dateFormat: PropTypes.oneOfType([PropTypes.string, PropTypes.array])
       .isRequired,
     dayClassName: PropTypes.func,
+    weekDayClassName: PropTypes.func,
     disabledDayAriaLabelPrefix: PropTypes.string,
     monthClassName: PropTypes.func,
     timeClassName: PropTypes.func,
@@ -336,8 +337,19 @@ export default class Calendar extends React.Component {
       [0, 1, 2, 3, 4, 5, 6].map(offset => {
         const day = addDays(startOfWeek, offset);
         const weekDayName = this.formatWeekday(day, this.props.locale);
+
+        const weekDayClassName = this.props.weekDayClassName
+          ? this.props.weekDayClassName(day)
+          : undefined;
+
         return (
-          <div key={offset} className="react-datepicker__day-name">
+          <div
+            key={offset}
+            className={classnames(
+              "react-datepicker__day-name",
+              weekDayClassName
+            )}
+          >
             {weekDayName}
           </div>
         );

diff --git a/src/index.jsx b/src/index.jsx
@@ -129,6 +129,7 @@ export default class DatePicker extends React.Component {
     dateFormat: PropTypes.oneOfType([PropTypes.string, PropTypes.array]),
     dateFormatCalendar: PropTypes.string,
     dayClassName: PropTypes.func,
+    weekDayClassName: PropTypes.func,
     disabledDayAriaLabelPrefix: PropTypes.string,
     monthClassName: PropTypes.func,
     timeClassName: PropTypes.func,
@@ -768,6 +769,7 @@ export default class DatePicker extends React.Component {
         onMonthChange={this.props.onMonthChange}
         onYearChange={this.props.onYearChange}
         dayClassName={this.props.dayClassName}
+        weekDayClassName={this.props.weekDayClassName}
         monthClassName={this.props.monthClassName}
         timeClassName={this.props.timeClassName}
         showTimeSelect={this.props.showTimeSelect}

diff --git a/test/calendar_test.js b/test/calendar_test.js
@@ -13,6 +13,7 @@ import sinon from "sinon";
 import * as utils from "../src/date_utils";
 import eo from "date-fns/locale/eo";
 import fi from "date-fns/locale/fi";
+import { isSunday } from "date-fns";
 
 // TODO Possibly rename
 const DATE_FORMAT = "MM/dd/yyyy";
@@ -166,6 +167,23 @@ describe("Calendar", function() {
       .forEach(dayName => expect(dayName.text()).to.have.length(1));
   });
 
+  it("should contain the correct class when using the weekDayClassName prop", () => {
+    const func = date => (isSunday(date) ? "sunday" : undefined);
+
+    const calendar = mount(
+      <Calendar
+        dateFormat={dateFormat}
+        dropdownMode="scroll"
+        onClickOutside={() => {}}
+        onSelect={() => {}}
+        weekDayClassName={func}
+      />
+    );
+
+    const sunday = calendar.find(".react-datepicker__day-name.sunday");
+    expect(sunday).to.have.length(1);
+  });
+
   it("should render the months correctly adjusted by monthSelectedIn", () => {
     const selected = utils.newDate("2018-11-19");
     const calendar = getCalendar({ inline: true, monthsShown: 2, selected });