{"_id":"@3ddie/react-native-calendars","_rev":"5-a29b6412199a3efe310b6245eb221b7e","name":"@3ddie/react-native-calendars","dist-tags":{"latest":"1.23.1"},"versions":{"1.22.0":{"name":"@3ddie/react-native-calendars","version":"1.22.0","author":{"name":"Wix.com"},"license":"MIT","_id":"@3ddie/react-native-calendars@1.22.0","maintainers":[{"name":"3dd","email":"ifuark@gmail.com"}],"homepage":"https://github.com/3ddie/react-native-calendars#readme","bugs":{"url":"https://github.com/3ddie/react-native-calendars/issues"},"dist":{"shasum":"b96d5bba7b504b2012cd3973c8c363a93e500f1f","tarball":"https://registry.npmjs.org/@3ddie/react-native-calendars/-/react-native-calendars-1.22.0.tgz","fileCount":55,"integrity":"sha512-aYq4HTZuV2LaezcQfLGTsUI5Gq8y4d9KkomXROWUiech2Qpdna/gCS9PJxWPQY/T52WoX3SMjk4FbHRvllyNew==","signatures":[{"sig":"MEUCIQDH0HFiJ+QThKxolDTg2XScMfqbUNvtcGJHxY7iOOdoXgIgb2ogr96ZGVTKXieFw9SH/2vM+PPMet7Mo8MWSdSNdvU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":114160,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcBoRuCRA9TVsSAnZWagAAclAP/1s5Ic2nEedFc9t0O1/D\nF4lhgGaQlPXDMVkwDKgFXekHTqj3g4ilef9beXH30a9g+pUBMmZ64Lz9WIMZ\nnz4cpOEYPXehksv7779iuAat3m7j/582VmBtIf1+1iYySspDdc4L1hrs+8AV\nR7Hp9t+W51c6sRVYErmsC+wa7j/WjjYac3yZBtfGEMqX4hDpfdtGQD00aB/u\n1RglipuHilypn+nQf0wliMIwdoM+ZB5Hu9TfEvXbQ/MCgn+AiZu+x0dEfnwt\nrWbcSZrHAkWbFYGIvETWM+OZMUmM+UWRAZzfa0QgEVHDA+9DFQ0030qRvhlG\nE9epUZbYQQiGu/f9R+w7zYpwoN2X6Ny++wXPW2g2jVZ64WMiejD+y1Z5G5fD\npM/em2pK1BokhvfQSIkm3xqoQI55+tdbxWaG32IwxEoluMCQTLI0urB0ykZ2\njRcHIoywhOHJ0l/HQylgfhGIe1x8+78qkziiDY3TESlAM40fu0u8vX71vXZT\nUnY2PAu4mgUHclacsmWGtVhhXzmy05GdIJEJ0mCr+AgNuNfTmmK1BujXjhKW\nryNV6IjdRKZ1MwT3m0gC9yaR4+RifQ6n6/g5FWHGHbAzzUAVtoho1uI1CUyJ\n+MX9t9ApEYXtOkUOJkWH5n7gygJb8XFI5T9xmjdSXmty9Nfd3EEW9hfQoWVm\nN/+b\r\n=5uoa\r\n-----END PGP SIGNATURE-----\r\n"},"main":"src/index.js","gitHead":"d8a99e0626d6bfc379316e43df30c3dcbcd28ec7","scripts":{"lint":"eslint src/ example/src","test":"jasmine src/*.spec.js && npm run lint"},"_npmUser":{"name":"3dd","email":"ifuark@gmail.com"},"repository":{"url":"git+https://github.com/3ddie/react-native-calendars.git","type":"git"},"_npmVersion":"6.4.1","description":"React Native Calendar Components","directories":{},"_nodeVersion":"8.9.4","dependencies":{"xdate":"^0.8.0","lodash.get":"^4.4.2","prop-types":"^15.5.10","lodash.isequal":"^4.5.0"},"publishConfig":{"registry":"https://registry.npmjs.org/"},"_hasShrinkwrap":false,"devDependencies":{"react":"16.6.0-alpha.8af6728","eslint":"^3.19.0","jasmine":"^2.5.2","babel-eslint":"^7.2.3","react-native":"0.57.4","eslint-plugin-react":"^7.0.0"},"_npmOperationalInternal":{"tmp":"tmp/react-native-calendars_1.22.0_1543930989878_0.8855711000759825","host":"s3://npm-registry-packages"}},"1.22.1":{"name":"@3ddie/react-native-calendars","version":"1.22.1","author":{"name":"Wix.com"},"license":"MIT","_id":"@3ddie/react-native-calendars@1.22.1","maintainers":[{"name":"3dd","email":"ifuark@gmail.com"}],"homepage":"https://github.com/3ddie/react-native-calendars#readme","bugs":{"url":"https://github.com/3ddie/react-native-calendars/issues"},"dist":{"shasum":"52cfac1a47095827cab59bb289551a970b0ea5ce","tarball":"https://registry.npmjs.org/@3ddie/react-native-calendars/-/react-native-calendars-1.22.1.tgz","fileCount":55,"integrity":"sha512-caRSa526Q3NjZc8zQqoWunQnCt06Xy7igV7xIL7G+C11iSJVDBHSJX5RKMA/kgpZXWU5DkEIt+ETZIlo0fcVKQ==","signatures":[{"sig":"MEUCIQCNP7OOHiT1+2hDoKUtLy3p6dS5TFMdMLa+A4exJzP6wwIgdrU7oYREqMj2yF4dGfJtpdW15oBirrZJ0asfCEo5A+w=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":114139,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcBou+CRA9TVsSAnZWagAAnvIP/ipjGgD18W+Pjq560sdt\njdCIxafoWYMIsZc0w2tDcHQow3mg7NE841D37Zfdq4pFHMs37qCzzqjui3Vq\nNyXxl6cTkM/gedP0aigd5Td9pNkfNoRk2qkRSDycrR4u1UQA/m5ntQlJFTXx\nrXcFsqFpLwLY0ZyhxxsevdTew8EzwWHB9XRpQVCdNdqEKlu3A2zpwT9sbyP8\njY3nUoIw7aQHW1WmcuItxGpdEx+edLBMfTCtjl/3TXC+6yK9eMxMxLRvbgmc\nxFtHoKTv0e3YUKcFRoeynL+PRb4e8DiOx2YwpATNQvKTK9C9nrcX/LfNA2sG\nvv7StRpJG9ej3hfn7WV+l5yrMw/+2/v6pA3rmSsnZElH9G2TYGBGmH3HV9k5\npUlpN8wZQNUZ8IfQJvw8aLcJMekS7r2VN75FPlKutomuPTGeKA4EPAJrhI2v\n+dKOOznAIDTseJiMVGu/arhSHhAWN/tDs2XARZUaoMmEsdG0X5SV4ep89BeK\noo6FYnqbbvyBjOYqIGCDpViYXPVGBzB5HX8PZRzVpdIIddy2R/NtfqKc4XHD\nbGMC42QaqlLwhzaJ7YDdB6Xc7R1JBTP11hwQnffFBUUQt5oLrrvBPENNy/bL\nwFG+TXlGmrZZMXttG4cFQ3OXFy2/rvlrY1nEzhspCwlCcj+gENxx3ko25kC6\ns/39\r\n=5uxW\r\n-----END PGP SIGNATURE-----\r\n"},"main":"src/index.js","gitHead":"679e29050e80f161cdf6a8deb11fad426e53066a","scripts":{"lint":"eslint src/ example/src","test":"jasmine src/*.spec.js && npm run lint"},"_npmUser":{"name":"3dd","email":"ifuark@gmail.com"},"repository":{"url":"git+https://github.com/3ddie/react-native-calendars.git","type":"git"},"_npmVersion":"6.4.1","description":"React Native Calendar Components","directories":{},"_nodeVersion":"8.9.4","dependencies":{"xdate":"^0.8.0","lodash.get":"^4.4.2","prop-types":"^15.5.10","lodash.isequal":"^4.5.0"},"publishConfig":{"registry":"https://registry.npmjs.org/"},"_hasShrinkwrap":false,"devDependencies":{"react":"16.6.0-alpha.8af6728","eslint":"^3.19.0","jasmine":"^2.5.2","babel-eslint":"^7.2.3","react-native":"0.57.4","eslint-plugin-react":"^7.0.0"},"_npmOperationalInternal":{"tmp":"tmp/react-native-calendars_1.22.1_1543932862124_0.4589402256657189","host":"s3://npm-registry-packages"}},"1.22.3":{"name":"@3ddie/react-native-calendars","version":"1.22.3","author":{"name":"Wix.com"},"license":"MIT","_id":"@3ddie/react-native-calendars@1.22.3","maintainers":[{"name":"3dd","email":"ifuark@gmail.com"}],"homepage":"https://github.com/3ddie/react-native-calendars#readme","bugs":{"url":"https://github.com/3ddie/react-native-calendars/issues"},"dist":{"shasum":"80025c2126c000c43bc5b4b0ffa97492ea10226b","tarball":"https://registry.npmjs.org/@3ddie/react-native-calendars/-/react-native-calendars-1.22.3.tgz","fileCount":55,"integrity":"sha512-0sV6Iqx/O53oEe6ltzc+wVUo/ZYI/ZXuq9kJq72JQrUn6RUzv7dgh8qVqHmwlRNCyE8gHLLknViaLPDs5VV6gg==","signatures":[{"sig":"MEQCIGP/JLZKk+hh4uv+gykIek+xgnDGWDTJ7OESEuUF1rmRAiAA3xw7r6wWCopnbHo2mlCfYjkNKZAaa2OtkJasEzu6Ew==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":114244,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcb8EjCRA9TVsSAnZWagAAh5AP/3K1qpp/jcCc7rdwp7wE\nW3Q9bT6RwXDohhWdgYtsYv65Vh+r8Nuk3rW0Vwfzgij3ZHG/GyRi+QAk4bCZ\npc8jjkEv31SioD7YR4uXHstch4cd4/s9RGQL/GTKWbTxtk7tGBi2fN2F1Wc/\n17eAgwAp46Vwi93SHZRTFbU+f0aeRuO2X2YGmPudk+rEhSYZ9zgt08K5/sy7\nvJnVpNR4d1A1+kHVE6gQEnK1ZXpCeS/8eGdc+b29JjV3sQdikR2yeVqIWGCJ\nXJOe40Qbetaxuylys7fIQjssb/nXJCNdTLbHQiEw31EHr6SCIwj/uTemWeaM\nty8ueQmEqHMz4HGoTsR7Dwv/BR5RpIVGJwEb7bjskksMShEhUuqqer2akYlG\nBeAqiix+iw1+wlAs4Ou21Ty1OTgKaQmsmUD/TEhI1sGgwtsahX4oAG/ff77k\nyVUzCHYu4FIcy/yLd7ujxyKfVVU5njUwU2eokHIfgw1yykYpVDi0dFBKISow\nu/BsQJ2evHgyDrlAvxtzuaq9LfbMsgj1/UrK2CxuTmPUhUdMzwKrQdKS95DO\nnrkUaBCHLgAQbzniYeMs2Cl38nGs6j8v0cm+H9ttaOoUSr2co53MlU0fa7Ud\nQPSi+ZQDY+6XGksApiJLo7hENGCveQz21NQNFxZ20miep2GJ6nLTD2Ecgp7w\n7Kcj\r\n=PeAu\r\n-----END PGP SIGNATURE-----\r\n"},"main":"src/index.js","gitHead":"b60b777f9bdd678a8c0543c0c9f2754866c6b07b","scripts":{"lint":"eslint src/ example/src","test":"jasmine src/*.spec.js && npm run lint"},"_npmUser":{"name":"3dd","email":"ifuark@gmail.com"},"repository":{"url":"git+https://github.com/3ddie/react-native-calendars.git","type":"git"},"_npmVersion":"6.4.1","description":"React Native Calendar Components","directories":{},"_nodeVersion":"8.9.4","dependencies":{"xdate":"^0.8.0","lodash.get":"^4.4.2","prop-types":"^15.5.10","lodash.isequal":"^4.5.0"},"publishConfig":{"registry":"https://registry.npmjs.org/"},"_hasShrinkwrap":false,"devDependencies":{"react":"16.6.0-alpha.8af6728","eslint":"^3.19.0","jasmine":"^2.5.2","babel-eslint":"^7.2.3","react-native":"0.57.4","eslint-plugin-react":"^7.0.0"},"_npmOperationalInternal":{"tmp":"tmp/react-native-calendars_1.22.3_1550827811207_0.9722356227224258","host":"s3://npm-registry-packages"}},"1.23.1":{"name":"@3ddie/react-native-calendars","version":"1.23.1","main":"src/index.js","description":"React Native Calendar Components","scripts":{"test":"jasmine src/*.spec.js && npm run lint","lint":"eslint src/ example/src"},"repository":{"type":"git","url":"git+https://github.com/3ddie/react-native-calendars.git"},"publishConfig":{"registry":"https://registry.npmjs.org/"},"author":{"name":"Wix.com"},"license":"MIT","dependencies":{"lodash.get":"^4.4.2","lodash.isequal":"^4.5.0","xdate":"^0.8.0"},"devDependencies":{"babel-eslint":"^7.2.3","eslint":"^3.19.0","eslint-plugin-react":"^7.0.0","jasmine":"^2.5.2","react":"16.6.0-alpha.8af6728","react-native":"0.57.4"},"_id":"@3ddie/react-native-calendars@1.23.1","gitHead":"38403445653b1af28211e97e60b415dd1de6df83","bugs":{"url":"https://github.com/3ddie/react-native-calendars/issues"},"homepage":"https://github.com/3ddie/react-native-calendars#readme","_nodeVersion":"20.19.0","_npmVersion":"10.8.2","dist":{"integrity":"sha512-jcmOig8B2ri54t6XUY7dRkeU8F4DdAXsjESsHU5AMdEvXiaInbXXdm0keEe1kaPC+7GBILX12dpbR3fIY0Kp0Q==","shasum":"4e19a1ad38bddcbe7ae4c2b9861e49bdf0176069","tarball":"https://registry.npmjs.org/@3ddie/react-native-calendars/-/react-native-calendars-1.23.1.tgz","fileCount":55,"unpackedSize":115728,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEQCIE8QpavsD4p9JQR+KwSt6gOJ8Ofj3VjPISgf8sEaBCkQAiAZpO39I/CgmFZxP0/zaDBTNf9rxG0doILEI4RkUsrY1A=="}]},"_npmUser":{"name":"3dd","email":"ifuark@gmail.com"},"directories":{},"maintainers":[{"name":"3dd","email":"ifuark@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/react-native-calendars_1.23.1_1763719752087_0.7105748390438364"},"_hasShrinkwrap":false}},"time":{"created":"2018-12-04T13:43:09.695Z","modified":"2025-11-21T10:09:12.464Z","1.22.0":"2018-12-04T13:43:09.982Z","1.22.1":"2018-12-04T14:14:22.251Z","1.22.3":"2019-02-22T09:30:11.324Z","1.23.1":"2025-11-21T10:09:12.277Z"},"bugs":{"url":"https://github.com/3ddie/react-native-calendars/issues"},"author":{"name":"Wix.com"},"license":"MIT","homepage":"https://github.com/3ddie/react-native-calendars#readme","repository":{"type":"git","url":"git+https://github.com/3ddie/react-native-calendars.git"},"description":"React Native Calendar Components","maintainers":[{"name":"3dd","email":"ifuark@gmail.com"}],"readme":"# React Native Calendars ✨ 🗓️ 📆\n\nForked version\n\n[![Version](https://img.shields.io/npm/v/react-native-calendars.svg)](https://www.npmjs.com/package/react-native-calendars)\n[![Build Status](https://travis-ci.org/wix/react-native-calendars.svg?branch=master)](https://travis-ci.org/wix/react-native-calendars)\n\nThis module includes various customizable react native calendar components.\n\nThe package is both **Android** and **iOS** compatible.\n\n## Try it out\n\nYou can run example module by performing these steps:\n\n```\n$ git clone git@github.com:wix/react-native-calendars.git\n$ cd react-native-calendars/example\n$ npm install\n$ react-native run-ios\n```\n\nYou can check example screens source code in [example module screens](https://github.com/wix-private/wix-react-native-calendar/tree/master/example/src/screens)\n\nThis project is compatible with Expo/CRNA (without ejecting), and the examples have been [published on Expo](https://expo.io/@community/react-native-calendars-example)\n\n## Installation\n\n```\n$ npm install --save react-native-calendars\n```\n\nThe solution is implemented in JavaScript so no native module linking is required.\n\n## Usage\n\n`import {` [Calendar](#calendar), [CalendarList](#calendarlist), [Agenda](#agenda) `} from 'react-native-calendars';`\n\nAll parameters for components are optional. By default the month of current local date will be displayed.\n\nEvent handler callbacks are called with `calendar objects` like this:\n\n```javasctipt\n{\n  day: 1,     // day of month (1-31)\n  month: 1,   // month of year (1-12)\n  year: 2017, // year\n  timestamp,   // UTC timestamp representing 00:00 AM of this date\n  dateString: '2016-05-13' // date formatted as 'YYYY-MM-DD' string\n}\n```\n\nParameters that require date types accept YYYY-MM-DD formated datestrings, JavaScript date objects, `calendar objects` and UTC timestamps.\n\nCalendars can be localized by adding custom locales to `LocaleConfig` object:\n\n```javascript\nimport {LocaleConfig} from 'react-native-calendars';\n\nLocaleConfig.locales['fr'] = {\n  monthNames: ['Janvier','Février','Mars','Avril','Mai','Juin','Juillet','Août','Septembre','Octobre','Novembre','Décembre'],\n  monthNamesShort: ['Janv.','Févr.','Mars','Avril','Mai','Juin','Juil.','Août','Sept.','Oct.','Nov.','Déc.'],\n  dayNames: ['Dimanche','Lundi','Mardi','Mercredi','Jeudi','Vendredi','Samedi'],\n  dayNamesShort: ['Dim.','Lun.','Mar.','Mer.','Jeu.','Ven.','Sam.']\n};\n\nLocaleConfig.defaultLocale = 'fr';\n```\n\n### Calendar\n\n<kbd>\n  <img src=\"https://github.com/wix-private/wix-react-native-calendar/blob/master/demo/calendar.gif?raw=true\">\n</kbd>\n\n#### Basic parameters\n\n```javascript\n<Calendar\n  // Initially visible month. Default = Date()\n  current={'2012-03-01'}\n  // Minimum date that can be selected, dates before minDate will be grayed out. Default = undefined\n  minDate={'2012-05-10'}\n  // Maximum date that can be selected, dates after maxDate will be grayed out. Default = undefined\n  maxDate={'2012-05-30'}\n  // Handler which gets executed on day press. Default = undefined\n  onDayPress={(day) => {console.log('selected day', day)}}\n  // Handler which gets executed on day long press. Default = undefined\n  onDayLongPress={(day) => {console.log('selected day', day)}}\n  // Month format in calendar title. Formatting values: http://arshaw.com/xdate/#Formatting\n  monthFormat={'yyyy MM'}\n  // Handler which gets executed when visible month changes in calendar. Default = undefined\n  onMonthChange={(month) => {console.log('month changed', month)}}\n  // Hide month navigation arrows. Default = false\n  hideArrows={true}\n  // Replace default arrows with custom ones (direction can be 'left' or 'right')\n  renderArrow={(direction) => (<Arrow />)}\n  // Do not show days of other months in month page. Default = false\n  hideExtraDays={true}\n  // If hideArrows=false and hideExtraDays=false do not switch month when tapping on greyed out\n  // day from another month that is visible in calendar page. Default = false\n  disableMonthChange={true}\n  // If firstDay=1 week starts from Monday. Note that dayNames and dayNamesShort should still start from Sunday.\n  firstDay={1}\n  // Hide day names. Default = false\n  hideDayNames={true}\n  // Show week numbers to the left. Default = false\n  showWeekNumbers={true}\n  // Handler which gets executed when press arrow icon left. It receive a callback can go back month\n  onPressArrowLeft={substractMonth => substractMonth()}\n  // Handler which gets executed when press arrow icon left. It receive a callback can go next month\n  onPressArrowRight={addMonth => addMonth()}\n/>\n```\n\n#### Date marking\n\n**!Disclaimer!** Make sure that `markedDates` param is immutable. If you change `markedDates` object content but the reference to it does not change calendar update will not be triggered.\n\nDot marking\n\n<kbd>\n  <img height=50 src=\"https://github.com/wix-private/wix-react-native-calendar/blob/master/demo/marking1.png?raw=true\">\n</kbd>\n\n```javascript\n<Calendar\n  // Collection of dates that have to be marked. Default = {}\n  markedDates={{\n    '2012-05-16': {selected: true, marked: true, selectedColor: 'blue'},\n    '2012-05-17': {marked: true},\n    '2012-05-18': {marked: true, dotColor: 'red', activeOpacity: 0},\n    '2012-05-19': {disabled: true, disableTouchEvent: true}\n  }}\n/>\n```\n\nYou can customise a dot color for each day independently.\n\nMulti-Dot marking\n\n<kbd>\n <img height=50 src=\"https://github.com/wix-private/wix-react-native-calendar/blob/master/demo/marking4.png?raw=true\">\n</kbd>\n\nUse markingType = 'multi-dot' if you want to display more than one dot. Both the Calendar and CalendarList control support multiple dots by using 'dots' array in markedDates. The property 'color' is mandatory while 'key' and 'selectedColor' are optional. If key is omitted then the array index is used as key. If selectedColor is omitted then 'color' will be used for selected dates.\n```javascript\nconst vacation = {key:'vacation', color: 'red', selectedDotColor: 'blue'};\nconst massage = {key:'massage', color: 'blue', selectedDotColor: 'blue'};\nconst workout = {key:'workout', color: 'green'};\n\n<Calendar\n  markedDates={{\n    '2017-10-25': {dots: [vacation, massage, workout], selected: true, selectedColor: 'red'},\n    '2017-10-26': {dots: [massage, workout], disabled: true},\n  }},\n  markingType={'multi-dot'}\n/>\n```\n\n\nPeriod marking\n\n<kbd>\n  <img height=50 src=\"https://github.com/wix-private/wix-react-native-calendar/blob/master/demo/marking2.png?raw=true\">\n</kbd>\n\n<kbd>\n  <img height=50 src=\"https://github.com/wix-private/wix-react-native-calendar/blob/master/demo/marking3.png?raw=true\">\n</kbd>\n\n```javascript\n<Calendar\n  // Collection of dates that have to be colored in a special way. Default = {}\n   markedDates={\n    {'2012-05-20': {textColor: 'green'},\n     '2012-05-22': {startingDay: true, color: 'green'},\n     '2012-05-23': {selected: true, endingDay: true, color: 'green', textColor: 'gray'},\n     '2012-05-04': {disabled: true, startingDay: true, color: 'green', endingDay: true}\n    }}\n  // Date marking style [simple/period/multi-dot/custom]. Default = 'simple'\n  markingType={'period'}\n/>\n```\n\nMulti-period marking\n\n<kbd>\n  <img height=50 src=\"https://github.com/wix-private/wix-react-native-calendar/blob/master/demo/marking6.png?raw=true\">\n</kbd>\n\nCAUTION: This marking is only fully supported by the `<Calendar />` component because it expands its height. Usage with `<CalendarList />` might lead to overflow issues.\n\n```javascript\n<Calendar\n  markedDates={{  \n    '2017-12-14': {  \n      periods: [  \n        { startingDay: false, endingDay: true, color: '#5f9ea0' },\n        { startingDay: false, endingDay: true, color: '#ffa500' },\n        { startingDay: true, endingDay: false, color: '#f0e68c' },\n      ]\n    },\n    '2017-12-15': {  \n      periods: [  \n        { startingDay: true, endingDay: false, color: '#ffa500' },\n        { color: 'transparent' },\n        { startingDay: false, endingDay: false, color: '#f0e68c' },\n      ]\n    },\n  }}\n  // Date marking style [simple/period/multi-dot/custom]. Default = 'simple'\n  markingType='multi-period'\n/>\n```\n\nCustom marking allows you to customize each marker with custom styles.\n\n<kbd>\n  <img height=50 src=\"https://github.com/wix-private/wix-react-native-calendar/blob/master/demo/custom.png?raw=true\">\n</kbd>\n\n```javascript\n<Calendar\n  // Date marking style [simple/period/multi-dot/single]. Default = 'simple'\n  markingType={'custom'}\n  markedDates={{\n    '2018-03-28': {\n      customStyles: {\n        container: {\n          backgroundColor: 'green',\n        },\n        text: {\n          color: 'black',\n          fontWeight: 'bold'\n        },\n      },\n    },\n    '2018-03-29': {\n      customStyles: {\n        container: {\n          backgroundColor: 'white',\n          elevation: 2\n        },\n        text: {\n          color: 'blue',\n        },\n      }\n    }}}\n/>\n```\n\nKeep in mind that different marking types are not compatible. You can use just one marking style for calendar.\n\n#### Displaying data loading indicator\n\n<kbd>\n  <img height=50 src=\"https://github.com/wix-private/wix-react-native-calendar/blob/master/demo/loader.png?raw=true\">\n</kbd>\n\nThe loading indicator next to month name will be displayed if `<Calendar />` has `displayLoadingIndicator` property and `markedDays` collection does not have a value for every day of the month in question. When you load data for days, just set `[]` or special marking value to all days in `markedDates` collection.\n\n#### Customizing look & feel\n\n```javascript\n<Calendar\n  // Specify style for calendar container element. Default = {}\n  style={{\n    borderWidth: 1,\n    borderColor: 'gray',\n    height: 350\n  }}\n  // Specify theme properties to override specific styles for calendar parts. Default = {}\n  theme={{\n    backgroundColor: '#ffffff',\n    calendarBackground: '#ffffff',\n    textSectionTitleColor: '#b6c1cd',\n    selectedDayBackgroundColor: '#00adf5',\n    selectedDayTextColor: '#ffffff',\n    todayTextColor: '#00adf5',\n    dayTextColor: '#2d4150',\n    textDisabledColor: '#d9e1e8',\n    dotColor: '#00adf5',\n    selectedDotColor: '#ffffff',\n    arrowColor: 'orange',\n    monthTextColor: 'blue',\n    textDayFontFamily: 'monospace',\n    textMonthFontFamily: 'monospace',\n    textDayHeaderFontFamily: 'monospace',\n    textMonthFontWeight: 'bold',\n    textDayFontSize: 16,\n    textMonthFontSize: 16,\n    textDayHeaderFontSize: 16\n  }}\n/>\n```\n\n#### Advanced styling\n\nIf you want to have complete control over calendar styles you can do it by overriding default style.js files. For example, if you want to override calendar header style first you have to find stylesheet id for this file:\n\nhttps://github.com/wix/react-native-calendars/blob/master/src/calendar/header/style.js#L4\n\nIn this case it is 'stylesheet.calendar.header'. Next you can add overriding stylesheet to your theme with this id.\n\nhttps://github.com/wix/react-native-calendars/blob/master/example/src/screens/calendars.js#L56\n\n```javascript\ntheme={{\n  arrowColor: 'white',\n  'stylesheet.calendar.header': {\n    week: {\n      marginTop: 5,\n      flexDirection: 'row',\n      justifyContent: 'space-between'\n    }\n  }\n}}\n```\n\n**Disclaimer**: issues that arise because something breaks after using stylesheet override will not be supported. Use this option at your own risk.\n\n#### Overriding day component\n\nIf you need custom functionality not supported by current day component implementations you can pass your own custom day\ncomponent to the calendar.\n\n```javascript\n<Calendar\n  style={[styles.calendar, {height: 300}]}\n  dayComponent={({date, state}) => {\n    return (<View style={{flex: 1}}><Text style={{textAlign: 'center', color: state === 'disabled' ? 'gray' : 'black'}}>{date.day}</Text></View>);\n  }}\n/>\n```\n\nThe dayComponent prop has to receive a RN component or function that receive props. The day component will receive such props:\n\n* state - disabled if the day should be disabled (this is decided by base calendar component)\n* marking - markedDates value for this day\n* date - the date object representing this day\n\n**Tip:** Don't forget to implement shouldComponentUpdate for your custom day component to make calendar perform better\n\nIf you implement an awesome day component please make a PR so that other people could use it :)\n\n### CalendarList\n\n<kbd>\n  <img src=\"https://github.com/wix-private/wix-react-native-calendar/blob/master/demo/calendar-list.gif?raw=true\">\n</kbd>\n\n`<CalendarList />` is scrollable semi-infinite calendar composed of `<Calendar />` components. Currently it is possible to scroll 4 years back and 4 years to the future. All paramters that are available for `<Calendar />` are also available for this component. There are also some additional params that can be used:\n\n```javascript\n<CalendarList\n  // Callback which gets executed when visible months change in scroll view. Default = undefined\n  onVisibleMonthsChange={(months) => {console.log('now these months are visible', months);}}\n  // Max amount of months allowed to scroll to the past. Default = 50\n  pastScrollRange={50}\n  // Max amount of months allowed to scroll to the future. Default = 50\n  futureScrollRange={50}\n  // Enable or disable scrolling of calendar list\n  scrollEnabled={true}\n  // Enable or disable vertical scroll indicator. Default = false\n  showScrollIndicator={true}\n  ...calendarParams\n/>\n```\n\n#### Horizontal CalendarList\n\n<kbd>\n  <img src=\"https://github.com/wix-private/wix-react-native-calendar/blob/master/demo/horizontal-calendar-list.gif?raw=true\">\n</kbd>\n\nYou can also make the `CalendarList` scroll horizontally. To do that you need to pass specific props to the `CalendarList`:\n\n```javascript\n<CalendarList\n  // Enable horizontal scrolling, default = false\n  horizontal={true}\n  // Enable paging on horizontal, default = false\n  pagingEnabled={true}\n  // Set custom calendarWidth.\n  calendarWidth={320}\n  ...calendarListParams\n  ...calendarParams\n/>\n```\n\n### Agenda\n<kbd>\n  <img src=\"https://github.com/wix-private/wix-react-native-calendar/blob/master/demo/agenda.gif?raw=true\">\n</kbd>\n\nAn advanced agenda component that can display interactive listings for calendar day items.\n\n```javascript\n<Agenda\n  // the list of items that have to be displayed in agenda. If you want to render item as empty date\n  // the value of date key kas to be an empty array []. If there exists no value for date key it is\n  // considered that the date in question is not yet loaded\n  items={\n    {'2012-05-22': [{text: 'item 1 - any js object'}],\n     '2012-05-23': [{text: 'item 2 - any js object'}],\n     '2012-05-24': [],\n     '2012-05-25': [{text: 'item 3 - any js object'},{text: 'any js object'}],\n    }}\n  // callback that gets called when items for a certain month should be loaded (month became visible)\n  loadItemsForMonth={(month) => {console.log('trigger items loading')}}\n  // callback that fires when the calendar is opened or closed\n  onCalendarToggled={(calendarOpened) => {console.log(calendarOpened)}}\n  // callback that gets called on day press\n  onDayPress={(day)=>{console.log('day pressed')}}\n  // callback that gets called when day changes while scrolling agenda list\n  onDayChange={(day)=>{console.log('day changed')}}\n  // initially selected day\n  selected={'2012-05-16'}\n  // Minimum date that can be selected, dates before minDate will be grayed out. Default = undefined\n  minDate={'2012-05-10'}\n  // Maximum date that can be selected, dates after maxDate will be grayed out. Default = undefined\n  maxDate={'2012-05-30'}\n  // Max amount of months allowed to scroll to the past. Default = 50\n  pastScrollRange={50}\n  // Max amount of months allowed to scroll to the future. Default = 50\n  futureScrollRange={50}\n  // specify how each item should be rendered in agenda\n  renderItem={(item, firstItemInDay) => {return (<View />);}}\n  // specify how each date should be rendered. day can be undefined if the item is not first in that day.\n  renderDay={(day, item) => {return (<View />);}}\n  // specify how empty date content with no items should be rendered\n  renderEmptyDate={() => {return (<View />);}}\n  // specify how agenda knob should look like\n  renderKnob={() => {return (<View />);}}\n  // specify what should be rendered instead of ActivityIndicator\n  renderEmptyData = {() => {return (<View />);}}\n  // specify your item comparison function for increased performance\n  rowHasChanged={(r1, r2) => {return r1.text !== r2.text}}\n  // Hide knob button. Default = false\n  hideKnob={true}\n  // By default, agenda dates are marked if they have at least one item, but you can override this if needed\n  markedDates={{\n    '2012-05-16': {selected: true, marked: true},\n    '2012-05-17': {marked: true},\n    '2012-05-18': {disabled: true}\n  }}\n  // If provided, a standard RefreshControl will be added for \"Pull to Refresh\" functionality. Make sure to also set the refreshing prop correctly.\n  onRefresh={() => console.log('refreshing...')}\n  // Set this true while waiting for new data from a refresh\n  refreshing={false}\n  // Add a custom RefreshControl component, used to provide pull-to-refresh functionality for the ScrollView.\n  refreshControl={null}\n  // agenda theme\n  theme={{\n    ...calendarTheme,\n    agendaDayTextColor: 'yellow',\n    agendaDayNumColor: 'green',\n    agendaTodayColor: 'red',\n    agendaKnobColor: 'blue'\n  }}\n  // agenda container style\n  style={{}}\n/>\n```\n\n## Authors\n\n* [Tautvilas Mecinskas](https://github.com/tautvilas/) - Initial code - [@tautvilas](https://twitter.com/TautviIas)\n* Katrin Zotchev - Initial design - [@katrin_zot](https://twitter.com/katrin_zot)\n\nSee also the list of [contributors](https://github.com/wix/react-native-calendar-components/contributors) who participated in this project.\n\n## Contributing\n\nPull requests are welcome. `npm run test` and `npm run lint` before push.\n","readmeFilename":"README.md"}