From 494117bd86e0c0ad3812eea1d3a09afa4ae0d001 Mon Sep 17 00:00:00 2001
From: Joachim Seminck <joachim.seminck@zeroturnaround.com>
Date: Wed, 23 Aug 2017 13:22:00 +0300
Subject: [PATCH] Introduce renderWeekHeader prop

---
 src/components/DayPicker.jsx                     | 14 ++++++++++++--
 src/components/DayPickerRangeController.jsx      |  4 ++++
 src/components/DayPickerSingleDateController.jsx |  4 ++++
 stories/DayPicker.js                             |  6 ++++++
 4 files changed, 26 insertions(+), 2 deletions(-)

diff --git a/src/components/DayPicker.jsx b/src/components/DayPicker.jsx
index 27134afc8d..9d58def606 100644
--- a/src/components/DayPicker.jsx
+++ b/src/components/DayPicker.jsx
@@ -62,6 +62,9 @@ const propTypes = forbidExtraProps({
   onNextMonthClick: PropTypes.func,
   onMultiplyScrollableMonths: PropTypes.func, // VERTICAL_SCROLLABLE daypickers only
 
+  // week header props
+  renderWeekHeaderDay: PropTypes.func,
+
   // month props
   renderMonth: PropTypes.func,
 
@@ -105,6 +108,9 @@ export const defaultProps = {
   onNextMonthClick() {},
   onMultiplyScrollableMonths() {},
 
+  // week header props
+  renderWeekHeaderDay: null,
+
   // month props
   renderMonth: null,
 
@@ -668,7 +674,7 @@ export default class DayPicker extends React.Component {
   }
 
   renderWeekHeader(index) {
-    const { daySize, orientation } = this.props;
+    const { daySize, orientation, renderWeekHeaderDay } = this.props;
     const { calendarMonthWidth } = this.state;
     const verticalScrollable = orientation === VERTICAL_SCROLLABLE;
     const horizontalStyle = {
@@ -692,9 +698,13 @@ export default class DayPicker extends React.Component {
 
     const header = [];
     for (let i = 0; i < 7; i += 1) {
+      const day = (i + firstDayOfWeek) % 7;
+
       header.push(
         <li key={i} style={{ width: daySize }}>
-          <small>{moment().day((i + firstDayOfWeek) % 7).format('dd')}</small>
+          { renderWeekHeaderDay ? renderWeekHeaderDay(day) : (
+            <small>{moment().day(day).format('dd')}</small>
+          ) }
         </li>,
       );
     }
diff --git a/src/components/DayPickerRangeController.jsx b/src/components/DayPickerRangeController.jsx
index 4dc1d231e3..24b27606b8 100644
--- a/src/components/DayPickerRangeController.jsx
+++ b/src/components/DayPickerRangeController.jsx
@@ -52,6 +52,7 @@ const propTypes = forbidExtraProps({
 
   // DayPicker props
   renderMonth: PropTypes.func,
+  renderWeekHeaderDay: PropTypes.func,
   enableOutsideDays: PropTypes.bool,
   numberOfMonths: PropTypes.number,
   orientation: ScrollableOrientationShape,
@@ -99,6 +100,7 @@ const defaultProps = {
 
   // DayPicker props
   renderMonth: null,
+  renderWeekHeaderDay: null,
   enableOutsideDays: false,
   numberOfMonths: 1,
   orientation: HORIZONTAL_ORIENTATION,
@@ -822,6 +824,7 @@ export default class DayPickerRangeController extends React.Component {
       orientation,
       monthFormat,
       renderMonth,
+      renderWeekHeaderDay,
       navPrev,
       navNext,
       onOutsideClick,
@@ -856,6 +859,7 @@ export default class DayPickerRangeController extends React.Component {
         onMultiplyScrollableMonths={this.onMultiplyScrollableMonths}
         monthFormat={monthFormat}
         renderMonth={renderMonth}
+        renderWeekHeaderDay={renderWeekHeaderDay}
         withPortal={withPortal}
         hidden={!focusedInput}
         initialVisibleMonth={() => currentMonth}
diff --git a/src/components/DayPickerSingleDateController.jsx b/src/components/DayPickerSingleDateController.jsx
index 5cc0386e3e..d140f48b76 100644
--- a/src/components/DayPickerSingleDateController.jsx
+++ b/src/components/DayPickerSingleDateController.jsx
@@ -46,6 +46,7 @@ const propTypes = forbidExtraProps({
 
   // DayPicker props
   renderMonth: PropTypes.func,
+  renderWeekHeaderDay: PropTypes.func,
   enableOutsideDays: PropTypes.bool,
   numberOfMonths: PropTypes.number,
   orientation: ScrollableOrientationShape,
@@ -92,6 +93,7 @@ const defaultProps = {
 
   // DayPicker props
   renderMonth: null,
+  renderWeekHeaderDay: null,
   enableOutsideDays: false,
   numberOfMonths: 1,
   orientation: HORIZONTAL_ORIENTATION,
@@ -553,6 +555,7 @@ export default class DayPickerSingleDateController extends React.Component {
       orientation,
       monthFormat,
       renderMonth,
+      renderWeekHeaderDay,
       navPrev,
       navNext,
       withPortal,
@@ -594,6 +597,7 @@ export default class DayPickerSingleDateController extends React.Component {
         navPrev={navPrev}
         navNext={navNext}
         renderMonth={renderMonth}
+        renderWeekHeaderDay={renderWeekHeaderDay}
         renderDay={renderDay}
         renderCalendarInfo={renderCalendarInfo}
         isFocused={isFocused}
diff --git a/stories/DayPicker.js b/stories/DayPicker.js
index 9dbaa36108..3c74923d6c 100644
--- a/stories/DayPicker.js
+++ b/stories/DayPicker.js
@@ -1,4 +1,5 @@
 import React from 'react';
+import moment from 'moment';
 import { storiesOf } from '@storybook/react';
 import DayPicker from '../src/components/DayPicker';
 
@@ -95,6 +96,11 @@ storiesOf('DayPicker', module)
       renderDay={day => (day.day() % 6 === 5 ? '😻' : day.format('D'))}
     />
   ))
+  .addWithInfo('with custom week headers', () => (
+    <DayPicker
+      renderWeekHeaderDay={day => <b>{moment().day(day).format('ddd')}</b>}
+    />
+  ))
   .addWithInfo('vertical with fixed-width container', () => (
     <div style={{ width: '400px' }}>
       <DayPicker