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(
- {moment().day((i + firstDayOfWeek) % 7).format('dd')}
+ { renderWeekHeaderDay ? renderWeekHeaderDay(day) : (
+ {moment().day(day).format('dd')}
+ ) }
,
);
}
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', () => (
+ {moment().day(day).format('ddd')}}
+ />
+ ))
.addWithInfo('vertical with fixed-width container', () => (