Socket
Socket
Sign inDemoInstall

react-calendar

Package Overview
Dependencies
5
Maintainers
3
Versions
87
Alerts
File Explorer

Advanced tools

npm Scripts
License

Install Socket

Detect and block malicious and high-risk dependencies

Install

Comparing version 2.10.0 to 2.11.0

6

dist/Calendar.js

@@ -380,2 +380,3 @@ 'use strict';

return _react2.default.createElement(_YearView2.default, _extends({
formatMonth: this.props.formatMonth,
onClick: (0, _utils.mergeFunctions)(clickAction, this.props.onClickMonth)

@@ -386,2 +387,3 @@ }, commonProps));

calendarType: calendarType,
formatShortWeekday: this.props.formatShortWeekday,
onClick: (0, _utils.mergeFunctions)(clickAction, this.props.onClickDay),

@@ -410,2 +412,3 @@ onClickWeekNumber: this.props.onClickWeekNumber,

drillUp: this.drillUp,
formatMonthYear: this.props.formatMonthYear,
maxDate: this.props.maxDate,

@@ -495,2 +498,5 @@ minDate: this.props.minDate,

className: _propTypes3.isClassName,
formatMonth: _propTypes2.default.func,
formatMonthYear: _propTypes2.default.func,
formatShortWeekday: _propTypes2.default.func,
locale: _propTypes2.default.string,

@@ -497,0 +503,0 @@ maxDate: _propTypes3.isMaxDate,

5

dist/Calendar/Navigation.js

@@ -212,2 +212,3 @@ 'use strict';

date = _props7.activeStartDate,
formatMonthYear = _props7.formatMonthYear,
view = _props7.view;

@@ -224,3 +225,3 @@

case 'month':
return (0, _dateFormatter.formatMonthYear)(date);
return formatMonthYear(date);
default:

@@ -239,2 +240,3 @@ throw new Error('Invalid view: ' + view + '.');

Navigation.defaultProps = {
formatMonthYear: _dateFormatter.formatMonthYear,
next2Label: '»',

@@ -249,2 +251,3 @@ nextLabel: '›',

drillUp: _propTypes2.default.func.isRequired,
formatMonthYear: _propTypes2.default.func,
maxDate: _propTypes2.default.instanceOf(Date),

@@ -251,0 +254,0 @@ minDate: _propTypes2.default.instanceOf(Date),

20

dist/MonthView.js

@@ -58,3 +58,5 @@ 'use strict';

var calendarType = this.calendarType;
var activeStartDate = this.props.activeStartDate;
var _props = this.props,
activeStartDate = _props.activeStartDate,
formatShortWeekday = _props.formatShortWeekday;

@@ -64,3 +66,4 @@

calendarType: calendarType,
month: activeStartDate
month: activeStartDate,
formatShortWeekday: formatShortWeekday
});

@@ -79,5 +82,5 @@ }

var calendarType = this.calendarType;
var _props = this.props,
activeStartDate = _props.activeStartDate,
onClickWeekNumber = _props.onClickWeekNumber;
var _props2 = this.props,
activeStartDate = _props2.activeStartDate,
onClickWeekNumber = _props2.onClickWeekNumber;

@@ -94,5 +97,5 @@

value: function renderDays() {
var _props2 = this.props,
calendarType = _props2.calendarType,
childProps = _objectWithoutProperties(_props2, ['calendarType']);
var _props3 = this.props,
calendarType = _props3.calendarType,
childProps = _objectWithoutProperties(_props3, ['calendarType']);

@@ -157,2 +160,3 @@ return _react2.default.createElement(_Days2.default, _extends({

calendarType: _propTypes3.isCalendarType,
formatShortWeekday: _propTypes2.default.func,
maxDate: _propTypes3.isMaxDate,

@@ -159,0 +163,0 @@ minDate: _propTypes3.isMinDate,

11

dist/MonthView/Weekdays.js

@@ -50,3 +50,5 @@ 'use strict';

monthIndex = this.monthIndex;
var calendarType = this.props.calendarType;
var _props = this.props,
calendarType = _props.calendarType,
formatShortWeekday = _props.formatShortWeekday;

@@ -66,3 +68,3 @@

},
(0, _dateFormatter.formatShortWeekday)(weekdayDate).replace('.', '')
formatShortWeekday(weekdayDate).replace('.', '')
));

@@ -114,4 +116,9 @@ }

calendarType: _propTypes3.isCalendarType.isRequired,
formatShortWeekday: _propTypes2.default.func,
month: _propTypes2.default.oneOfType([_propTypes2.default.string, // Only strings that are parseable to integer
_propTypes2.default.number, _propTypes2.default.instanceOf(Date)]).isRequired
};
Weekdays.defaultProps = {
formatShortWeekday: _dateFormatter.formatShortWeekday
};

1

dist/YearView.js

@@ -64,2 +64,3 @@ 'use strict';

activeStartDate: _propTypes2.default.instanceOf(Date).isRequired,
formatMonth: _propTypes2.default.func,
maxDate: _propTypes3.isMaxDate,

@@ -66,0 +67,0 @@ minDate: _propTypes3.isMinDate,

17

dist/YearView/Month.js

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

var _propTypes = require('prop-types');
var _propTypes2 = _interopRequireDefault(_propTypes);
var _mergeClassNames = require('merge-class-names');

@@ -22,3 +26,3 @@

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

@@ -34,2 +38,3 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

date = _ref.date,
formatMonth = _ref.formatMonth,
maxDate = _ref.maxDate,

@@ -62,3 +67,3 @@ minDate = _ref.minDate,

{ dateTime: (0, _dates.getISOLocalMonth)(date) + 'T00:00:00.000' },
(0, _dateFormatter.formatMonth)(date)
formatMonth(date)
),

@@ -69,4 +74,10 @@ typeof tileContent === 'function' ? tileContent({ date: date, view: 'year' }) : tileContent

Month.propTypes = _extends({}, _propTypes.tileProps);
Month.propTypes = _extends({}, _propTypes3.tileProps, {
formatMonth: _propTypes2.default.func
});
Month.defaultProps = {
formatMonth: _dateFormatter.formatMonth
};
exports.default = Month;

18

index.d.ts

@@ -1,6 +0,5 @@

/// <reference types="react" />
declare module "react-calendar" {
type Detail = "month" | "year" | "decade" | "century"
type DateCallback = (date: Date) => void
type FormatterCallback = (date: Date) => string
type ViewCallback = (props: ViewCallbackProperties) => void

@@ -14,2 +13,5 @@

className?: string | string[];
formatMonth?: FormatterCallback;
formatMonthYear?: FormatterCallback;
formatShortWeekday?: FormatterCallback;
locale?: string;

@@ -20,4 +22,4 @@ maxDate?: Date;

minDetail?: Detail;
next2Label?: string | React.ReactElement<any>;
nextLabel?: string | React.ReactElement<any>;
next2Label?: string | JSX.Element;
nextLabel?: string | JSX.Element;
onActiveDateChange?: ViewCallback;

@@ -32,4 +34,4 @@ onChange?: DateCallback;

onDrillUp?: ViewCallback;
prev2Label?: string | React.ReactElement<any>;
prevLabel?: string | React.ReactElement<any>;
prev2Label?: string | JSX.Element;
prevLabel?: string | JSX.Element;
renderChildren?: (props: CalendarTileProperties) => JSX.Element | null; // For backwards compatibility

@@ -42,3 +44,3 @@ returnValue?: "start" | "end" | "range";

tileClassName?: string | string[] | ((props: CalendarTileProperties) => string | string[] | null);
tileContent?: React.ReactElement<any> | ((props: CalendarTileProperties) => JSX.Element | null);
tileContent?: JSX.Element | ((props: CalendarTileProperties) => JSX.Element | null);
value?: Date | Date[];

@@ -72,5 +74,5 @@ view?: Detail;

tileClassName?: string | string[] | ((props: CalendarTileProperties) => string | string[] | null);
tileContent?: React.ReactElement<any> | ((props: CalendarTileProperties) => JSX.Element | null);
tileContent?: JSX.Element | ((props: CalendarTileProperties) => JSX.Element | null);
value?: Date | Date[];
}
}

12

package.json
{
"name": "react-calendar",
"version": "2.10.0",
"version": "2.11.0",
"description": "A component for picking dates or date periods for your React application.",

@@ -14,10 +14,6 @@ "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",
"version": "npm run build && git add .",
"version-sample": "cd sample && npm version patch",
"version-test": "cd test && npm version patch"
"test-jest-coverage": "jest --coverage"
},

@@ -47,2 +43,5 @@ "jest": {

{
"name": "Baldur Árnason"
},
{
"name": "Kevin Kipp",

@@ -61,3 +60,2 @@ "email": "kevin.kipp@gmail.com"

"devDependencies": {
"@types/react": "^16.0.31",
"babel-cli": "^6.26.0",

@@ -64,0 +62,0 @@ "babel-core": "^6.26.0",

3

README.md

@@ -89,2 +89,5 @@ ![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

|className|Defines class name(s) that will be added along with "react-calendar" to the main React-Calendar `<div>` element.|<ul><li>String: `"class1 class2"`</li><li>Array of strings: `["class1", "class2 class3"]`</li></ul>|
|formatMonth|Function called to override default formatting of month names. Can be used to use your own formatting function.|`(value) => formatDate(value, '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.|`(value) => formatDate(value, 'MMMM YYYY')`|
|formatShortWeekday|Function called to override default formatting of weekday names. Can be used to use your own formatting function.|`(value) => formatDate(value, 'dd')`|
|locale|Defines which locale should be used by the calendar. Can be any [IETF language tag](https://en.wikipedia.org/wiki/IETF_language_tag). Defaults to user's browser settings.|`"hu-HU"`|

@@ -91,0 +94,0 @@ |maxDate|Defines maximum date that the user can select. Periods partially overlapped by maxDate will also be selectable, although react-calendar will ensure that no later date is selected.|Date: `new Date()`|

25

src/__tests__/Calendar.jsx

@@ -478,2 +478,27 @@ import React from 'react';

});
it('displays calendar with custom weekdays formatting', () => {
const component = mount(
<Calendar
formatShortWeekday={() => 'Weekday'}
/>
);
const monthView = component.find('.react-calendar__month-view');
const firstWeekdayTile = monthView.find('.react-calendar__month-view__weekdays__weekday').first();
expect(firstWeekdayTile.text()).toBe('Weekday');
});
it('displays calendar with custom month year navigation label', () => {
const component = mount(
<Calendar
formatMonthYear={() => 'MonthYear'}
/>
);
const navigationLabel = component.find('.react-calendar__navigation__label').first();
expect(navigationLabel.text()).toBe('MonthYear');
});
});

15

src/__tests__/YearView.jsx

@@ -125,2 +125,17 @@ import React from 'react';

});
it('displays year view with custom month formatting', () => {
const activeStartDate = new Date(2017, 0, 1);
const component = mount(
<YearView
activeStartDate={activeStartDate}
formatMonth={() => 'Month'}
/>
);
const month = component.find('.react-calendar__year-view__months__month').first();
expect(month.text()).toBe('Month');
});
});

6

src/Calendar.jsx

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

<YearView
formatMonth={this.props.formatMonth}
onClick={mergeFunctions(clickAction, this.props.onClickMonth)}

@@ -346,2 +347,3 @@ {...commonProps}

calendarType={calendarType}
formatShortWeekday={this.props.formatShortWeekday}
onClick={mergeFunctions(clickAction, this.props.onClickDay)}

@@ -371,2 +373,3 @@ onClickWeekNumber={this.props.onClickWeekNumber}

drillUp={this.drillUp}
formatMonthYear={this.props.formatMonthYear}
maxDate={this.props.maxDate}

@@ -421,2 +424,5 @@ minDate={this.props.minDate}

className: isClassName,
formatMonth: PropTypes.func,
formatMonthYear: PropTypes.func,
formatShortWeekday: PropTypes.func,
locale: PropTypes.string,

@@ -423,0 +429,0 @@ maxDate: isMaxDate,

6

src/Calendar/Navigation.jsx

@@ -15,3 +15,3 @@ import React, { PureComponent } from 'react';

} from '../shared/dates';
import { formatMonthYear } from '../shared/dateFormatter';
import { formatMonthYear as defaultFormatMonthYear } from '../shared/dateFormatter';
import { isView, isViews } from '../shared/propTypes';

@@ -78,3 +78,3 @@

get label() {
const { activeStartDate: date, view } = this.props;
const { activeStartDate: date, formatMonthYear, view } = this.props;

@@ -159,2 +159,3 @@ switch (view) {

Navigation.defaultProps = {
formatMonthYear: defaultFormatMonthYear,
next2Label: '»',

@@ -169,2 +170,3 @@ nextLabel: '›',

drillUp: PropTypes.func.isRequired,
formatMonthYear: PropTypes.func,
maxDate: PropTypes.instanceOf(Date),

@@ -171,0 +173,0 @@ minDate: PropTypes.instanceOf(Date),

4

src/MonthView.jsx

@@ -29,3 +29,3 @@ import React, { PureComponent } from 'react';

const { calendarType } = this;
const { activeStartDate } = this.props;
const { activeStartDate, formatShortWeekday } = this.props;

@@ -36,2 +36,3 @@ return (

month={activeStartDate}
formatShortWeekday={formatShortWeekday}
/>

@@ -98,2 +99,3 @@ );

calendarType: isCalendarType,
formatShortWeekday: PropTypes.func,
maxDate: isMaxDate,

@@ -100,0 +102,0 @@ minDate: isMinDate,

9

src/MonthView/Weekdays.jsx

@@ -12,3 +12,3 @@ import React, { PureComponent } from 'react';

} from '../shared/dates';
import { formatShortWeekday } from '../shared/dateFormatter';
import { formatShortWeekday as defaultFormatShortWeekday } from '../shared/dateFormatter';
import { isCalendarType } from '../shared/propTypes';

@@ -37,3 +37,3 @@

const { beginOfMonth, year, monthIndex } = this;
const { calendarType } = this.props;
const { calendarType, formatShortWeekday } = this.props;

@@ -70,2 +70,3 @@ const weekdays = [];

calendarType: isCalendarType.isRequired,
formatShortWeekday: PropTypes.func,
month: PropTypes.oneOfType([

@@ -77,1 +78,5 @@ PropTypes.string, // Only strings that are parseable to integer

};
Weekdays.defaultProps = {
formatShortWeekday: defaultFormatShortWeekday,
};

1

src/YearView.jsx

@@ -26,2 +26,3 @@ import React, { PureComponent } from 'react';

activeStartDate: PropTypes.instanceOf(Date).isRequired,
formatMonth: PropTypes.func,
maxDate: isMaxDate,

@@ -28,0 +29,0 @@ minDate: isMinDate,

9

src/YearView/Month.jsx
import React from 'react';
import PropTypes from 'prop-types';
import mergeClassNames from 'merge-class-names';

@@ -9,3 +10,3 @@

} from '../shared/dates';
import { formatMonth } from '../shared/dateFormatter';
import { formatMonth as defaultFormatMonth } from '../shared/dateFormatter';
import { tileProps } from '../shared/propTypes';

@@ -18,2 +19,3 @@

date,
formatMonth,
maxDate,

@@ -52,4 +54,9 @@ minDate,

...tileProps,
formatMonth: PropTypes.func,
};
Month.defaultProps = {
formatMonth: defaultFormatMonth,
};
export default Month;
LICENSE

Sorry, the diff of this file is not supported yet

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap

About

Packages

Stay in touch

Get open source security insights delivered straight into your inbox.

  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc