Add formatDay prop, fix Day ignoring locale when formatting day numbers

Closes wojtekmaj#508

README.md

@@ -95,7 +95,8 @@ Displays a complete, interactive calendar.
 |defaultActiveStartDate|The beginning of a period that shall be displayed by default. If you wish to use React-Calendar in a controlled way, use `activeStartDate` instead.|(today)|`new Date(2017, 0, 1)`|
 |defaultValue|Calendar value that shall be selected initially. Can be either one value or an array of two values. If you wish to use React-Calendar in a controlled way, use `value` instead.|n/a|<ul><li>Date: `new Date()`</li><li>An array of dates: `[new Date(2017, 0, 1), new Date(2017, 7, 1)]`|
 |defaultView|Determines which calendar view shall be opened initially. Does not disable navigation. Can be `"month"`, `"year"`, `"decade"` or `"century"`. If you wish to use React-Calendar in a controlled way, use `view` instead.|The most detailed view allowed|`"year"`|
-|formatLongDate|Function called to override default formatting of day tiles. Can be used to use your own formatting function.|(default formatter)|`(locale, date) => formatDate(date, 'dd MMM YYYY')`|
+|formatDay|Function called to override default formatting of day tile labels. Can be used to use your own formatting function.|(default formatter)|`(locale, date) => formatDate(date, 'dd')`|
+|formatLongDate|Function called to override default formatting of day tile `abbr` labels. Can be used to use your own formatting function.|(default formatter)|`(locale, date) => formatDate(date, 'dd MMM YYYY')`|
 |formatMonth|Function called to override default formatting of month names. Can be used to use your own formatting function.|(default formatter)|`(locale, date) => formatDate(date, 'MMM')`|
 |formatMonthYear|Function called to override default formatting of months and years. Can be used to use your own formatting function.|(default formatter)|`(locale, date) => formatDate(date, 'MMMM YYYY')`|
 |formatShortWeekday|Function called to override default formatting of weekday names. Can be used to use your own formatting function.|(default formatter)|`(locale, date) => formatDate(date, 'dd')`|

src/Calendar.jsx

@@ -523,6 +523,7 @@ export default class Calendar extends Component {
       }
       case 'month': {
         const {
+          formatDay,
           formatLongDate,
           formatShortWeekday,
           onClickWeekNumber,
@@ -536,6 +537,7 @@ export default class Calendar extends Component {
         return (
           <MonthView
             calendarType={calendarType}
+            formatDay={formatDay}
             formatLongDate={formatLongDate}
             formatShortWeekday={formatShortWeekday}
             onClickWeekNumber={onClickWeekNumber}
@@ -664,6 +666,7 @@ Calendar.propTypes = {
   defaultActiveStartDate: isActiveStartDate,
   defaultValue: isLooseValue,
   defaultView: isView,
+  formatDay: PropTypes.func,
   formatLongDate: PropTypes.func,
   formatMonth: PropTypes.func,
   formatMonthYear: PropTypes.func,

src/Calendar.spec.jsx

@@ -927,6 +927,19 @@ describe('Calendar', () => {
     expect(navigation.prop('formatYear')).toBe(formatYear);
   });
 
+  it('passes formatDay to MonthView component', () => {
+    const formatDay = () => 'Day';
+    const component = shallow(
+      <Calendar
+        formatDay={formatDay}
+      />,
+    );
+
+    const monthView = component.find('MonthView');
+
+    expect(monthView.prop('formatDay')).toBe(formatDay);
+  });
+
   it('passes formatLongDate to MonthView component', () => {
     const formatLongDate = () => 'Long date';
     const component = shallow(

src/MonthView.spec.jsx

@@ -219,6 +219,21 @@ describe('MonthView', () => {
     expect(days.prop('calendarType')).toBe('US');
   });
 
+  it('passes formatDay flag to Days component', () => {
+    const formatDay = () => 'Day';
+
+    const component = shallow(
+      <MonthView
+        {...defaultProps}
+        formatDay={formatDay}
+      />,
+    );
+
+    const days = component.find('Days');
+
+    expect(days.prop('formatDay')).toBe(formatDay);
+  });
+
   it('passes formatLongDate flag to Days component', () => {
     const formatLongDate = () => 'Long date';
 

src/MonthView/Day.jsx

@@ -1,23 +1,27 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { getDate, getDayStart, getDayEnd } from '@wojtekmaj/date-utils';
+import { getDayStart, getDayEnd } from '@wojtekmaj/date-utils';
 
 import Tile from '../Tile';
 
 import { isWeekend } from '../shared/dates';
-import { formatLongDate as defaultFormatLongDate } from '../shared/dateFormatter';
+import {
+  formatDay as defaultFormatDay,
+  formatLongDate as defaultFormatLongDate,
+} from '../shared/dateFormatter';
 import { tileProps } from '../shared/propTypes';
 
 const className = 'react-calendar__month-view__days__day';
 
 export default function Day({
+  formatDay = defaultFormatDay,
   formatLongDate = defaultFormatLongDate,
   calendarType,
   classes,
   currentMonthIndex,
   ...otherProps
 }) {
-  const { date } = otherProps;
+  const { date, locale } = otherProps;
 
   return (
     <Tile
@@ -33,13 +37,14 @@ export default function Day({
       minDateTransform={getDayStart}
       view="month"
     >
-      {getDate(date)}
+      {formatDay(locale, date)}
     </Tile>
   );
 }
 
 Day.propTypes = {
   ...tileProps,
   currentMonthIndex: PropTypes.number.isRequired,
+  formatDay: PropTypes.func,
   formatLongDate: PropTypes.func,
 };

src/MonthView/Day.spec.jsx

@@ -210,6 +210,28 @@ describe('Day', () => {
     expect(testContent).toHaveLength(1);
   });
 
+  it('uses formatDay if given', () => {
+    const locale = 'en-US';
+    const date = new Date(2018, 0, 1);
+    const formatDay = jest.fn();
+    formatDay.mockReturnValue('Mock format');
+
+    const component = mount(
+      <Day
+        {...tileProps}
+        date={date}
+        formatDay={formatDay}
+        locale={locale}
+      />,
+    );
+
+    const tile = component.find('Tile');
+
+    expect(formatDay).toHaveBeenCalled();
+    expect(formatDay).toHaveBeenCalledWith(locale, date);
+    expect(tile.text()).toBe('Mock format');
+  });
+
   it('uses formatLongDate if given', () => {
     const locale = 'en-US';
     const date = new Date(2018, 0, 1);

src/shared/dateFormatter.js

@@ -23,17 +23,19 @@ function getSafeFormatter(options) {
 }
 
 const formatDateOptions = { day: 'numeric', month: 'numeric', year: 'numeric' };
+const formatDayOptions = { day: 'numeric' };
 const formatLongDateOptions = { day: 'numeric', month: 'long', year: 'numeric' };
 const formatMonthOptions = { month: 'long' };
 const formatMonthYearOptions = { month: 'long', year: 'numeric' };
-const formatYearOptions = { year: 'numeric' };
 const formatShortWeekdayOptions = { weekday: 'short' };
 const formatWeekdayOptions = { weekday: 'long' };
+const formatYearOptions = { year: 'numeric' };
 
 export const formatDate = getSafeFormatter(formatDateOptions);
+export const formatDay = getSafeFormatter(formatDayOptions);
 export const formatLongDate = getSafeFormatter(formatLongDateOptions);
 export const formatMonth = getSafeFormatter(formatMonthOptions);
 export const formatMonthYear = getSafeFormatter(formatMonthYearOptions);
-export const formatYear = getSafeFormatter(formatYearOptions);
 export const formatShortWeekday = getSafeFormatter(formatShortWeekdayOptions);
 export const formatWeekday = getSafeFormatter(formatWeekdayOptions);
+export const formatYear = getSafeFormatter(formatYearOptions);