{"_id":"@alexstrat/react-native-calendars","_rev":"1-2c99410b26767b8aaf913dc6a599a26a","name":"@alexstrat/react-native-calendars","dist-tags":{"latest":"1.23.0"},"versions":{"1.23.0":{"name":"@alexstrat/react-native-calendars","version":"1.23.0","main":"src/index.js","description":"React Native Calendar Components","scripts":{"build":"xcodebuild -project ios/CalendarsExample.xcodeproj build","e2e":"node ./scripts/test-e2e.js --release","test":"npm run lint && npm run unit && npm run e2e","unit":"jest","lint":"eslint src/ example/src","release":"node ./scripts/release.js","start":"react-native start","ios":"react-native run-ios","android":"react-native run-android","xcode":"open ios/CalendarsExample.xcworkspace/","clean":"rm package-lock.json && rm -rf ./node_modules && npm i","pod-install":"pod install --project-directory=ios"},"repository":{"type":"git","url":"git+https://github.com/wix/react-native-calendars.git"},"publishConfig":{"registry":"https://registry.npmjs.org/"},"author":{"name":"Wix.com"},"license":"MIT","dependencies":{"lodash":"^4.17.15","moment":"^2.24.0","hoist-non-react-statics":"^3.3.1","react-native-swipe-gestures":"^1.0.5","prop-types":"^15.5.10","xdate":"^0.8.0","immutable":"^4.0.0-rc.12"},"devDependencies":{"@babel/core":"^7.12.9","@babel/runtime":"^7.12.5","@welldone-software/why-did-you-render":"^6.0.3","babel-eslint":"^7.2.3","babel-jest":"^26.6.3","detox":"^16.7.2","eslint":"^6.8.0","eslint-config-prettier":"^6.11.0","eslint-plugin-jest":"^24.1.3","eslint-plugin-react":"^7.0.0","husky":"^4.2.5","jest":"^26.6.3","jest-date-mock":"^1.0.8","lint-staged":"^10.2.11","metro-react-native-babel-preset":"^0.64.0","mocha":"^7.1.0","prettier":"^2.0.5","react":"16.11.0","react-component-driver":"^0.10.0","react-native":"0.62.2","react-native-navigation":"^6.7.1","react-test-renderer":"^17.0.1","semver":"5.x.x","shell-utils":"1.x.x"},"jest":{"preset":"react-native","setupFiles":["jest-date-mock","./jest-setup.js"],"testMatch":["<rootDir>/src/**/?(*.)(spec|test).{js,jsx}"]},"detox":{"configurations":{"ios.sim.debug":{"binaryPath":"ios/build/Build/Products/Debug-iphonesimulator/CalendarsExample.app","build":"xcodebuild -workspace ios/CalendarsExample.xcworkspace -scheme CalendarsExample -configuration Debug -sdk iphonesimulator -derivedDataPath ios/build","type":"ios.simulator","device":{"type":"iPhone 11","os":"iOS 13.7"}},"ios.sim.release":{"binaryPath":"ios/build/Build/Products/Release-iphonesimulator/CalendarsExample.app","build":"xcodebuild -workspace ios/CalendarsExample.xcworkspace -scheme CalendarsExample -configuration Release -sdk iphonesimulator -derivedDataPath ios/build","type":"ios.simulator","device":{"type":"iPhone 11","os":"iOS 13.7"}}},"test-runner":"mocha"},"husky":{"hooks":{"pre-commit":"lint-staged"}},"lint-staged":{"*.js":"eslint --cache --fix","*.{js,css,md}":"prettier --write"},"gitHead":"897aa639f39536c5fb8b08e65a6dd963cf463508","bugs":{"url":"https://github.com/wix/react-native-calendars/issues"},"homepage":"https://github.com/wix/react-native-calendars#readme","_id":"@alexstrat/react-native-calendars@1.23.0","_nodeVersion":"12.9.1","_npmVersion":"6.10.2","dist":{"integrity":"sha512-mTp+8ywXFNDNRziMHEY2WwkNRM3fEhWTs6SH7MNB6VrR0V+DseEaUgpd5hH24yIYGM0KOOEZwEqmftdQMHxG2A==","shasum":"94668d386d41e4fdfdaf298c5380e690bfbdc924","tarball":"https://registry.npmjs.org/@alexstrat/react-native-calendars/-/react-native-calendars-1.23.0.tgz","fileCount":76,"unpackedSize":206994,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfym4DCRA9TVsSAnZWagAAE6wQAJMd+/OQJplxXcdwjyzn\nx3Caa/zObij99z+oPhfcw6C+iv+BGpJAIqA98gJLt5RCeCRZBOyek9nUD1rF\n/9tlAl4Md0+dhpffIa+QML1P135nwnA68Ik279hA1jV/I9Qy7MDp7BZkkeu8\nA9/F8esIAQKAIcqyEHS37A5C1VfQWRZ7VEtJJWTbP0lhzEhpjJjz0eNZrj6O\n4COVa9navA3LzotM4LPo5ZNb65bVbner9ix8emqdfQdczEMqGgadNSKu/jmR\nBQdFdQuKsfhcPiH7a9n/hBsOmGIgb1+am7oAPVsNetXBlEHzBx4eK8kintZG\n0X+rCWKifLn5C64JdGzoKY38l3fhfbgIVO68VKNh1Lv28L9KlMl2I1djpkc2\nxerVSYdB35p6VSrTlLOLpVOXyDUiZVHyhngSNxLGCutzjnA7vyxBH6yunNZB\ntWK22+0ygFwE+SH1Yu5t9Q4ga+BV1esi7Da+yt+msP9txT4VY+U7doT0AyKc\nUAALDr+POFqpM/9YCFrUMXNkLIVPAH70QIfiIQjbyMb44ogeKuQdoptYtqA0\nvDUtEJYXMOZnfKdQLPg6gPeeQ/zjuKf+la6cyh53s458MsUf7Lze7dHqagRW\nA2LExWmnxy3FKuOAF2EaHDCZzF9TJrcZE75mjGsqSSSQSMXxO38ZwdDhDHlZ\nXekP\r\n=MLLW\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCAdew8R2gggfhZUqt1Piq5+sh52rnlY0IzHXFDlVs/9QIgZnBenOn4WT/o0xDJcD3e1pdKJZDZHHmaces7yEnR3sw="}]},"_npmUser":{"name":"alexstrat","email":"alexandre.lacheze@gmail.com"},"directories":{},"maintainers":[{"name":"alexstrat","email":"alexandre.lacheze@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-native-calendars_1.23.0_1607101955105_0.724260024056234"},"_hasShrinkwrap":false}},"time":{"created":"2020-12-04T17:12:35.065Z","1.23.0":"2020-12-04T17:12:35.273Z","modified":"2022-04-04T12:41:48.439Z"},"maintainers":[{"name":"alexstrat","email":"alexandre.lacheze@gmail.com"}],"description":"React Native Calendar Components","homepage":"https://github.com/wix/react-native-calendars#readme","repository":{"type":"git","url":"git+https://github.com/wix/react-native-calendars.git"},"author":{"name":"Wix.com"},"bugs":{"url":"https://github.com/wix/react-native-calendars/issues"},"license":"MIT","readme":"# Compared to upstream\n\n- Add swipeMonthsConfig prop => https://github.com/wix/react-native-calendars/pull/1359\n\n# React Native Calendars 🗓️ 📆\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$ 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 `date-strings`, 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: [\n    'Janvier',\n    'Février',\n    'Mars',\n    'Avril',\n    'Mai',\n    'Juin',\n    'Juillet',\n    'Août',\n    'Septembre',\n    'Octobre',\n    'Novembre',\n    'Décembre'\n  ],\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  today: \"Aujourd'hui\"\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 => {\n    console.log('selected day', day);\n  }}\n  // Handler which gets executed on day long press. Default = undefined\n  onDayLongPress={day => {\n    console.log('selected day', day);\n  }}\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 => {\n    console.log('month changed', month);\n  }}\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={subtractMonth => subtractMonth()}\n  // Handler which gets executed when press arrow icon right. It receive a callback can go next month\n  onPressArrowRight={addMonth => addMonth()}\n  // Disable left arrow. Default = false\n  disableArrowLeft={true}\n  // Disable right arrow. Default = false\n  disableArrowRight={true}\n  // Disable all touch events for disabled days. can be override with disableTouchEvent in markedDates\n  disableAllTouchEventsForDisabledDays={true}\n  // Replace default month and year title with custom one. the function receive a date as parameter.\n  renderHeader={date => {\n    /*Return JSX*/\n  }}\n  // Enable the option to swipe between months. Default = false\n  enableSwipeMonths={true}\n  // A `react-native-swipe-gestures` config used to detect swipe of months. Default = undefined\n  swipeMonthsConfig={{velocityThreshold: 0.3, directionalOffsetThreshold: 80, gestureIsClickThreshold: 5}}\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<p></p>\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 customize 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<p></p>\n\nUse `markingType={'multi-dot'}` if you want to display more than one dot. Both the `<Calendar/>` and `<CalendarList/>` support multiple dots by using `dots` array in `markedDates` prop.\nThe 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\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\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<p></p>\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<p></p>\n\n**CAUTION**: 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<p></p>\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```\n\n**NEW!** While we still don't support multi marking type, we add the possibility to combine between `period` and `simple`.\n\n```javascript\n<Calendar\n  markingType={'period'}\n  markedDates={{\n    '2012-05-15': {marked: true, dotColor: '#50cebb'},\n    '2012-05-16': {marked: true, dotColor: '#50cebb'},\n    '2012-05-21': {startingDay: true, color: '#50cebb', textColor: 'white'},\n    '2012-05-22': {color: '#70d7c7', textColor: 'white'},\n    '2012-05-23': {color: '#70d7c7', textColor: 'white', marked: true, dotColor: 'white'},\n    '2012-05-24': {color: '#70d7c7', textColor: 'white'},\n    '2012-05-25': {endingDay: true, color: '#50cebb', textColor: 'white'}\n  }}\n/>\n```\n\n<kbd>\n  <img height=350 src=\"https://github.com/wix-private/wix-react-native-calendar/blob/master/demo/multi-marking.png?raw=true\">\n</kbd>\n<p></p>\n\nKeep in mind that different marking types are not compatible. You can use just one marking style for a 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<p></p>\n\nThe loading indicator next to the month name will be displayed if `<Calendar/>` has `displayLoadingIndicator` prop and the `markedDates` 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    textSectionTitleDisabledColor: '#d9e1e8',\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    disabledArrowColor: '#d9e1e8',\n    monthTextColor: 'blue',\n    indicatorColor: 'blue',\n    textDayFontFamily: 'monospace',\n    textMonthFontFamily: 'monospace',\n    textDayHeaderFontFamily: 'monospace',\n    textDayFontWeight: '300',\n    textMonthFontWeight: 'bold',\n    textDayHeaderFontWeight: '300',\n    textDayFontSize: 16,\n    textMonthFontSize: 16,\n    textDayHeaderFontSize: 16\n  }}\n/>\n```\n\n#### Customize days titles with disabled styling\n\n```javascript\n<Calendar\n  theme={{\n    textSectionTitleDisabledColor: '#d9e1e8'\n  }}\n  disabledDaysIndexes={[0, 6]}\n  markedDates={{\n    ...this.getDisabledDates('2012-05-01', '2012-05-30', [0, 6])\n  }}\n/>\n```\n\n#### Advanced styling\n\nIf you want to have complete control over the calendar styles you can do it by overriding default `style.js` files. For example, if you want to override `<CalendarHeader/>` 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 component to the calendar.\n\n```javascript\n<Calendar\n  style={[styles.calendar, {height: 300}]}\n  dayComponent={({date, state}) => {\n    return (\n      <View>\n        <Text style={{textAlign: 'center', color: state === 'disabled' ? 'gray' : 'black'}}>{date.day}</Text>\n      </View>\n    );\n  }}\n/>\n```\n\nThe `dayComponent` prop has to receive a RN component or a function that receive props. The `dayComponent` 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 the 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<p></p>\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 parameters 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<p></p>\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\n<kbd>\n  <img src=\"https://github.com/wix-private/wix-react-native-calendar/blob/master/demo/agenda.gif?raw=true\">\n</kbd>\n<p></p>\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 has 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': [{name: 'item 1 - any js object'}],\n    '2012-05-23': [{name: 'item 2 - any js object', height: 80}],\n    '2012-05-24': [],\n    '2012-05-25': [{name: 'item 3 - any js object'}, {name: 'any js object'}]\n  }}\n  // Callback that gets called when items for a certain month should be loaded (month became visible)\n  loadItemsForMonth={month => {\n    console.log('trigger items loading');\n  }}\n  // Callback that fires when the calendar is opened or closed\n  onCalendarToggled={calendarOpened => {\n    console.log(calendarOpened);\n  }}\n  // Callback that gets called on day press\n  onDayPress={day => {\n    console.log('day pressed');\n  }}\n  // Callback that gets called when day changes while scrolling agenda list\n  onDayChange={day => {\n    console.log('day changed');\n  }}\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) => {\n    return <View />;\n  }}\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) => {\n    return <View />;\n  }}\n  // Specify how empty date content with no items should be rendered\n  renderEmptyDate={() => {\n    return <View />;\n  }}\n  // Specify how agenda knob should look like\n  renderKnob={() => {\n    return <View />;\n  }}\n  // Specify what should be rendered instead of ActivityIndicator\n  renderEmptyData={() => {\n    return <View />;\n  }}\n  // Specify your item comparison function for increased performance\n  rowHasChanged={(r1, r2) => {\n    return r1.text !== r2.text;\n  }}\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 disabledByDefault={true} dates flagged as not disabled will be enabled. Default = false\n  disabledByDefault={true}\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/Tautvilas)\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 most welcome!\nPlease `npm run test` and `npm run lint` before push.\nDon't forget to add a **title** and a **description** that explain the issue you're trying to solve and your suggested solution. Screenshots and gifs are very helpful.\n","readmeFilename":"README.md"}