renderWeekDay property

DayPicker.js

@@ -4,7 +4,9 @@
 var DayPicker = require('./lib/DayPicker');
 var DateUtils = require('./lib/DateUtils');
 var LocaleUtils = require('./lib/LocaleUtils');
+var Weekday = require('./lib/Weekday');
 
 module.exports = DayPicker.default || DayPicker;
 module.exports.DateUtils = DateUtils.default || DateUtils;
 module.exports.LocaleUtils = LocaleUtils.default || LocaleUtils;
+module.exports.WeekdayPropTypes = Weekday.WeekdayPropTypes;

docs/APIProps.md

@@ -97,6 +97,14 @@ See also [this advanced example](../examples/#yearNavigation), showing a year na
 
 Returns the content of a day cell. By default, it renders the day's date: `(day) ⇒ day.getDate()`
 
+#### weekdayComponent `Component`
+
+Custom component to render weekday header. Passed props are:
+* `weekday: number` Weekday number 
+* `className: string` Wrapper class name
+* `localeUtils: Object` The [localeUtils](#localeutils-object) object passed to the component.
+* `locale: String` The current [locale](#locale-string) passed to the component.
+
 ---
 
 #### onDayClick  `(e: SyntethicEvent, day: Date, modifiers: Object) ⇒ void`

package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-day-picker",
-  "version": "2.0.3",
+  "version": "2.0.4",
   "description": "Flexible date picker component for React",
   "main": "DayPicker.js",
   "style": "lib/style.css",

src/DayPicker.js

@@ -4,6 +4,7 @@ import Caption from './Caption';
 import Navbar from './Navbar';
 import Month from './Month';
 import Day from './Day';
+import Weekday from './Weekday';
 
 import * as Helpers from './Helpers';
 import * as DateUtils from './DateUtils';
@@ -42,6 +43,7 @@ export default class DayPicker extends Component {
     onCaptionClick: PropTypes.func,
 
     renderDay: PropTypes.func,
+    weekdayComponent: PropTypes.func,
 
     captionElement: PropTypes.element,
 
@@ -60,6 +62,7 @@ export default class DayPicker extends Component {
     canChangeMonth: true,
     reverseMonths: false,
     renderDay: day => day.getDate(),
+    weekdayComponent: Weekday,
     captionElement: <Caption />,
   };
 
@@ -373,6 +376,7 @@ export default class DayPicker extends Component {
           className="DayPicker-Month"
           wrapperClassName="DayPicker-Body"
           weekClassName="DayPicker-Week"
+          weekdayComponent={this.props.weekdayComponent}
           locale={this.props.locale}
           localeUtils={this.props.localeUtils}
           key={i}

src/Month.js

@@ -14,6 +14,7 @@ export default function Month({
   className,
   wrapperClassName,
   weekClassName,
+  weekdayComponent,
 }) {
   const captionProps = {
     date: month,
@@ -25,7 +26,7 @@ export default function Month({
   return (
     <div className={className}>
       {React.cloneElement(captionElement, captionProps)}
-      <Weekdays locale={locale} localeUtils={localeUtils} />
+      <Weekdays locale={locale} localeUtils={localeUtils} weekdayComponent={weekdayComponent} />
       <div className={wrapperClassName} role="grid">
         {
           weeks.map((week, j) =>
@@ -49,4 +50,5 @@ Month.propTypes = {
   className: PropTypes.string,
   wrapperClassName: PropTypes.string,
   weekClassName: PropTypes.string,
+  weekdayComponent: PropTypes.func.isRequired,
 };

src/Weekday.js

@@ -0,0 +1,21 @@
+import React, { PropTypes } from 'react';
+import DayPickerPropTypes from './PropTypes';
+
+export default function Weekday({ weekday, className, localeUtils, locale }) {
+  return (
+    <div className={className}>
+      <abbr title={localeUtils.formatWeekdayLong(weekday, locale)}>
+        {localeUtils.formatWeekdayShort(weekday, locale)}
+      </abbr>
+    </div>
+  );
+}
+
+export const WeekdayPropTypes = {
+  weekday: PropTypes.number.isRequired,
+  className: PropTypes.string,
+  locale: PropTypes.string.isRequired,
+  localeUtils: DayPickerPropTypes.localeUtils.isRequired,
+};
+
+Weekday.propTypes = WeekdayPropTypes;

src/Weekdays.js

@@ -4,15 +4,18 @@ import DayPickerPropTypes from './PropTypes';
 export default function Weekdays({
   locale,
   localeUtils,
+  weekdayComponent,
 }) {
   const days = [];
   for (let i = 0; i < 7; i++) {
     days.push(
-      <div key={i} className="DayPicker-Weekday">
-        <abbr title={localeUtils.formatWeekdayLong(i, locale)}>
-          {localeUtils.formatWeekdayShort(i, locale)}
-        </abbr>
-      </div>
+      React.createElement(weekdayComponent, {
+        key: i,
+        className: 'DayPicker-Weekday',
+        weekday: i,
+        localeUtils,
+        locale,
+      })
     );
   }
 
@@ -28,4 +31,5 @@ export default function Weekdays({
 Weekdays.propTypes = {
   locale: PropTypes.string.isRequired,
   localeUtils: DayPickerPropTypes.localeUtils.isRequired,
+  weekdayComponent: PropTypes.func.isRequired,
 };

test/DayPicker.js

@@ -25,6 +25,7 @@ describe('<DayPicker />', () => {
       expect(dayPicker.props.canChangeMonth).to.equal(true);
       expect(dayPicker.props.reverseMonths).to.equal(false);
       expect(dayPicker.props.renderDay).to.be.a('Function');
+      expect(dayPicker.props.weekdayComponent).to.be.a('Function');
       expect(dayPicker.props.tabIndex).to.equal(0);
     });
     it('should have the DayPicker classes', () => {