CalendarMonth accepts customizable week and month names as props

package.json

@@ -51,7 +51,8 @@
     "immutable": "^3.7.2",
     "moment": "^2.10.6",
     "moment-range": "^2.0.3",
-    "react-addons-pure-render-mixin": "^0.14.0"
+    "react-addons-pure-render-mixin": "^0.14.0",
+    "react-immutable-proptypes": "^1.7.1"
   },
   "devDependencies": {
     "babel": "^5.2.16",

src/DateRangePicker.jsx

@@ -3,6 +3,7 @@ import moment from 'moment';
 import {} from 'moment-range';
 import Immutable from 'immutable';
 import calendar from 'calendar';
+import ImmutablePropTypes from 'react-immutable-proptypes';
 
 import BemMixin from './utils/BemMixin';
 import CustomPropTypes from './utils/CustomPropTypes';
@@ -41,6 +42,7 @@ const DateRangePicker = React.createClass({
     initialYear: React.PropTypes.number, // Overrides values derived from initialDate/initialRange
     maximumDate: React.PropTypes.instanceOf(Date),
     minimumDate: React.PropTypes.instanceOf(Date),
+    monthNames: ImmutablePropTypes.listOf(React.PropTypes.string.isRequired),
     numberOfCalendars: React.PropTypes.number,
     onHighlightDate: React.PropTypes.func, // triggered when a date is highlighted (hovered)
     onHighlightRange: React.PropTypes.func, // triggered when a range is highlighted (hovered)
@@ -53,6 +55,7 @@ const DateRangePicker = React.createClass({
     showLegend: React.PropTypes.bool,
     stateDefinitions: React.PropTypes.object,
     value: CustomPropTypes.momentOrMomentRange,
+    weekdayNames: ImmutablePropTypes.listOf(React.PropTypes.arrayOf(React.PropTypes.string).isRequired),
   },
 
   getDefaultProps() {
@@ -490,6 +493,8 @@ const DateRangePicker = React.createClass({
       onUnHighlightDate: this.onUnHighlightDate,
       dateRangesForDate: this.dateRangesForDate,
       dateComponent: CalendarDate,
+      monthNames: this.props.monthNames,
+      weekdayNames: this.props.weekdayNames,
     };
 
     return <CalendarMonth {...props} />;

src/calendar/CalendarMonth.jsx

@@ -3,6 +3,7 @@ import moment from 'moment';
 import {} from 'moment-range';
 import calendar from 'calendar';
 import Immutable from 'immutable';
+import ImmutablePropTypes from 'react-immutable-proptypes';
 
 import BemMixin from '../utils/BemMixin';
 import CustomPropTypes from '../utils/CustomPropTypes';
@@ -27,9 +28,18 @@ const CalendarMonth = React.createClass({
     hideSelection: React.PropTypes.bool,
     highlightedDate: React.PropTypes.object,
     highlightedRange: React.PropTypes.object,
+    monthNames: ImmutablePropTypes.listOf(React.PropTypes.string.isRequired),
     onMonthChange: React.PropTypes.func,
     onYearChange: React.PropTypes.func,
     value: CustomPropTypes.momentOrMomentRange,
+    weekdayNames: ImmutablePropTypes.listOf(React.PropTypes.arrayOf(React.PropTypes.string.isRequired).isRequired),
+  },
+
+  getDefaultProps() {
+    return {
+      monthNames: MONTHS,
+      weekdayNames: WEEKDAYS,
+    };
   },
 
   renderDay(date, i) {
@@ -76,11 +86,11 @@ const CalendarMonth = React.createClass({
   },
 
   renderDayHeaders() {
-    let {firstOfWeek} = this.props;
+    let {firstOfWeek, weekdayNames} = this.props;
     let indices = Immutable.Range(firstOfWeek, 7).concat(Immutable.Range(0, firstOfWeek));
 
     let headers = indices.map(function(index) {
-      let weekday = WEEKDAYS.get(index);
+      let weekday = weekdayNames.get(index);
       return (
         <th className={this.cx({element: 'WeekdayHeading'})} key={weekday} scope="col"><abbr title={weekday[0]}>{weekday[1]}</abbr></th>
       );
@@ -148,8 +158,8 @@ const CalendarMonth = React.createClass({
   },
 
   renderHeaderMonth() {
-    let {firstOfMonth} = this.props;
-    let choices = MONTHS.map(this.renderMonthChoice);
+    let {firstOfMonth, monthNames} = this.props;
+    let choices = monthNames.map(this.renderMonthChoice);
     let modifiers = {month: true};
 
     return (

src/calendar/tests/CalendarMonth.spec.js

@@ -1,8 +1,10 @@
 import React from 'react';
+import ReactDOM from 'react-dom';
 import TestUtils from 'react-addons-test-utils';
 import CalendarMonth from '../CalendarMonth';
 import CalendarDate from '../CalendarDate';
 import moment from 'moment';
+import Immutable from 'immutable';
 import {} from 'moment-range';
 import _ from 'underscore';
 
@@ -58,7 +60,7 @@ describe('The CalendarMonth Component', function () {
 
   afterEach( function () {
     if (this.component) {
-      React.unmountComponentAtNode(React.findDOMNode(this.component).parentNode);
+      ReactDOM.unmountComponentAtNode(ReactDOM.findDOMNode(this.component).parentNode);
     }
   });
 
@@ -118,7 +120,7 @@ describe('The CalendarMonth Component', function () {
         this.useDocumentRenderer({
           onMonthChange: onMonthChange,
         });
-        var select = TestUtils.scryRenderedDOMComponentsWithTag(this.renderedComponent, 'select')[0].getDOMNode();
+        var select = ReactDOM.findDOMNode(TestUtils.scryRenderedDOMComponentsWithTag(this.renderedComponent, 'select')[0]);
         select.value = '2';
         TestUtils.Simulate.change(select);
         expect(onMonthChange).toHaveBeenCalledWith(2);
@@ -165,7 +167,7 @@ describe('The CalendarMonth Component', function () {
         this.useDocumentRenderer({
           onYearChange: onYearChange,
         });
-        var select = TestUtils.scryRenderedDOMComponentsWithTag(this.renderedComponent, 'select')[1].getDOMNode();
+        var select = ReactDOM.findDOMNode(TestUtils.scryRenderedDOMComponentsWithTag(this.renderedComponent, 'select')[1]);
         var value = (this.firstOfMonth.year() + 1).toString();
         select.value = value;
         TestUtils.Simulate.change(select);
@@ -194,6 +196,23 @@ describe('The CalendarMonth Component', function () {
         </tr>);
       });
 
+      it('which can be customized with the desired day names', function () {
+        const lang = moment().localeData();
+        const WEEKDAYS = Immutable.List(lang._weekdays).zip(Immutable.List(moment.weekdaysMin().map(name => name.substring(0, 1))));
+        this.useShallowRenderer({
+          weekdayNames: WEEKDAYS,
+        });
+        expect(this.table.props.children[0].props.children).toEqual(<tr className='DateRangePicker__Weekdays'>
+          <th className='DateRangePicker__WeekdayHeading' key='Sunday,S' scope='col'><abbr title='Sunday'>S</abbr></th>
+          <th className='DateRangePicker__WeekdayHeading' key='Monday,M' scope='col'><abbr title='Monday'>M</abbr></th>
+          <th className='DateRangePicker__WeekdayHeading' key='Tuesday,T' scope='col'><abbr title='Tuesday'>T</abbr></th>
+          <th className='DateRangePicker__WeekdayHeading' key='Wednesday,W' scope='col'><abbr title='Wednesday'>W</abbr></th>
+          <th className='DateRangePicker__WeekdayHeading' key='Thursday,T' scope='col'><abbr title='Thursday'>T</abbr></th>
+          <th className='DateRangePicker__WeekdayHeading' key='Friday,F' scope='col'><abbr title='Friday'>F</abbr></th>
+          <th className='DateRangePicker__WeekdayHeading' key='Saturday,S' scope='col'><abbr title='Saturday'>S</abbr></th>
+        </tr>);
+      });
+
       it('which has a body containing the weeks', function () {
         expect(this.table.props.children[1].props.children.length).toBeGreaterThan(3);
         expect(this.table.props.children[1].props.children[0].type).toEqual('tr');

src/tests/DateRangePicker.spec.js

@@ -329,7 +329,17 @@ describe('The DateRangePicker component', function () {
         expect(this.renderedComponent.props.children[1][0].props.firstOfWeek).toBe(0);
       });
 
-
+      it('like props.monthNames and props.weekdayNames', function () {
+        const lang = moment().localeData();
+        const MONTHS = Immutable.List(moment.monthsShort());
+        const WEEKDAYS = Immutable.List(lang._weekdays).zip(Immutable.List(moment.weekdaysMin().map(name => name.substring(0, 1))));
+        this.useShallowRenderer({
+          monthNames: MONTHS,
+          weekdayNames: WEEKDAYS,
+        });
+        expect(this.renderedComponent.props.children[1][0].props.monthNames).toBe(MONTHS);
+        expect(this.renderedComponent.props.children[1][0].props.weekdayNames).toBe(WEEKDAYS);
+      });
     });
 
     describe('each component is provided with a number of event handlers', function () {