Change locale

README.md

@@ -96,7 +96,7 @@ Displays a complete, interactive calendar.
 |minDate|Minimum date that the user can select. Periods partially overlapped by minDate will also be selectable, although React-Calendar will ensure that no earlier date is selected.|n/a|Date: `new Date()`|
 |minDetail|The least detailed view that the user shall see. Can be `"month"`, `"year"`, `"decade"` or `"century"`.|`"century"`|`"decade"`|
 |navigationAriaLabel|`aria-label` attribute of a label rendered on calendar navigation bar.|n/a|`"Go up"`|
-|navigationLabel|Content of a label rendered on calendar navigation bar.|(default label)|``({ date, view, label }) => `Current view: ${view}, date: ${date.toLocaleDateString()}` ``|
+|navigationLabel|Content of a label rendered on calendar navigation bar.|(default label)|``({ date, label, locale, view }) => `Current view: ${view}, date: ${date.toLocaleDateString(locale)}` ``|
 |nextAriaLabel|`aria-label` attribute of the "next" button on the navigation pane.|n/a|`"Next"`|
 |nextLabel|Content of the "next" button on the navigation pane.|`"›"`|<ul><li>String: `"›"`</li><li>React element: `<NextIcon />`</li></ul>|
 |next2AriaLabel|`aria-label` attribute of the "next on higher level" button on the navigation pane.|n/a|`"Jump forwards"`|
@@ -123,7 +123,7 @@ Displays a complete, interactive calendar.
 |tileClassName|Class name(s) that will be applied to a given calendar item (day on month view, month on year view and so on).|n/a|<ul><li>String: `"class1 class2"`</li><li>Array of strings: `["class1", "class2 class3"]`</li><li>Function: `({ date, view }) => view === 'month' && date.getDay() === 3 ? 'wednesday' : null`</li></ul>|
 |tileContent|Allows to render custom content within a given calendar item (day on month view, month on year view and so on).|n/a|<ul><li>String: `"Sample"`</li><li>React element: `<TileContent />`</li><li>Function: `({ date, view }) => view === 'month' && date.getDay() === 0 ? <p>It's Sunday!</p> : null`</li></ul>|
 |tileDisabled|Pass a function to determine if a certain day should be displayed as disabled.|n/a|<ul><li>Function: `({activeStartDate, date, view }) => date.getDay() === 0`</li></ul>|
-|value|Calendar value.|n/a|<ul><li>Date: `new Date()`</li><li>An array of dates: `[new Date(2017, 0, 1), new Date(2017, 7, 1)]`|
+|value|Calendar value. Can be either one value or an array of two values.|n/a|<ul><li>Date: `new Date()`</li><li>An array of dates: `[new Date(2017, 0, 1), new Date(2017, 7, 1)]`|
 |view|Determines which calendar view shall be opened initially. Does not disable navigation. Can be `"month"`, `"year"`, `"decade"` or `"century"`.|The most detailed view allowed|`"year"`|
 
 ### MonthView, YearView, DecadeView, CenturyView
@@ -141,7 +141,7 @@ Displays a given month, year, decade and a century, respectively.
 |onClick|Function called when the user clicks an item (day on month view, month on year view and so on).|n/a|`(value) => alert('New date is: ', value)`|
 |tileClassName|Class name(s) that will be applied to a given calendar item (day on month view, month on year view and so on).|n/a|<ul><li>String: `"class1 class2"`</li><li>Array of strings: `["class1", "class2 class3"]`</li><li>Function: `({ date, view }) => view === 'month' && date.getDay() === 3 ? 'saturday' : null`</li></ul>|
 |tileContent|Allows to render custom content within a given item (day on month view, month on year view and so on). Note: For tiles with custom content you might want to set fixed height of `react-calendar__tile` to ensure consistent layout.|n/a|`({ date, view }) => view === 'month' && date.getDay() === 0 ? <p>It's Sunday!</p> : null`|
-|value|Calendar value.|n/a|<ul><li>Date: `new Date()`</li><li>An array of dates: `[new Date(2017, 0, 1), new Date(2017, 7, 1)]`</li><li>String: `2017-01-01`</li><li>An array of strings: `['2017-01-01', '2017-08-01']`</li></ul>|
+|value|Calendar value. Can be either one value or an array of two values.|n/a|<ul><li>Date: `new Date()`</li><li>An array of dates: `[new Date(2017, 0, 1), new Date(2017, 7, 1)]`</li><li>String: `2017-01-01`</li><li>An array of strings: `['2017-01-01', '2017-08-01']`</li></ul>|
 
 ## License
 

index.d.ts

@@ -21,7 +21,7 @@ declare module "react-calendar" {
     maxDetail?: Detail;
     minDate?: Date;
     minDetail?: Detail;
-    navigationLabel?: (props: { date: Date, view: Detail, label: string }) => string | JSX.Element | null;
+    navigationLabel?: (props: { locale: string, date: Date, view: Detail, label: string }) => string | JSX.Element | null;
     next2AriaLabel?: string;
     next2Label?: string | JSX.Element | null;
     nextAriaLabel?: string;

src/Calendar/Navigation.jsx

@@ -1,5 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
+import { getUserLocale } from 'get-user-locale';
 
 import {
   getCenturyLabel,
@@ -135,7 +136,12 @@ export default function Navigation({
         type="button"
       >
         {navigationLabel
-          ? navigationLabel({ date, view, label })
+          ? navigationLabel({
+            date,
+            label,
+            locale: locale || getUserLocale(),
+            view,
+          })
           : label}
       </button>
       <button

src/Calendar/__tests__/Navigation.jsx

@@ -508,13 +508,15 @@ describe('Navigation', () => {
     const date = new Date(2017, 0, 1);
     const label = 'Custom label';
     const view = 'month';
+    const locale = 'de-DE';
 
     const navigationLabel = jest.fn().mockReturnValue(label);
 
     const component = shallow(
       <Navigation
         activeStartDate={date}
         drillUp={jest.fn()}
+        locale={locale}
         navigationLabel={navigationLabel}
         setActiveStartDate={jest.fn()}
         view={view}
@@ -524,7 +526,12 @@ describe('Navigation', () => {
 
     const [, , drillUp] = component.children();
 
-    expect(navigationLabel).toHaveBeenCalledWith({ date, view, label: 'January 2017' });
+    expect(navigationLabel).toHaveBeenCalledWith({
+      locale,
+      date,
+      view,
+      label: 'Januar 2017',
+    });
     expect(drillUp.props.children.toString()).toBe(label);
   });
 });