react-calendar - npm Package Compare versions

Comparing version 3.8.0 to 3.9.0

dist/esm/Calendar.js

@@ -618,2 +618,3 @@ var _excluded = ["activeStartDate", "defaultActiveStartDate", "defaultValue", "defaultView", "maxDetail", "minDetail", "value", "view"];
                 formatShortWeekday = _this$props10.formatShortWeekday,
+                formatWeekday = _this$props10.formatWeekday,
                 onClickWeekNumber = _this$props10.onClickWeekNumber,
@@ -630,2 +631,3 @@ showDoubleView = _this$props10.showDoubleView,
               formatShortWeekday: formatShortWeekday,
+              formatWeekday: formatWeekday,
               onClickWeekNumber: onClickWeekNumber,
@@ -749,2 +751,3 @@ onMouseLeave: selectRange ? onMouseLeave : null,
   formatShortWeekday: PropTypes.func,
+  formatWeekday: PropTypes.func,
   formatYear: PropTypes.func,
@@ -751,0 +754,0 @@ goToRangeStartOnSelect: PropTypes.bool,

dist/esm/index.js

 import Calendar from './Calendar';
+import Navigation from './Calendar/Navigation';
 import CenturyView from './CenturyView';
@@ -7,2 +8,2 @@ import DecadeView from './DecadeView';
 export default Calendar;
-export { Calendar, CenturyView, DecadeView, YearView, MonthView };
+export { Calendar, Navigation, CenturyView, DecadeView, YearView, MonthView };

dist/esm/MonthView.js

@@ -1,2 +0,2 @@
-var _excluded = ["calendarType", "formatShortWeekday", "onClickWeekNumber", "showWeekNumbers"];
+var _excluded = ["calendarType", "formatShortWeekday", "formatWeekday", "onClickWeekNumber", "showWeekNumbers"];
 
@@ -33,2 +33,3 @@ function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
       formatShortWeekday = props.formatShortWeekday,
+      formatWeekday = props.formatWeekday,
       onClickWeekNumber = props.onClickWeekNumber,
@@ -42,2 +43,3 @@ showWeekNumbers = props.showWeekNumbers,
       formatShortWeekday: formatShortWeekday,
+      formatWeekday: formatWeekday,
       locale: locale,
@@ -87,2 +89,3 @@ onMouseLeave: onMouseLeave
   formatShortWeekday: PropTypes.func,
+  formatWeekday: PropTypes.func,
   locale: PropTypes.string,
@@ -89,0 +92,0 @@ onClickWeekNumber: PropTypes.func,

dist/esm/MonthView/Weekdays.js

@@ -7,3 +7,3 @@ import React from 'react';
 import { getDayOfWeek, isWeekend } from '../shared/dates';
-import { formatWeekday, formatShortWeekday as defaultFormatShortWeekday } from '../shared/dateFormatter';
+import { formatShortWeekday as defaultFormatShortWeekday, formatWeekday as defaultFormatWeekday } from '../shared/dateFormatter';
 import { isCalendarType } from '../shared/propTypes';
@@ -16,2 +16,4 @@ var className = 'react-calendar__month-view__weekdays';
       formatShortWeekday = _props$formatShortWee === void 0 ? defaultFormatShortWeekday : _props$formatShortWee,
+      _props$formatWeekday = props.formatWeekday,
+      formatWeekday = _props$formatWeekday === void 0 ? defaultFormatWeekday : _props$formatWeekday,
       locale = props.locale,
@@ -47,4 +49,5 @@ onMouseLeave = props.onMouseLeave;
   formatShortWeekday: PropTypes.func,
+  formatWeekday: PropTypes.func,
   locale: PropTypes.string,
   onMouseLeave: PropTypes.func
 };

dist/umd/Calendar.js

@@ -642,2 +642,3 @@ "use strict";
                 formatShortWeekday = _this$props10.formatShortWeekday,
+                formatWeekday = _this$props10.formatWeekday,
                 onClickWeekNumber = _this$props10.onClickWeekNumber,
@@ -654,2 +655,3 @@ showDoubleView = _this$props10.showDoubleView,
               formatShortWeekday: formatShortWeekday,
+              formatWeekday: formatWeekday,
               onClickWeekNumber: onClickWeekNumber,
@@ -776,2 +778,3 @@ onMouseLeave: selectRange ? onMouseLeave : null,
   formatShortWeekday: _propTypes["default"].func,
+  formatWeekday: _propTypes["default"].func,
   formatYear: _propTypes["default"].func,
@@ -778,0 +781,0 @@ goToRangeStartOnSelect: _propTypes["default"].bool,

dist/umd/index.js

@@ -30,2 +30,8 @@ "use strict";
 });
+Object.defineProperty(exports, "Navigation", {
+  enumerable: true,
+  get: function get() {
+    return _Navigation["default"];
+  }
+});
 Object.defineProperty(exports, "YearView", {
@@ -41,2 +47,4 @@ enumerable: true,
 
+var _Navigation = _interopRequireDefault(require("./Calendar/Navigation"));
+
 var _CenturyView = _interopRequireDefault(require("./CenturyView"));
@@ -43,0 +51,0 @@

dist/umd/MonthView.js

@@ -24,3 +24,3 @@ "use strict";
 
-var _excluded = ["calendarType", "formatShortWeekday", "onClickWeekNumber", "showWeekNumbers"];
+var _excluded = ["calendarType", "formatShortWeekday", "formatWeekday", "onClickWeekNumber", "showWeekNumbers"];
 
@@ -50,2 +50,3 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
       formatShortWeekday = props.formatShortWeekday,
+      formatWeekday = props.formatWeekday,
       onClickWeekNumber = props.onClickWeekNumber,
@@ -59,2 +60,3 @@ showWeekNumbers = props.showWeekNumbers,
       formatShortWeekday: formatShortWeekday,
+      formatWeekday: formatWeekday,
       locale: locale,
@@ -105,2 +107,3 @@ onMouseLeave: onMouseLeave
   formatShortWeekday: _propTypes["default"].func,
+  formatWeekday: _propTypes["default"].func,
   locale: _propTypes["default"].string,
@@ -107,0 +110,0 @@ onClickWeekNumber: _propTypes["default"].func,

dist/umd/MonthView/Weekdays.js

@@ -33,2 +33,4 @@ "use strict";
       formatShortWeekday = _props$formatShortWee === void 0 ? _dateFormatter.formatShortWeekday : _props$formatShortWee,
+      _props$formatWeekday = props.formatWeekday,
+      formatWeekday = _props$formatWeekday === void 0 ? _dateFormatter.formatWeekday : _props$formatWeekday,
       locale = props.locale,
@@ -44,3 +46,3 @@ onMouseLeave = props.onMouseLeave;
     var weekdayDate = new Date(year, monthIndex, weekday - (0, _dates.getDayOfWeek)(beginOfMonth, calendarType));
-    var abbr = (0, _dateFormatter.formatWeekday)(locale, weekdayDate);
+    var abbr = formatWeekday(locale, weekdayDate);
     weekdays.push( /*#__PURE__*/_react["default"].createElement("div", {
@@ -66,4 +68,5 @@ key: weekday,
   formatShortWeekday: _propTypes["default"].func,
+  formatWeekday: _propTypes["default"].func,
   locale: _propTypes["default"].string,
   onMouseLeave: _propTypes["default"].func
 };

package.json

 {
   "name": "react-calendar",
-  "version": "3.8.0",
+  "version": "3.9.0",
   "description": "Ultimate calendar for your React app.",
@@ -5,0 +5,0 @@ "main": "dist/umd/index.js",

README.md

@@ -46,2 +46,6 @@ [![npm](https://img.shields.io/npm/v/react-calendar.svg)](https://www.npmjs.com/package/react-calendar) ![downloads](https://img.shields.io/npm/dt/react-calendar.svg) [![CI](https://github.com/wojtekmaj/react-calendar/workflows/CI/badge.svg)](https://github.com/wojtekmaj/react-calendar/actions) [![tested with jest](https://img.shields.io/badge/tested_with-jest-99424f.svg)](https://github.com/facebook/jest)
 
+#### My locale isn't supported! What can I do?
+
+If your locale isn't supported, you can use [Intl.js](https://github.com/andyearnshaw/Intl.js/) or another Intl polyfill along with React-Calendar.
+
 ### Installation
@@ -101,3 +105,4 @@
 | 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')`                                                                                                                                                                                                                                                           |
+| formatShortWeekday      | Function called to override default formatting of weekday names (shortened). Can be used to use your own formatting function.                                                                                                                                                                                                                                                                                              | (default formatter)                                   | `(locale, date) => formatDate(date, 'dd')`                                                                                                                                                                                                                                                           |
+| formatWeekday           | 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')`                                                                                                                                                                                                                                                           |
 | formatYear              | Function called to override default formatting of year in the top navigation section. Can be used to use your own formatting function.                                                                                                                                                                                                                                                                                     | (default formatter)                                   | `(locale, date) => formatDate(date, 'YYYY')`                                                                                                                                                                                                                                                         |
@@ -104,0 +109,0 @@ | goToRangeStartOnSelect  | Whether to go to the beginning of the range when selecting the end of the range.                                                                                                                                                                                                                                                                                                                                           | `true`                                                | `false`                                                                                                                                                                                                                                                                                              |

src/Calendar.jsx

@@ -518,2 +518,3 @@ import React, { Component } from 'react';
           formatShortWeekday,
+          formatWeekday,
           onClickWeekNumber,
@@ -533,2 +534,3 @@ showDoubleView,
             formatShortWeekday={formatShortWeekday}
+            formatWeekday={formatWeekday}
             onClickWeekNumber={onClickWeekNumber}
@@ -664,2 +666,3 @@ onMouseLeave={selectRange ? onMouseLeave : null}
   formatShortWeekday: PropTypes.func,
+  formatWeekday: PropTypes.func,
   formatYear: PropTypes.func,
@@ -666,0 +669,0 @@ goToRangeStartOnSelect: PropTypes.bool,

src/Calendar.spec.jsx

@@ -897,3 +897,3 @@ import React, { createRef } from 'react';
   it('passes formatShortWeekday to MonthView component', () => {
-    const formatShortWeekday = () => 'Weekday';
+    const formatShortWeekday = () => 'Wkdy';
 
@@ -904,5 +904,16 @@ const { container } = render(<Calendar formatShortWeekday={formatShortWeekday} />);
 
-    expect(monthView).toHaveTextContent('Weekday');
+    expect(monthView).toHaveTextContent('Wkdy');
   });
 
+  it('passes formatWeekday to MonthView component', () => {
+    const formatWeekday = () => 'Weekday';
+
+    const { container } = render(<Calendar formatWeekday={formatWeekday} />);
+
+    const weekday = container.querySelector('.react-calendar__month-view__weekdays__weekday');
+    const abbr = weekday.querySelector('abbr');
+
+    expect(abbr).toHaveAccessibleName('Weekday');
+  });
+
   it('passes formatMonth to YearView component', () => {
@@ -909,0 +920,0 @@ const formatMonth = () => 'Month';

src/index.js

 import Calendar from './Calendar';
+import Navigation from './Calendar/Navigation';
 import CenturyView from './CenturyView';
@@ -9,2 +10,2 @@ import DecadeView from './DecadeView';
 
-export { Calendar, CenturyView, DecadeView, YearView, MonthView };
+export { Calendar, Navigation, CenturyView, DecadeView, YearView, MonthView };

src/MonthView.jsx

@@ -25,2 +25,3 @@ import React from 'react';
     formatShortWeekday,
+    formatWeekday,
     onClickWeekNumber,
@@ -36,2 +37,3 @@ showWeekNumbers,
         formatShortWeekday={formatShortWeekday}
+        formatWeekday={formatWeekday}
         locale={locale}
@@ -92,2 +94,3 @@ onMouseLeave={onMouseLeave}
   formatShortWeekday: PropTypes.func,
+  formatWeekday: PropTypes.func,
   locale: PropTypes.string,
@@ -94,0 +97,0 @@ onClickWeekNumber: PropTypes.func,

src/MonthView.spec.jsx

@@ -154,3 +154,3 @@ import React from 'react';
   it('passes formatShortWeekday to Weekdays component', () => {
-    const formatShortWeekday = () => 'Weekday';
+    const formatShortWeekday = () => 'Wkdy';
 
@@ -163,5 +163,16 @@ const { container } = render(
 
-    expect(weekdays).toHaveTextContent('Weekday');
+    expect(weekdays).toHaveTextContent('Wkdy');
   });
 
+  it('passes formatWeekday to Weekdays component', () => {
+    const formatWeekday = () => 'Weekday';
+
+    const { container } = render(<MonthView {...defaultProps} formatWeekday={formatWeekday} />);
+
+    const weekday = container.querySelector('.react-calendar__month-view__weekdays__weekday');
+    const abbr = weekday.querySelector('abbr');
+
+    expect(abbr).toHaveAccessibleName('Weekday');
+  });
+
   it('passes calendarType to Days component', () => {
@@ -168,0 +179,0 @@ const calendarType = 'ISO 8601';

src/MonthView/Weekdays.jsx

@@ -10,4 +10,4 @@ import React from 'react';
 import {
-  formatWeekday,
   formatShortWeekday as defaultFormatShortWeekday,
+  formatWeekday as defaultFormatWeekday,
 } from '../shared/dateFormatter';
@@ -23,2 +23,3 @@ import { isCalendarType } from '../shared/propTypes';
     formatShortWeekday = defaultFormatShortWeekday,
+    formatWeekday = defaultFormatWeekday,
     locale,
@@ -69,4 +70,5 @@ onMouseLeave,
   formatShortWeekday: PropTypes.func,
+  formatWeekday: PropTypes.func,
   locale: PropTypes.string,
   onMouseLeave: PropTypes.func,
 };

src/MonthView/Weekdays.spec.jsx

@@ -36,5 +36,3 @@ import React from 'react';
   it('renders weekdays with custom weekdays formatting', () => {
-    const { container } = render(
-      <Weekdays {...defaultProps} formatShortWeekday={() => 'Weekday'} />,
-    );
+    const { container } = render(<Weekdays {...defaultProps} formatShortWeekday={() => 'Wkdy'} />);
 
@@ -44,4 +42,14 @@ const weekdays = container.querySelectorAll('.react-calendar__month-view__weekdays__weekday');
 
-    expect(firstWeekday).toHaveTextContent('Weekday');
+    expect(firstWeekday).toHaveTextContent('Wkdy');
   });
+
+  it('renders weekdays with custom weekdays formatting', () => {
+    const { container } = render(<Weekdays {...defaultProps} formatWeekday={() => 'Weekday'} />);
+
+    const weekdays = container.querySelectorAll('.react-calendar__month-view__weekdays__weekday');
+    const firstWeekday = weekdays[0];
+    const abbr = firstWeekday.querySelector('abbr');
+
+    expect(abbr).toHaveAccessibleName('Weekday');
+  });
 });

src/shared/dateFormatter.spec.js

@@ -6,2 +6,3 @@ import {
   formatShortWeekday,
+  formatWeekday,
   formatYear,
@@ -50,2 +51,12 @@ } from './dateFormatter';
 
+describe('formatWeekday', () => {
+  it('returns proper weekday name', () => {
+    const date = new Date(2017, 1, 1);
+
+    const formattedDate = formatWeekday('en-US', date);
+
+    expect(formattedDate).toBe('Wednesday');
+  });
+});
+
 describe('formatYear', () => {
@@ -52,0 +63,0 @@ it('returns proper month name and year', () => {

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

519815

increased by0.77%

Lines of code

10279

increased by0.61%

Number of lines in readme file

207

increased by2.48%

No dependency changes