{"id":23652910,"url":"https://github.com/bugidev/react-native-calendar-strip","last_synced_at":"2025-05-14T17:10:06.509Z","repository":{"id":37502751,"uuid":"66854005","full_name":"BugiDev/react-native-calendar-strip","owner":"BugiDev","description":"Easy to use and visually stunning calendar component for React Native.","archived":false,"fork":false,"pushed_at":"2024-07-05T14:09:33.000Z","size":2210,"stargazers_count":968,"open_issues_count":90,"forks_count":338,"subscribers_count":16,"default_branch":"master","last_synced_at":"2025-05-14T17:09:24.864Z","etag":null,"topics":["calendar","calendar-strip","javascript","react-native"],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/BugiDev.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE.md","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2016-08-29T15:04:01.000Z","updated_at":"2025-05-03T11:35:26.000Z","dependencies_parsed_at":"2024-06-18T12:31:05.861Z","dependency_job_id":"80201403-72e6-4329-8ccc-db505a874891","html_url":"https://github.com/BugiDev/react-native-calendar-strip","commit_stats":{"total_commits":229,"total_committers":48,"mean_commits":4.770833333333333,"dds":0.6462882096069869,"last_synced_commit":"509e2feedcc9cd173d1dc3b4a680500b60ab98cb"},"previous_names":[],"tags_count":54,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/BugiDev%2Freact-native-calendar-strip","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/BugiDev%2Freact-native-calendar-strip/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/BugiDev%2Freact-native-calendar-strip/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/BugiDev%2Freact-native-calendar-strip/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/BugiDev","download_url":"https://codeload.github.com/BugiDev/react-native-calendar-strip/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":254190394,"owners_count":22029632,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["calendar","calendar-strip","javascript","react-native"],"created_at":"2024-12-28T17:22:25.515Z","updated_at":"2025-05-14T17:10:06.485Z","avatar_url":"https://github.com/BugiDev.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003ch1 align=\"center\"\u003e react-native-calendar-strip \u003c/h1\u003e\n\u003cdiv align=\"center\"\u003e\n \u003cstrong\u003e Easy to use and visually stunning calendar component for React Native.\u003c/strong\u003e\n\u003c/div\u003e\n\u003cbr\u003e\n\u003cdiv align=\"center\"\u003e\n \u003ca href=\"https://npmjs.org/package/react-native-calendar-strip\"\u003e\n \u003cimg src=\"https://img.shields.io/npm/v/react-native-calendar-strip.svg?style=flat-square\" alt=\"npm package version\" /\u003e\n \u003c/a\u003e\n \u003ca href=\"https://npmjs.org/package/react-native-calendar-strip\"\u003e\n \u003cimg src=\"https://img.shields.io/npm/dm/react-native-calendar-strip.svg?style=flat-square\" alt=\"npm downloads\" /\u003e\n \u003c/a\u003e\n \u003ca href=\"https://github.com/feross/standard\"\u003e\n \u003cimg src=\"https://img.shields.io/badge/code%20style-standard-brightgreen.svg?style=flat-square\" alt=\"standard JS linter\" /\u003e\n \u003c/a\u003e\n \u003ca href=\"https://github.com/BugiDev/react-native-calendar-strip/blob/master/LICENSE.md\"\u003e\n \u003cimg src=\"https://img.shields.io/npm/l/react-native-calendar-strip.svg?style=flat-square\" alt=\"project license\" /\u003e\n \u003c/a\u003e\n \u003ca href=\"http://makeapullrequest.com\"\u003e\n \u003cimg src=\"https://img.shields.io/badge/PRs-welcome-brightgreen.svg?style=flat-square\" alt=\"make a pull request\" /\u003e\n \u003c/a\u003e\n \u003cimg src=\"https://img.shields.io/badge/all_contributors-7-orange.svg?style=flat-square\" alt=\"All Contributors\" /\u003e\n\u003c/div\u003e\n\u003cbr\u003e\n\u003cdiv align=\"center\"\u003e\n \u003ca href=\"https://github.com/BugiDev/react-native-calendar-strip/watchers\"\u003e\n \u003cimg src=\"https://img.shields.io/github/watchers/BugiDev/react-native-calendar-strip.svg?style=social\" alt=\"Github Watch Badge\" /\u003e\n \u003c/a\u003e\n \u003ca href=\"https://github.com/BugiDev/react-native-calendar-strip/stargazers\"\u003e\n \u003cimg src=\"https://img.shields.io/github/stars/BugiDev/react-native-calendar-strip.svg?style=social\" alt=\"Github Star Badge\" /\u003e\n \u003c/a\u003e\n \u003ca href=\"https://twitter.com/intent/tweet?text=Check%20out%20react-native-calendar-strip!%20https://github.com/BugiDev/react-native-calendar-strip%20%F0%9F%91%8D\"\u003e\n \u003cimg src=\"https://img.shields.io/twitter/url/https/github.com/BugiDev/react-native-calendar-strip.svg?style=social\" alt=\"Tweet\" /\u003e\n \u003c/a\u003e\n\u003c/div\u003e\n\u003cbr\u003e\n\u003cdiv align=\"center\"\u003e\n Built with ❤︎ by \u003ca href=\"https://github.com/BugiDev\"\u003eBugiDev\u003c/a\u003e and \u003ca href=\"https://github.com/BugiDev/react-native-calendar-strip/graphs/contributors\"\u003econtributors\u003c/a\u003e\n\u003c/div\u003e\n\n\u003ch2\u003eTable of Contents\u003c/h2\u003e\n \u003cli\u003e\u003ca href=\"#install\"\u003eInstall\u003c/a\u003e\u003c/li\u003e\n \u003cli\u003e\u003ca href=\"#usage\"\u003eUsage\u003c/a\u003e\u003c/li\u003e\n \u003cli\u003e\u003ca href=\"#props\"\u003eProps\u003c/a\u003e\u003c/li\u003e\n \u003cli\u003e\u003ca href=\"#animations\"\u003eAnimations\u003c/a\u003e\u003c/li\u003e\n \u003cli\u003e\u003ca href=\"#localization\"\u003eLocalization\u003c/a\u003e\u003c/li\u003e\n \u003cli\u003e\u003ca href=\"#device-specific-notes\"\u003eDevice Specific Notes\u003c/a\u003e\u003c/li\u003e\n \u003cli\u003e\u003ca href=\"#development-with-sample-application\"\u003eLocal Development\u003c/a\u003e\u003c/li\u003e\n \u003cli\u003e\u003ca href=\"#contributing\"\u003eContributing\u003c/a\u003e\u003c/li\u003e\n \u003cli\u003e\u003ca href=\"#license\"\u003eLicense\u003c/a\u003e\u003c/li\u003e\n\n## Install\n\n```sh\n$ npm install react-native-calendar-strip\n# OR\n$ yarn add react-native-calendar-strip\n```\n\n## Usage\n\n### Scrollable CalendarStrip — New in 2.x\n\nThe `scrollable` prop was introduced in 2.0.0 and features a bi-directional infinite scroller. It recycles days using RecyclerListView, shifting the dates as the ends are reached. The Chrome debugger can cause issues with this updating due to a [RN setTimeout bug](https://github.com/facebook/react-native/issues/4470). To prevent date shifts at the ends of the scroller, set the `minDate` and `maxDate` range to a year or less.\n\nThe refactor to support `scrollable` introduced internal changes to the `CalendarDay` component. Users of the `dayComponent` prop may need to adjust their custom day component to accommodate the props passed to it.\n\n\u003cdiv align=\"center\"\u003e\n \u003cimg src=\"https://user-images.githubusercontent.com/6295083/82712731-54a98780-9c4e-11ea-9076-eddf0b756239.gif\" alt=\"\"\u003e\n\u003c/div\u003e\n\n\u003cdetails\u003e\n\n```jsx\nimport { View, StyleSheet } from 'react-native';\nimport CalendarStrip from 'react-native-calendar-strip';\n\nconst Example = () =\u003e (\n \u003cView style={styles.container}\u003e\n \u003cCalendarStrip\n scrollable\n style={{height:200, paddingTop: 20, paddingBottom: 10}}\n calendarColor={'#3343CE'}\n calendarHeaderStyle={{color: 'white'}}\n dateNumberStyle={{color: 'white'}}\n dateNameStyle={{color: 'white'}}\n iconContainer={{flex: 0.1}}\n /\u003e\n \u003c/View\u003e\n);\n\nconst styles = StyleSheet.create({\n container: { flex: 1 }\n});\n```\n\n\u003c/details\u003e\n\n\n### Simple \"out of the box\" Example\n\nYou can use this component without any styling or customization. Just import it in your project and render it:\n\u003cdiv align=\"center\"\u003e\n \u003cimg src=\"https://user-images.githubusercontent.com/6295083/81627792-9459af00-93c4-11ea-870c-601390912615.gif\" alt=\"\"\u003e\n\u003c/div\u003e\n\n\u003cdetails\u003e\n\n```jsx\nimport { View, StyleSheet } from 'react-native';\nimport CalendarStrip from 'react-native-calendar-strip';\n\nconst Example = () =\u003e (\n \u003cView style={styles.container}\u003e\n \u003cCalendarStrip\n style={{height:150, paddingTop: 20, paddingBottom: 10}}\n /\u003e\n \u003c/View\u003e\n);\n\nconst styles = StyleSheet.create({\n container: { flex: 1 }\n});\n```\n\n\u003c/details\u003e\n\n### Styling and animations Example\n\nEven though this component works withouth any customization, it is possible to customize almost everything, so you can make it as beautiful as you want:\n\n\u003cdiv align=\"center\"\u003e\n \u003cimg src=\"https://user-images.githubusercontent.com/6295083/81627795-958adc00-93c4-11ea-9307-878e9f023cfd.gif\" alt=\"\"\u003e\n\u003c/div\u003e\n\n\u003cdetails\u003e\n\n```jsx\nimport React, {Component} from 'react';\nimport {\n AppRegistry,\n View\n} from 'react-native';\nimport moment from 'moment';\n\nimport CalendarStrip from 'react-native-calendar-strip';\n\nclass Example extends Component {\n let datesWhitelist = [{\n start: moment(),\n end: moment().add(3, 'days') // total 4 days enabled\n }];\n let datesBlacklist = [ moment().add(1, 'days') ]; // 1 day disabled\n\n render() {\n return (\n \u003cView\u003e\n \u003cCalendarStrip\n calendarAnimation={{type: 'sequence', duration: 30}}\n daySelectionAnimation={{type: 'border', duration: 200, borderWidth: 1, borderHighlightColor: 'white'}}\n style={{height: 100, paddingTop: 20, paddingBottom: 10}}\n calendarHeaderStyle={{color: 'white'}}\n calendarColor={'#7743CE'}\n dateNumberStyle={{color: 'white'}}\n dateNameStyle={{color: 'white'}}\n highlightDateNumberStyle={{color: 'yellow'}}\n highlightDateNameStyle={{color: 'yellow'}}\n disabledDateNameStyle={{color: 'grey'}}\n disabledDateNumberStyle={{color: 'grey'}}\n datesWhitelist={datesWhitelist}\n datesBlacklist={datesBlacklist}\n iconLeft={require('./img/left-arrow.png')}\n iconRight={require('./img/right-arrow.png')}\n iconContainer={{flex: 0.1}}\n /\u003e\n \u003c/View\u003e\n );\n }\n}\n\nAppRegistry.registerComponent('Example', () =\u003e Example);\n```\n\n\u003c/details\u003e\n\n## Props\n\n### Initial data and onDateSelected handler\n\n| Prop | Description | Type | Default |\n| -------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------ | -------- | ---------- |\n| **`numDaysInWeek`** | Number of days shown in week. Applicable only when scrollable is false. | Number | **`7`** |\n| **`scrollable`** | Dates are scrollable if true. | Bool | **`False`**|\n| **`scrollerPaging`** | Dates are scrollable as a page (7 days) if true (Only works with `scrollable` set to true). | Bool | **`False`**|\n| **`startingDate`** | Date to be used for centering the calendar/showing the week based on that date. It is internally wrapped by `moment` so it accepts both `Date` and `moment Date`. | Any |\n| **`selectedDate`** | Date to be used as pre selected Date. It is internally wrapped by `moment` so it accepts both `Date` and `moment Date`. | Any |\n| **`onDateSelected`** | Function to be used as a callback when a date is selected. Receives param `date` Moment date. | Function |\n| **`onWeekChanged`** | Function to be used as a callback when a week is changed. Receives params `(start, end)` Moment dates. | Function |\n| **`onWeekScrollStart`**| Function to be used as a callback in `scrollable` mode when dates page starts gliding. Receives params `(start, end)` Moment dates. | Function |\n| **`onWeekScrollEnd`**| Function to be used as a callback in `scrollable` mode when dates page stops gliding. Receives params `(start, end)` Moment dates. | Function |\n| **`onHeaderSelected`**| Function to be used as a callback when the header is selected. Receives param object `{weekStartDate, weekEndDate}` Moment dates. | Function |\n| **`headerText`** | Text to use in the header. Use with `onWeekChanged` to receive the visible start \u0026 end dates. | String |\n| **`updateWeek`** | Update the week view if other props change. If `false`, the week view won't change when other props change, but will still respond to left/right selectors. | Bool | **`True`** |\n| **`useIsoWeekday`** | start week on ISO day of week (default true). If false, starts week on _startingDate_ parameter. | Bool | **`True`** |\n| **`minDate`** | minimum date that the calendar may navigate to. A week is allowed if minDate falls within the current week. | Any |\n| **`maxDate`** | maximum date that the calendar may navigate to. A week is allowed if maxDate falls within the current week. | Any |\n| **`datesWhitelist`** | Array of dates that are enabled, or a function callback which receives a date param and returns true if enabled. Array supports ranges specified with an object entry in the array. Check example \u003ca href=\"#dateswhitelist-array-example\"\u003eBelow\u003c/a\u003e | Array or Func |\n| **`datesBlacklist`** | Array of dates that are disabled, or a function callback. Same format as _datesWhitelist_. This overrides dates in _datesWhitelist_. | Array or Func |\n| **`markedDates`** | Dates that are marked with dots or lines. Format as \u003ca href=\"#markeddates-example\"\u003emarkedDatesFormat\u003c/a\u003e. | Array or Func | **[]**\n| **`scrollToOnSetSelectedDate`** | Controls whether to reposition the scroller to the date passed to `setSelectedDate`. | Bool | **`True`** |\n\n\n##### datesWhitelist Array Example\n\n```jsx\n datesWhitelist = [\n // single date (today)\n moment(),\n\n // date range\n {\n start: (Date or moment Date),\n end: (Date or moment Date)\n }\n ];\n\n return (\n \u003cCalendarStrip\n datesWhitelist={datesWhitelist}\n /\u003e\n );\n```\n\n##### datesBlacklist Callback Example\n\n```jsx\n const datesBlacklistFunc = date =\u003e {\n return date.isoWeekday() === 6; // disable Saturdays\n }\n\n return (\n \u003cCalendarStrip\n datesBlacklist={datesBlacklistFunc}\n /\u003e\n );\n```\n\n##### markedDates Example\n\u003cdiv align=\"center\"\u003e\n \u003cimg src=\"https://user-images.githubusercontent.com/6295083/83835989-e1752c00-a6b7-11ea-9104-c79a26438c50.png\" alt=\"marked dates example\"\u003e\n\u003c/div\u003e\n\n`markedDates` may be an array of dates with dots/lines, or a callback that returns the same shaped object for a date passed to it.\n\n```jsx\n // Marked dates array format\n markedDatesArray = [\n {\n date: '(string, Date or Moment object)',\n dots: [\n {\n color: \u003cstring\u003e,\n selectedColor: \u003cstring\u003e (optional),\n },\n ],\n },\n {\n date: '(string, Date or Moment object)',\n lines: [\n {\n color: \u003cstring\u003e,\n selectedColor: \u003cstring\u003e (optional),\n },\n ],\n },\n ];\n\n```\n\n```jsx\n // Marked dates callback\n markedDatesFunc = date =\u003e {\n // Dot\n if (date.isoWeekday() === 4) { // Thursdays\n return {\n dots:[{\n color: \u003cstring\u003e,\n selectedColor: \u003cstring\u003e (optional),\n }]\n };\n }\n // Line\n if (date.isoWeekday() === 6) { // Saturdays\n return {\n lines:[{\n color: \u003cstring\u003e,\n selectedColor: \u003cstring\u003e (optional),\n }]\n };\n }\n return {};\n }\n\n```\n\n### Hiding Components\n\n| Prop | Description | Type | Default |\n| ------------------- | --------------------------------- | ---- | ---------- |\n| **`showMonth`** | Show or hide the month label. | Bool | **`True`** |\n| **`showDate`** | Show or hide all the dates. | Bool | **`True`** |\n| **`showDayName`** | Show or hide the day name label | Bool | **`True`** |\n| **`showDayNumber`** | Show or hide the day number label | Bool | **`True`** |\n\n### Styling\n\n| Prop | Description | Type | Default |\n| ------------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------ | -------------- | ---------- |\n| **`style`** | Style for the top level CalendarStrip component. | Any |\n| **`innerStyle`** | Style for the responsively sized inner view. This is necessary to account for padding/margin from the top level view. The inner view has style `flex:1` by default. If this component is nested within another dynamically sized container, remove the flex style by passing in `[]`. | Any |\n| **`calendarHeaderStyle`** | Style for the header text of the calendar | Any |\n| **`calendarHeaderContainerStyle`** | Style for the header text wrapper of the calendar | Any |\n| **`calendarHeaderPosition`** | Position of the header text (above or below) | `above, below` | **`above`** |\n| **`calendarHeaderFormat`** | Format for the header text of the calendar. For options, refer to [Moment documentation](http://momentjs.com/docs/#/displaying/format/) | String |\n| **`dateNameStyle`** | Style for the name of the day on work days in dates strip | Any |\n| **`dateNumberStyle`** | Style for the number of the day on work days in dates strip. | Any |\n| **`dayContainerStyle`** | Style for all day containers. RNCS scales the width \u0026 height responsively, so take that into account if overriding them. | Any |\n| **`weekendDateNameStyle`** | Style for the name of the day on weekend days in dates strip. | Any |\n| **`weekendDateNumberStyle`** | Style for the number of the day on weekend days in dates strip. | Any |\n| **`styleWeekend`** | Whether to style weekend dates separately. | Bool | **`True`** |\n| **`highlightDateNameStyle`** | Style for the selected name of the day in dates strip. | Any |\n| **`highlightDateNumberStyle`** | Style for the selected number of the day in dates strip. | Any |\n| **`highlightDateNumberContainerStyle`** | Style for the selected date number container. Similar to `highlightDateNumberStyle`, but this fixes the issue that some styles may have on iOS when using `highlightDateNumberStyle`. | Any |\n| **`highlightDateContainerStyle`** | Style for the selected date container. | Object |\n| **`disabledDateNameStyle`** | Style for disabled name of the day in dates strip (controlled by datesWhitelist \u0026 datesBlacklist). | Any |\n| **`disabledDateNumberStyle`** | Style for disabled number of the day in dates strip (controlled by datesWhitelist \u0026 datesBlacklist). | Any |\n| **`markedDatesStyle`** | Style for the marked dates marker. | Object |\n| **`disabledDateOpacity`** | Opacity of disabled dates strip. | Number | **`0.3`** |\n| **`customDatesStyles`** | Custom per-date styling, overriding the styles above. Check Table \u003ca href=\"#customdatesstyles\"\u003e Below \u003c/a\u003e . | Array or Func | [] |\n| **`shouldAllowFontScaling`** | Override the underlying Text element scaling to respect font settings | Bool | **`True`**|\n| **`upperCaseDays`** | Format text of the days to upper case or title case | Bool | **`True`**|\n\n#### customDatesStyles\n\n\u003cdiv align=\"center\"\u003e\n \u003cimg src=\"https://cloud.githubusercontent.com/assets/6295083/25105759/a3335fc8-238b-11e7-9a92-3174498a0d89.png\" alt=\"Custom date styling example\"\u003e\n\u003c/div\u003e\n\nThis prop may be passed an array of style objects or a callback which receives a date param and returns a style object for it. The format for the style object follows:\n\n| Key | Description | Type | optional |\n| ------------------------ | ---------------------------------------------------------------------------------- | ---- | ----------- |\n| **`startDate`** | anything parseable by Moment. | Any | **`False`** (unused w/ callback)|\n| **`endDate`** | specify a range. If no endDate is supplied, startDate is treated as a single date. | Any | **`True`** (unused w/ callback) |\n| **`dateNameStyle`** | Text style for the name of the day. | Any | **`True`** |\n| **`dateNumberStyle`** | Text style for the number of the day. | Any | **`True`** |\n| **`highlightDateNameStyle`** | Text style for the selected name of the day. This overrides the global prop. | Any | **`True`** |\n| **`highlightDateNumberStyle`** | Text style for the selected number of the day. This overrides the global prop. | Any | **`True`** |\n| **`dateContainerStyle`** | Style for the date Container. | Any | **`True`** |\n\n##### Array Usage Example:\n\n\u003cdetails\u003e\n\n```jsx\n let customDatesStyles = [];\n let startDate = moment();\n for (let i=0; i\u003c6; i++) {\n customDatesStyles.push({\n startDate: startDate.clone().add(i, 'days'), // Single date since no endDate provided\n dateNameStyle: styles.dateNameStyle,\n dateNumberStyle: styles.dateNumberStyle,\n // Random color...\n dateContainerStyle: { backgroundColor: `#${(`#00000${(Math.random() * (1 \u003c\u003c 24) | 0).toString(16)}`).slice(-6)}` },\n });\n }\n\n render() {\n return (\n \u003cCalendarStrip\n customDatesStyles={customDatesStyles}\n ...\n /\u003e\n );\n }\n```\n\u003c/details\u003e\n\n##### Callback Usage Example:\n\n\u003cdetails\u003e\n\n```jsx\n const customDatesStylesFunc = date =\u003e {\n if (date.isoWeekday() === 5) { // Fridays\n return {\n dateNameStyle: {color: 'blue'},\n dateNumberStyle: {color: 'purple'},\n dateContainerStyle: {color: 'yellow'},\n }\n }\n }\n\n render() {\n return (\n \u003cCalendarStrip\n customDatesStyles={customDatesStylesFunc}\n ...\n /\u003e\n );\n }\n```\n\u003c/details\u003e\n\n\n#### Responsive Sizing\n\n| Prop | Description | Type | Default |\n| ---------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------- | ------ | -------- |\n| **`maxDayComponentSize`** | Maximum size that CalendarDay will responsively size up to. | Number | **`80`** |\n| **`minDayComponentSize`** | Minimum size that CalendarDay will responsively size down to. | Number | **`10`** |\n| **`responsiveSizingOffset`** | Adjust the responsive sizing. May be positive (increase size) or negative (decrease size). This value is added to the calculated day component width | Number | **`0`** |\n| **`dayComponentHeight`** | Fixed height for the CalendarDay component or custom `dayComponent`. | Number | |\n\n#### Icon Sizing\n\n| Prop | Description | Type | Default |\n| -------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---- | ------- |\n| **`iconLeft`** | Icon to be used for the left icon. It accepts require statement with url to the image (`require('./img/icon.png')`), or object with remote uri `{uri: 'http://example.com/image.png'}` | Any |\n| **`iconRight`** | Icon to be used for the right icon. It accepts require statement with url to the image (`require('./img/icon.png')`), or object with remote uri `{uri: 'http://example.com/image.png'}` | Any |\n| **`iconStyle`** | Style that is applied to both left and right icons. It is applied before _iconLeftStyle_ or _iconRightStyle_. | Any |\n| **`iconLeftStyle`** | Style for left icon. It will override all of the other styles applied to icons. | Any |\n| **`iconRightStyle`** | Style for right icon. It will override all of the other styles applied to icons. | Any |\n| **`iconContainer`** | Style for the container of icons. (Example usage is to add `flex` property to it so in the portrait mode, it will shrink the dates strip) | Any |\n| **`leftSelector`** | Component for the left selector control. May be an instance of any React component. This overrides the icon\\* props above. Passing in an empty array `[]` hides this control. | Any |\n| **`rightSelector`** | Component for the right selector control. May be an instance of any React component. This overrides the icon\\* props above. Passing in an empty array `[]` hides this control. | Any |\n\n#### Custom Day component\n\n| Prop | Description | Type | Default |\n| -------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---- | ------- |\n| **`dayComponent`** | User-defined component for the Days. All day-related props are passed to the custom component: https://github.com/BugiDev/react-native-calendar-strip/blob/master/src/CalendarStrip.js#L542 | Any |\n\n### Methods\n\nMethods may be accessed through the instantiated component's [ref](https://reactjs.org/docs/react-component.html).\n\n| Prop | Description |\n| ------------------------------------- | --------------------------------------------------------------------------------- |\n| **`getSelectedDate()`** | Returns the currently selected date. If no date is selected, returns undefined. |\n| **`setSelectedDate(date)`** | Sets the selected date. `date` may be a Moment object, ISO8601 date string, or any format that Moment is able to parse. It is the responsibility of the caller to select a date that makes sense (e.g. within the current week view). Passing in a value of `0` effectively clears the selected date. `scrollToOnSetSelectedDate` controls whether the scroller repositions to the selected date. |\n| **`getNextWeek()`** | Advance to the next week. |\n| **`getPreviousWeek()`** | Rewind to the previous week. |\n| **`updateWeekView(date)`** | Show the week starting on `date`. |\n\n\n## Animations\n\n### Week Strip Animation\n\n| Sequence example (dates shown one by one) | Parallel example (dates shown all at once) |\n| -------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |\n| ![alt text](https://user-images.githubusercontent.com/6295083/81627798-96237280-93c4-11ea-998f-53f7ee07caba.gif \"react-native-calendar-strip parallel animation demo\") | ![alt text](https://user-images.githubusercontent.com/6295083/81627797-96237280-93c4-11ea-874d-1f23fe6ba487.gif \"react-native-calendar-strip parallel animation demo\") |\n\n#### Week Strip Animation Options\n\nThe `calendarAnimation` prop accepts an object in the following format:\n\n| Props | Description | Types |\n| -------------- | --------------------------------------------------- | ------------------------ |\n| **`Type`** | Pick which type of animation you would like to show | `sequence` or `parallel` |\n| **`duration`** | duration of animation in milliseconds | Number (ms) |\n| **`useNativeDriver`** | Use Animated's native driver (default true) | Bool |\n\n### Day Selection Animation\n\n| Border example | Background example |\n| --------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------- |\n| ![alt text](https://user-images.githubusercontent.com/6295083/81627793-94f24580-93c4-11ea-9726-89a56b2c4d49.gif \"react-native-calendar-strip border animation demo\") | ![alt text](https://user-images.githubusercontent.com/6295083/81627791-93c11880-93c4-11ea-8a1b-e5fb5848d2a7.gif \"react-native-calendar-strip simple demo\") |\n\n#### Day Selection Animation Options\n\nThe `daySelectionAnimation` prop accepts an object in the following format:\n\n| Props | Description | Type |\n| -------------------------- | ---------------------------------------------------------------------------------------------------------------------- | ------------------------ |\n| **`Type`** | Pick which type of animation you would like to show | `border` or `background` |\n| **`duration`** | duration of animation in milliseconds | Number (ms) |\n| **`borderWidth`** | Selected day's border width. _Required if the type is set to border_. | Number |\n| **`borderHighlightColor`** | Selected day's border color. _Required if the type is set to border_. | String |\n| **`highlightColor`** | Highlighted color of selected date. _Required if the type is set to background_. | String |\n| **`animType`** | optional config options passed to [LayoutAnimation](https://facebook.github.io/react-native/docs/layoutanimation.html) | any |\n| **`animUpdateType`** | optional config options passed to [LayoutAnimation](https://facebook.github.io/react-native/docs/layoutanimation.html) | any |\n| **`animProperty`** | optional config options passed to [LayoutAnimation](https://facebook.github.io/react-native/docs/layoutanimation.html) | any |\n| **`animSpringDamping`** | optional config options passed to [LayoutAnimation](https://facebook.github.io/react-native/docs/layoutanimation.html) | any |\n\n## Localization\n\n| Props | Description | Type |\n| ------------ | ---------------- | ------ |\n| **`locale`** | Locale for dates | Object |\n\nThis prop is used for adding localization to react-native-calendar-strip component. The localization rules are the same as moments and can be found in [moments documentation](http://momentjs.com/docs/#/i18n/)\n\n| `locale` Props | Description | Type |\n| -------------- | ----------------------------------------------------------- | ------ |\n| **`name`** | The name of the locale (ex. 'fr') | String |\n| **`config`** | The config object holding all of the localization strings.. | Object |\n\n#### Build Release info\n\nTo properly make a release build, import the appropriate \"Locale\" module using the following steps. Not importing the locale module will crash the release build (though the dev build will work).\n\n1- import momentJs module:\n\u003e $ yarn add moment\n\nor\n\n\u003e $ npm install moment\n\n2- Go to your index.js and import the specific \"Locale\" after the main moment import. Ex:\n```\nimport 'moment';\nimport 'moment/locale/fr'; // language must match config\nimport moment from 'moment-timezone'; // only if timezone is needed\n```\n\nThe locale import must match the language specified in the locale config (example below).\n\n#### Example of one locale object is:\n\n\u003cdetails\u003e\n\n```jsx\nconst locale = {\n name: 'fr',\n config: {\n months: 'Janvier_Février_Mars_Avril_Mai_Juin_Juillet_Août_Septembre_Octobre_Novembre_Décembre'.split(\n '_'\n ),\n monthsShort: 'Janv_Févr_Mars_Avr_Mai_Juin_Juil_Août_Sept_Oct_Nov_Déc'.split(\n '_'\n ),\n weekdays: 'Dimanche_Lundi_Mardi_Mercredi_Jeudi_Vendredi_Samedi'.split('_'),\n weekdaysShort: 'Dim_Lun_Mar_Mer_Jeu_Ven_Sam'.split('_'),\n weekdaysMin: 'Di_Lu_Ma_Me_Je_Ve_Sa'.split('_'),\n longDateFormat: {\n LT: 'HH:mm',\n LTS: 'HH:mm:ss',\n L: 'DD/MM/YYYY',\n LL: 'D MMMM YYYY',\n LLL: 'D MMMM YYYY LT',\n LLLL: 'dddd D MMMM YYYY LT'\n },\n calendar: {\n sameDay: \"[Aujourd'hui à] LT\",\n nextDay: '[Demain à] LT',\n nextWeek: 'dddd [à] LT',\n lastDay: '[Hier à] LT',\n lastWeek: 'dddd [dernier à] LT',\n sameElse: 'L'\n },\n relativeTime: {\n future: 'dans %s',\n past: 'il y a %s',\n s: 'quelques secondes',\n m: 'une minute',\n mm: '%d minutes',\n h: 'une heure',\n hh: '%d heures',\n d: 'un jour',\n dd: '%d jours',\n M: 'un mois',\n MM: '%d mois',\n y: 'une année',\n yy: '%d années'\n },\n ordinalParse: /\\d{1,2}(er|ème)/,\n ordinal: function(number) {\n return number + (number === 1 ? 'er' : 'ème');\n },\n meridiemParse: /PD|MD/,\n isPM: function(input) {\n return input.charAt(0) === 'M';\n },\n // in case the meridiem units are not separated around 12, then implement\n // this function (look at locale/id.js for an example)\n // meridiemHour : function (hour, meridiem) {\n // return /* 0-23 hour, given meridiem token and hour 1-12 */\n // },\n meridiem: function(hours, minutes, isLower) {\n return hours \u003c 12 ? 'PD' : 'MD';\n },\n week: {\n dow: 1, // Monday is the first day of the week.\n doy: 4 // The week that contains Jan 4th is the first week of the year.\n }\n }\n};\n```\n\n\u003c/details\u003e\n\u003c/br\u003e\n\n## Device Specific Notes\n\n\u003cul\u003e\n\u003cli\u003eOnePlus devices use OnePlus Slate font by default which causes text being cut off in the date number in react-native-calendar-strip. To overcome this change the default font of the device or use a specific font throughout your app.\u003c/li\u003e\n\u003c/ul\u003e\n\n## Development with Sample Application\n\nTo facilitate development, the `example` directory has a sample app.\n\n```sh\ncd example\nnpm run cp\nnpm install\nnpm start\n```\n\nThe CalendarStrip source files are copied from the project root directory into `example/CalendarStrip` using `npm run cp`. If a source file is modified, it must be copied over again with `npm run cp`.\n\n## Contributing\n\nContributions are welcome!\n\n1. Fork it.\n2. Create your feature branch: `git checkout -b my-new-feature`\n3. Commit your changes: `git commit -am 'Add some feature'`\n4. Push to the branch: `git push origin my-new-feature`\n5. Submit a pull request :D\n\nOr open up [an issue](https://github.com/BugiDev/react-native-calendar-strip/issues).\n\n\n## Contributors\n\n\u003c!-- ALL-CONTRIBUTORS-LIST:START - Do not remove or modify this section --\u003e\n\n| [\u003cimg src=\"https://avatars0.githubusercontent.com/u/4005545?v=4\" width=\"100px;\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003eBogdan Begovic\u003c/b\u003e\u003c/sub\u003e](https://github.com/BugiDev)\u003cbr /\u003e[💬](#question-BugiDev \"Answering Questions\") [💻](https://github.com/bugidev/react-native-calendar-strip/commits?author=BugiDev \"Code\") [🎨](#design-BugiDev \"Design\") [📖](https://github.com/bugidev/react-native-calendar-strip/commits?author=BugiDev \"Documentation\") [💡](#example-BugiDev \"Examples\") [🔧](#tool-BugiDev \"Tools\") | [\u003cimg src=\"https://avatars3.githubusercontent.com/u/6295083?v=4\" width=\"100px;\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003ePeace\u003c/b\u003e\u003c/sub\u003e](https://github.com/peacechen)\u003cbr /\u003e[💬](#question-peacechen \"Answering Questions\") [🐛](https://github.com/bugidev/react-native-calendar-strip/issues?q=author%3Apeacechen \"Bug reports\") [💻](https://github.com/bugidev/react-native-calendar-strip/commits?author=peacechen \"Code\") [📖](https://github.com/bugidev/react-native-calendar-strip/commits?author=peacechen \"Documentation\") [👀](#review-peacechen \"Reviewed Pull Requests\") | [\u003cimg src=\"https://avatars1.githubusercontent.com/u/15834048?v=4\" width=\"100px;\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003eChris Burns\u003c/b\u003e\u003c/sub\u003e](http://www.usebillo.com)\u003cbr /\u003e[💬](#question-Burnsy \"Answering Questions\") [🐛](https://github.com/bugidev/react-native-calendar-strip/issues?q=author%3ABurnsy \"Bug reports\") [💻](https://github.com/bugidev/react-native-calendar-strip/commits?author=Burnsy \"Code\") [📖](https://github.com/bugidev/react-native-calendar-strip/commits?author=Burnsy \"Documentation\") [🔧](#tool-Burnsy \"Tools\") [💡](#example-Burnsy \"Examples\") [👀](#review-Burnsy \"Reviewed Pull Requests\") | [\u003cimg src=\"https://avatars0.githubusercontent.com/u/26348965?v=4\" width=\"100px;\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003esamcolby\u003c/b\u003e\u003c/sub\u003e](https://github.com/samcolby)\u003cbr /\u003e[💻](https://github.com/bugidev/react-native-calendar-strip/commits?author=samcolby \"Code\") [⚠️](https://github.com/bugidev/react-native-calendar-strip/commits?author=samcolby \"Tests\") | [\u003cimg src=\"https://avatars0.githubusercontent.com/u/239360?v=4\" width=\"100px;\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003eFlorian Biebel\u003c/b\u003e\u003c/sub\u003e](https://chromosom23.de)\u003cbr /\u003e[💻](https://github.com/bugidev/react-native-calendar-strip/commits?author=1ne8ight7even \"Code\") | [\u003cimg src=\"https://avatars0.githubusercontent.com/u/986135?v=4\" width=\"100px;\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003eVitaliy Zhukov\u003c/b\u003e\u003c/sub\u003e](http://intspirit.com/)\u003cbr /\u003e[💻](https://github.com/bugidev/react-native-calendar-strip/commits?author=Vitall \"Code\") | [\u003cimg src=\"https://avatars1.githubusercontent.com/u/15323137?v=4\" width=\"100px;\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003elbrdar\u003c/b\u003e\u003c/sub\u003e](https://github.com/lbrdar)\u003cbr /\u003e[💻](https://github.com/bugidev/react-native-calendar-strip/commits?author=lbrdar \"Code\") |\n| :---: | :---: | :---: | :---: | :---: | :---: | :---: |\n| [\u003cimg src=\"https://avatars0.githubusercontent.com/u/6774813?v=4\" width=\"100px;\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003eDimka Vasilyev\u003c/b\u003e\u003c/sub\u003e](https://github.com/gHashTag)\u003cbr /\u003e[💻](https://github.com/bugidev/react-native-calendar-strip/commits?author=gHashTag \"Code\") | [\u003cimg src=\"https://avatars2.githubusercontent.com/u/6241354?v=4\" width=\"100px;\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003eEugene\u003c/b\u003e\u003c/sub\u003e](https://github.com/hellpirat)\u003cbr /\u003e[💻](https://github.com/bugidev/react-native-calendar-strip/commits?author=hellpirat \"Code\") |\n\u003c!-- ALL-CONTRIBUTORS-LIST:END --\u003e\nThanks goes to these wonderful people ([emoji key](https://github.com/kentcdodds/all-contributors#emoji-key)):\n\n## Discussion and Collaboration\n\nIn addition to the [Github Issues](https://github.com/BugiDev/react-native-calendar-strip/issues) page, there is a [Discord group](https://discord.gg/RvFM97v) for React Native with a channel specifically for [react-native-calendar-strip](https://discordapp.com/channels/413352084981678082/413360340579909633). Thanks @MichelDiz for setting that up.\n\n## License\n\nLicensed under the MIT License.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbugidev%2Freact-native-calendar-strip","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fbugidev%2Freact-native-calendar-strip","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbugidev%2Freact-native-calendar-strip/lists"}