{"_id":"@amilajack/react-timeslot-calendar","_rev":"1-7412a5aac5af00eeaec260ae0308fc81","name":"@amilajack/react-timeslot-calendar","dist-tags":{"latest":"0.2.0"},"versions":{"0.2.0":{"name":"@amilajack/react-timeslot-calendar","version":"0.2.0","description":"A calendar based on timeslots which can be set as available, occupied and so on.","main":"build/build.min.js","scripts":{"build":"npm run eslint && npm run prod","eslint":"eslint src/js/**/*.jsx","prod":"webpack --config webpack.config.js -p","analyze":"webpack --config webpack.config.js --json -p | ./node_modules/.bin/webpack-bundle-size-analyzer","dev":"webpack-dev-server --config webpack.demo.config.js --hot","demo":"webpack --config webpack.demo.config.js","test":"npm run eslint && jest --verbose -e"},"keywords":["react","calendar","timeslot","scheduling","schedule"],"repository":{"type":"git","url":"git+https://github.com/lrojas94/react-timeslot-calendar.git"},"author":{"name":"Luis Rojas & Jaime Rojas"},"license":"MIT","devDependencies":{"babel-core":"^6.24.1","babel-jest":"^20.0.3","babel-loader":"^7.0.0","babel-preset-es2015":"^6.24.1","babel-preset-react":"^6.24.1","classnames":"^2.2.5","css-loader":"^0.28.4","enzyme":"^2.8.2","eslint":"^3.19.0","eslint-plugin-jest":"^20.0.3","eslint-plugin-react":"^7.0.1","highlight.js":"^9.12.0","html-loader":"^0.4.5","jest":"^20.0.4","markdown-loader":"^2.0.0","marked":"^0.3.6","node-sass":"^4.5.3","prop-types":"^15.5.10","react":"^15.5.4","react-dom":"^15.5.4","react-test-renderer":"^15.5.4","sass-loader":"^6.0.5","sinon":"^2.3.2","style-loader":"^0.18.1","webpack":"^2.6.1","webpack-bundle-size-analyzer":"^2.7.0","webpack-dev-server":"^2.4.5"},"dependencies":{"calendarjs":"^0.1.0","moment":"^2.18.1"},"peerDependencies":{"react":"^15.5.4"},"gitHead":"1deb1d9d79028c42521aecf5c7b1435bcb46b36f","bugs":{"url":"https://github.com/lrojas94/react-timeslot-calendar/issues"},"homepage":"https://github.com/lrojas94/react-timeslot-calendar#readme","_id":"@amilajack/react-timeslot-calendar@0.2.0","_nodeVersion":"11.9.0","_npmVersion":"6.8.0","dist":{"integrity":"sha512-gbZFwj3GKhXp9B7yLyK0+/qGmJaZ6ve77CKfsp8nGHvEW0sdFUiKxBbzaeRj+BrY7LuXeRSAEnuHysys9XE22w==","shasum":"49b1156c53e4558c858371848f59b61590521b12","tarball":"https://registry.npmjs.org/@amilajack/react-timeslot-calendar/-/react-timeslot-calendar-0.2.0.tgz","fileCount":4,"unpackedSize":84882,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcaDXmCRA9TVsSAnZWagAA+5EP/21tDiM+QB4sd2NQM8+R\nDcRkiB+ZZR0JsHhW4ICP00kkRxFMGazx9uGF4Q7tpWVl8JCIWoZLbz/24Nrc\nd9C0kO9pNlUzy4pmuTSxhf+iF8Ie0tArXzYqHmpnh4qOBwk8910goBpTGXqW\nsjqcN0HuJ/g14eMPIw2Y3vZZy4Z0cKnkYhrGTwKSLb6LSwnumuNCw75LFU7Z\nz6UchgnPJzIdshq+E9SbDyz0BQ2q0Cf+6YEBymYYVy/ihXkcZv1HtzopbVfX\nOVKnJ5idvJazkk/ydlS8f9cPKh6ZH2S9CAWH1rzP6ZPZv2orIx+ya/6KMG0v\n32lAH9bWW7s1iTzyPs+HkfV7tWbtQg8MZHbhrrZut1BLVow1g4Riec3Kb9cx\nGIvkhcXVrRjP3jHJdBl6y6RH4i6qrucxYL9RjdoKi8XgTGM3PRz6O4IXcpdh\nGiiwHh5P0wX8sQqsvm8fQAppfmtXvgCpkc71lIqO4ME+OD+oMX5TZbkfymdZ\n+kDDUAzQk+vc+cr7RelixbZ3XnM50Q6SIRa9JbScAWz7fjhbDUkwb3r66dfp\n2TyOdTacHV2w6dRzMSdPS8pteXQMRnat9T3zeaXU1Ix8fYAs3JgWfQ3dHBf2\nGhsk9+qame+chjeIYT3jSrnKE0lGAsCcC6hxiU/RIRvINos1TskkFp5aZT1p\nX8if\r\n=51q5\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIBhInarVmP7KdRoQHAWLysQiMtfkMezkAYDB/AEj9InTAiA1roFmpb0SOWwFPNjqkqJj8cdhS21nczUujrin75SU0Q=="}]},"maintainers":[{"name":"amilajack","email":"amilajack@gmail.com"}],"_npmUser":{"name":"amilajack","email":"amilajack@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-timeslot-calendar_0.2.0_1550333413441_0.7939375220676856"},"_hasShrinkwrap":false}},"time":{"created":"2019-02-16T16:10:13.269Z","0.2.0":"2019-02-16T16:10:13.558Z","modified":"2022-04-04T13:48:48.668Z"},"maintainers":[{"name":"amilajack","email":"amilajack@gmail.com"}],"description":"A calendar based on timeslots which can be set as available, occupied and so on.","homepage":"https://github.com/lrojas94/react-timeslot-calendar#readme","keywords":["react","calendar","timeslot","scheduling","schedule"],"repository":{"type":"git","url":"git+https://github.com/lrojas94/react-timeslot-calendar.git"},"author":{"name":"Luis Rojas & Jaime Rojas"},"bugs":{"url":"https://github.com/lrojas94/react-timeslot-calendar/issues"},"license":"MIT","readme":"# React Timeslot Calendar\n[![Build Status](https://travis-ci.org/lrojas94/react-timeslot-calendar.svg?branch=master)](https://travis-ci.org/lrojas94/react-timeslot-calendar)\n\nA calendar component which allows users to select and reserve avaiblable timeslots so that they can setup a meeting and/or event.\n\n## Dependencies\n* React 15.4.4 and up\n* MomentJS\n* CalendarJS\n\n## Installation\n```\nnpm install --save react-timeslot-calendar\n```\n\n## Usage:\n```js\nimport moment from 'moment';\nimport ReactTimeslotCalendar from 'react-timeslot-calendar';\n\n...\nrender() {\n  return (\n    <ReactTimeslotCalendar\n      initialDate={moment().format()}\n    />\n  );\n}\n...\n```\n\n## Props\n### Required Props:\n*Note*: All format strings are read with `moment`, so any format supported by `moment` is available here.\n\n\n* **initialDate** (`String`): An ISO formatted date compatible with `momentJS`. A `moment` instance is also a valid input.\n\n### Optional\n* **timeslots** (`Object`): An array of available timeslots in the format:\n```js\nlet timeslots = [\n    ['1', '2'], // 1:00 AM - 2:00 AM\n    ['2', '3'], // 2:00 AM - 3:00 AM\n    ['4', '6'], // 4:00 AM - 6:00 AM\n    '5', // 5:00 AM\n    ['4', '6', '7', '8'], // 4:00 AM - 6:00 AM - 7:00AM - 8:00AM\n];\n```\nBy default, one hour timeslots from 12:00AM to 11:00PM are provided.\n\n* **timeslotProps** (`Object`): How the timeslots will be interpreted by the calendar. By default, the format goes as follows:\n```js\nlet timeslotProps = {\n    format: 'h', // Each element in the timeslot array is an Hour\n    showFormat: 'h:mm A', // They will be displayed as Hour:Minutes AM/PM\n}\n```\n\n* **disabledTimeslots** (`Object`): Timeslots disabled by default.  a `startDate` and `format` should be provided. The resulting date **must** match with one of the timeslots.\n```js\n// sample:\nlet disabledTimeslots = {[\n    {\n        startDate: 'April 30th 2017, 12:00:00 AM',\n        format: 'MMMM Do YYYY, h:mm:ss A',\n    },\n    {\n        startDate: 'May 1st 2017, 3:00:00 PM',\n        format: 'MMMM Do YYYY, h:mm:ss A',\n    },\n    {\n        startDate: 'May 5th 2017, 6:00:00 PM',\n        format: 'MMMM Do YYYY, h:mm:ss A',\n    },\n]}\n```\n* **maxTimeslots** (`Number`): The maximum number of timeslots a user can select. Default value is **1**.\n\n* **renderDays** (`Object`): Days of the week to be rendered in the calendar. As an example, if we wanted to remove weekends, all we have to do is pass:\n```js\nlet ignoreWeekends = {\n  'saturdays': false,\n  'sundays': false,\n};\n```\nBy default, all week days are displayed.\n\n* **startDateInputProps** (`Object`): Few props to modify how the input for `startDate` will behave. Only allows `name` and `class`.\n```js\n//sample\nlet startDateInputProps = {\n    class: 'some-random-class',\n    name: 'my-start-date-input-name',\n};\n```\n* **endDateInputProps** (`Object`): Same idea as **startDateInputProps** but instead takes effect in the `endDate` input.\n\n* **onSelectTimeslot** (`Function`): A callback which takes as parameters `selectedTimeslots (array)` and `lastSelectedTimeslot (object)`. Every timeslot object contains `startDate` and `endDate`, both of which are MomentJS objects.\n```js\nlet onSelectTimeslot = (allTimeslots, lastSelectedTimeslot) => {\n  /**\n   * All timeslot objects include `startDate` and `endDate`.\n\n   * It is important to note that if timelots provided contain a single\n   * value (e.g: timeslots = [['8'], ['9', '10']) then only `startDate` is filled up with\n   * the desired information.\n   */\n  console.log(lastSelectedTimeslot.startDate); // MomentJS object.\n\n}\n```\n### Development\nWe're open to any help and support, so feel free to open up a PR if you happen to have a great idea! Also, feel free to take up any issues (if available).\n\nFeel free to download the project and make up some changes! Dev. environment is run with `npm run dev`.\n","readmeFilename":"README.MD"}