react-calendar - npm Package Compare versions

Comparing version 3.0.0-beta to 3.0.0-beta.2

dist/esm/Calendar.js

@@ -239,9 +239,6 @@ function _typeof(obj) { if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
       var _assertThisInitialize2 = _assertThisInitialized(_this),
-          view = _assertThisInitialize2.view;
+          view = _assertThisInitialize2.view,
+          views = _assertThisInitialize2.views;
 
-      var _this$props2 = _this.props,
-          maxDetail = _this$props2.maxDetail,
-          minDetail = _this$props2.minDetail,
-          onDrillDown = _this$props2.onDrillDown;
-      var views = getLimitedViews(minDetail, maxDetail);
+      var onDrillDown = _this.props.onDrillDown;
       var nextView = views[views.indexOf(view) + 1];
@@ -264,9 +261,6 @@
           activeStartDate = _assertThisInitialize3.activeStartDate,
-          view = _assertThisInitialize3.view;
+          view = _assertThisInitialize3.view,
+          views = _assertThisInitialize3.views;
 
-      var _this$props3 = _this.props,
-          maxDetail = _this$props3.maxDetail,
-          minDetail = _this$props3.minDetail,
-          onDrillUp = _this$props3.onDrillUp;
-      var views = getLimitedViews(minDetail, maxDetail);
+      var onDrillUp = _this.props.onDrillUp;
       var nextView = views[views.indexOf(view) - 1];
@@ -284,5 +278,5 @@ var nextActiveStartDate = getBegin(nextView, activeStartDate);
     _defineProperty(_assertThisInitialized(_this), "onChange", function (value) {
-      var _this$props4 = _this.props,
-          onChange = _this$props4.onChange,
-          selectRange = _this$props4.selectRange;
+      var _this$props2 = _this.props,
+          onChange = _this$props2.onChange,
+          selectRange = _this$props2.selectRange;
       var nextValue;
@@ -350,7 +344,7 @@ var callback;
     value: function getProcessedValue(value) {
-      var _this$props5 = this.props,
-          minDate = _this$props5.minDate,
-          maxDate = _this$props5.maxDate,
-          maxDetail = _this$props5.maxDetail,
-          returnValue = _this$props5.returnValue;
+      var _this$props3 = this.props,
+          minDate = _this$props3.minDate,
+          maxDate = _this$props3.maxDate,
+          maxDetail = _this$props3.maxDetail,
+          returnValue = _this$props3.returnValue;
 
@@ -387,12 +381,12 @@ var processFunction = function () {
           view = this.view;
-      var _this$props6 = this.props,
-          calendarType = _this$props6.calendarType,
-          locale = _this$props6.locale,
-          maxDate = _this$props6.maxDate,
-          minDate = _this$props6.minDate,
-          renderChildren = _this$props6.renderChildren,
-          selectRange = _this$props6.selectRange,
-          tileClassName = _this$props6.tileClassName,
-          tileContent = _this$props6.tileContent,
-          tileDisabled = _this$props6.tileDisabled;
+      var _this$props4 = this.props,
+          calendarType = _this$props4.calendarType,
+          locale = _this$props4.locale,
+          maxDate = _this$props4.maxDate,
+          minDate = _this$props4.minDate,
+          renderChildren = _this$props4.renderChildren,
+          selectRange = _this$props4.selectRange,
+          tileClassName = _this$props4.tileClassName,
+          tileContent = _this$props4.tileContent,
+          tileDisabled = _this$props4.tileDisabled;
       var hover = this.hover;
@@ -419,5 +413,5 @@ var activeStartDate = next ? getBeginNext(view, currentActiveStartDate) : currentActiveStartDate;
           {
-            var _this$props7 = this.props,
-                formatYear = _this$props7.formatYear,
-                onClickDecade = _this$props7.onClickDecade;
+            var _this$props5 = this.props,
+                formatYear = _this$props5.formatYear,
+                onClickDecade = _this$props5.onClickDecade;
             return React.createElement(CenturyView, _extends({
@@ -431,5 +425,5 @@ formatYear: formatYear,
           {
-            var _this$props8 = this.props,
-                _formatYear = _this$props8.formatYear,
-                onClickYear = _this$props8.onClickYear;
+            var _this$props6 = this.props,
+                _formatYear = _this$props6.formatYear,
+                onClickYear = _this$props6.onClickYear;
             return React.createElement(DecadeView, _extends({
@@ -443,7 +437,9 @@ formatYear: _formatYear,
           {
-            var _this$props9 = this.props,
-                formatMonth = _this$props9.formatMonth,
-                onClickMonth = _this$props9.onClickMonth;
+            var _this$props7 = this.props,
+                formatMonth = _this$props7.formatMonth,
+                formatMonthYear = _this$props7.formatMonthYear,
+                onClickMonth = _this$props7.onClickMonth;
             return React.createElement(YearView, _extends({
               formatMonth: formatMonth,
+              formatMonthYear: formatMonthYear,
               onClick: mergeFunctions(clickAction, onClickMonth)
@@ -455,13 +451,15 @@ }, commonProps));
           {
-            var _this$props10 = this.props,
-                formatShortWeekday = _this$props10.formatShortWeekday,
-                onClickDay = _this$props10.onClickDay,
-                onClickWeekNumber = _this$props10.onClickWeekNumber,
-                showDoubleView = _this$props10.showDoubleView,
-                showFixedNumberOfWeeks = _this$props10.showFixedNumberOfWeeks,
-                showNeighboringMonth = _this$props10.showNeighboringMonth,
-                showWeekNumbers = _this$props10.showWeekNumbers;
+            var _this$props8 = this.props,
+                formatLongDate = _this$props8.formatLongDate,
+                formatShortWeekday = _this$props8.formatShortWeekday,
+                onClickDay = _this$props8.onClickDay,
+                onClickWeekNumber = _this$props8.onClickWeekNumber,
+                showDoubleView = _this$props8.showDoubleView,
+                showFixedNumberOfWeeks = _this$props8.showFixedNumberOfWeeks,
+                showNeighboringMonth = _this$props8.showNeighboringMonth,
+                showWeekNumbers = _this$props8.showWeekNumbers;
             var onMouseLeave = this.onMouseLeave;
             return React.createElement(MonthView, _extends({
               calendarType: calendarType,
+              formatLongDate: formatLongDate,
               formatShortWeekday: formatShortWeekday,
@@ -491,22 +489,21 @@ onClick: mergeFunctions(clickAction, onClickDay),
       var activeStartDate = this.activeStartDate,
-          view = this.view;
-      var _this$props11 = this.props,
-          formatMonthYear = _this$props11.formatMonthYear,
-          formatYear = _this$props11.formatYear,
-          locale = _this$props11.locale,
-          maxDate = _this$props11.maxDate,
-          maxDetail = _this$props11.maxDetail,
-          minDate = _this$props11.minDate,
-          minDetail = _this$props11.minDetail,
-          navigationAriaLabel = _this$props11.navigationAriaLabel,
-          navigationLabel = _this$props11.navigationLabel,
-          next2AriaLabel = _this$props11.next2AriaLabel,
-          next2Label = _this$props11.next2Label,
-          nextAriaLabel = _this$props11.nextAriaLabel,
-          nextLabel = _this$props11.nextLabel,
-          prev2AriaLabel = _this$props11.prev2AriaLabel,
-          prev2Label = _this$props11.prev2Label,
-          prevAriaLabel = _this$props11.prevAriaLabel,
-          prevLabel = _this$props11.prevLabel,
-          showDoubleView = _this$props11.showDoubleView;
+          view = this.view,
+          views = this.views;
+      var _this$props9 = this.props,
+          formatMonthYear = _this$props9.formatMonthYear,
+          formatYear = _this$props9.formatYear,
+          locale = _this$props9.locale,
+          maxDate = _this$props9.maxDate,
+          minDate = _this$props9.minDate,
+          navigationAriaLabel = _this$props9.navigationAriaLabel,
+          navigationLabel = _this$props9.navigationLabel,
+          next2AriaLabel = _this$props9.next2AriaLabel,
+          next2Label = _this$props9.next2Label,
+          nextAriaLabel = _this$props9.nextAriaLabel,
+          nextLabel = _this$props9.nextLabel,
+          prev2AriaLabel = _this$props9.prev2AriaLabel,
+          prev2Label = _this$props9.prev2Label,
+          prevAriaLabel = _this$props9.prevAriaLabel,
+          prevLabel = _this$props9.prevLabel,
+          showDoubleView = _this$props9.showDoubleView;
       return React.createElement(Navigation, {
@@ -533,3 +530,3 @@ activeStartDate: activeStartDate,
         view: view,
-        views: getLimitedViews(minDetail, maxDetail)
+        views: views
       });
@@ -540,6 +537,6 @@ }
     value: function render() {
-      var _this$props12 = this.props,
-          className = _this$props12.className,
-          selectRange = _this$props12.selectRange,
-          showDoubleView = _this$props12.showDoubleView;
+      var _this$props10 = this.props,
+          className = _this$props10.className,
+          selectRange = _this$props10.selectRange,
+          showDoubleView = _this$props10.showDoubleView;
       var onMouseLeave = this.onMouseLeave,
@@ -566,5 +563,5 @@ value = this.value;
     get: function get() {
-      var _this$props13 = this.props,
-          selectRange = _this$props13.selectRange,
-          valueProps = _this$props13.value;
+      var _this$props11 = this.props,
+          selectRange = _this$props11.selectRange,
+          valueProps = _this$props11.value;
       var valueState = this.state.value; // In the middle of range selection, use value from state
@@ -587,6 +584,6 @@
     get: function get() {
-      var _this$props14 = this.props,
-          minDetail = _this$props14.minDetail,
-          maxDetail = _this$props14.maxDetail,
-          viewProps = _this$props14.view;
+      var _this$props12 = this.props,
+          minDetail = _this$props12.minDetail,
+          maxDetail = _this$props12.maxDetail,
+          viewProps = _this$props12.view;
       var viewState = this.state.view;
@@ -596,2 +593,10 @@ return getView(viewProps || viewState, minDetail, maxDetail);
   }, {
+    key: "views",
+    get: function get() {
+      var _this$props13 = this.props,
+          minDetail = _this$props13.minDetail,
+          maxDetail = _this$props13.maxDetail;
+      return getLimitedViews(minDetail, maxDetail);
+    }
+  }, {
     key: "hover",
@@ -606,7 +611,4 @@ get: function get() {
     get: function get() {
-      var view = this.view;
-      var _this$props15 = this.props,
-          maxDetail = _this$props15.maxDetail,
-          minDetail = _this$props15.minDetail;
-      var views = getLimitedViews(minDetail, maxDetail);
+      var view = this.view,
+          views = this.views;
       return views.indexOf(view) < views.length - 1;
@@ -617,7 +619,4 @@ }
     get: function get() {
-      var view = this.view;
-      var _this$props16 = this.props,
-          maxDetail = _this$props16.maxDetail,
-          minDetail = _this$props16.minDetail;
-      var views = getLimitedViews(minDetail, maxDetail);
+      var view = this.view,
+          views = this.views;
       return views.indexOf(view) > 0;
@@ -647,2 +646,3 @@ }
   defaultView: isView,
+  formatLongDate: PropTypes.func,
   formatMonth: PropTypes.func,
@@ -649,0 +649,0 @@ formatMonthYear: PropTypes.func,

dist/esm/Calendar/Navigation.js

@@ -130,3 +130,3 @@ import React from 'react';
     "aria-label": navigationAriaLabel,
-    className: "react-calendar__navigation__label",
+    className: "".concat(className, "__label"),
     disabled: !drillUpAvailable,
@@ -133,0 +133,0 @@ onClick: drillUp,

dist/esm/CenturyView/Decade.js

@@ -23,12 +23,10 @@ function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
   var classes = _ref.classes,
-      date = _ref.date,
       _ref$formatYear = _ref.formatYear,
       formatYear = _ref$formatYear === void 0 ? defaultFormatYear : _ref$formatYear,
-      locale = _ref.locale,
-      otherProps = _objectWithoutProperties(_ref, ["classes", "date", "formatYear", "locale"]);
+      otherProps = _objectWithoutProperties(_ref, ["classes", "formatYear"]);
 
+  var date = otherProps.date,
+      locale = otherProps.locale;
   return React.createElement(Tile, _extends({}, otherProps, {
     classes: [].concat(classes, className),
-    date: date,
-    locale: locale,
     maxDateTransform: getDecadeEnd,
@@ -35,0 +33,0 @@ minDateTransform: getDecadeStart,

dist/esm/DecadeView/Year.js

@@ -22,12 +22,10 @@ function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
   var classes = _ref.classes,
-      date = _ref.date,
       _ref$formatYear = _ref.formatYear,
       formatYear = _ref$formatYear === void 0 ? defaultFormatYear : _ref$formatYear,
-      locale = _ref.locale,
-      otherProps = _objectWithoutProperties(_ref, ["classes", "date", "formatYear", "locale"]);
+      otherProps = _objectWithoutProperties(_ref, ["classes", "formatYear"]);
 
+  var date = otherProps.date,
+      locale = otherProps.locale;
   return React.createElement(Tile, _extends({}, otherProps, {
     classes: [].concat(classes, className),
-    date: date,
-    locale: locale,
     maxDateTransform: getYearEnd,
@@ -34,0 +32,0 @@ minDateTransform: getYearStart,

dist/esm/MonthView/Day.js

@@ -18,15 +18,16 @@ function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
 import { isWeekend } from '../shared/dates';
-import { formatLongDate } from '../shared/dateFormatter';
+import { formatLongDate as defaultFormatLongDate } from '../shared/dateFormatter';
 import { tileProps } from '../shared/propTypes';
 var className = 'react-calendar__month-view__days__day';
 export default function Day(_ref) {
-  var calendarType = _ref.calendarType,
+  var _ref$formatLongDate = _ref.formatLongDate,
+      formatLongDate = _ref$formatLongDate === void 0 ? defaultFormatLongDate : _ref$formatLongDate,
+      calendarType = _ref.calendarType,
       classes = _ref.classes,
       currentMonthIndex = _ref.currentMonthIndex,
-      date = _ref.date,
-      otherProps = _objectWithoutProperties(_ref, ["calendarType", "classes", "currentMonthIndex", "date"]);
+      otherProps = _objectWithoutProperties(_ref, ["formatLongDate", "calendarType", "classes", "currentMonthIndex"]);
 
+  var date = otherProps.date;
   return React.createElement(Tile, _extends({}, otherProps, {
     classes: [].concat(classes, className, isWeekend(date, calendarType) ? "".concat(className, "--weekend") : null, date.getMonth() !== currentMonthIndex ? "".concat(className, "--neighboringMonth") : null),
-    date: date,
     formatAbbr: formatLongDate,
@@ -39,3 +40,4 @@ maxDateTransform: getDayEnd,
 Day.propTypes = _objectSpread({}, tileProps, {
-  currentMonthIndex: PropTypes.number.isRequired
+  currentMonthIndex: PropTypes.number.isRequired,
+  formatLongDate: PropTypes.func
 });

dist/esm/MonthView/Weekdays.js

@@ -8,2 +8,3 @@ import React from 'react';
 import { isCalendarType } from '../shared/propTypes';
+var className = 'react-calendar__month-view__weekdays';
 export default function Weekdays(props) {
@@ -26,3 +27,3 @@ var calendarType = props.calendarType,
       key: weekday,
-      className: "react-calendar__month-view__weekdays__weekday"
+      className: "".concat(className, "__weekday")
     }, React.createElement("abbr", {
@@ -35,3 +36,3 @@ "aria-label": abbr,
   return React.createElement(Flex, {
-    className: "react-calendar__month-view__weekdays",
+    className: className,
     count: 7,
@@ -38,0 +39,0 @@ onFocus: onMouseLeave,

dist/esm/MonthView/WeekNumber.js

@@ -0,1 +1,3 @@
+function _extends() { _extends = Object.assign || 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); }
+
 import React from 'react';
@@ -7,17 +9,15 @@ import PropTypes from 'prop-types';
       weekNumber = _ref.weekNumber;
-  return onClickWeekNumber ? React.createElement("button", {
-    className: "react-calendar__tile",
+  var props = {
+    className: 'react-calendar__tile',
+    style: {
+      flexGrow: 1
+    }
+  };
+  var children = React.createElement("span", null, weekNumber);
+  return onClickWeekNumber ? React.createElement("button", _extends({}, props, {
     onClick: function onClick() {
       return onClickWeekNumber(weekNumber, date);
     },
-    style: {
-      flexGrow: 1
-    },
     type: "button"
-  }, React.createElement("span", null, weekNumber)) : React.createElement("div", {
-    className: "react-calendar__tile",
-    style: {
-      flexGrow: 1
-    }
-  }, React.createElement("span", null, weekNumber));
+  }), children) : React.createElement("div", props, children);
 }
@@ -24,0 +24,0 @@ WeekNumber.propTypes = {

dist/esm/Tile.js

@@ -100,3 +100,4 @@ function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
     value: function getDerivedStateFromProps(nextProps, prevState) {
-      var date = nextProps.date,
+      var activeStartDate = nextProps.activeStartDate,
+          date = nextProps.date,
           tileClassName = nextProps.tileClassName,
@@ -109,2 +110,3 @@ tileContent = nextProps.tileContent,
         nextState.tileClassName = typeof tileClassName === 'function' ? tileClassName({
+          activeStartDate: activeStartDate,
           date: date,
@@ -118,2 +120,3 @@ view: view
         nextState.tileContent = typeof tileContent === 'function' ? tileContent({
+          activeStartDate: activeStartDate,
           date: date,
@@ -120,0 +123,0 @@ view: view

dist/esm/YearView/Month.js

@@ -17,3 +17,3 @@ function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
 import Tile from '../Tile';
-import { formatMonth as defaultFormatMonth, formatMonthYear } from '../shared/dateFormatter';
+import { formatMonth as defaultFormatMonth, formatMonthYear as defaultFormatMonthYear } from '../shared/dateFormatter';
 import { tileProps } from '../shared/propTypes';
@@ -23,13 +23,13 @@ var className = 'react-calendar__year-view__months__month';
   var classes = _ref.classes,
-      date = _ref.date,
       _ref$formatMonth = _ref.formatMonth,
       formatMonth = _ref$formatMonth === void 0 ? defaultFormatMonth : _ref$formatMonth,
-      locale = _ref.locale,
-      otherProps = _objectWithoutProperties(_ref, ["classes", "date", "formatMonth", "locale"]);
+      _ref$formatMonthYear = _ref.formatMonthYear,
+      formatMonthYear = _ref$formatMonthYear === void 0 ? defaultFormatMonthYear : _ref$formatMonthYear,
+      otherProps = _objectWithoutProperties(_ref, ["classes", "formatMonth", "formatMonthYear"]);
 
+  var date = otherProps.date,
+      locale = otherProps.locale;
   return React.createElement(Tile, _extends({}, otherProps, {
     classes: [].concat(classes, className),
-    date: date,
     formatAbbr: formatMonthYear,
-    locale: locale,
     maxDateTransform: getMonthEnd,
@@ -41,3 +41,4 @@ minDateTransform: getMonthStart,
 Month.propTypes = _objectSpread({}, tileProps, {
-  formatMonth: PropTypes.func
+  formatMonth: PropTypes.func,
+  formatMonthYear: PropTypes.func
 });

dist/umd/Calendar.js

@@ -261,9 +261,6 @@ "use strict";
       var _assertThisInitialize2 = _assertThisInitialized(_this),
-          view = _assertThisInitialize2.view;
+          view = _assertThisInitialize2.view,
+          views = _assertThisInitialize2.views;
 
-      var _this$props2 = _this.props,
-          maxDetail = _this$props2.maxDetail,
-          minDetail = _this$props2.minDetail,
-          onDrillDown = _this$props2.onDrillDown;
-      var views = getLimitedViews(minDetail, maxDetail);
+      var onDrillDown = _this.props.onDrillDown;
       var nextView = views[views.indexOf(view) + 1];
@@ -286,9 +283,6 @@
           activeStartDate = _assertThisInitialize3.activeStartDate,
-          view = _assertThisInitialize3.view;
+          view = _assertThisInitialize3.view,
+          views = _assertThisInitialize3.views;
 
-      var _this$props3 = _this.props,
-          maxDetail = _this$props3.maxDetail,
-          minDetail = _this$props3.minDetail,
-          onDrillUp = _this$props3.onDrillUp;
-      var views = getLimitedViews(minDetail, maxDetail);
+      var onDrillUp = _this.props.onDrillUp;
       var nextView = views[views.indexOf(view) - 1];
@@ -306,5 +300,5 @@ var nextActiveStartDate = (0, _dates.getBegin)(nextView, activeStartDate);
     _defineProperty(_assertThisInitialized(_this), "onChange", function (value) {
-      var _this$props4 = _this.props,
-          onChange = _this$props4.onChange,
-          selectRange = _this$props4.selectRange;
+      var _this$props2 = _this.props,
+          onChange = _this$props2.onChange,
+          selectRange = _this$props2.selectRange;
       var nextValue;
@@ -372,7 +366,7 @@ var callback;
     value: function getProcessedValue(value) {
-      var _this$props5 = this.props,
-          minDate = _this$props5.minDate,
-          maxDate = _this$props5.maxDate,
-          maxDetail = _this$props5.maxDetail,
-          returnValue = _this$props5.returnValue;
+      var _this$props3 = this.props,
+          minDate = _this$props3.minDate,
+          maxDate = _this$props3.maxDate,
+          maxDetail = _this$props3.maxDetail,
+          returnValue = _this$props3.returnValue;
 
@@ -409,12 +403,12 @@ var processFunction = function () {
           view = this.view;
-      var _this$props6 = this.props,
-          calendarType = _this$props6.calendarType,
-          locale = _this$props6.locale,
-          maxDate = _this$props6.maxDate,
-          minDate = _this$props6.minDate,
-          renderChildren = _this$props6.renderChildren,
-          selectRange = _this$props6.selectRange,
-          tileClassName = _this$props6.tileClassName,
-          tileContent = _this$props6.tileContent,
-          tileDisabled = _this$props6.tileDisabled;
+      var _this$props4 = this.props,
+          calendarType = _this$props4.calendarType,
+          locale = _this$props4.locale,
+          maxDate = _this$props4.maxDate,
+          minDate = _this$props4.minDate,
+          renderChildren = _this$props4.renderChildren,
+          selectRange = _this$props4.selectRange,
+          tileClassName = _this$props4.tileClassName,
+          tileContent = _this$props4.tileContent,
+          tileDisabled = _this$props4.tileDisabled;
       var hover = this.hover;
@@ -441,5 +435,5 @@ var activeStartDate = next ? (0, _dates.getBeginNext)(view, currentActiveStartDate) : currentActiveStartDate;
           {
-            var _this$props7 = this.props,
-                formatYear = _this$props7.formatYear,
-                onClickDecade = _this$props7.onClickDecade;
+            var _this$props5 = this.props,
+                formatYear = _this$props5.formatYear,
+                onClickDecade = _this$props5.onClickDecade;
             return _react["default"].createElement(_CenturyView["default"], _extends({
@@ -453,5 +447,5 @@ formatYear: formatYear,
           {
-            var _this$props8 = this.props,
-                _formatYear = _this$props8.formatYear,
-                onClickYear = _this$props8.onClickYear;
+            var _this$props6 = this.props,
+                _formatYear = _this$props6.formatYear,
+                onClickYear = _this$props6.onClickYear;
             return _react["default"].createElement(_DecadeView["default"], _extends({
@@ -465,7 +459,9 @@ formatYear: _formatYear,
           {
-            var _this$props9 = this.props,
-                formatMonth = _this$props9.formatMonth,
-                onClickMonth = _this$props9.onClickMonth;
+            var _this$props7 = this.props,
+                formatMonth = _this$props7.formatMonth,
+                formatMonthYear = _this$props7.formatMonthYear,
+                onClickMonth = _this$props7.onClickMonth;
             return _react["default"].createElement(_YearView["default"], _extends({
               formatMonth: formatMonth,
+              formatMonthYear: formatMonthYear,
               onClick: (0, _utils.mergeFunctions)(clickAction, onClickMonth)
@@ -477,13 +473,15 @@ }, commonProps));
           {
-            var _this$props10 = this.props,
-                formatShortWeekday = _this$props10.formatShortWeekday,
-                onClickDay = _this$props10.onClickDay,
-                onClickWeekNumber = _this$props10.onClickWeekNumber,
-                showDoubleView = _this$props10.showDoubleView,
-                showFixedNumberOfWeeks = _this$props10.showFixedNumberOfWeeks,
-                showNeighboringMonth = _this$props10.showNeighboringMonth,
-                showWeekNumbers = _this$props10.showWeekNumbers;
+            var _this$props8 = this.props,
+                formatLongDate = _this$props8.formatLongDate,
+                formatShortWeekday = _this$props8.formatShortWeekday,
+                onClickDay = _this$props8.onClickDay,
+                onClickWeekNumber = _this$props8.onClickWeekNumber,
+                showDoubleView = _this$props8.showDoubleView,
+                showFixedNumberOfWeeks = _this$props8.showFixedNumberOfWeeks,
+                showNeighboringMonth = _this$props8.showNeighboringMonth,
+                showWeekNumbers = _this$props8.showWeekNumbers;
             var onMouseLeave = this.onMouseLeave;
             return _react["default"].createElement(_MonthView["default"], _extends({
               calendarType: calendarType,
+              formatLongDate: formatLongDate,
               formatShortWeekday: formatShortWeekday,
@@ -513,22 +511,21 @@ onClick: (0, _utils.mergeFunctions)(clickAction, onClickDay),
       var activeStartDate = this.activeStartDate,
-          view = this.view;
-      var _this$props11 = this.props,
-          formatMonthYear = _this$props11.formatMonthYear,
-          formatYear = _this$props11.formatYear,
-          locale = _this$props11.locale,
-          maxDate = _this$props11.maxDate,
-          maxDetail = _this$props11.maxDetail,
-          minDate = _this$props11.minDate,
-          minDetail = _this$props11.minDetail,
-          navigationAriaLabel = _this$props11.navigationAriaLabel,
-          navigationLabel = _this$props11.navigationLabel,
-          next2AriaLabel = _this$props11.next2AriaLabel,
-          next2Label = _this$props11.next2Label,
-          nextAriaLabel = _this$props11.nextAriaLabel,
-          nextLabel = _this$props11.nextLabel,
-          prev2AriaLabel = _this$props11.prev2AriaLabel,
-          prev2Label = _this$props11.prev2Label,
-          prevAriaLabel = _this$props11.prevAriaLabel,
-          prevLabel = _this$props11.prevLabel,
-          showDoubleView = _this$props11.showDoubleView;
+          view = this.view,
+          views = this.views;
+      var _this$props9 = this.props,
+          formatMonthYear = _this$props9.formatMonthYear,
+          formatYear = _this$props9.formatYear,
+          locale = _this$props9.locale,
+          maxDate = _this$props9.maxDate,
+          minDate = _this$props9.minDate,
+          navigationAriaLabel = _this$props9.navigationAriaLabel,
+          navigationLabel = _this$props9.navigationLabel,
+          next2AriaLabel = _this$props9.next2AriaLabel,
+          next2Label = _this$props9.next2Label,
+          nextAriaLabel = _this$props9.nextAriaLabel,
+          nextLabel = _this$props9.nextLabel,
+          prev2AriaLabel = _this$props9.prev2AriaLabel,
+          prev2Label = _this$props9.prev2Label,
+          prevAriaLabel = _this$props9.prevAriaLabel,
+          prevLabel = _this$props9.prevLabel,
+          showDoubleView = _this$props9.showDoubleView;
       return _react["default"].createElement(_Navigation["default"], {
@@ -555,3 +552,3 @@ activeStartDate: activeStartDate,
         view: view,
-        views: getLimitedViews(minDetail, maxDetail)
+        views: views
       });
@@ -562,6 +559,6 @@ }
     value: function render() {
-      var _this$props12 = this.props,
-          className = _this$props12.className,
-          selectRange = _this$props12.selectRange,
-          showDoubleView = _this$props12.showDoubleView;
+      var _this$props10 = this.props,
+          className = _this$props10.className,
+          selectRange = _this$props10.selectRange,
+          showDoubleView = _this$props10.showDoubleView;
       var onMouseLeave = this.onMouseLeave,
@@ -588,5 +585,5 @@ value = this.value;
     get: function get() {
-      var _this$props13 = this.props,
-          selectRange = _this$props13.selectRange,
-          valueProps = _this$props13.value;
+      var _this$props11 = this.props,
+          selectRange = _this$props11.selectRange,
+          valueProps = _this$props11.value;
       var valueState = this.state.value; // In the middle of range selection, use value from state
@@ -609,6 +606,6 @@
     get: function get() {
-      var _this$props14 = this.props,
-          minDetail = _this$props14.minDetail,
-          maxDetail = _this$props14.maxDetail,
-          viewProps = _this$props14.view;
+      var _this$props12 = this.props,
+          minDetail = _this$props12.minDetail,
+          maxDetail = _this$props12.maxDetail,
+          viewProps = _this$props12.view;
       var viewState = this.state.view;
@@ -618,2 +615,10 @@ return getView(viewProps || viewState, minDetail, maxDetail);
   }, {
+    key: "views",
+    get: function get() {
+      var _this$props13 = this.props,
+          minDetail = _this$props13.minDetail,
+          maxDetail = _this$props13.maxDetail;
+      return getLimitedViews(minDetail, maxDetail);
+    }
+  }, {
     key: "hover",
@@ -628,7 +633,4 @@ get: function get() {
     get: function get() {
-      var view = this.view;
-      var _this$props15 = this.props,
-          maxDetail = _this$props15.maxDetail,
-          minDetail = _this$props15.minDetail;
-      var views = getLimitedViews(minDetail, maxDetail);
+      var view = this.view,
+          views = this.views;
       return views.indexOf(view) < views.length - 1;
@@ -639,7 +641,4 @@ }
     get: function get() {
-      var view = this.view;
-      var _this$props16 = this.props,
-          maxDetail = _this$props16.maxDetail,
-          minDetail = _this$props16.minDetail;
-      var views = getLimitedViews(minDetail, maxDetail);
+      var view = this.view,
+          views = this.views;
       return views.indexOf(view) > 0;
@@ -672,2 +671,3 @@ }
   defaultView: _propTypes2.isView,
+  formatLongDate: _propTypes["default"].func,
   formatMonth: _propTypes["default"].func,
@@ -674,0 +674,0 @@ formatMonthYear: _propTypes["default"].func,

dist/umd/Calendar/Navigation.js

@@ -145,3 +145,3 @@ "use strict";
     "aria-label": navigationAriaLabel,
-    className: "react-calendar__navigation__label",
+    className: "".concat(className, "__label"),
     disabled: !drillUpAvailable,
@@ -148,0 +148,0 @@ onClick: drillUp,

dist/umd/CenturyView/Decade.js

@@ -40,12 +40,10 @@ "use strict";
   var classes = _ref.classes,
-      date = _ref.date,
       _ref$formatYear = _ref.formatYear,
       formatYear = _ref$formatYear === void 0 ? _dateFormatter.formatYear : _ref$formatYear,
-      locale = _ref.locale,
-      otherProps = _objectWithoutProperties(_ref, ["classes", "date", "formatYear", "locale"]);
+      otherProps = _objectWithoutProperties(_ref, ["classes", "formatYear"]);
 
+  var date = otherProps.date,
+      locale = otherProps.locale;
   return _react["default"].createElement(_Tile["default"], _extends({}, otherProps, {
     classes: [].concat(classes, className),
-    date: date,
-    locale: locale,
     maxDateTransform: _dateUtils.getDecadeEnd,
@@ -52,0 +50,0 @@ minDateTransform: _dateUtils.getDecadeStart,

dist/umd/DecadeView/Year.js

@@ -38,12 +38,10 @@ "use strict";
   var classes = _ref.classes,
-      date = _ref.date,
       _ref$formatYear = _ref.formatYear,
       formatYear = _ref$formatYear === void 0 ? _dateFormatter.formatYear : _ref$formatYear,
-      locale = _ref.locale,
-      otherProps = _objectWithoutProperties(_ref, ["classes", "date", "formatYear", "locale"]);
+      otherProps = _objectWithoutProperties(_ref, ["classes", "formatYear"]);
 
+  var date = otherProps.date,
+      locale = otherProps.locale;
   return _react["default"].createElement(_Tile["default"], _extends({}, otherProps, {
     classes: [].concat(classes, className),
-    date: date,
-    locale: locale,
     maxDateTransform: _dateUtils.getYearEnd,
@@ -50,0 +48,0 @@ minDateTransform: _dateUtils.getYearStart,

dist/umd/MonthView/Day.js

@@ -39,12 +39,13 @@ "use strict";
 function Day(_ref) {
-  var calendarType = _ref.calendarType,
+  var _ref$formatLongDate = _ref.formatLongDate,
+      formatLongDate = _ref$formatLongDate === void 0 ? _dateFormatter.formatLongDate : _ref$formatLongDate,
+      calendarType = _ref.calendarType,
       classes = _ref.classes,
       currentMonthIndex = _ref.currentMonthIndex,
-      date = _ref.date,
-      otherProps = _objectWithoutProperties(_ref, ["calendarType", "classes", "currentMonthIndex", "date"]);
+      otherProps = _objectWithoutProperties(_ref, ["formatLongDate", "calendarType", "classes", "currentMonthIndex"]);
 
+  var date = otherProps.date;
   return _react["default"].createElement(_Tile["default"], _extends({}, otherProps, {
     classes: [].concat(classes, className, (0, _dates.isWeekend)(date, calendarType) ? "".concat(className, "--weekend") : null, date.getMonth() !== currentMonthIndex ? "".concat(className, "--neighboringMonth") : null),
-    date: date,
-    formatAbbr: _dateFormatter.formatLongDate,
+    formatAbbr: formatLongDate,
     maxDateTransform: _dateUtils.getDayEnd,
@@ -57,3 +58,4 @@ minDateTransform: _dateUtils.getDayStart,
 Day.propTypes = _objectSpread({}, _propTypes2.tileProps, {
-  currentMonthIndex: _propTypes["default"].number.isRequired
+  currentMonthIndex: _propTypes["default"].number.isRequired,
+  formatLongDate: _propTypes["default"].func
 });

dist/umd/MonthView/Weekdays.js

@@ -24,2 +24,4 @@ "use strict";
 
+var className = 'react-calendar__month-view__weekdays';
+
 function Weekdays(props) {
@@ -42,3 +44,3 @@ var calendarType = props.calendarType,
       key: weekday,
-      className: "react-calendar__month-view__weekdays__weekday"
+      className: "".concat(className, "__weekday")
     }, _react["default"].createElement("abbr", {
@@ -51,3 +53,3 @@ "aria-label": abbr,
   return _react["default"].createElement(_Flex["default"], {
-    className: "react-calendar__month-view__weekdays",
+    className: className,
     count: 7,
@@ -54,0 +56,0 @@ onFocus: onMouseLeave,

dist/umd/MonthView/WeekNumber.js

@@ -14,2 +14,4 @@ "use strict";
 
+function _extends() { _extends = Object.assign || 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); }
+
 function WeekNumber(_ref) {
@@ -19,17 +21,17 @@ var date = _ref.date,
       weekNumber = _ref.weekNumber;
-  return onClickWeekNumber ? _react["default"].createElement("button", {
-    className: "react-calendar__tile",
+  var props = {
+    className: 'react-calendar__tile',
+    style: {
+      flexGrow: 1
+    }
+  };
+
+  var children = _react["default"].createElement("span", null, weekNumber);
+
+  return onClickWeekNumber ? _react["default"].createElement("button", _extends({}, props, {
     onClick: function onClick() {
       return onClickWeekNumber(weekNumber, date);
     },
-    style: {
-      flexGrow: 1
-    },
     type: "button"
-  }, _react["default"].createElement("span", null, weekNumber)) : _react["default"].createElement("div", {
-    className: "react-calendar__tile",
-    style: {
-      flexGrow: 1
-    }
-  }, _react["default"].createElement("span", null, weekNumber));
+  }), children) : _react["default"].createElement("div", props, children);
 }
@@ -36,0 +38,0 @@

dist/umd/Tile.js

@@ -114,3 +114,4 @@ "use strict";
     value: function getDerivedStateFromProps(nextProps, prevState) {
-      var date = nextProps.date,
+      var activeStartDate = nextProps.activeStartDate,
+          date = nextProps.date,
           tileClassName = nextProps.tileClassName,
@@ -123,2 +124,3 @@ tileContent = nextProps.tileContent,
         nextState.tileClassName = typeof tileClassName === 'function' ? tileClassName({
+          activeStartDate: activeStartDate,
           date: date,
@@ -132,2 +134,3 @@ view: view
         nextState.tileContent = typeof tileContent === 'function' ? tileContent({
+          activeStartDate: activeStartDate,
           date: date,
@@ -134,0 +137,0 @@ view: view

dist/umd/YearView/Month.js

@@ -38,13 +38,13 @@ "use strict";
   var classes = _ref.classes,
-      date = _ref.date,
       _ref$formatMonth = _ref.formatMonth,
       formatMonth = _ref$formatMonth === void 0 ? _dateFormatter.formatMonth : _ref$formatMonth,
-      locale = _ref.locale,
-      otherProps = _objectWithoutProperties(_ref, ["classes", "date", "formatMonth", "locale"]);
+      _ref$formatMonthYear = _ref.formatMonthYear,
+      formatMonthYear = _ref$formatMonthYear === void 0 ? _dateFormatter.formatMonthYear : _ref$formatMonthYear,
+      otherProps = _objectWithoutProperties(_ref, ["classes", "formatMonth", "formatMonthYear"]);
 
+  var date = otherProps.date,
+      locale = otherProps.locale;
   return _react["default"].createElement(_Tile["default"], _extends({}, otherProps, {
     classes: [].concat(classes, className),
-    date: date,
-    formatAbbr: _dateFormatter.formatMonthYear,
-    locale: locale,
+    formatAbbr: formatMonthYear,
     maxDateTransform: _dateUtils.getMonthEnd,
@@ -57,3 +57,4 @@ minDateTransform: _dateUtils.getMonthStart,
 Month.propTypes = _objectSpread({}, _propTypes2.tileProps, {
-  formatMonth: _propTypes["default"].func
+  formatMonth: _propTypes["default"].func,
+  formatMonthYear: _propTypes["default"].func
 });

package.json

 {
   "name": "react-calendar",
-  "version": "3.0.0-beta",
+  "version": "3.0.0-beta.2",
   "description": "Ultimate calendar for your React app.",
@@ -5,0 +5,0 @@ "main": "dist/umd/entry.js",

README.md

@@ -37,3 +37,3 @@ [![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) ![build](https://img.shields.io/travis/wojtekmaj/react-calendar/master.svg) ![dependencies](https://img.shields.io/david/wojtekmaj/react-calendar.svg) ![dev dependencies](https://img.shields.io/david/dev/wojtekmaj/react-calendar.svg) [![tested with jest](https://img.shields.io/badge/tested_with-jest-99424f.svg)](https://github.com/facebook/jest)
 
-Your project needs to use React 15.5 or later.
+Your project needs to use React 16.3 or later.
 
@@ -110,4 +110,5 @@ React-Calendar uses modern web technologies. That's why it's so fast, lightweight and easy to style. This, however, comes at a cost of [supporting only modern browsers](https://caniuse.com/#feat=internationalization).
 |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')`|
 |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 month and year in the top navigation section. Can be used to use your own formatting function.|(default formatter)|`(locale, date) => formatDate(date, 'MMMM YYYY')`|
+|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')`|
@@ -147,4 +148,4 @@ |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')`|
 |showWeekNumbers|Whether week numbers shall be shown at the left of MonthView or not.|`false`|`true`|
-|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>|
+|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: `({ activeStartDate, 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: `({ activeStartDate, 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>|
@@ -151,0 +152,0 @@ |value|Calendar value. If you wish to use React-Calendar in an uncontrolled way, use `defaultValue` instead.|n/a|<ul><li>Date: `new Date()`</li><li>An array of dates: `[new Date(2017, 0, 1), new Date(2017, 7, 1)]`|

src/Calendar.jsx

@@ -193,2 +193,8 @@ import React, { Component } from 'react';
 
+  get views() {
+    const { minDetail, maxDetail } = this.props;
+
+    return getLimitedViews(minDetail, maxDetail);
+  }
+
   get hover() {
@@ -202,7 +208,4 @@ const { selectRange } = this.props;
   get drillDownAvailable() {
-    const { view } = this;
-    const { maxDetail, minDetail } = this.props;
+    const { view, views } = this;
 
-    const views = getLimitedViews(minDetail, maxDetail);
-
     return views.indexOf(view) < views.length - 1;
@@ -212,7 +215,4 @@ }
   get drillUpAvailable() {
-    const { view } = this;
-    const { maxDetail, minDetail } = this.props;
+    const { view, views } = this;
 
-    const views = getLimitedViews(minDetail, maxDetail);
-
     return views.indexOf(view) > 0;
@@ -284,7 +284,5 @@ }
 
-    const { view } = this;
-    const { maxDetail, minDetail, onDrillDown } = this.props;
+    const { view, views } = this;
+    const { onDrillDown } = this.props;
 
-    const views = getLimitedViews(minDetail, maxDetail);
-
     const nextView = views[views.indexOf(view) + 1];
@@ -305,7 +303,5 @@
 
-    const { activeStartDate, view } = this;
-    const { maxDetail, minDetail, onDrillUp } = this.props;
+    const { activeStartDate, view, views } = this;
+    const { onDrillUp } = this.props;
 
-    const views = getLimitedViews(minDetail, maxDetail);
-
     const nextView = views[views.indexOf(view) - 1];
@@ -429,3 +425,3 @@ const nextActiveStartDate = getBegin(nextView, activeStartDate);
       case 'year': {
-        const { formatMonth, onClickMonth } = this.props;
+        const { formatMonth, formatMonthYear, onClickMonth } = this.props;
 
@@ -435,2 +431,3 @@ return (
             formatMonth={formatMonth}
+            formatMonthYear={formatMonthYear}
             onClick={mergeFunctions(clickAction, onClickMonth)}
@@ -443,2 +440,3 @@ {...commonProps}
         const {
+          formatLongDate,
           formatShortWeekday,
@@ -457,2 +455,3 @@ onClickDay,
             calendarType={calendarType}
+            formatLongDate={formatLongDate}
             formatShortWeekday={formatShortWeekday}
@@ -481,3 +480,3 @@ onClick={mergeFunctions(clickAction, onClickDay)}
 
-    const { activeStartDate, view } = this;
+    const { activeStartDate, view, views } = this;
     const {
@@ -488,5 +487,3 @@ formatMonthYear,
       maxDate,
-      maxDetail,
       minDate,
-      minDetail,
       navigationAriaLabel,
@@ -527,3 +524,3 @@ navigationLabel,
         view={view}
-        views={getLimitedViews(minDetail, maxDetail)}
+        views={views}
       />
@@ -582,2 +579,3 @@ );
   defaultView: isView,
+  formatLongDate: PropTypes.func,
   formatMonth: PropTypes.func,
@@ -584,0 +582,0 @@ formatMonthYear: PropTypes.func,

src/Calendar/Navigation.jsx

@@ -146,3 +146,3 @@ import React from 'react';
         aria-label={navigationAriaLabel}
-        className="react-calendar__navigation__label"
+        className={`${className}__label`}
         disabled={!drillUpAvailable}
@@ -149,0 +149,0 @@ onClick={drillUp}

src/CenturyView/Decade.jsx

@@ -15,7 +15,7 @@ import React from 'react';
   classes,
-  date,
   formatYear = defaultFormatYear,
-  locale,
   ...otherProps
 }) {
+  const { date, locale } = otherProps;
+
   return (
@@ -25,4 +25,2 @@ <Tile
       classes={[].concat(classes, className)}
-      date={date}
-      locale={locale}
       maxDateTransform={getDecadeEnd}
@@ -29,0 +27,0 @@ minDateTransform={getDecadeStart}

src/CenturyView/Decade.spec.jsx

@@ -179,5 +179,31 @@ import React from 'react';
     expect(tileContent).toHaveBeenCalled();
-    expect(tileContent).toHaveBeenCalledWith({ date, view: 'century' });
+    expect(tileContent).toHaveBeenCalledWith({
+      activeStartDate: tileProps.activeStartDate,
+      date,
+      view: 'century',
+    });
     expect(testContent).toHaveLength(1);
   });
+
+  it('uses formatYear if given', () => {
+    const locale = 'en-US';
+    const date = new Date(2018, 0, 1);
+    const formatYear = jest.fn();
+    formatYear.mockReturnValue('Mock format');
+
+    const component = mount(
+      <Decade
+        {...tileProps}
+        date={date}
+        formatYear={formatYear}
+        locale={locale}
+      />
+    );
+
+    const tile = component.find('Tile');
+
+    expect(formatYear).toHaveBeenCalledTimes(2);
+    expect(formatYear).toHaveBeenCalledWith(locale, new Date(2011, 0, 1));
+    expect(tile.text()).toBe('Mock format – Mock format');
+  });
 });

src/DecadeView/Year.jsx

@@ -14,7 +14,7 @@ import React from 'react';
   classes,
-  date,
   formatYear = defaultFormatYear,
-  locale,
   ...otherProps
 }) {
+  const { date, locale } = otherProps;
+
   return (
@@ -24,4 +24,2 @@ <Tile
       classes={[].concat(classes, className)}
-      date={date}
-      locale={locale}
       maxDateTransform={getYearEnd}
@@ -28,0 +26,0 @@ minDateTransform={getYearStart}

src/DecadeView/Year.spec.jsx

@@ -179,5 +179,31 @@ import React from 'react';
     expect(tileContent).toHaveBeenCalled();
-    expect(tileContent).toHaveBeenCalledWith({ date, view: 'decade' });
+    expect(tileContent).toHaveBeenCalledWith({
+      activeStartDate: tileProps.activeStartDate,
+      date,
+      view: 'decade',
+    });
     expect(testContent).toHaveLength(1);
   });
+
+  it('uses formatYear if given', () => {
+    const locale = 'en-US';
+    const date = new Date(2018, 0, 1);
+    const formatYear = jest.fn();
+    formatYear.mockReturnValue('Mock format');
+
+    const component = mount(
+      <Year
+        {...tileProps}
+        date={date}
+        formatYear={formatYear}
+        locale={locale}
+      />
+    );
+
+    const tile = component.find('Tile');
+
+    expect(formatYear).toHaveBeenCalled();
+    expect(formatYear).toHaveBeenCalledWith(locale, date);
+    expect(tile.text()).toBe('Mock format');
+  });
 });

src/MonthView/Day.jsx

@@ -8,3 +8,3 @@ import React from 'react';
 import { isWeekend } from '../shared/dates';
-import { formatLongDate } from '../shared/dateFormatter';
+import { formatLongDate as defaultFormatLongDate } from '../shared/dateFormatter';
 import { tileProps } from '../shared/propTypes';
@@ -15,8 +15,10 @@
 export default function Day({
+  formatLongDate = defaultFormatLongDate,
   calendarType,
   classes,
   currentMonthIndex,
-  date,
   ...otherProps
 }) {
+  const { date } = otherProps;
+
   return (
@@ -31,3 +33,2 @@ <Tile
       )}
-      date={date}
       formatAbbr={formatLongDate}
@@ -46,2 +47,3 @@ maxDateTransform={getDayEnd}
   currentMonthIndex: PropTypes.number.isRequired,
+  formatLongDate: PropTypes.func,
 };

src/MonthView/Day.spec.jsx

@@ -205,5 +205,31 @@ import React from 'react';
     expect(tileContent).toHaveBeenCalled();
-    expect(tileContent).toHaveBeenCalledWith({ date, view: 'month' });
+    expect(tileContent).toHaveBeenCalledWith({
+      activeStartDate: tileProps.activeStartDate,
+      date,
+      view: 'month',
+    });
     expect(testContent).toHaveLength(1);
   });
+
+  it('uses formatLongDate if given', () => {
+    const locale = 'en-US';
+    const date = new Date(2018, 0, 1);
+    const formatLongDate = jest.fn();
+    formatLongDate.mockReturnValue('Mock format');
+
+    const component = mount(
+      <Day
+        {...tileProps}
+        date={date}
+        formatLongDate={formatLongDate}
+        locale={locale}
+      />
+    );
+
+    const abbr = component.find('abbr');
+
+    expect(formatLongDate).toHaveBeenCalled();
+    expect(formatLongDate).toHaveBeenCalledWith(locale, date);
+    expect(abbr.prop('aria-label')).toBe('Mock format');
+  });
 });

src/MonthView/Weekdays.jsx

@@ -15,2 +15,4 @@ import React from 'react';
 
+const className = 'react-calendar__month-view__weekdays';
+
 export default function Weekdays(props) {
@@ -41,3 +43,3 @@ const {
         key={weekday}
-        className="react-calendar__month-view__weekdays__weekday"
+        className={`${className}__weekday`}
       >
@@ -53,3 +55,3 @@ <abbr aria-label={abbr} title={abbr}>
     <Flex
-      className="react-calendar__month-view__weekdays"
+      className={className}
       count={7}
@@ -56,0 +58,0 @@ onFocus={onMouseLeave}

src/MonthView/WeekNumber.jsx

@@ -9,2 +9,13 @@ import React from 'react';
 }) {
+  const props = {
+    className: 'react-calendar__tile',
+    style: { flexGrow: 1 },
+  };
+
+  const children = (
+    <span>
+      {weekNumber}
+    </span>
+  );
+
   return (
@@ -14,20 +25,12 @@ onClickWeekNumber
         <button
-          className="react-calendar__tile"
+          {...props}
           onClick={() => onClickWeekNumber(weekNumber, date)}
-          style={{ flexGrow: 1 }}
           type="button"
         >
-          <span>
-            {weekNumber}
-          </span>
+          {children}
         </button>
       )
       : (
-        <div
-          className="react-calendar__tile"
-          style={{ flexGrow: 1 }}
-        >
-          <span>
-            {weekNumber}
-          </span>
+        <div {...props}>
+          {children}
         </div>
@@ -34,0 +37,0 @@ )

src/Tile.jsx

@@ -10,2 +10,3 @@ import React, { Component } from 'react';
     const {
+      activeStartDate,
       date,
@@ -20,3 +21,7 @@ tileClassName,
     if (tileClassName !== prevState.tileClassNameProps) {
-      nextState.tileClassName = typeof tileClassName === 'function' ? tileClassName({ date, view }) : tileClassName;
+      nextState.tileClassName = (
+        typeof tileClassName === 'function'
+          ? tileClassName({ activeStartDate, date, view })
+          : tileClassName
+      );
       nextState.tileClassNameProps = tileClassName;
@@ -26,3 +31,7 @@ }
     if (tileContent !== prevState.tileContentProps) {
-      nextState.tileContent = typeof tileContent === 'function' ? tileContent({ date, view }) : tileContent;
+      nextState.tileContent = (
+        typeof tileContent === 'function'
+          ? tileContent({ activeStartDate, date, view })
+          : tileContent
+      );
       nextState.tileContentProps = tileContent;
@@ -29,0 +38,0 @@ }

src/YearView/Month.jsx

@@ -9,3 +9,3 @@ import React from 'react';
   formatMonth as defaultFormatMonth,
-  formatMonthYear,
+  formatMonthYear as defaultFormatMonthYear,
 } from '../shared/dateFormatter';
@@ -18,7 +18,8 @@ import { tileProps } from '../shared/propTypes';
   classes,
-  date,
   formatMonth = defaultFormatMonth,
-  locale,
+  formatMonthYear = defaultFormatMonthYear,
   ...otherProps
 }) {
+  const { date, locale } = otherProps;
+
   return (
@@ -28,5 +29,3 @@ <Tile
       classes={[].concat(classes, className)}
-      date={date}
       formatAbbr={formatMonthYear}
-      locale={locale}
       maxDateTransform={getMonthEnd}
@@ -44,2 +43,3 @@ minDateTransform={getMonthStart}
   formatMonth: PropTypes.func,
+  formatMonthYear: PropTypes.func,
 };

src/YearView/Month.spec.jsx

@@ -179,5 +179,53 @@ import React from 'react';
     expect(tileContent).toHaveBeenCalled();
-    expect(tileContent).toHaveBeenCalledWith({ date, view: 'year' });
+    expect(tileContent).toHaveBeenCalledWith({
+      activeStartDate: tileProps.activeStartDate,
+      date,
+      view: 'year',
+    });
     expect(testContent).toHaveLength(1);
   });
+
+  it('uses formatMonth if given', () => {
+    const locale = 'en-US';
+    const date = new Date(2018, 0, 1);
+    const formatMonth = jest.fn();
+    formatMonth.mockReturnValue('Mock format');
+
+    const component = mount(
+      <Month
+        {...tileProps}
+        date={date}
+        formatMonth={formatMonth}
+        locale={locale}
+      />
+    );
+
+    const tile = component.find('Tile');
+
+    expect(formatMonth).toHaveBeenCalled();
+    expect(formatMonth).toHaveBeenCalledWith(locale, date);
+    expect(tile.text()).toBe('Mock format');
+  });
+
+  it('uses formatMonthYear if given', () => {
+    const locale = 'en-US';
+    const date = new Date(2018, 0, 1);
+    const formatMonthYear = jest.fn();
+    formatMonthYear.mockReturnValue('Mock format');
+
+    const component = mount(
+      <Month
+        {...tileProps}
+        date={date}
+        formatMonthYear={formatMonthYear}
+        locale={locale}
+      />
+    );
+
+    const abbr = component.find('abbr');
+
+    expect(formatMonthYear).toHaveBeenCalled();
+    expect(formatMonthYear).toHaveBeenCalledWith(locale, date);
+    expect(abbr.prop('aria-label')).toBe('Mock format');
+  });
 });

Fixed alerts

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

428688

increased by1.05%

Lines of code

9964

increased by1.19%

Number of lines in readme file

207

increased by0.49%

Number of medium supply chain risk alerts

0

decreased by-100%

No dependency changes