Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →
react-calendar
Advanced tools
react-calendar - npm Package Compare versions
Comparing version 1.1.0 to 2.0.0
117
package.json
| { | ||
| "name": "react-calendar", | ||
| "version": "1.1.0", | ||
| "author": "Mikhail <freiksenet@gmail.com> Novikov", | ||
| "description": "Calendar component for ReactJS", | ||
| "version": "2.0.0", | ||
| "description": "A component for picking dates or date periods for your React application.", | ||
| "main": "build/entry.js", | ||
| "es6": "src/entry.js", | ||
| "scripts": { | ||
| "build": "babel src -d build --ignore **/__tests__", | ||
| "prepublishOnly": "npm run build", | ||
| "test": "npm run test-eslint && npm run test-jest", | ||
| "test-eslint": "eslint ./src", | ||
| "test-jest": "jest", | ||
| "test-jest-coverage": "jest --coverage" | ||
| }, | ||
| "jest": { | ||
| "collectCoverageFrom": [ | ||
| "**/src/**.{js,jsx}", | ||
| "!**/src/entry.js" | ||
| ] | ||
| }, | ||
| "keywords": [ | ||
| "react", | ||
| "react-component", | ||
| "calendar", | ||
| "browser" | ||
| "date", | ||
| "date-picker", | ||
| "month-picker", | ||
| "react" | ||
| ], | ||
| "author": { | ||
| "name": "Wojciech Maj", | ||
| "email": "kontakt@wojtekmaj.pl" | ||
| }, | ||
| "license": "MIT", | ||
| "repository": { | ||
| "type": "git", | ||
| "url": "https://github.com/freiksenet/react-calendar.git" | ||
| }, | ||
| "dependencies": { | ||
| "classnames": "^2.2.3" | ||
| "lodash.once": "^4.1.1", | ||
| "prop-types": ">=15.5", | ||
| "react": ">=15.5", | ||
| "react-dom": ">=15.5" | ||
| }, | ||
| "peerDependencies": { | ||
| "moment": "^2.8.3", | ||
| "react": "15.x", | ||
| "react-dom": "15.x" | ||
| }, | ||
| "devDependencies": { | ||
| "babel-cli": "^6.5.1", | ||
| "babel-core": "^6.5.1", | ||
| "babel-eslint": "^4.1.8", | ||
| "babel-loader": "^6.2.2", | ||
| "babel-plugin-react-transform": "^2.0.0", | ||
| "babel-plugin-transform-runtime": "^6.5.0", | ||
| "babel-polyfill": "^6.5.0", | ||
| "babel-preset-es2015": "^6.5.0", | ||
| "babel-preset-react": "^6.5.0", | ||
| "babel-preset-stage-0": "^6.5.0", | ||
| "babel-runtime": "^6.5.0", | ||
| "bootstrap": "~3.2.0", | ||
| "chai": "^3.5.0", | ||
| "css-loader": "^0.23.1", | ||
| "enzyme": "^2.0.0", | ||
| "eslint-plugin-react": "^3.16.1", | ||
| "file-loader": "^0.7.2", | ||
| "isparta": "^4.0.0", | ||
| "jsx-loader": "^0.12.2", | ||
| "less": "^2.6.0", | ||
| "less-loader": "^2.2.2", | ||
| "mocha": "^2.4.5", | ||
| "moment": "^2.8.3", | ||
| "raw-loader": "^0.5.1", | ||
| "react": "15.x", | ||
| "react-dom": "15.x", | ||
| "react-addons-test-utils": "15.x", | ||
| "react-hot-loader": "^1.3.0", | ||
| "rimraf": "^2.5.2", | ||
| "style-loader": "^0.13.0", | ||
| "url-loader": "^0.5.5", | ||
| "webpack": "^1.4.3", | ||
| "webpack-dev-server": "^1.14.1" | ||
| "babel-cli": "^6.26.0", | ||
| "babel-core": "^6.26.0", | ||
| "babel-eslint": "^8.0.0", | ||
| "babel-plugin-transform-class-properties": "^6.24.1", | ||
| "babel-plugin-transform-es2015-modules-commonjs": "^6.26.0", | ||
| "babel-plugin-transform-runtime": "^6.23.0", | ||
| "babel-preset-es2015": "^6.24.1", | ||
| "babel-preset-react": "^6.24.1", | ||
| "babel-preset-stage-2": "^6.24.1", | ||
| "enzyme": "^2.9.1", | ||
| "eslint": "^3.19.0", | ||
| "eslint-config-airbnb": "^15.1.0", | ||
| "eslint-plugin-class-property": "^1.0.6", | ||
| "eslint-plugin-import": "^2.7.0", | ||
| "eslint-plugin-jsx-a11y": "^5.1.1", | ||
| "eslint-plugin-react": "^7.3.0", | ||
| "jest": "^21.1.0", | ||
| "react-test-renderer": "^15.6.1" | ||
| }, | ||
| "main": "./dist/react-calendar.js", | ||
| "scripts": { | ||
| "clean": "rimraf build dist", | ||
| "test": "npm run umd && NODE_ENV=test mocha", | ||
| "test:watch": "NODE_ENV=test mocha --watch", | ||
| "prepublish": "webpack", | ||
| "umd": "REACT_CALENDAR_WEBPACK=umd webpack", | ||
| "umd-min": "REACT_CALENDAR_WEBPACK=umd_min webpack", | ||
| "demo": "REACT_CALENDAR_WEBPACK=umd webpack --entry ./demo.js", | ||
| "start": "REACT_CALENDAR_WEBPACK=server webpack-dev-server -d --entry ./demo.js --hot --progress --colors --inline", | ||
| "gh-pages": "./scripts/gh-pages.sh" | ||
| "files": [ | ||
| "LICENSE", | ||
| "README.md", | ||
| "build/", | ||
| "src/" | ||
| ], | ||
| "repository": { | ||
| "type": "git", | ||
| "url": "https://github.com/wojtekmaj/react-calendar.git" | ||
| } | ||
| } |
207
README.md
@@ -1,117 +0,138 @@ | ||
| react-calendar | ||
| ============== | ||
| [![NPM version][npm-image]][npm-url] | ||
| [![Downloads][downloads-image]][downloads-url] | ||
|     [](https://github.com/facebook/jest) | ||
| Calendars for React v15. | ||
| # React-Calendar | ||
| Ultimate date picker for your React application. | ||
| Not just calendar component, but a modular toolkit for building everything | ||
| related to calendars in React, such as Datepickers. | ||
| ## tl;dr | ||
| * Install by executing `npm install react-calendar` or `yarn add react-calendar`. | ||
| * Import by adding `import Calendar from 'react-calendar'`. | ||
| * Import styles by adding `import 'react-calendar/build/Calendar.less'` or style the calendar on your own. | ||
| * Use by adding `<Calendar />`. Use `onChange` prop for getting new values. | ||
| In early alpha stage, documentation and features will arrive. | ||
| ## Demo | ||
| Example | ||
| ------- | ||
| Minimal demo page is included in sample directory. | ||
| ``` | ||
| npm install | ||
| npm run | ||
| ``` | ||
| [Online demo](http://projekty.wojtekmaj.pl/react-calendar/) is also available! | ||
| One year calendar ([Demo](http://freiksenet.github.io/react-calendar/)): | ||
| ## Getting started | ||
| ```html | ||
| <Calendar startDate={ moment() } | ||
| endDate={ moment().endOf('year') } <!-- Base calendar compoment --> | ||
| weekNumbers={true} | ||
| size={12} | ||
| mods={ | ||
| [ <!-- Pass modifier objects to change rendering --> | ||
| { | ||
| date: moment(), | ||
| classNames: [ 'current' ], | ||
| component: [ 'day', 'month', 'week' ] <!-- This shows the current day, week, and month. --> | ||
| } | ||
| ] | ||
| } | ||
| ### Compatibility | ||
| /> | ||
| ``` | ||
| React-Calendar uses modern web technologies. That's why it's so fast, lightweight and easy to style. This, however, comes at a cost of supporting only modern browsers. | ||
| Each component can be used separately ~~AND passed to other components to modify | ||
| rendering.~~ We have deprecated this in favor of passing a more flexible modifier object. | ||
| |Browser|Minimum supported version| | ||
| |----|----| | ||
| |Google Chrome|24| | ||
| |Mozilla Firefox|29| | ||
| |Microsoft Edge|12| | ||
| |Apple Safari|10| | ||
| |Apple Safari (iOS)|10.2| | ||
| |Opera|15| | ||
| |Internet Explorer|11| | ||
| |Samsung Internet|4| | ||
| ```html | ||
| <Month date={moment()} /> | ||
| ``` | ||
| #### Legacy browsers | ||
| If a modifier is passed without date it modifies *all* components of this type in | ||
| the tree. Useful, for example, for passing callbacks. | ||
| If you need to support legacy browsers like Internet Explorer 10, you will need to use [Intl.js](https://github.com/andyearnshaw/Intl.js/) or another Intl polyfill along with React-Calendar. | ||
| ```html | ||
| <Calendar firstMonth={1} | ||
| date={moment("2014-01-01")} | ||
| weekNumbers={true} | ||
| size={12} | ||
| startDate={ moment() } | ||
| endDate={ moment().endOf('year') } <!-- Base calendar compoment --> | ||
| weekNumbers={true} | ||
| size={12} | ||
| mods={ | ||
| [ | ||
| { | ||
| component: [ 'day' ], | ||
| events: { | ||
| onClick: (date) => alert(date) | ||
| } | ||
| } | ||
| ] | ||
| } /> | ||
| ``` | ||
| ### Installation | ||
| Events | ||
| ------ | ||
| Add React-Calendar to your project by executing `npm install react-calendar` or `yarn add react-calendar`. | ||
| All mouse and touch events are supported on all components with react style | ||
| onCamelCase props (eg. onClick). Event handlers receives two arguments - | ||
| date in moment.js format and the original react event. | ||
| ### Usage | ||
| Styling | ||
| ------- | ||
| Here's an example of basic usage: | ||
| There is no style by default, but an example theme using bootstrap is included | ||
| in less/bootstrap-theme.less. | ||
| ```js | ||
| import React, { Component } from 'react'; | ||
| import Calendar from 'react-calendar'; | ||
| import 'react-calendar/build/Calendar.less'; | ||
| react-calendar uses SuitCSS style (a variant of BEM) to make default class hierarchy, | ||
| if you want to add a class that is separate from that hierarchy just pass `classes` | ||
| prop to any component. `classes` is an object with keys as class names and values as | ||
| boolean-like values (this will be probably changed to just passing array of classes in | ||
| future API). If you want to add SuitCSS modifier classes (eg `rc-Day--current`), | ||
| pass similar object via `modifiers` prop (again this will probably become an array | ||
| in next version of API). | ||
| class MyApp extends Component { | ||
| state = { | ||
| date: new Date(), | ||
| } | ||
| For example: | ||
| onChange = date => this.setState({ date }) | ||
| ```html | ||
| <Day date={moment()} mods={[{bar: true}]} /> | ||
| render() { | ||
| return ( | ||
| <div> | ||
| <Calendar | ||
| onChange={this.onChange} | ||
| /> | ||
| </div> | ||
| ); | ||
| } | ||
| } | ||
| ``` | ||
| will yield the following classes: `"rc-Day rc-Day--bar".` | ||
| ## User guide | ||
| TODO | ||
| ---- | ||
| ### Calendar | ||
| - [ ] Merging of modifiers and classe | ||
| - [ ] Docs | ||
| - [ ] Calendar should be able to page | ||
| - [ ] A component for Year - Calendar is supposed to be a 'controller' component for pageable stuff | ||
| - [ ] A component that is on lower level that Day - for events. | ||
| - [x] ~~Utils to create range of components for modifying multiple components easier~~ | ||
| - [ ] An example datepicker component using react-calendar | ||
| - [x] ~~Basic unit tests~~ | ||
| - [ ] More Tests! | ||
| Displays a complete, interactive calendar. | ||
| [npm-image]: https://img.shields.io/npm/v/react-calendar.svg?style=flat-square | ||
| [npm-url]: https://npmjs.org/package/react-calendar | ||
| [downloads-image]: https://img.shields.io/npm/dm/react-calendar.svg?style=flat-square | ||
| [downloads-url]: https://npmjs.org/package/react-calendar | ||
| #### Props | ||
| |Prop name|Description|Example values| | ||
| |----|----|----| | ||
| |calendarType|Defines which type of calendar should be used. Can be "US" or "ISO 8601". Defaults to "US" for "en-US" locale, "ISO 8601" to all the others.|`"ISO 8601"`| | ||
| |locale|Defines which locale should be used by the calendar. Can be any BCP 47 language tag. Defaults to user's browser settings.|`"hu-HU"`| | ||
| |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()`| | ||
| |maxDetail|Defines the most detailed view that the user shall see. View defined here also becomes the one on which clicking an item will select a date and pass it to onChange. Can be "month", "year", "decade" or "century". Defaults to "month".|`"month"`| | ||
| |minDate|Defines minimum date that the user can select. Periods partially overlapped by minDate will also be selectable, although react-calendar will ensure that no earlier date is selected.|Date: `new Date()`| | ||
| |minDetail|Defines the least detailed view that the user shall see. Can be "month", "year", "decade" or "century". Defaults to "century".|`"century"`| | ||
| |nextLabel|Defines the content of the "next" button on the navigation pane. Defaults to "›".|<ul><li>String: `"›"`</li><li>React element: `<NextIcon />`</li></ul>| | ||
| |next2Label|Defines the content of the "next on higher level" button on the navigation pane. Defaults to "»". |<ul><li>String: `"»"`</li><li>React element: `<DoubleNextIcon />`</li></ul>| | ||
| |onChange|Function called when the user clicks an item (day on month view, month on year view and so on) on the most detailed view available.|`(value) => alert('New date is: ', value)`| | ||
| |onClickDay|Function called when the user clicks a day.|`(value) => alert('Clicked day: ', value)`| | ||
| |onClickDecade|Function called when the user clicks a decade.|`(value) => alert('Clicked decade: ', value)`| | ||
| |onClickMonth|Function called when the user clicks a month.|`(value) => alert('Clicked month: ', value)`| | ||
| |onClickYear|Function called when the user clicks a year.|`(value) => alert('Clicked year: ', value)`| | ||
| |prevLabel|Defines the content of the "previous" button on the navigation pane. Defaults to "‹".|<ul><li>String: `"‹"`</li><li>React element: `<PrevousIcon />`</li></ul>| | ||
| |prev2Label|Defines the content of the "previous on higher level" button on the navigation pane. Defaults to "«".|<ul><li>String: `"«"`</li><li>React element: `<DoublePreviousIcon />`</li></ul>| | ||
| |renderChildren|Allows to render custom content within a given item (day on month view, month on year view and so on).|`({ date, view }) => view === 'month' && date.getDay() === 0 ? <p>It's Sunday!</p> : null`| | ||
| |returnValue|Defines which dates shall be passed by the calendar to the onChange function and onClick{Period} functions. Can be "start", "end" or "range". The latter will cause an array with start and end values to be passed. Defaults to "start".|`"range"`| | ||
| |showNavigation|Defines whether a navigation bar with arrows and title shall be rendered. Defaults to true.|`false`| | ||
| |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`| | ||
| |showWeekNumbers|Defines whether week numbers shall be shown at the left of MonthView or not. Defaults to false.|`true`| | ||
| |value|Defines the value of the calendar.|<ul><li>Date: `new Date()`</li><li>An array of dates: `[new Date(2017, 0, 1), new Date(2017, 7, 1)]`| | ||
| |view|Determines which calendar view shall be opened initially. Does not disable navigation. Can be "month", "year", "decade" or "century". Defaults to the most detailed view allowed.|`"year"`| | ||
| ### MonthView, YearView, DecadeView, CenturyView | ||
| Displays a given month, year, decade and a century, respecitvely. | ||
| #### Props | ||
| |Prop name|Description|Example values| | ||
| |----|----|----| | ||
| |activeStartDate|The beginning of a period that shall be displayed.|`new Date(2017, 0, 1)`| | ||
| |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()`| | ||
| |minDate|Defines minimum date that the user can select. Periods partially overlapped by minDate will also be selectable, although react-calendar will ensure that no earlier date is selected.|Date: `new Date()`| | ||
| |onClick|Function called when the user clicks an item (day on month view, month on year view and so on).|`(value) => alert('New date is: ', value)`| | ||
| |renderChildren|Allows to render custom content within a given item (day on month view, month on year view and so on). Note: For tiles with custom content you might want to set fixed height of `react-calendar__tile` to ensure consistent layout.|`({ date, view }) => view === 'month' && date.getDay() === 0 ? <p>It's Sunday!</p> : null`| | ||
| |value|Defines the value of the calendar.|<ul><li>Date: `new Date()`</li><li>An array of dates: `[new Date(2017, 0, 1), new Date(2017, 7, 1)]`| | ||
| ## License | ||
| The MIT License. | ||
| ## Author | ||
| <table> | ||
| <tr> | ||
| <td> | ||
| <img src="https://github.com/wojtekmaj.png?s=100" width="100"> | ||
| </td> | ||
| <td> | ||
| Wojciech Maj<br /> | ||
| <a href="mailto:kontakt@wojtekmaj.pl">kontakt@wojtekmaj.pl</a><br /> | ||
| <a href="http://wojtekmaj.pl">http://wojtekmaj.pl</a> | ||
| </td> | ||
| </tr> | ||
| </table> |
Sorry, the diff of this file is not supported yet
New alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Major refactor
Supply chain riskPackage has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.
Found 1 instance in 1 package
New author
Supply chain riskA new npm collaborator published a version of the package for the first time. New collaborators are usually benign additions to a project, but do indicate a change to the security surface area of a package.
Found 1 instance in 1 package
Fixed alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Environment variable access
Supply chain riskPackage accesses environment variables, which may be a sign of credential stuffing or data theft.
Found 1 instance in 1 package
Improved metrics
- Total package byte prevSize
- increased by294.67%
221283
- Dev dependency count
- decreased by-45.45%
18
- Number of package files
- increased by114.81%
58
- Lines of code
- increased by337.18%
5714
- Number of lines in readme file
- increased by17.8%
139
- Number of low supply chain risk alerts
- decreased by-100%
0
Worsened metrics
- Number of medium supply chain risk alerts
- increased byInfinity%
2
Dependency changes
+ Addedlodash.once@^4.1.1
+ Addedprop-types@>=15.5
+ Addedreact@>=15.5
+ Addedreact-dom@>=15.5
+ Addedlodash.once@4.1.1(transitive)
+ Addedreact@18.3.1(transitive)
+ Addedreact-dom@18.3.1(transitive)
+ Addedscheduler@0.23.2(transitive)
- Removedclassnames@^2.2.3
- Removedasap@2.0.6(transitive)
- Removedclassnames@2.5.1(transitive)
- Removedcore-js@1.2.7(transitive)
- Removedcreate-react-class@15.7.0(transitive)
- Removedencoding@0.1.13(transitive)
- Removedfbjs@0.8.18(transitive)
- Removediconv-lite@0.6.3(transitive)
- Removedis-stream@1.1.0(transitive)
- Removedisomorphic-fetch@2.2.1(transitive)
- Removedmoment@2.30.1(transitive)
- Removednode-fetch@1.7.3(transitive)
- Removedpromise@7.3.1(transitive)
- Removedreact@15.7.0(transitive)
- Removedreact-dom@15.7.0(transitive)
- Removedsafer-buffer@2.1.2(transitive)
- Removedsetimmediate@1.0.5(transitive)
- Removedua-parser-js@0.7.39(transitive)
- Removedwhatwg-fetch@3.6.20(transitive)