Add navbarElement and weekdayElement props

src/DayPicker.js

@@ -45,7 +45,9 @@ export default class DayPicker extends Component {
 
     renderDay: PropTypes.func,
     weekdayComponent: PropTypes.func,
+    weekdayElement: PropTypes.element,
     navbarComponent: PropTypes.func,
+    navbarElement: PropTypes.element,
 
     captionElement: PropTypes.element,
 
@@ -330,7 +332,33 @@ export default class DayPicker extends Component {
       this.showPreviousMonth();
     }
   }
+  renderNavbar() {
+    const {
+      locale,
+      localeUtils,
+      canChangeMonth,
+      navbarComponent,
+      navbarElement,
+    ...attributes } = this.props;
 
+    if (!canChangeMonth) return null;
+    const props = {
+      className: 'DayPicker-NavBar',
+      nextMonth: this.getNextNavigableMonth(),
+      previousMonth: this.getPreviousNavigableMonth(),
+      showPreviousButton: this.allowPreviousMonth(),
+      showNextButton: this.allowNextMonth(),
+      onNextClick: this.showNextMonth,
+      onPreviousClick: this.showPreviousMonth,
+      dir: attributes.dir,
+      locale,
+      localeUtils,
+    };
+    if (navbarElement) {
+      return React.cloneElement(navbarElement, props);
+    }
+    return React.createElement(navbarComponent, props);
+  }
   renderDayInMonth(day, month) {
     let dayModifiers = [];
     if (DateUtils.isSameDay(day, new Date())) {
@@ -389,6 +417,7 @@ export default class DayPicker extends Component {
           wrapperClassName="DayPicker-Body"
           weekClassName="DayPicker-Week"
           weekdayComponent={this.props.weekdayComponent}
+          weekdayElement={this.props.weekdayElement}
           locale={this.props.locale}
           localeUtils={this.props.localeUtils}
           key={i}
@@ -411,10 +440,8 @@ export default class DayPicker extends Component {
   render() {
     const {
       locale,
-      localeUtils,
       canChangeMonth,
       onDayClick,
-      navbarComponent,
     ...attributes } = this.props;
     let className = `DayPicker DayPicker--${locale}`;
 
@@ -434,20 +461,7 @@ export default class DayPicker extends Component {
         tabIndex={canChangeMonth && attributes.tabIndex}
         onKeyDown={this.handleKeyDown}
       >
-        {canChangeMonth &&
-          React.createElement(navbarComponent, {
-            className: 'DayPicker-NavBar',
-            nextMonth: this.getNextNavigableMonth(),
-            previousMonth: this.getPreviousNavigableMonth(),
-            showPreviousButton: this.allowPreviousMonth(),
-            showNextButton: this.allowNextMonth(),
-            onNextClick: this.showNextMonth,
-            onPreviousClick: this.showPreviousMonth,
-            dir: attributes.dir,
-            locale,
-            localeUtils,
-          })
-        }
+        {this.renderNavbar()}
         {this.renderMonths()}
       </div>
     );

src/Month.js

@@ -15,6 +15,7 @@ export default function Month({
   wrapperClassName,
   weekClassName,
   weekdayComponent,
+  weekdayElement,
   fixedWeeks,
 }) {
   const captionProps = {
@@ -27,7 +28,12 @@ export default function Month({
   return (
     <div className={className}>
       {React.cloneElement(captionElement, captionProps)}
-      <Weekdays locale={locale} localeUtils={localeUtils} weekdayComponent={weekdayComponent} />
+      <Weekdays
+        locale={locale}
+        localeUtils={localeUtils}
+        weekdayComponent={weekdayComponent}
+        weekdayElement={weekdayElement}
+      />
       <div className={wrapperClassName} role="grid">
         {
           weeks.map((week, j) =>
@@ -52,5 +58,6 @@ Month.propTypes = {
   wrapperClassName: PropTypes.string,
   weekClassName: PropTypes.string,
   weekdayComponent: PropTypes.func.isRequired,
+  weekdayElement: PropTypes.element,
   fixedWeeks: PropTypes.bool,
 };

src/Weekdays.js

@@ -5,18 +5,21 @@ export default function Weekdays({
   locale,
   localeUtils,
   weekdayComponent,
+  weekdayElement,
 }) {
   const days = [];
   for (let i = 0; i < 7; i++) {
-    days.push(
-      React.createElement(weekdayComponent, {
-        key: i,
-        className: 'DayPicker-Weekday',
-        weekday: i,
-        localeUtils,
-        locale,
-      })
-    );
+    const elemProps = {
+      key: i,
+      className: 'DayPicker-Weekday',
+      weekday: i,
+      localeUtils,
+      locale,
+    };
+    const elem = weekdayElement ?
+      React.cloneElement(weekdayElement, elemProps) :
+      React.createElement(weekdayComponent, elemProps);
+    days.push(elem);
   }
 
   return (
@@ -32,4 +35,5 @@ Weekdays.propTypes = {
   locale: PropTypes.string.isRequired,
   localeUtils: DayPickerPropTypes.localeUtils.isRequired,
   weekdayComponent: PropTypes.func.isRequired,
+  weekdayElement: PropTypes.element,
 };

test/DayPicker.js

@@ -1,6 +1,7 @@
 /* eslint-disable global-require, max-len */
-import React from 'react';
+import React, { PropTypes } from 'react';
 import SyntheticEvent from 'react/lib/SyntheticEvent';
+import { isElement } from 'react-addons-test-utils';
 import { shallow, mount, render } from 'enzyme';
 import { expect } from 'chai';
 import sinon, { spy } from 'sinon';
@@ -110,6 +111,33 @@ describe('<DayPicker />', () => {
       const wrapper = mount(<DayPicker captionElement={caption} />);
       expect(wrapper.containsMatchingElement(caption)).to.be.true;
     });
+    it('should render a custom navbar element', () => {
+      const CustomNavbar = ({ className }) => <div className={className}>Navbar</div>;
+      CustomNavbar.propTypes = { className: PropTypes.string };
+      const navbar = <CustomNavbar />;
+      const dayPicker = <DayPicker navbarElement={navbar} />;
+      const wrapper = mount(dayPicker);
+
+      expect(isElement(dayPicker.props.navbarElement)).to.be.true;
+      expect(wrapper.containsMatchingElement(navbar)).to.be.true;
+      expect(wrapper.find('.DayPicker-NavBar')).to.exist;
+      expect(wrapper.find('.DayPicker-NavBar').at(0)).to.have.text('Navbar');
+    });
+    it('should render a custom weekday element', () => {
+      const CustomWeekday = ({ className, weekday }) => <div className={className}>{weekday}</div>;
+      CustomWeekday.propTypes = { className: PropTypes.string, weekday: PropTypes.number };
+      const weekday = <CustomWeekday />;
+      const dayPicker = <DayPicker weekdayElement={weekday} />;
+      const wrapper = mount(dayPicker);
+
+      expect(isElement(dayPicker.props.weekdayElement)).to.be.true;
+      expect(wrapper.containsMatchingElement(weekday)).to.be.true;
+      expect(wrapper.find('.DayPicker-Weekday')).to.have.length(7);
+      const weekdayDoms = wrapper.find('.DayPicker-Weekday');
+      weekdayDoms.forEach((_, i) => {
+        expect(weekdayDoms.at(i)).to.have.text(i);
+      });
+    });
     it('should not render the outside days', () => {
       const wrapper = mount(<DayPicker initialMonth={new Date(2015, 6)} />);
       expect(wrapper.find('.DayPicker-Day').at(0)).to.have.text('');