react-calendar - npm Package Compare versions

src/CenturyView/__tests__/Decade.jsx

src/DecadeView/__tests__/Year.jsx

src/MonthView/__tests__/Day.jsx

src/YearView/__tests__/Month.jsx

184

dist/Calendar.js

		@@ -82,5 +82,52 @@ 'use strict';

		return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_ref = Calendar.__proto__ \|\| Object.getPrototypeOf(Calendar)).call.apply(_ref, [this].concat(args))), _this), _this.state = {
		return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_ref = Calendar.__proto__ \|\| Object.getPrototypeOf(Calendar)).call.apply(_ref, [this].concat(args))), _this), _this.getValueFrom = function (value) {
		if (!value) {
		return null;
		}

		var _this$props = _this.props,
		maxDate = _this$props.maxDate,
		minDate = _this$props.minDate;

		var rawValueFrom = value instanceof Array && value.length === 2 ? value[0] : value;
		var valueFromDate = new Date(rawValueFrom);

		if (Number.isNaN(valueFromDate.getTime())) {
		throw new Error('Invalid date: ' + value);
		}

		var valueFrom = (0, _dates.getBegin)(_this.valueType, valueFromDate);

		return (0, _utils.between)(valueFrom, minDate, maxDate);
		}, _this.getValueTo = function (value) {
		if (!value) {
		return null;
		}

		var _this$props2 = _this.props,
		maxDate = _this$props2.maxDate,
		minDate = _this$props2.minDate;

		var rawValueTo = value instanceof Array && value.length === 2 ? value[1] : value;
		var valueToDate = new Date(rawValueTo);

		if (Number.isNaN(valueToDate.getTime())) {
		throw new Error('Invalid date: ' + value);
		}

		var valueTo = (0, _dates.getEnd)(_this.valueType, valueToDate);

		return (0, _utils.between)(valueTo, minDate, maxDate);
		}, _this.state = {
		activeStartDate: _this.getActiveStartDate(),
		view: _this.getView()
		hover: null,
		view: _this.getView(),
		value: _this.props.value
		}, _this.updateValues = function () {
		var props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : _this.props;

		_this.setState({
		value: props.value,
		activeStartDate: _this.getActiveStartDate(props)
		});
		}, _this.setActiveStartDate = function (activeStartDate) {
		@@ -134,3 +181,30 @@ _this.setState({ activeStartDate: activeStartDate }, function () {
		}, _this.onChange = function (value) {
		(0, _utils.callIfDefined)(_this.props.onChange, _this.getProcessedValue(value));
		var selectRange = _this.props.selectRange;


		var nextValue = void 0;
		if (selectRange) {
		var previousValue = _this.state.value;
		// Range selection turned on

		if (!previousValue \|\| [].concat(previousValue).length !== 1 // 0 or 2 - either way we're starting a new array
		) {
		// First value
		nextValue = (0, _dates.getBegin)(_this.valueType, value);
		} else {
		// Second value
		nextValue = (0, _dates.getValueRange)(_this.valueType, previousValue, value);
		(0, _utils.callIfDefined)(_this.props.onChange, nextValue);
		}
		} else {
		// Range selection turned off
		nextValue = _this.getProcessedValue(value);
		(0, _utils.callIfDefined)(_this.props.onChange, nextValue);
		}

		_this.setState({ value: nextValue });
		}, _this.onMouseOver = function (value) {
		_this.setState({ hover: value });
		}, _this.onMouseOut = function () {
		_this.setState({ hover: null });
		}, _temp), _possibleConstructorReturn(_this, _ret);
		@@ -149,52 +223,8 @@ }
		}, {
		key: 'getValueFrom',
		value: function getValueFrom(value) {
		if (!value) {
		return null;
		}
		key: 'getLimitedViews',

		var _props = this.props,
		maxDate = _props.maxDate,
		minDate = _props.minDate;

		var rawValueFrom = value instanceof Array ? value[0] : value;
		var valueFromDate = new Date(rawValueFrom);

		if (Number.isNaN(valueFromDate.getTime())) {
		throw new Error('Invalid date: ' + value);
		}

		var valueFrom = (0, _dates.getBegin)(this.valueType, valueFromDate);

		return (0, _utils.between)(valueFrom, minDate, maxDate);
		}
		}, {
		key: 'getValueTo',
		value: function getValueTo(value) {
		if (!value) {
		return null;
		}

		var _props2 = this.props,
		maxDate = _props2.maxDate,
		minDate = _props2.minDate;

		var rawValueTo = value instanceof Array ? value[1] : value;
		var valueToDate = new Date(rawValueTo);

		if (Number.isNaN(valueToDate.getTime())) {
		throw new Error('Invalid date: ' + value);
		}

		var valueTo = (0, _dates.getEnd)(this.valueType, valueToDate);

		return (0, _utils.between)(valueTo, minDate, maxDate);
		}

		/**
		* Returns views array with disallowed values cut off.
		*/

		}, {
		key: 'getLimitedViews',
		value: function getLimitedViews() {
		@@ -255,5 +285,5 @@ var props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : this.props;
		nextValue = nextProps.value;
		var _props3 = this.props,
		locale = _props3.locale,
		value = _props3.value;
		var _props = this.props,
		locale = _props.locale,
		value = _props.value;

		@@ -273,10 +303,8 @@

		var nextValueFrom = this.getValueFrom(nextValue);
		var valueFrom = this.getValueFrom(value);
		if (allowedViewChanged \|\| datesAreDifferent.apply(undefined, _toConsumableArray([nextValue, value].map(this.getValueFrom))) \|\| datesAreDifferent.apply(undefined, _toConsumableArray([nextValue, value].map(this.getValueTo)))) {
		this.updateValues(nextProps);
		}

		var nextValueTo = this.getValueTo(nextValue);
		var valueTo = this.getValueTo(value);

		if (allowedViewChanged \|\| datesAreDifferent(nextValueFrom, valueFrom) \|\| datesAreDifferent(nextValueTo, valueTo)) {
		nextState.activeStartDate = this.getActiveStartDate(nextProps);
		if (!nextProps.selectRange && this.props.selectRange) {
		nextState.hover = null;
		}
		@@ -316,13 +344,16 @@
		value: function renderContent() {
		var _props4 = this.props,
		calendarType = _props4.calendarType,
		maxDate = _props4.maxDate,
		minDate = _props4.minDate,
		renderChildren = _props4.renderChildren,
		tileClassName = _props4.tileClassName,
		tileContent = _props4.tileContent,
		value = _props4.value;
		var _props2 = this.props,
		calendarType = _props2.calendarType,
		maxDate = _props2.maxDate,
		minDate = _props2.minDate,
		renderChildren = _props2.renderChildren,
		tileClassName = _props2.tileClassName,
		tileContent = _props2.tileContent;
		var _state = this.state,
		activeStartDate = _state.activeStartDate,
		hover = _state.hover,
		value = _state.value,
		view = _state.view;
		var onMouseOver = this.onMouseOver,
		valueType = this.valueType;

		@@ -332,8 +363,10 @@
		activeStartDate: activeStartDate,
		hover: hover,
		maxDate: maxDate,
		minDate: minDate,
		onMouseOver: this.props.selectRange ? onMouseOver : null,
		tileClassName: tileClassName,
		tileContent: tileContent \|\| renderChildren, // For backwards compatibility
		value: this.getProcessedValue(value),
		valueType: this.valueType
		value: value,
		valueType: valueType
		};
		@@ -396,5 +429,17 @@
		value: function render() {
		var _props3 = this.props,
		className = _props3.className,
		selectRange = _props3.selectRange;
		var value = this.state.value;
		var onMouseOut = this.onMouseOut;

		var valueArray = [].concat(value);

		return _react2.default.createElement(
		'div',
		{ className: (0, _mergeClassNames2.default)('react-calendar', this.props.className) },
		{
		className: (0, _mergeClassNames2.default)('react-calendar', selectRange && valueArray.length === 1 && 'react-calendar--selectRange', className),
		onMouseOut: selectRange ? onMouseOut : null,
		onBlur: selectRange ? onMouseOut : null
		},
		this.renderNavigation(),
		@@ -475,2 +520,3 @@ this.renderContent()
		returnValue: _propTypes2.default.oneOf(['start', 'end', 'range']),
		selectRange: _propTypes2.default.bool,
		showNavigation: _propTypes2.default.bool,
		@@ -477,0 +523,0 @@ showNeighboringMonth: _propTypes2.default.bool,

6

dist/CenturyView.js

		@@ -25,4 +25,2 @@ 'use strict';

		function _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; }

		function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
		@@ -46,5 +44,3 @@
		value: function renderDecades() {
		var childProps = _objectWithoutProperties(this.props, []);

		return _react2.default.createElement(_Decades2.default, childProps);
		return _react2.default.createElement(_Decades2.default, this.props);
		}
		@@ -51,0 +47,0 @@ }, {

35

dist/CenturyView/Decade.js

		@@ -7,2 +7,4 @@ 'use strict';

		var _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; };

		var _react = require('react');
		@@ -26,12 +28,15 @@

		function _toConsumableArray(arr) { if (Array.isArray(arr)) { for (var i = 0, arr2 = Array(arr.length); i < arr.length; i++) { arr2[i] = arr[i]; } return arr2; } else { return Array.from(arr); } }

		var className = 'react-calendar__century-view__decades__decade';

		var Decade = function Decade(_ref) {
		var active = _ref.active,
		var classes = _ref.classes,
		date = _ref.date,
		decade = _ref.decade,
		hasActive = _ref.hasActive,
		maxDate = _ref.maxDate,
		minDate = _ref.minDate,
		onClick = _ref.onClick,
		onMouseOver = _ref.onMouseOver,
		style = _ref.style,
		tileClassName = _ref.tileClassName,
		@@ -42,3 +47,3 @@ tileContent = _ref.tileContent;
		{
		className: (0, _mergeClassNames2.default)(className, active && 'react-calendar__tile--active', hasActive && 'react-calendar__tile--hasActive', 'react-calendar__tile', tileClassName instanceof Function ? tileClassName({ date: date, view: 'century' }) : tileClassName),
		className: _mergeClassNames2.default.apply(undefined, [className].concat(_toConsumableArray(classes), [tileClassName instanceof Function ? tileClassName({ date: date, view: 'century' }) : tileClassName])),
		disabled: minDate && (0, _dates.getBeginOfDecade)(minDate) > date \|\| maxDate && (0, _dates.getEndOfDecade)(maxDate) < date,
		@@ -48,3 +53,9 @@ onClick: onClick && function () {
		},
		style: { flexGrow: 1 },
		onMouseOver: onMouseOver && function () {
		return onMouseOver(date);
		},
		onFocus: onMouseOver && function () {
		return onMouseOver(date);
		},
		style: style,
		type: 'button'
		@@ -57,18 +68,10 @@ },
		),
		tileContent instanceof Function ? tileContent({ date: date, view: 'century' }) : tileContent
		typeof tileContent === 'function' ? tileContent({ date: date, view: 'century' }) : tileContent
		);
		};

		Decade.propTypes = {
		active: _propTypes2.default.bool.isRequired,
		date: _propTypes2.default.instanceOf(Date).isRequired,
		decade: _propTypes2.default.number.isRequired,
		hasActive: _propTypes2.default.bool.isRequired,
		maxDate: _propTypes3.isMaxDate,
		minDate: _propTypes3.isMinDate,
		onClick: _propTypes2.default.func,
		tileClassName: _propTypes2.default.oneOfType([_propTypes2.default.func, _propTypes3.isClassName]),
		tileContent: _propTypes2.default.oneOfType([_propTypes2.default.func, _propTypes2.default.node])
		};
		Decade.propTypes = _extends({
		decade: _propTypes2.default.number.isRequired
		}, _propTypes3.tileProps);

		exports.default = Decade;

44

dist/CenturyView/Decades.js

		@@ -15,6 +15,2 @@ 'use strict';

		var _propTypes = require('prop-types');

		var _propTypes2 = _interopRequireDefault(_propTypes);

		var _Flex = require('../Flex');
		@@ -32,6 +28,8 @@

		var _propTypes3 = require('../shared/propTypes');
		var _propTypes = require('../shared/propTypes');

		function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

		function _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; }

		function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
		@@ -57,20 +55,10 @@
		start = this.start;

		var _props = this.props,
		maxDate = _props.maxDate,
		minDate = _props.minDate,
		onClick = _props.onClick,
		tileClassName = _props.tileClassName,
		tileContent = _props.tileContent,
		activeStartDate = _props.activeStartDate,
		hover = _props.hover,
		value = _props.value,
		valueType = _props.valueType;
		valueType = _props.valueType,
		decadeProps = _objectWithoutProperties(_props, ['activeStartDate', 'hover', 'value', 'valueType']);


		var decadeProps = {
		maxDate: maxDate,
		minDate: minDate,
		onClick: onClick,
		tileClassName: tileClassName,
		tileContent: tileContent
		};

		var decades = [];
		@@ -80,3 +68,6 @@ for (var decade = start; decade <= end; decade += 10) {

		decades.push(_react2.default.createElement(_Decade2.default, _extends({}, (0, _utils.getTileActivityFlags)(value, valueType, date, 'decade'), {
		decades.push(_react2.default.createElement(_Decade2.default, _extends({
		classes: (0, _utils.getTileClasses)({
		value: value, valueType: valueType, date: date, dateType: 'decade', hover: hover
		}),
		date: date,
		@@ -118,11 +109,2 @@ decade: decade,

		Decades.propTypes = {
		activeStartDate: _propTypes2.default.instanceOf(Date).isRequired,
		maxDate: _propTypes3.isMaxDate,
		minDate: _propTypes3.isMinDate,
		onClick: _propTypes2.default.func,
		tileClassName: _propTypes2.default.oneOfType([_propTypes2.default.func, _propTypes3.isClassName]),
		tileContent: _propTypes2.default.oneOfType([_propTypes2.default.func, _propTypes2.default.node]),
		value: _propTypes3.isValue,
		valueType: _propTypes2.default.string
		};
		Decades.propTypes = _extends({}, _propTypes.tileGroupProps);

6

dist/DecadeView.js

		@@ -25,4 +25,2 @@ 'use strict';

		function _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; }

		function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
		@@ -46,5 +44,3 @@
		value: function renderYears() {
		var childProps = _objectWithoutProperties(this.props, []);

		return _react2.default.createElement(_Years2.default, childProps);
		return _react2.default.createElement(_Years2.default, this.props);
		}
		@@ -51,0 +47,0 @@ }, {

33

dist/DecadeView/Year.js

		@@ -7,2 +7,4 @@ 'use strict';

		var _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; };

		var _react = require('react');
		@@ -26,11 +28,14 @@

		function _toConsumableArray(arr) { if (Array.isArray(arr)) { for (var i = 0, arr2 = Array(arr.length); i < arr.length; i++) { arr2[i] = arr[i]; } return arr2; } else { return Array.from(arr); } }

		var className = 'react-calendar__decade-view__years__year';

		var Year = function Year(_ref) {
		var active = _ref.active,
		var classes = _ref.classes,
		date = _ref.date,
		hasActive = _ref.hasActive,
		maxDate = _ref.maxDate,
		minDate = _ref.minDate,
		onClick = _ref.onClick,
		onMouseOver = _ref.onMouseOver,
		style = _ref.style,
		tileClassName = _ref.tileClassName,
		@@ -42,3 +47,3 @@ tileContent = _ref.tileContent,
		{
		className: (0, _mergeClassNames2.default)(className, active && 'react-calendar__tile--active', hasActive && 'react-calendar__tile--hasActive', 'react-calendar__tile', tileClassName instanceof Function ? tileClassName({ date: date, view: 'decade' }) : tileClassName),
		className: _mergeClassNames2.default.apply(undefined, [className].concat(_toConsumableArray(classes), [tileClassName instanceof Function ? tileClassName({ date: date, view: 'decade' }) : tileClassName])),
		disabled: minDate && (0, _dates.getBeginOfYear)(minDate) > date \|\| maxDate && (0, _dates.getEndOfYear)(maxDate) < date,
		@@ -48,3 +53,9 @@ onClick: onClick && function () {
		},
		style: { flexGrow: 1 },
		onMouseOver: onMouseOver && function () {
		return onMouseOver(date);
		},
		onFocus: onMouseOver && function () {
		return onMouseOver(date);
		},
		style: style,
		type: 'button'
		@@ -57,18 +68,10 @@ },
		),
		tileContent instanceof Function ? tileContent({ date: date, view: 'decade' }) : tileContent
		typeof tileContent === 'function' ? tileContent({ date: date, view: 'decade' }) : tileContent
		);
		};

		Year.propTypes = {
		active: _propTypes2.default.bool.isRequired,
		date: _propTypes2.default.instanceOf(Date).isRequired,
		hasActive: _propTypes2.default.bool.isRequired,
		maxDate: _propTypes3.isMaxDate,
		minDate: _propTypes3.isMinDate,
		onClick: _propTypes2.default.func,
		tileClassName: _propTypes2.default.oneOfType([_propTypes2.default.func, _propTypes3.isClassName]),
		tileContent: _propTypes2.default.oneOfType([_propTypes2.default.func, _propTypes2.default.node]),
		Year.propTypes = _extends({
		year: _propTypes2.default.number.isRequired
		};
		}, _propTypes3.tileProps);

		exports.default = Year;

44

dist/DecadeView/Years.js

		@@ -15,6 +15,2 @@ 'use strict';

		var _propTypes = require('prop-types');

		var _propTypes2 = _interopRequireDefault(_propTypes);

		var _Flex = require('../Flex');
		@@ -32,6 +28,8 @@

		var _propTypes3 = require('../shared/propTypes');
		var _propTypes = require('../shared/propTypes');

		function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

		function _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; }

		function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
		@@ -57,20 +55,10 @@
		start = this.start;

		var _props = this.props,
		maxDate = _props.maxDate,
		minDate = _props.minDate,
		onClick = _props.onClick,
		tileClassName = _props.tileClassName,
		tileContent = _props.tileContent,
		activeStartDate = _props.activeStartDate,
		hover = _props.hover,
		value = _props.value,
		valueType = _props.valueType;
		valueType = _props.valueType,
		yearProps = _objectWithoutProperties(_props, ['activeStartDate', 'hover', 'value', 'valueType']);


		var yearProps = {
		maxDate: maxDate,
		minDate: minDate,
		onClick: onClick,
		tileClassName: tileClassName,
		tileContent: tileContent
		};

		var years = [];
		@@ -80,3 +68,6 @@ for (var year = start; year <= end; year += 1) {

		years.push(_react2.default.createElement(_Year2.default, _extends({}, (0, _utils.getTileActivityFlags)(value, valueType, date, 'year'), {
		years.push(_react2.default.createElement(_Year2.default, _extends({
		classes: (0, _utils.getTileClasses)({
		value: value, valueType: valueType, date: date, dateType: 'year', hover: hover
		}),
		date: date,
		@@ -118,11 +109,2 @@ key: year,

		Years.propTypes = {
		activeStartDate: _propTypes2.default.instanceOf(Date).isRequired,
		maxDate: _propTypes3.isMaxDate,
		minDate: _propTypes3.isMinDate,
		onClick: _propTypes2.default.func,
		tileClassName: _propTypes2.default.oneOfType([_propTypes2.default.func, _propTypes3.isClassName]),
		tileContent: _propTypes2.default.oneOfType([_propTypes2.default.func, _propTypes2.default.node]),
		value: _propTypes3.isValue,
		valueType: _propTypes2.default.string
		};
		Years.propTypes = _extends({}, _propTypes.tileGroupProps);

21

dist/Flex.js

		@@ -46,15 +46,10 @@ 'use strict';
		_react2.default.Children.map(children, function (child, index) {
		return _react2.default.createElement(
		'div',
		{
		style: Object.assign({
		display: 'flex',
		flexBasis: toPercent(100 / count),
		overflow: 'hidden'
		}, offset && index === 0 && {
		marginLeft: toPercent(100 * offset / count)
		})
		},
		child
		);
		return _react2.default.cloneElement(child, Object.assign({}, child.props, {
		style: Object.assign({
		flexBasis: toPercent(100 / count),
		overflow: 'hidden'
		}, offset && index === 0 && {
		marginLeft: toPercent(100 * offset / count)
		})
		}));
		})
		@@ -61,0 +56,0 @@ );

33

dist/MonthView/Day.js

		@@ -7,2 +7,4 @@ 'use strict';

		var _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; };

		var _react = require('react');
		@@ -26,6 +28,8 @@

		function _toConsumableArray(arr) { if (Array.isArray(arr)) { for (var i = 0, arr2 = Array(arr.length); i < arr.length; i++) { arr2[i] = arr[i]; } return arr2; } else { return Array.from(arr); } }

		var className = 'react-calendar__month-view__days__day';

		var Day = function Day(_ref) {
		var active = _ref.active,
		var classes = _ref.classes,
		currentMonthIndex = _ref.currentMonthIndex,
		@@ -36,2 +40,4 @@ date = _ref.date,
		onClick = _ref.onClick,
		onMouseOver = _ref.onMouseOver,
		style = _ref.style,
		tileClassName = _ref.tileClassName,
		@@ -42,3 +48,3 @@ tileContent = _ref.tileContent;
		{
		className: (0, _mergeClassNames2.default)(className, 'react-calendar__tile', active && 'react-calendar__tile--active', (0, _dates.isWeekend)(date) && className + '--weekend', date.getMonth() !== currentMonthIndex && className + '--neighboringMonth', tileClassName instanceof Function ? tileClassName({ date: date, view: 'month' }) : tileClassName),
		className: _mergeClassNames2.default.apply(undefined, [className].concat(_toConsumableArray(classes), [(0, _dates.isWeekend)(date) && className + '--weekend', date.getMonth() !== currentMonthIndex && className + '--neighboringMonth', tileClassName instanceof Function ? tileClassName({ date: date, view: 'month' }) : tileClassName])),
		disabled: minDate && (0, _dates.getBeginOfDay)(minDate) > date \|\| maxDate && (0, _dates.getEndOfDay)(maxDate) < date,
		@@ -49,3 +55,9 @@ key: date,
		},
		style: { flexGrow: 1 },
		onMouseOver: onMouseOver && function () {
		return onMouseOver(date);
		},
		onFocus: onMouseOver && function () {
		return onMouseOver(date);
		},
		style: style,
		type: 'button'
		@@ -58,17 +70,10 @@ },
		),
		tileContent instanceof Function ? tileContent({ date: date, view: 'month' }) : tileContent
		typeof tileContent === 'function' ? tileContent({ date: date, view: 'month' }) : tileContent
		);
		};

		Day.propTypes = {
		active: _propTypes2.default.bool.isRequired,
		currentMonthIndex: _propTypes2.default.number.isRequired,
		date: _propTypes2.default.instanceOf(Date).isRequired,
		maxDate: _propTypes3.isMaxDate,
		minDate: _propTypes3.isMinDate,
		onClick: _propTypes2.default.func,
		tileClassName: _propTypes2.default.oneOfType([_propTypes2.default.func, _propTypes3.isClassName]),
		tileContent: _propTypes2.default.oneOfType([_propTypes2.default.func, _propTypes2.default.node])
		};
		Day.propTypes = _extends({
		currentMonthIndex: _propTypes2.default.number.isRequired
		}, _propTypes3.tileProps);

		exports.default = Day;

41

dist/MonthView/Days.js

		@@ -35,2 +35,4 @@ 'use strict';

		function _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; }

		function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
		@@ -58,20 +60,10 @@
		monthIndex = this.monthIndex;

		var _props = this.props,
		maxDate = _props.maxDate,
		minDate = _props.minDate,
		onClick = _props.onClick,
		tileClassName = _props.tileClassName,
		tileContent = _props.tileContent,
		activeStartDate = _props.activeStartDate,
		hover = _props.hover,
		value = _props.value,
		valueType = _props.valueType;
		valueType = _props.valueType,
		dayProps = _objectWithoutProperties(_props, ['activeStartDate', 'hover', 'value', 'valueType']);


		var dayProps = {
		maxDate: maxDate,
		minDate: minDate,
		onClick: onClick,
		tileClassName: tileClassName,
		tileContent: tileContent
		};

		var days = [];
		@@ -81,3 +73,6 @@ for (var day = start; day <= end; day += 1) {

		days.push(_react2.default.createElement(_Day2.default, _extends({}, (0, _utils.getTileActivityFlags)(value, valueType, date, 'day'), {
		days.push(_react2.default.createElement(_Day2.default, _extends({
		classes: (0, _utils.getTileClasses)({
		value: value, valueType: valueType, date: date, dateType: 'day', hover: hover
		}),
		currentMonthIndex: monthIndex,
		@@ -177,13 +172,5 @@ date: date,

		Days.propTypes = {
		activeStartDate: _propTypes2.default.instanceOf(Date).isRequired,
		Days.propTypes = _extends({
		calendarType: _propTypes3.isCalendarType.isRequired,
		maxDate: _propTypes3.isMaxDate,
		minDate: _propTypes3.isMinDate,
		onClick: _propTypes2.default.func,
		showNeighboringMonth: _propTypes2.default.bool,
		tileClassName: _propTypes2.default.oneOfType([_propTypes2.default.func, _propTypes3.isClassName]),
		tileContent: _propTypes2.default.oneOfType([_propTypes2.default.func, _propTypes2.default.node]),
		value: _propTypes3.isValue,
		valueType: _propTypes2.default.string
		};
		showNeighboringMonth: _propTypes2.default.bool
		}, _propTypes3.tileGroupProps);

60

dist/shared/dates.js

		@@ -306,25 +306,2 @@ 'use strict';
		/**
		* Returns an array with the beginning and the end of a given range.
		*
		* @param {String} rangeType Range type (e.g. 'day')
		* @param {Date} date Date.
		*/
		var getRange = exports.getRange = function getRange(rangeType, date) {
		switch (rangeType) {
		case 'century':
		return getCenturyRange(date);
		case 'decade':
		return getDecadeRange(date);
		case 'year':
		return getYearRange(date);
		case 'month':
		return getMonthRange(date);
		case 'day':
		return getDayRange(date);
		default:
		throw new Error('Invalid rangeType: ' + rangeType);
		}
		};

		/**
		* Returns the beginning of a given range.
		@@ -460,2 +437,39 @@ *
		/**
		* Returns an array with the beginning and the end of a given range.
		*
		* @param {String} rangeType Range type (e.g. 'day')
		* @param {Date} date Date.
		*/
		var getRange = exports.getRange = function getRange(rangeType, date) {
		switch (rangeType) {
		case 'century':
		return getCenturyRange(date);
		case 'decade':
		return getDecadeRange(date);
		case 'year':
		return getYearRange(date);
		case 'month':
		return getMonthRange(date);
		case 'day':
		return getDayRange(date);
		default:
		throw new Error('Invalid rangeType: ' + rangeType);
		}
		};

		/**
		* Creates a range out of two values, ensuring they are in order and covering entire period ranges.
		*
		* @param {String} rangeType Range type (e.g. 'day')
		* @param {Date} date1 First date.
		* @param {Date} date2 Second date.
		*/
		var getValueRange = exports.getValueRange = function getValueRange(rangeType, date1, date2) {
		var rawNextValue = [date1, date2].sort(function (a, b) {
		return a.getTime() > b.getTime();
		});
		return [getBegin(rangeType, rawNextValue[0]), getEnd(rangeType, rawNextValue[1])];
		};

		/**
		* Returns a number of days in a month of a given date.
		@@ -462,0 +476,0 @@ *

27

dist/shared/propTypes.js

		@@ -6,3 +6,3 @@ 'use strict';
		});
		exports.isView = exports.isClassName = exports.isViews = exports.isValue = exports.isMaxDate = exports.isMinDate = exports.isCalendarType = undefined;
		exports.tileProps = exports.tileGroupProps = exports.isView = exports.isClassName = exports.isViews = exports.isValue = exports.isMaxDate = exports.isMinDate = exports.isCalendarType = undefined;

		@@ -91,2 +91,27 @@ var _typeof = typeof Symbol === "function" && typeof Symbol.iterator === "symbol" ? function (obj) { return typeof obj; } : function (obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; };
		return isView(props, propName, componentName);
		};

		var tileGroupProps = exports.tileGroupProps = {
		activeStartDate: _propTypes2.default.instanceOf(Date).isRequired,
		hover: _propTypes2.default.instanceOf(Date),
		maxDate: isMaxDate,
		minDate: isMinDate,
		onClick: _propTypes2.default.func,
		onMouseOver: _propTypes2.default.func,
		tileClassName: _propTypes2.default.oneOfType([_propTypes2.default.func, isClassName]),
		tileContent: _propTypes2.default.oneOfType([_propTypes2.default.func, _propTypes2.default.node]),
		value: isValue,
		valueType: _propTypes2.default.string
		};

		var tileProps = exports.tileProps = {
		classes: _propTypes2.default.arrayOf(_propTypes2.default.string).isRequired,
		date: _propTypes2.default.instanceOf(Date).isRequired,
		maxDate: isMaxDate,
		minDate: isMinDate,
		onClick: _propTypes2.default.func,
		onMouseOver: _propTypes2.default.func,
		style: _propTypes2.default.objectOf(_propTypes2.default.oneOfType([_propTypes2.default.string, _propTypes2.default.number])),
		tileClassName: _propTypes2.default.oneOfType([_propTypes2.default.func, isClassName]),
		tileContent: _propTypes2.default.oneOfType([_propTypes2.default.func, _propTypes2.default.node])
		};

34

dist/shared/utils.js

		@@ -6,3 +6,3 @@ 'use strict';
		});
		exports.getTileActivityFlags = exports.between = exports.doRangesOverlap = exports.isRangeWithinRange = exports.isValueWithinRange = exports.callIfDefined = exports.mergeFunctions = undefined;
		exports.getTileClasses = exports.between = exports.doRangesOverlap = exports.isRangeWithinRange = exports.isValueWithinRange = exports.callIfDefined = exports.mergeFunctions = undefined;

		@@ -77,12 +77,17 @@ var _dates = require('./dates');

		var getTileActivityFlags = exports.getTileActivityFlags = function getTileActivityFlags(value, valueType, date, dateType) {
		var flags = {};
		var getTileClasses = exports.getTileClasses = function getTileClasses() {
		var _ref = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {},
		value = _ref.value,
		valueType = _ref.valueType,
		date = _ref.date,
		dateType = _ref.dateType,
		hover = _ref.hover;

		var classes = ['react-calendar__tile'];
		if (!value) {
		flags.active = false;
		flags.hasActive = false;
		return flags;
		return classes;
		}

		if (!date \|\| !(value instanceof Array) && !valueType \|\| !(date instanceof Array) && !dateType) {
		throw new Error('getTileActivityFlags(): Unable to get tile activity flags because one or more required arguments were not passed.');
		throw new Error('getTileClasses(): Unable to get tile activity classes because one or more required arguments were not passed.');
		}
		@@ -93,6 +98,15 @@

		flags.active = isRangeWithinRange(valueRange, dateRange);
		flags.hasActive = flags.active ? false : doRangesOverlap(valueRange, dateRange);
		if (isRangeWithinRange(valueRange, dateRange)) {
		classes.push('react-calendar__tile--active');
		} else if (doRangesOverlap(valueRange, dateRange)) {
		classes.push('react-calendar__tile--hasActive');
		} else if (hover && (
		// Date before value
		dateRange[1] < valueRange[0] && isRangeWithinRange([hover, valueRange[0]], dateRange) \|\|
		// Date after value
		dateRange[0] > valueRange[1] && isRangeWithinRange([valueRange[1], hover], dateRange))) {
		classes.push('react-calendar__tile--hover');
		}

		return flags;
		return classes;
		};

6

dist/YearView.js

		@@ -25,4 +25,2 @@ 'use strict';

		function _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; }

		function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
		@@ -46,5 +44,3 @@
		value: function renderMonths() {
		var childProps = _objectWithoutProperties(this.props, []);

		return _react2.default.createElement(_Months2.default, childProps);
		return _react2.default.createElement(_Months2.default, this.props);
		}
		@@ -51,0 +47,0 @@ }, {

38

dist/YearView/Month.js

		@@ -7,2 +7,4 @@ 'use strict';

		var _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; };

		var _react = require('react');
		@@ -12,6 +14,2 @@

		var _propTypes = require('prop-types');

		var _propTypes2 = _interopRequireDefault(_propTypes);

		var _mergeClassNames = require('merge-class-names');
		@@ -25,15 +23,18 @@

		var _propTypes3 = require('../shared/propTypes');
		var _propTypes = require('../shared/propTypes');

		function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

		function _toConsumableArray(arr) { if (Array.isArray(arr)) { for (var i = 0, arr2 = Array(arr.length); i < arr.length; i++) { arr2[i] = arr[i]; } return arr2; } else { return Array.from(arr); } }

		var className = 'react-calendar__year-view__months__month';

		var Month = function Month(_ref) {
		var active = _ref.active,
		var classes = _ref.classes,
		date = _ref.date,
		hasActive = _ref.hasActive,
		maxDate = _ref.maxDate,
		minDate = _ref.minDate,
		onClick = _ref.onClick,
		onMouseOver = _ref.onMouseOver,
		style = _ref.style,
		tileClassName = _ref.tileClassName,
		@@ -44,3 +45,3 @@ tileContent = _ref.tileContent;
		{
		className: (0, _mergeClassNames2.default)(className, active && 'react-calendar__tile--active', hasActive && 'react-calendar__tile--hasActive', 'react-calendar__tile', tileClassName instanceof Function ? tileClassName({ date: date, view: 'year' }) : tileClassName),
		className: _mergeClassNames2.default.apply(undefined, [className].concat(_toConsumableArray(classes), [tileClassName instanceof Function ? tileClassName({ date: date, view: 'year' }) : tileClassName])),
		disabled: minDate && (0, _dates.getBeginOfMonth)(minDate) > date \|\| maxDate && (0, _dates.getEndOfMonth)(maxDate) < date,
		@@ -50,3 +51,9 @@ onClick: onClick && function () {
		},
		style: { flexGrow: 1 },
		onMouseOver: onMouseOver && function () {
		return onMouseOver(date);
		},
		onFocus: onMouseOver && function () {
		return onMouseOver(date);
		},
		style: style,
		type: 'button'
		@@ -59,17 +66,8 @@ },
		),
		tileContent instanceof Function ? tileContent({ date: date, view: 'year' }) : tileContent
		typeof tileContent === 'function' ? tileContent({ date: date, view: 'year' }) : tileContent
		);
		};

		Month.propTypes = {
		active: _propTypes2.default.bool.isRequired,
		date: _propTypes2.default.instanceOf(Date).isRequired,
		hasActive: _propTypes2.default.bool.isRequired,
		maxDate: _propTypes3.isMaxDate,
		minDate: _propTypes3.isMinDate,
		onClick: _propTypes2.default.func,
		tileClassName: _propTypes2.default.oneOfType([_propTypes2.default.func, _propTypes3.isClassName]),
		tileContent: _propTypes2.default.oneOfType([_propTypes2.default.func, _propTypes2.default.node])
		};
		Month.propTypes = _extends({}, _propTypes.tileProps);

		exports.default = Month;

44

dist/YearView/Months.js

		@@ -15,6 +15,2 @@ 'use strict';

		var _propTypes = require('prop-types');

		var _propTypes2 = _interopRequireDefault(_propTypes);

		var _Flex = require('../Flex');
		@@ -32,6 +28,8 @@

		var _propTypes3 = require('../shared/propTypes');
		var _propTypes = require('../shared/propTypes');

		function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

		function _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; }

		function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
		@@ -66,20 +64,10 @@
		year = this.year;

		var _props = this.props,
		maxDate = _props.maxDate,
		minDate = _props.minDate,
		onClick = _props.onClick,
		tileClassName = _props.tileClassName,
		tileContent = _props.tileContent,
		activeStartDate = _props.activeStartDate,
		hover = _props.hover,
		value = _props.value,
		valueType = _props.valueType;
		valueType = _props.valueType,
		monthProps = _objectWithoutProperties(_props, ['activeStartDate', 'hover', 'value', 'valueType']);


		var monthProps = {
		maxDate: maxDate,
		minDate: minDate,
		onClick: onClick,
		tileClassName: tileClassName,
		tileContent: tileContent
		};

		var months = [];
		@@ -89,3 +77,6 @@ for (var monthIndex = start; monthIndex <= end; monthIndex += 1) {

		months.push(_react2.default.createElement(_Month2.default, _extends({}, (0, _utils.getTileActivityFlags)(value, valueType, date, 'month'), {
		months.push(_react2.default.createElement(_Month2.default, _extends({
		classes: (0, _utils.getTileClasses)({
		value: value, valueType: valueType, date: date, dateType: 'month', hover: hover
		}),
		date: date,
		@@ -121,11 +112,2 @@ key: monthIndex

		Months.propTypes = {
		activeStartDate: _propTypes2.default.instanceOf(Date).isRequired,
		maxDate: _propTypes3.isMaxDate,
		minDate: _propTypes3.isMinDate,
		onClick: _propTypes2.default.func,
		tileClassName: _propTypes2.default.oneOfType([_propTypes2.default.func, _propTypes3.isClassName]),
		tileContent: _propTypes2.default.oneOfType([_propTypes2.default.func, _propTypes2.default.node]),
		value: _propTypes3.isValue,
		valueType: _propTypes2.default.string
		};
		Months.propTypes = _extends({}, _propTypes.tileGroupProps);

3

index.d.ts

		@@ -34,2 +34,3 @@ /// <reference types="react" />
		returnValue?: "start" \| "end" \| "range";
		selectRange?: boolean;
		showNavigation?: boolean;
		@@ -61,5 +62,7 @@ showNeighboringMonth?: boolean;
		activeStartDate: Date;
		hover?: Date;
		maxDate?: Date;
		minDate?: Date;
		onClick?: DateCallback;
		onMouseOver?: DateCallback;
		renderChildren?: (props: CalendarTileProperties) => JSX.Element \| null; // For backwards compatibility
		@@ -66,0 +69,0 @@ tileClassName?: string \| string[] \| ((props: CalendarTileProperties) => string \| string[] \| null);

11

package.json

		{
		"name": "react-calendar",
		"version": "2.9.0",
		"version": "2.10.0",
		"description": "A component for picking dates or date periods for your React application.",
		@@ -14,6 +14,10 @@ "main": "dist/entry.js",
		"prepublishOnly": "npm run build",
		"preversion": "npm run version-sample && npm run version-test",
		"test": "npm run test-eslint && npm run test-jest",
		"test-eslint": "eslint ./src",
		"test-jest": "jest",
		"test-jest-coverage": "jest --coverage"
		"test-jest-coverage": "jest --coverage",
		"version": "npm run build && git add .",
		"version-sample": "cd sample && npm version patch",
		"version-test": "cd test && npm version patch"
		},
		@@ -26,3 +30,4 @@ "jest": {
		"/src/.{js,jsx}",
		"!**/src/entry.js"
		"!**/src/entry.js",
		"!**/src/entry.nostyle.js"
		]
		@@ -29,0 +34,0 @@ },

1

README.md

		@@ -110,2 +110,3 @@ ![downloads](https://img.shields.io/npm/dt/react-calendar.svg) ![build](https://img.shields.io/travis/wojtekmaj/react-calendar.svg) ![dependencies](https://img.shields.io/david/wojtekmaj/react-calendar.svg
		\|showNeighboringMonth\|Defines whether days from previous or next month shall be rendered if the month doesn't start on the first day of the week or doesn't end on the last day of the week, respectively. Defaults to true.\|`false`\|
		\|selectRange\|Defines whether the user shall select two dates forming a range instead of just one. Note: This feature will make React-Calendar return array with two dates regardless of returnValue setting. Defaults to false.\|`true`\|
		\|showWeekNumbers\|Defines whether week numbers shall be shown at the left of MonthView or not. Defaults to false.\|`true`\|
		@@ -112,0 +113,0 @@ \|tileClassName\|Defines class name(s) that will be applied to a given calendar item (day on month view, month on year view and so on).\|<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>\|

50

src/__tests__/Calendar.jsx

		@@ -25,2 +25,12 @@ import React from 'react';

		it('does not render navigation when showNavigation flag is set to false', () => {
		const component = mount(
		<Calendar showNavigation={false} />
		);

		const navigation = component.find('.react-calendar__navigation');

		expect(navigation).toHaveLength(0);
		});

		it('renders month view by default', () => {
		@@ -412,2 +422,42 @@ const component = mount(

		it('calls onChange function returning a range when selected two pieces of a range', () => {
		const onChange = jest.fn();
		const component = mount(
		<Calendar
		onChange={onChange}
		selectRange
		view="month"
		/>
		);

		component.instance().onChange(new Date(2018, 0, 1));
		component.instance().onChange(new Date(2018, 6, 1));

		expect(onChange).toHaveBeenCalledTimes(1);
		expect(onChange).toHaveBeenCalledWith([
		new Date(2018, 0, 1),
		new Date(2018, 6, 1, 23, 59, 59, 999),
		]);
		});

		it('calls onChange function returning a range when selected reversed two pieces of a range', () => {
		const onChange = jest.fn();
		const component = mount(
		<Calendar
		onChange={onChange}
		selectRange
		view="month"
		/>
		);

		component.instance().onChange(new Date(2018, 6, 1));
		component.instance().onChange(new Date(2018, 0, 1));

		expect(onChange).toHaveBeenCalledTimes(1);
		expect(onChange).toHaveBeenCalledWith([
		new Date(2018, 0, 1),
		new Date(2018, 6, 1, 23, 59, 59, 999),
		]);
		});

		it('calls onActiveDateChange on activeStartDate change', () => {
		@@ -414,0 +464,0 @@ const onActiveDateChange = jest.fn();

1

src/__tests__/Flex.jsx

		@@ -62,3 +62,2 @@ import React from 'react';

		children.forEach(child => expect(child.prop('style').display).toBe('flex'));
		children.forEach(child =>
		@@ -65,0 +64,0 @@ expect(parseFloat(child.prop('style').flexBasis)).toBeCloseTo(33.33)

102

src/Calendar.jsx

		@@ -11,3 +11,3 @@ import React, { Component } from 'react';

		import { getBegin, getEnd } from './shared/dates';
		import { getBegin, getEnd, getValueRange } from './shared/dates';
		import { setLocale } from './shared/locales';
		@@ -57,3 +57,3 @@ import { isCalendarType, isClassName, isMaxDate, isMinDate, isValue } from './shared/propTypes';

		getValueFrom(value) {
		getValueFrom = (value) => {
		if (!value) {
		@@ -64,3 +64,3 @@ return null;
		const { maxDate, minDate } = this.props;
		const rawValueFrom = value instanceof Array ? value[0] : value;
		const rawValueFrom = value instanceof Array && value.length === 2 ? value[0] : value;
		const valueFromDate = new Date(rawValueFrom);
		@@ -77,3 +77,3 @@

		getValueTo(value) {
		getValueTo = (value) => {
		if (!value) {
		@@ -84,3 +84,3 @@ return null;
		const { maxDate, minDate } = this.props;
		const rawValueTo = value instanceof Array ? value[1] : value;
		const rawValueTo = value instanceof Array && value.length === 2 ? value[1] : value;
		const valueToDate = new Date(rawValueTo);
		@@ -135,3 +135,5 @@
		activeStartDate: this.getActiveStartDate(),
		hover: null,
		view: this.getView(),
		value: this.props.value,
		}
		@@ -162,19 +164,24 @@

		const nextValueFrom = this.getValueFrom(nextValue);
		const valueFrom = this.getValueFrom(value);

		const nextValueTo = this.getValueTo(nextValue);
		const valueTo = this.getValueTo(value);

		if (
		allowedViewChanged \|\|
		datesAreDifferent(nextValueFrom, valueFrom) \|\|
		datesAreDifferent(nextValueTo, valueTo)
		datesAreDifferent(...[nextValue, value].map(this.getValueFrom)) \|\|
		datesAreDifferent(...[nextValue, value].map(this.getValueTo))
		) {
		nextState.activeStartDate = this.getActiveStartDate(nextProps);
		this.updateValues(nextProps);
		}

		if (!nextProps.selectRange && this.props.selectRange) {
		nextState.hover = null;
		}

		this.setState(nextState);
		}

		updateValues = (props = this.props) => {
		this.setState({
		value: props.value,
		activeStartDate: this.getActiveStartDate(props),
		});
		}

		getActiveStartDate(props = this.props) {
		@@ -257,19 +264,60 @@ const rangeType = this.getView(props);
		onChange = (value) => {
		callIfDefined(this.props.onChange, this.getProcessedValue(value));
		const { selectRange } = this.props;

		let nextValue;
		if (selectRange) {
		const { value: previousValue } = this.state;
		// Range selection turned on
		if (
		!previousValue \|\|
		[].concat(previousValue).length !== 1 // 0 or 2 - either way we're starting a new array
		) {
		// First value
		nextValue = getBegin(this.valueType, value);
		} else {
		// Second value
		nextValue = getValueRange(this.valueType, previousValue, value);
		callIfDefined(this.props.onChange, nextValue);
		}
		} else {
		// Range selection turned off
		nextValue = this.getProcessedValue(value);
		callIfDefined(this.props.onChange, nextValue);
		}

		this.setState({ value: nextValue });
		}

		onMouseOver = (value) => {
		this.setState({ hover: value });
		}

		onMouseOut = () => {
		this.setState({ hover: null });
		}

		renderContent() {
		const {
		calendarType, maxDate, minDate, renderChildren, tileClassName, tileContent, value,
		calendarType,
		maxDate,
		minDate,
		renderChildren,
		tileClassName,
		tileContent,
		} = this.props;
		const { activeStartDate, view } = this.state;
		const {
		activeStartDate, hover, value, view,
		} = this.state;
		const { onMouseOver, valueType } = this;

		const commonProps = {
		activeStartDate,
		hover,
		maxDate,
		minDate,
		onMouseOver: this.props.selectRange ? onMouseOver : null,
		tileClassName,
		tileContent: tileContent \|\| renderChildren, // For backwards compatibility
		value: this.getProcessedValue(value),
		valueType: this.valueType,
		value,
		valueType,
		};
		@@ -343,4 +391,17 @@
		render() {
		const { className, selectRange } = this.props;
		const { value } = this.state;
		const { onMouseOut } = this;
		const valueArray = [].concat(value);

		return (
		<div className={mergeClassNames('react-calendar', this.props.className)}>
		<div
		className={mergeClassNames(
		'react-calendar',
		selectRange && valueArray.length === 1 && 'react-calendar--selectRange',
		className,
		)}
		onMouseOut={selectRange ? onMouseOut : null}
		onBlur={selectRange ? onMouseOut : null}
		>
		{this.renderNavigation()}
		@@ -386,2 +447,3 @@ {this.renderContent()}
		returnValue: PropTypes.oneOf(['start', 'end', 'range']),
		selectRange: PropTypes.bool,
		showNavigation: PropTypes.bool,
		@@ -388,0 +450,0 @@ showNeighboringMonth: PropTypes.bool,

6

src/CenturyView.jsx

		@@ -10,8 +10,4 @@ import React, { PureComponent } from 'react';
		renderDecades() {
		const {
		...childProps
		} = this.props;

		return (
		<Decades {...childProps} />
		<Decades {...this.props} />
		);
		@@ -18,0 +14,0 @@ }

32

src/CenturyView/Decade.jsx

		@@ -6,3 +6,3 @@ import React from 'react';
		import { getBeginOfDecade, getEndOfDecade, getDecadeLabel } from '../shared/dates';
		import { isClassName, isMaxDate, isMinDate } from '../shared/propTypes';
		import { tileProps } from '../shared/propTypes';

		@@ -12,9 +12,10 @@ const className = 'react-calendar__century-view__decades__decade';
		const Decade = ({
		active,
		classes,
		date,
		decade,
		hasActive,
		maxDate,
		minDate,
		onClick,
		onMouseOver,
		style,
		tileClassName,
		@@ -26,5 +27,3 @@ tileContent,
		className,
		active && 'react-calendar__tile--active',
		hasActive && 'react-calendar__tile--hasActive',
		'react-calendar__tile',
		...classes,
		tileClassName instanceof Function ? tileClassName({ date, view: 'century' }) : tileClassName,
		@@ -37,3 +36,5 @@ )}
		onClick={onClick && (() => onClick(date))}
		style={{ flexGrow: 1 }}
		onMouseOver={onMouseOver && (() => onMouseOver(date))}
		onFocus={onMouseOver && (() => onMouseOver(date))}
		style={style}
		type="button"
		@@ -44,3 +45,3 @@ >
		</time>
		{tileContent instanceof Function ? tileContent({ date, view: 'century' }) : tileContent}
		{typeof tileContent === 'function' ? tileContent({ date, view: 'century' }) : tileContent}
		</button>
		@@ -50,19 +51,6 @@ );
		Decade.propTypes = {
		active: PropTypes.bool.isRequired,
		date: PropTypes.instanceOf(Date).isRequired,
		decade: PropTypes.number.isRequired,
		hasActive: PropTypes.bool.isRequired,
		maxDate: isMaxDate,
		minDate: isMinDate,
		onClick: PropTypes.func,
		tileClassName: PropTypes.oneOfType([
		PropTypes.func,
		isClassName,
		]),
		tileContent: PropTypes.oneOfType([
		PropTypes.func,
		PropTypes.node,
		]),
		...tileProps,
		};

		export default Decade;

39

src/CenturyView/Decades.jsx

		import React, { PureComponent } from 'react';
		import PropTypes from 'prop-types';

		@@ -11,4 +10,4 @@ import Flex from '../Flex';
		} from '../shared/dates';
		import { getTileActivityFlags } from '../shared/utils';
		import { isClassName, isMaxDate, isMinDate, isValue } from '../shared/propTypes';
		import { getTileClasses } from '../shared/utils';
		import { tileGroupProps } from '../shared/propTypes';

		@@ -27,14 +26,11 @@ export default class Decades extends PureComponent {
		const { end, start } = this;

		const {
		maxDate, minDate, onClick, tileClassName, tileContent, value, valueType,
		activeStartDate,
		hover,
		value,
		valueType,
		...decadeProps
		} = this.props;

		const decadeProps = {
		maxDate,
		minDate,
		onClick,
		tileClassName,
		tileContent,
		};

		const decades = [];
		@@ -46,3 +42,5 @@ for (let decade = start; decade <= end; decade += 10) {
		<Decade
		{...getTileActivityFlags(value, valueType, date, 'decade')}
		classes={getTileClasses({
		value, valueType, date, dateType: 'decade', hover,
		})}
		date={date}
		@@ -69,16 +67,3 @@ decade={decade}
		Decades.propTypes = {
		activeStartDate: PropTypes.instanceOf(Date).isRequired,
		maxDate: isMaxDate,
		minDate: isMinDate,
		onClick: PropTypes.func,
		tileClassName: PropTypes.oneOfType([
		PropTypes.func,
		isClassName,
		]),
		tileContent: PropTypes.oneOfType([
		PropTypes.func,
		PropTypes.node,
		]),
		value: isValue,
		valueType: PropTypes.string,
		...tileGroupProps,
		};

6

src/DecadeView.jsx

		@@ -10,8 +10,4 @@ import React, { PureComponent } from 'react';
		renderYears() {
		const {
		...childProps
		} = this.props;

		return (
		<Years {...childProps} />
		<Years {...this.props} />
		);
		@@ -18,0 +14,0 @@ }

38

src/DecadeView/Year.jsx

		@@ -9,3 +9,3 @@ import React from 'react';
		} from '../shared/dates';
		import { isClassName, isMaxDate, isMinDate } from '../shared/propTypes';
		import { tileProps } from '../shared/propTypes';

		@@ -15,3 +15,12 @@ const className = 'react-calendar__decade-view__years__year';
		const Year = ({
		active, date, hasActive, maxDate, minDate, onClick, tileClassName, tileContent, year,
		classes,
		date,
		maxDate,
		minDate,
		onClick,
		onMouseOver,
		style,
		tileClassName,
		tileContent,
		year,
		}) => (
		@@ -21,5 +30,3 @@ <button
		className,
		active && 'react-calendar__tile--active',
		hasActive && 'react-calendar__tile--hasActive',
		'react-calendar__tile',
		...classes,
		tileClassName instanceof Function ? tileClassName({ date, view: 'decade' }) : tileClassName,
		@@ -32,3 +39,5 @@ )}
		onClick={onClick && (() => onClick(date))}
		style={{ flexGrow: 1 }}
		onMouseOver={onMouseOver && (() => onMouseOver(date))}
		onFocus={onMouseOver && (() => onMouseOver(date))}
		style={style}
		type="button"
		@@ -39,3 +48,3 @@ >
		</time>
		{tileContent instanceof Function ? tileContent({ date, view: 'decade' }) : tileContent}
		{typeof tileContent === 'function' ? tileContent({ date, view: 'decade' }) : tileContent}
		</button>
		@@ -45,19 +54,6 @@ );
		Year.propTypes = {
		active: PropTypes.bool.isRequired,
		date: PropTypes.instanceOf(Date).isRequired,
		hasActive: PropTypes.bool.isRequired,
		maxDate: isMaxDate,
		minDate: isMinDate,
		onClick: PropTypes.func,
		tileClassName: PropTypes.oneOfType([
		PropTypes.func,
		isClassName,
		]),
		tileContent: PropTypes.oneOfType([
		PropTypes.func,
		PropTypes.node,
		]),
		year: PropTypes.number.isRequired,
		...tileProps,
		};

		export default Year;

39

src/DecadeView/Years.jsx

		import React, { PureComponent } from 'react';
		import PropTypes from 'prop-types';

		@@ -8,4 +7,4 @@ import Flex from '../Flex';
		import { getBeginOfDecadeYear } from '../shared/dates';
		import { getTileActivityFlags } from '../shared/utils';
		import { isClassName, isMaxDate, isMinDate, isValue } from '../shared/propTypes';
		import { getTileClasses } from '../shared/utils';
		import { tileGroupProps } from '../shared/propTypes';

		@@ -24,14 +23,11 @@ export default class Years extends PureComponent {
		const { end, start } = this;

		const {
		maxDate, minDate, onClick, tileClassName, tileContent, value, valueType,
		activeStartDate,
		hover,
		value,
		valueType,
		...yearProps
		} = this.props;

		const yearProps = {
		maxDate,
		minDate,
		onClick,
		tileClassName,
		tileContent,
		};

		const years = [];
		@@ -43,3 +39,5 @@ for (let year = start; year <= end; year += 1) {
		<Year
		{...getTileActivityFlags(value, valueType, date, 'year')}
		classes={getTileClasses({
		value, valueType, date, dateType: 'year', hover,
		})}
		date={date}
		@@ -66,16 +64,3 @@ key={year}
		Years.propTypes = {
		activeStartDate: PropTypes.instanceOf(Date).isRequired,
		maxDate: isMaxDate,
		minDate: isMinDate,
		onClick: PropTypes.func,
		tileClassName: PropTypes.oneOfType([
		PropTypes.func,
		isClassName,
		]),
		tileContent: PropTypes.oneOfType([
		PropTypes.func,
		PropTypes.node,
		]),
		value: isValue,
		valueType: PropTypes.string,
		...tileGroupProps,
		};

11

src/Flex.jsx

		@@ -26,6 +26,5 @@ import React from 'react';
		{React.Children.map(children, (child, index) => (
		<div
		style={Object.assign(
		React.cloneElement(child, Object.assign({}, child.props, {
		style: Object.assign(
		{
		display: 'flex',
		flexBasis: toPercent(100 / count),
		@@ -37,6 +36,4 @@ overflow: 'hidden',
		},
		)}
		>
		{child}
		</div>
		),
		}))
		))}
		@@ -43,0 +40,0 @@ </div>

36

src/MonthView/Day.jsx

		@@ -12,3 +12,3 @@ import React from 'react';
		} from '../shared/dates';
		import { isClassName, isMaxDate, isMinDate } from '../shared/propTypes';
		import { tileProps } from '../shared/propTypes';

		@@ -18,3 +18,12 @@ const className = 'react-calendar__month-view__days__day';
		const Day = ({
		active, currentMonthIndex, date, maxDate, minDate, onClick, tileClassName, tileContent,
		classes,
		currentMonthIndex,
		date,
		maxDate,
		minDate,
		onClick,
		onMouseOver,
		style,
		tileClassName,
		tileContent,
		}) => (
		@@ -24,4 +33,3 @@ <button
		className,
		'react-calendar__tile',
		active && 'react-calendar__tile--active',
		...classes,
		isWeekend(date) && `${className}--weekend`,
		@@ -37,3 +45,5 @@ date.getMonth() !== currentMonthIndex && `${className}--neighboringMonth`,
		onClick={onClick && (() => onClick(date))}
		style={{ flexGrow: 1 }}
		onMouseOver={onMouseOver && (() => onMouseOver(date))}
		onFocus={onMouseOver && (() => onMouseOver(date))}
		style={style}
		type="button"
		@@ -44,3 +54,3 @@ >
		</time>
		{tileContent instanceof Function ? tileContent({ date, view: 'month' }) : tileContent}
		{typeof tileContent === 'function' ? tileContent({ date, view: 'month' }) : tileContent}
		</button>
		@@ -50,18 +60,6 @@ );
		Day.propTypes = {
		active: PropTypes.bool.isRequired,
		currentMonthIndex: PropTypes.number.isRequired,
		date: PropTypes.instanceOf(Date).isRequired,
		maxDate: isMaxDate,
		minDate: isMinDate,
		onClick: PropTypes.func,
		tileClassName: PropTypes.oneOfType([
		PropTypes.func,
		isClassName,
		]),
		tileContent: PropTypes.oneOfType([
		PropTypes.func,
		PropTypes.node,
		]),
		...tileProps,
		};

		export default Day;

38

src/MonthView/Days.jsx

		@@ -13,4 +13,4 @@ import React, { PureComponent } from 'react';
		} from '../shared/dates';
		import { isCalendarType, isClassName, isMaxDate, isMinDate, isValue } from '../shared/propTypes';
		import { getTileActivityFlags } from '../shared/utils';
		import { isCalendarType, tileGroupProps } from '../shared/propTypes';
		import { getTileClasses } from '../shared/utils';

		@@ -71,14 +71,11 @@ export default class Days extends PureComponent {
		} = this;

		const {
		maxDate, minDate, onClick, tileClassName, tileContent, value, valueType,
		activeStartDate,
		hover,
		value,
		valueType,
		...dayProps
		} = this.props;

		const dayProps = {
		maxDate,
		minDate,
		onClick,
		tileClassName,
		tileContent,
		};

		const days = [];
		@@ -90,3 +87,5 @@ for (let day = start; day <= end; day += 1) {
		<Day
		{...getTileActivityFlags(value, valueType, date, 'day')}
		classes={getTileClasses({
		value, valueType, date, dateType: 'day', hover,
		})}
		currentMonthIndex={monthIndex}
		@@ -114,18 +113,5 @@ date={date}
		Days.propTypes = {
		activeStartDate: PropTypes.instanceOf(Date).isRequired,
		calendarType: isCalendarType.isRequired,
		maxDate: isMaxDate,
		minDate: isMinDate,
		onClick: PropTypes.func,
		showNeighboringMonth: PropTypes.bool,
		tileClassName: PropTypes.oneOfType([
		PropTypes.func,
		isClassName,
		]),
		tileContent: PropTypes.oneOfType([
		PropTypes.func,
		PropTypes.node,
		]),
		value: isValue,
		valueType: PropTypes.string,
		...tileGroupProps,
		};

163

src/shared/__tests__/dates.js

		@@ -47,2 +47,3 @@ import {
		getEndPrevious2,
		getValueRange,
		getDaysInMonth,
		@@ -176,3 +177,3 @@ getCenturyLabel,

		expect(beginOfCentury.toISOString()).toBe(beginOfCenturyDate.toISOString());
		expect(beginOfCentury).toEqual(beginOfCenturyDate);
		});
		@@ -188,3 +189,3 @@ });

		expect(endOfCentury.toISOString()).toBe(endOfCenturyDate.toISOString());
		expect(endOfCentury).toEqual(endOfCenturyDate);
		});
		@@ -202,4 +203,3 @@ });
		expect(centuryRange).toHaveLength(2);
		expect(centuryRange[0].toISOString()).toBe(beginOfCenturyDate.toISOString());
		expect(centuryRange[1].toISOString()).toBe(endOfCenturyDate.toISOString());
		expect(centuryRange).toEqual([beginOfCenturyDate, endOfCenturyDate]);
		});
		@@ -215,3 +215,3 @@ });

		expect(beginOfPreviousCentury.toISOString()).toBe(beginOfPreviousCenturyDate.toISOString());
		expect(beginOfPreviousCentury).toEqual(beginOfPreviousCenturyDate);
		});
		@@ -227,3 +227,3 @@ });

		expect(endOfPreviousCentury.toISOString()).toBe(endOfPreviousCenturyDate.toISOString());
		expect(endOfPreviousCentury).toEqual(endOfPreviousCenturyDate);
		});
		@@ -239,3 +239,3 @@ });

		expect(beginOfNextCentury.toISOString()).toBe(beginOfNextCenturyDate.toISOString());
		expect(beginOfNextCentury).toEqual(beginOfNextCenturyDate);
		});
		@@ -267,3 +267,3 @@ });

		expect(beginOfDecade.toISOString()).toBe(beginOfDecadeDate.toISOString());
		expect(beginOfDecade).toEqual(beginOfDecadeDate);
		});
		@@ -279,3 +279,3 @@ });

		expect(endOfDecade.toISOString()).toBe(endOfDecadeDate.toISOString());
		expect(endOfDecade).toEqual(endOfDecadeDate);
		});
		@@ -293,4 +293,3 @@ });
		expect(decadeRange).toHaveLength(2);
		expect(decadeRange[0].toISOString()).toBe(beginOfDecadeDate.toISOString());
		expect(decadeRange[1].toISOString()).toBe(endOfDecadeDate.toISOString());
		expect(decadeRange).toEqual([beginOfDecadeDate, endOfDecadeDate]);
		});
		@@ -306,3 +305,3 @@ });

		expect(beginOfPreviousDecade.toISOString()).toBe(beginOfPreviousDecadeDate.toISOString());
		expect(beginOfPreviousDecade).toEqual(beginOfPreviousDecadeDate);
		});
		@@ -318,3 +317,3 @@ });

		expect(endOfPreviousDecade.toISOString()).toBe(endOfPreviousDecadeDate.toISOString());
		expect(endOfPreviousDecade).toEqual(endOfPreviousDecadeDate);
		});
		@@ -330,3 +329,3 @@ });

		expect(beginOfNextDecade.toISOString()).toBe(beginOfNextDecadeDate.toISOString());
		expect(beginOfNextDecade).toEqual(beginOfNextDecadeDate);
		});
		@@ -342,3 +341,3 @@ });

		expect(beginOfYear.toISOString()).toBe(beginOfYearDate.toISOString());
		expect(beginOfYear).toEqual(beginOfYearDate);
		});
		@@ -354,3 +353,3 @@ });

		expect(endOfYear.toISOString()).toBe(endOfYearDate.toISOString());
		expect(endOfYear).toEqual(endOfYearDate);
		});
		@@ -368,4 +367,3 @@ });
		expect(yearRange).toHaveLength(2);
		expect(yearRange[0].toISOString()).toBe(beginOfYearDate.toISOString());
		expect(yearRange[1].toISOString()).toBe(endOfYearDate.toISOString());
		expect(yearRange).toEqual([beginOfYearDate, endOfYearDate]);
		});
		@@ -381,3 +379,3 @@ });

		expect(beginOfPreviousYear.toISOString()).toBe(beginOfPreviousYearDate.toISOString());
		expect(beginOfPreviousYear).toEqual(beginOfPreviousYearDate);
		});
		@@ -393,3 +391,3 @@ });

		expect(endOfPreviousYear.toISOString()).toBe(endOfPreviousYearDate.toISOString());
		expect(endOfPreviousYear).toEqual(endOfPreviousYearDate);
		});
		@@ -405,3 +403,3 @@ });

		expect(beginOfNextYear.toISOString()).toBe(beginOfNextYearDate.toISOString());
		expect(beginOfNextYear).toEqual(beginOfNextYearDate);
		});
		@@ -417,3 +415,3 @@ });

		expect(beginOfMonth.toISOString()).toBe(beginOfMonthDate.toISOString());
		expect(beginOfMonth).toEqual(beginOfMonthDate);
		});
		@@ -429,3 +427,3 @@ });

		expect(endOfMonth.toISOString()).toBe(endOfMonthDate.toISOString());
		expect(endOfMonth).toEqual(endOfMonthDate);
		});
		@@ -441,3 +439,3 @@ });

		expect(beginOfWeek.toISOString()).toBe(beginOfWeekDate.toISOString());
		expect(beginOfWeek).toEqual(beginOfWeekDate);
		});
		@@ -451,3 +449,3 @@

		expect(beginOfWeek.toISOString()).toBe(beginOfWeekDate.toISOString());
		expect(beginOfWeek).toEqual(beginOfWeekDate);
		});
		@@ -461,3 +459,3 @@

		expect(beginOfWeek.toISOString()).toBe(beginOfWeekDate.toISOString());
		expect(beginOfWeek).toEqual(beginOfWeekDate);
		});
		@@ -475,4 +473,3 @@ });
		expect(monthRange).toHaveLength(2);
		expect(monthRange[0].toISOString()).toBe(beginOfMonthDate.toISOString());
		expect(monthRange[1].toISOString()).toBe(endOfMonthDate.toISOString());
		expect(monthRange).toEqual([beginOfMonthDate, endOfMonthDate]);
		});
		@@ -488,3 +485,3 @@ });

		expect(beginOfPreviousMonth.toISOString()).toBe(beginOfPreviousMonthDate.toISOString());
		expect(beginOfPreviousMonth).toEqual(beginOfPreviousMonthDate);
		});
		@@ -500,3 +497,3 @@ });

		expect(endOfPreviousMonth.toISOString()).toBe(endOfPreviousMonthDate.toISOString());
		expect(endOfPreviousMonth).toEqual(endOfPreviousMonthDate);
		});
		@@ -512,3 +509,3 @@ });

		expect(beginOfNextMonth.toISOString()).toBe(beginOfNextMonthDate.toISOString());
		expect(beginOfNextMonth).toEqual(beginOfNextMonthDate);
		});
		@@ -524,3 +521,3 @@ });

		expect(beginOfDay.toISOString()).toBe(beginOfDayDate.toISOString());
		expect(beginOfDay).toEqual(beginOfDayDate);
		});
		@@ -536,3 +533,3 @@ });

		expect(endOfDay.toISOString()).toBe(endOfDayDate.toISOString());
		expect(endOfDay).toEqual(endOfDayDate);
		});
		@@ -550,4 +547,3 @@ });
		expect(dayRange).toHaveLength(2);
		expect(dayRange[0].toISOString()).toBe(beginOfDayDate.toISOString());
		expect(dayRange[1].toISOString()).toBe(endOfDayDate.toISOString());
		expect(dayRange).toEqual([beginOfDayDate, endOfDayDate]);
		});
		@@ -695,4 +691,3 @@ });
		expect(centuryRange).toHaveLength(2);
		expect(centuryRange[0].toISOString()).toBe(beginOfCenturyDate.toISOString());
		expect(centuryRange[1].toISOString()).toBe(endOfCenturyDate.toISOString());
		expect(centuryRange).toEqual([beginOfCenturyDate, endOfCenturyDate]);
		});
		@@ -708,4 +703,3 @@
		expect(decadeRange).toHaveLength(2);
		expect(decadeRange[0].toISOString()).toBe(beginOfDecadeDate.toISOString());
		expect(decadeRange[1].toISOString()).toBe(endOfDecadeDate.toISOString());
		expect(decadeRange).toEqual([beginOfDecadeDate, endOfDecadeDate]);
		});
		@@ -721,4 +715,3 @@
		expect(yearRange).toHaveLength(2);
		expect(yearRange[0].toISOString()).toBe(beginOfYearDate.toISOString());
		expect(yearRange[1].toISOString()).toBe(endOfYearDate.toISOString());
		expect(yearRange).toEqual([beginOfYearDate, endOfYearDate]);
		});
		@@ -734,4 +727,3 @@
		expect(monthRange).toHaveLength(2);
		expect(monthRange[0].toISOString()).toBe(beginOfMonthDate.toISOString());
		expect(monthRange[1].toISOString()).toBe(endOfMonthDate.toISOString());
		expect(monthRange).toEqual([beginOfMonthDate, endOfMonthDate]);
		});
		@@ -747,4 +739,3 @@
		expect(dayRange).toHaveLength(2);
		expect(dayRange[0].toISOString()).toBe(beginOfDayDate.toISOString());
		expect(dayRange[1].toISOString()).toBe(endOfDayDate.toISOString());
		expect(dayRange).toEqual([beginOfDayDate, endOfDayDate]);
		});
		@@ -766,3 +757,3 @@

		expect(beginOfCentury.toISOString()).toBe(beginOfCenturyDate.toISOString());
		expect(beginOfCentury).toEqual(beginOfCenturyDate);
		});
		@@ -776,3 +767,3 @@

		expect(beginOfDecade.toISOString()).toBe(beginOfDecadeDate.toISOString());
		expect(beginOfDecade).toEqual(beginOfDecadeDate);
		});
		@@ -786,3 +777,3 @@

		expect(beginOfYear.toISOString()).toBe(beginOfYearDate.toISOString());
		expect(beginOfYear).toEqual(beginOfYearDate);
		});
		@@ -796,3 +787,3 @@

		expect(monthRange.toISOString()).toBe(beginOfMonthDate.toISOString());
		expect(monthRange).toEqual(beginOfMonthDate);
		});
		@@ -806,3 +797,3 @@

		expect(beginOfDay.toISOString()).toBe(beginOfDayDate.toISOString());
		expect(beginOfDay).toEqual(beginOfDayDate);
		});
		@@ -824,3 +815,3 @@

		expect(beginOfCentury.toISOString()).toBe(beginOfCenturyDate.toISOString());
		expect(beginOfCentury).toEqual(beginOfCenturyDate);
		});
		@@ -834,3 +825,3 @@

		expect(beginOfDecade.toISOString()).toBe(beginOfDecadeDate.toISOString());
		expect(beginOfDecade).toEqual(beginOfDecadeDate);
		});
		@@ -844,3 +835,3 @@

		expect(beginOfYear.toISOString()).toBe(beginOfYearDate.toISOString());
		expect(beginOfYear).toEqual(beginOfYearDate);
		});
		@@ -854,3 +845,3 @@

		expect(monthRange.toISOString()).toBe(beginOfMonthDate.toISOString());
		expect(monthRange).toEqual(beginOfMonthDate);
		});
		@@ -872,3 +863,3 @@

		expect(beginOfCentury.toISOString()).toBe(beginOfCenturyDate.toISOString());
		expect(beginOfCentury).toEqual(beginOfCenturyDate);
		});
		@@ -882,3 +873,3 @@

		expect(beginOfDecade.toISOString()).toBe(beginOfDecadeDate.toISOString());
		expect(beginOfDecade).toEqual(beginOfDecadeDate);
		});
		@@ -892,3 +883,3 @@

		expect(beginOfYear.toISOString()).toBe(beginOfYearDate.toISOString());
		expect(beginOfYear).toEqual(beginOfYearDate);
		});
		@@ -902,3 +893,3 @@

		expect(monthRange.toISOString()).toBe(beginOfMonthDate.toISOString());
		expect(monthRange).toEqual(beginOfMonthDate);
		});
		@@ -920,3 +911,3 @@

		expect(beginOfPreviousCentury.toISOString()).toBe(beginOfPreviousCenturyDate.toISOString());
		expect(beginOfPreviousCentury).toEqual(beginOfPreviousCenturyDate);
		});
		@@ -930,3 +921,3 @@

		expect(beginOfPreviousDecade.toISOString()).toBe(beginOfPreviousDecadeDate.toISOString());
		expect(beginOfPreviousDecade).toEqual(beginOfPreviousDecadeDate);
		});
		@@ -940,3 +931,3 @@

		expect(beginOfPreviousYear.toISOString()).toBe(beginOfPreviousYearDate.toISOString());
		expect(beginOfPreviousYear).toEqual(beginOfPreviousYearDate);
		});
		@@ -958,3 +949,3 @@

		expect(beginOfNextCentury.toISOString()).toBe(beginOfNextCenturyDate.toISOString());
		expect(beginOfNextCentury).toEqual(beginOfNextCenturyDate);
		});
		@@ -968,3 +959,3 @@

		expect(beginOfNextDecade.toISOString()).toBe(beginOfNextDecadeDate.toISOString());
		expect(beginOfNextDecade).toEqual(beginOfNextDecadeDate);
		});
		@@ -978,3 +969,3 @@

		expect(beginOfNextYear.toISOString()).toBe(beginOfNextYearDate.toISOString());
		expect(beginOfNextYear).toEqual(beginOfNextYearDate);
		});
		@@ -996,3 +987,3 @@

		expect(endOfCentury.toISOString()).toBe(endOfCenturyDate.toISOString());
		expect(endOfCentury).toEqual(endOfCenturyDate);
		});
		@@ -1006,3 +997,3 @@

		expect(endOfDecade.toISOString()).toBe(endOfDecadeDate.toISOString());
		expect(endOfDecade).toEqual(endOfDecadeDate);
		});
		@@ -1016,3 +1007,3 @@

		expect(endOfYear.toISOString()).toBe(endOfYearDate.toISOString());
		expect(endOfYear).toEqual(endOfYearDate);
		});
		@@ -1026,3 +1017,3 @@

		expect(monthRange.toISOString()).toBe(endOfMonthDate.toISOString());
		expect(monthRange).toEqual(endOfMonthDate);
		});
		@@ -1036,3 +1027,3 @@

		expect(endOfDay.toISOString()).toBe(endOfDayDate.toISOString());
		expect(endOfDay).toEqual(endOfDayDate);
		});
		@@ -1054,3 +1045,3 @@

		expect(endOfCentury.toISOString()).toBe(endOfCenturyDate.toISOString());
		expect(endOfCentury).toEqual(endOfCenturyDate);
		});
		@@ -1064,3 +1055,3 @@

		expect(endOfDecade.toISOString()).toBe(endOfDecadeDate.toISOString());
		expect(endOfDecade).toEqual(endOfDecadeDate);
		});
		@@ -1074,3 +1065,3 @@

		expect(endOfYear.toISOString()).toBe(endOfYearDate.toISOString());
		expect(endOfYear).toEqual(endOfYearDate);
		});
		@@ -1084,3 +1075,3 @@

		expect(monthRange.toISOString()).toBe(endOfMonthDate.toISOString());
		expect(monthRange).toEqual(endOfMonthDate);
		});
		@@ -1102,3 +1093,3 @@

		expect(endOfPreviousCentury.toISOString()).toBe(endOfPreviousCenturyDate.toISOString());
		expect(endOfPreviousCentury).toEqual(endOfPreviousCenturyDate);
		});
		@@ -1112,3 +1103,3 @@

		expect(endOfPreviousDecade.toISOString()).toBe(endOfPreviousDecadeDate.toISOString());
		expect(endOfPreviousDecade).toEqual(endOfPreviousDecadeDate);
		});
		@@ -1122,3 +1113,3 @@

		expect(endOfPreviousYear.toISOString()).toBe(endOfPreviousYearDate.toISOString());
		expect(endOfPreviousYear).toEqual(endOfPreviousYearDate);
		});
		@@ -1133,2 +1124,22 @@

		describe('getValueRange', () => {
		it('returns an array of dates given two ordered dates', () => {
		const date1 = new Date(2018, 0, 1);
		const date2 = new Date(2018, 6, 1);

		const range = getValueRange('day', date1, date2);

		expect(range).toEqual([getBeginOfDay(date1), getEndOfDay(date2)]);
		});

		it('returns an array of dates given two unordered dates', () => {
		const date1 = new Date(2018, 6, 1);
		const date2 = new Date(2018, 0, 1);

		const range = getValueRange('day', date1, date2);

		expect(range).toEqual([getBeginOfDay(date2), getEndOfDay(date1)]);
		});
		});

		describe('getDaysInMonth', () => {
		@@ -1135,0 +1146,0 @@ it('returns proper number of days in a month', () => {

98

src/shared/__tests__/utils.js

		@@ -7,3 +7,3 @@ import {
		between,
		getTileActivityFlags,
		getTileClasses,
		} from '../utils';
		@@ -206,8 +206,9 @@

		describe('getTileActivityFlags', () => {
		describe('getTileClasses', () => {
		it('returns all flags set to false when given no value', () => {
		const result = getTileActivityFlags();
		const result = getTileClasses();

		expect(result.active).toBe(false);
		expect(result.hasActive).toBe(false);
		expect(result.includes('react-calendar__tile--active')).toBe(false);
		expect(result.includes('react-calendar__tile--hasActive')).toBe(false);
		expect(result.includes('react-calendar__tile--hover')).toBe(false);
		});
		@@ -217,3 +218,3 @@
		expect(
		() => getTileActivityFlags(new Date(2017, 0, 1)),
		() => getTileClasses({ value: new Date(2017, 0, 1) }),
		).toThrow();
		@@ -223,39 +224,78 @@ });
		it('returns active flag set to true when passed a value equal to date', () => {
		const result = getTileActivityFlags(
		new Date(2017, 0, 1), 'month', new Date(2017, 0, 1), 'month',
		);
		const result = getTileClasses({
		value: new Date(2017, 0, 1),
		valueType: 'month',
		date: new Date(2017, 0, 1),
		dateType: 'month',
		});

		expect(result.active).toBe(true);
		expect(result.hasActive).toBe(false);
		expect(result.includes('react-calendar__tile--active')).toBe(true);
		expect(result.includes('react-calendar__tile--hasActive')).toBe(false);
		expect(result.includes('react-calendar__tile--hover')).toBe(false);
		});

		it('returns active flag set to true when passed a value array equal to date array', () => {
		const result = getTileActivityFlags(
		[new Date(2017, 0, 1), new Date(2017, 0, 31)],
		undefined,
		[new Date(2017, 0, 1), new Date(2017, 0, 31)],
		undefined,
		);
		const result = getTileClasses({
		value: [new Date(2017, 0, 1), new Date(2017, 0, 31)],
		date: [new Date(2017, 0, 1), new Date(2017, 0, 31)],
		});

		expect(result.active).toBe(true);
		expect(result.hasActive).toBe(false);
		expect(result.includes('react-calendar__tile--active')).toBe(true);
		expect(result.includes('react-calendar__tile--hasActive')).toBe(false);
		expect(result.includes('react-calendar__tile--hover')).toBe(false);
		});

		it('returns hasActive flag set to true when passed a value covering date', () => {
		const result = getTileActivityFlags(
		new Date(2017, 6, 1), 'month', new Date(2017, 0, 1), 'year',
		);
		const result = getTileClasses({
		value: new Date(2017, 6, 1),
		valueType: 'month',
		date: new Date(2017, 0, 1),
		dateType: 'year',
		});

		expect(result.active).toBe(false);
		expect(result.hasActive).toBe(true);
		expect(result.includes('react-calendar__tile--active')).toBe(false);
		expect(result.includes('react-calendar__tile--hasActive')).toBe(true);
		expect(result.includes('react-calendar__tile--hover')).toBe(false);
		});

		it('returns hover flag set to true when passed a date between value and hover (1)', () => {
		const result = getTileClasses({
		value: new Date(2017, 6, 1),
		valueType: 'month',
		date: new Date(2017, 3, 1),
		dateType: 'month',
		hover: new Date(2017, 0, 1),
		});

		expect(result.includes('react-calendar__tile--active')).toBe(false);
		expect(result.includes('react-calendar__tile--hasActive')).toBe(false);
		expect(result.includes('react-calendar__tile--hover')).toBe(true);
		});

		it('returns hover flag set to true when passed a date between value and hover (2)', () => {
		const result = getTileClasses({
		value: new Date(2017, 0, 1),
		valueType: 'month',
		date: new Date(2017, 3, 1),
		dateType: 'month',
		hover: new Date(2017, 6, 1),
		});

		expect(result.includes('react-calendar__tile--active')).toBe(false);
		expect(result.includes('react-calendar__tile--hasActive')).toBe(false);
		expect(result.includes('react-calendar__tile--hover')).toBe(true);
		});

		it('returns all flags set to false when given value completely unrelated to date', () => {
		const result = getTileActivityFlags(
		new Date(2017, 6, 1), 'month', new Date(2016, 0, 1), 'month',
		);
		const result = getTileClasses({
		value: new Date(2017, 6, 1),
		valueType: 'month',
		date: new Date(2016, 0, 1),
		dateType: 'month',
		});

		expect(result.active).toBe(false);
		expect(result.hasActive).toBe(false);
		expect(result.includes('react-calendar__tile--active')).toBe(false);
		expect(result.includes('react-calendar__tile--hasActive')).toBe(false);
		expect(result.includes('react-calendar__tile--hover')).toBe(false);
		});
		});

61

src/shared/dates.js

		@@ -273,25 +273,2 @@ /* Simple getters - getting a property of a given point in time */
		/**
		* Returns an array with the beginning and the end of a given range.
		*
		* @param {String} rangeType Range type (e.g. 'day')
		* @param {Date} date Date.
		*/
		export const getRange = (rangeType, date) => {
		switch (rangeType) {
		case 'century':
		return getCenturyRange(date);
		case 'decade':
		return getDecadeRange(date);
		case 'year':
		return getYearRange(date);
		case 'month':
		return getMonthRange(date);
		case 'day':
		return getDayRange(date);
		default:
		throw new Error(`Invalid rangeType: ${rangeType}`);
		}
		};

		/**
		* Returns the beginning of a given range.
		@@ -427,2 +404,40 @@ *
		/**
		* Returns an array with the beginning and the end of a given range.
		*
		* @param {String} rangeType Range type (e.g. 'day')
		* @param {Date} date Date.
		*/
		export const getRange = (rangeType, date) => {
		switch (rangeType) {
		case 'century':
		return getCenturyRange(date);
		case 'decade':
		return getDecadeRange(date);
		case 'year':
		return getYearRange(date);
		case 'month':
		return getMonthRange(date);
		case 'day':
		return getDayRange(date);
		default:
		throw new Error(`Invalid rangeType: ${rangeType}`);
		}
		};

		/**
		* Creates a range out of two values, ensuring they are in order and covering entire period ranges.
		*
		* @param {String} rangeType Range type (e.g. 'day')
		* @param {Date} date1 First date.
		* @param {Date} date2 Second date.
		*/
		export const getValueRange = (rangeType, date1, date2) => {
		const rawNextValue = [date1, date2].sort((a, b) => a.getTime() > b.getTime());
		return [
		getBegin(rangeType, rawNextValue[0]),
		getEnd(rangeType, rawNextValue[1]),
		];
		};

		/**
		* Returns a number of days in a month of a given date.
		@@ -429,0 +444,0 @@ *

40

src/shared/propTypes.js

		@@ -79,1 +79,41 @@ import PropTypes from 'prop-types';
		};

		export const tileGroupProps = {
		activeStartDate: PropTypes.instanceOf(Date).isRequired,
		hover: PropTypes.instanceOf(Date),
		maxDate: isMaxDate,
		minDate: isMinDate,
		onClick: PropTypes.func,
		onMouseOver: PropTypes.func,
		tileClassName: PropTypes.oneOfType([
		PropTypes.func,
		isClassName,
		]),
		tileContent: PropTypes.oneOfType([
		PropTypes.func,
		PropTypes.node,
		]),
		value: isValue,
		valueType: PropTypes.string,
		};

		export const tileProps = {
		classes: PropTypes.arrayOf(PropTypes.string).isRequired,
		date: PropTypes.instanceOf(Date).isRequired,
		maxDate: isMaxDate,
		minDate: isMinDate,
		onClick: PropTypes.func,
		onMouseOver: PropTypes.func,
		style: PropTypes.objectOf(PropTypes.oneOfType([
		PropTypes.string,
		PropTypes.number,
		])),
		tileClassName: PropTypes.oneOfType([
		PropTypes.func,
		isClassName,
		]),
		tileContent: PropTypes.oneOfType([
		PropTypes.func,
		PropTypes.node,
		]),
		};

36

src/shared/utils.js

		@@ -55,8 +55,8 @@ import { getRange } from './dates';

		export const getTileActivityFlags = (value, valueType, date, dateType) => {
		const flags = {};
		export const getTileClasses = ({
		value, valueType, date, dateType, hover,
		} = {}) => {
		const classes = ['react-calendar__tile'];
		if (!value) {
		flags.active = false;
		flags.hasActive = false;
		return flags;
		return classes;
		}
		@@ -69,3 +69,3 @@
		) {
		throw new Error('getTileActivityFlags(): Unable to get tile activity flags because one or more required arguments were not passed.');
		throw new Error('getTileClasses(): Unable to get tile activity classes because one or more required arguments were not passed.');
		}
		@@ -76,6 +76,24 @@

		flags.active = isRangeWithinRange(valueRange, dateRange);
		flags.hasActive = flags.active ? false : doRangesOverlap(valueRange, dateRange);
		if (isRangeWithinRange(valueRange, dateRange)) {
		classes.push('react-calendar__tile--active');
		} else if (doRangesOverlap(valueRange, dateRange)) {
		classes.push('react-calendar__tile--hasActive');
		} else if (
		hover && (
		// Date before value
		(
		dateRange[1] < valueRange[0] &&
		isRangeWithinRange([hover, valueRange[0]], dateRange)
		) \|\|
		// Date after value
		(
		dateRange[0] > valueRange[1] &&
		isRangeWithinRange([valueRange[1], hover], dateRange)
		)
		)
		) {
		classes.push('react-calendar__tile--hover');
		}

		return flags;
		return classes;
		};

6

src/YearView.jsx

		@@ -10,8 +10,4 @@ import React, { PureComponent } from 'react';
		renderMonths() {
		const {
		...childProps
		} = this.props;

		return (
		<Months {...childProps} />
		<Months {...this.props} />
		);
		@@ -18,0 +14,0 @@ }

38

src/YearView/Month.jsx

		import React from 'react';
		import PropTypes from 'prop-types';
		import mergeClassNames from 'merge-class-names';
		@@ -11,3 +10,3 @@
		import { formatMonth } from '../shared/dateFormatter';
		import { isClassName, isMaxDate, isMinDate } from '../shared/propTypes';
		import { tileProps } from '../shared/propTypes';

		@@ -17,3 +16,11 @@ const className = 'react-calendar__year-view__months__month';
		const Month = ({
		active, date, hasActive, maxDate, minDate, onClick, tileClassName, tileContent,
		classes,
		date,
		maxDate,
		minDate,
		onClick,
		onMouseOver,
		style,
		tileClassName,
		tileContent,
		}) => (
		@@ -23,5 +30,3 @@ <button
		className,
		active && 'react-calendar__tile--active',
		hasActive && 'react-calendar__tile--hasActive',
		'react-calendar__tile',
		...classes,
		tileClassName instanceof Function ? tileClassName({ date, view: 'year' }) : tileClassName,
		@@ -34,3 +39,5 @@ )}
		onClick={onClick && (() => onClick(date))}
		style={{ flexGrow: 1 }}
		onMouseOver={onMouseOver && (() => onMouseOver(date))}
		onFocus={onMouseOver && (() => onMouseOver(date))}
		style={style}
		type="button"
		@@ -41,3 +48,3 @@ >
		</time>
		{tileContent instanceof Function ? tileContent({ date, view: 'year' }) : tileContent}
		{typeof tileContent === 'function' ? tileContent({ date, view: 'year' }) : tileContent}
		</button>
		@@ -47,18 +54,5 @@ );
		Month.propTypes = {
		active: PropTypes.bool.isRequired,
		date: PropTypes.instanceOf(Date).isRequired,
		hasActive: PropTypes.bool.isRequired,
		maxDate: isMaxDate,
		minDate: isMinDate,
		onClick: PropTypes.func,
		tileClassName: PropTypes.oneOfType([
		PropTypes.func,
		isClassName,
		]),
		tileContent: PropTypes.oneOfType([
		PropTypes.func,
		PropTypes.node,
		]),
		...tileProps,
		};

		export default Month;

39

src/YearView/Months.jsx

		import React, { PureComponent } from 'react';
		import PropTypes from 'prop-types';

		@@ -8,4 +7,4 @@ import Flex from '../Flex';
		import { getYear } from '../shared/dates';
		import { getTileActivityFlags } from '../shared/utils';
		import { isClassName, isMaxDate, isMinDate, isValue } from '../shared/propTypes';
		import { getTileClasses } from '../shared/utils';
		import { tileGroupProps } from '../shared/propTypes';

		@@ -24,14 +23,11 @@ export default class Months extends PureComponent {
		const { end, start, year } = this;

		const {
		maxDate, minDate, onClick, tileClassName, tileContent, value, valueType,
		activeStartDate,
		hover,
		value,
		valueType,
		...monthProps
		} = this.props;

		const monthProps = {
		maxDate,
		minDate,
		onClick,
		tileClassName,
		tileContent,
		};

		const months = [];
		@@ -43,3 +39,5 @@ for (let monthIndex = start; monthIndex <= end; monthIndex += 1) {
		<Month
		{...getTileActivityFlags(value, valueType, date, 'month')}
		classes={getTileClasses({
		value, valueType, date, dateType: 'month', hover,
		})}
		date={date}
		@@ -65,16 +63,3 @@ key={monthIndex}
		Months.propTypes = {
		activeStartDate: PropTypes.instanceOf(Date).isRequired,
		maxDate: isMaxDate,
		minDate: isMinDate,
		onClick: PropTypes.func,
		tileClassName: PropTypes.oneOfType([
		PropTypes.func,
		isClassName,
		]),
		tileContent: PropTypes.oneOfType([
		PropTypes.func,
		PropTypes.node,
		]),
		value: isValue,
		valueType: PropTypes.string,
		...tileGroupProps,
		};

dist/Calendar.css

Sorry, the diff of this file is not supported yet

dist/Calendar.less

Sorry, the diff of this file is not supported yet

src/Calendar.css

Sorry, the diff of this file is not supported yet

src/Calendar.less

Sorry, the diff of this file is not supported yet

		@@ -110,2 +110,3 @@ ![downloads](https://img.shields.io/npm/dt/react-calendar.svg) ![build](https://img.shields.io/travis/wojtekmaj/react-calendar.svg) ![dependencies](https://img.shields.io/david/wojtekmaj/react-calendar.svg
		\|showNeighboringMonth\|Defines whether days from previous or next month shall be rendered if the month doesn't start on the first day of the week or doesn't end on the last day of the week, respectively. Defaults to true.\|`false`\|
		\|selectRange\|Defines whether the user shall select two dates forming a range instead of just one. Note: This feature will make React-Calendar return array with two dates regardless of returnValue setting. Defaults to false.\|`true`\|
		\|showWeekNumbers\|Defines whether week numbers shall be shown at the left of MonthView or not. Defaults to false.\|`true`\|
		@@ -112,0 +113,0 @@ \|tileClassName\|Defines class name(s) that will be applied to a given calendar item (day on month view, month on year view and so on).\|<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>\|

react-calendar - npm Package Compare versions

New alerts

Fixed alerts

Improved metrics