{"id":21071169,"url":"https://github.com/minhomega/react-native-calendar-datepicker","last_synced_at":"2025-07-07T11:06:09.518Z","repository":{"id":129105443,"uuid":"598697407","full_name":"MinhOmega/react-native-calendar-datepicker","owner":"MinhOmega","description":null,"archived":false,"fork":false,"pushed_at":"2023-10-07T09:49:09.000Z","size":2505,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-07-04T22:46:10.277Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"apache-2.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/MinhOmega.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","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":"2023-02-07T16:25:39.000Z","updated_at":"2023-02-07T16:26:35.000Z","dependencies_parsed_at":null,"dependency_job_id":"abefe461-7592-484e-8f6d-edd23029dfa0","html_url":"https://github.com/MinhOmega/react-native-calendar-datepicker","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/MinhOmega/react-native-calendar-datepicker","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/MinhOmega%2Freact-native-calendar-datepicker","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/MinhOmega%2Freact-native-calendar-datepicker/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/MinhOmega%2Freact-native-calendar-datepicker/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/MinhOmega%2Freact-native-calendar-datepicker/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/MinhOmega","download_url":"https://codeload.github.com/MinhOmega/react-native-calendar-datepicker/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/MinhOmega%2Freact-native-calendar-datepicker/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":264067137,"owners_count":23552150,"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":[],"created_at":"2024-11-19T18:50:18.899Z","updated_at":"2025-07-07T11:06:09.486Z","avatar_url":"https://github.com/MinhOmega.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# React Native Calendar Datepicker\n\n## Description\n\nThis project aims at providing developers with a *cross-platform, highly customizable*, **calendar date picker** component for React Native.\n\nHere is a quick example of how it works, with custom appearance:\n\n![alt text](https://github.com/vlad-doru/react-native-calendar-datepicker/blob/master/demo.gif?raw=true \"Custom Demo Example\")\n\n## Installation\n\n`npm install --save react-native-calendar-datepicker`\n\n__Minimum react-native: \"^0.33.0\"__\n\n## Basic Usage\n\nGetting started with this component is very very easy. However, the initial appearance is minimalistic, but the library offers the developer the ability to easily customize it.\n\nIn its most basic form, the usage of this component looks like this:\n\n```javascript\nimport Calendar from 'react-native-calendar-datepicker';\nimport Moment from 'moment';\n\n...\n\n  \u003cCalendar\n    onChange={(date) =\u003e this.setState({date})}\n    selected={this.state.date}\n    // We use Moment.js to give the minimum and maximum dates.\n    minDate={Moment().startOf('day')}\n    maxDate={Moment().add(10, 'years').startOf('day')}\n    /\u003e\n```\n\n## API Reference\n\n**Note**: Each date provided will be a Moment.js object.\n\n### Basic properties\n\n| Property | Type | Explanation\n| --- | --- | ---\n| *selected* | Moment | The currently selected date\n| *onChange* | (date: Moment) =\u003e void | Callback for selecting a date\n| *onSlideStateChange* | (currentlySliding: boolean) =\u003e void | Called with `true` if user is currently sliding to switch months, or with `false` if user has stopped sliding. This can be useful for temporarily disabling scroll in a parent `ScrollView`. Be aware that this will be called repeatedly during a slide so avoid expensive functions or use a debouncing utility.\n| *minDate* | Moment | **[Mandatory]** Minimum selectable date\n| *maxDate* | Moment | **[Mandatory]** Maximum selectable date\n| *startStage* | \"day\"/\"month\"/\"year\" | **[Default: \"day\"]** Whether you would like to select the day, month or year first.\n| *finalStage* | \"day\"/\"month\"/\"year\" | **[Default: \"day\"]** The last level of selection you want.\n| *slideThreshold* | number | **[Default: min([width / 3, 250])]** The number of pixels after which the slide event will be triggered.\n| *showArrows* | boolean | **[Default: false]** Whether you would like to show arrow buttons for moving between months.\n| *slideCanBeTerminated* | boolean | **[Default: true]** Whether scrolling a parent `ScrollView` can terminate the current sliding interaction.\n\n### Locale specific calendar\n\nIn order to change the locale of the calendar, just change the locale of Moment.js. Please make sure to do so before using the calendar component.\n\n### Styling properties\n\nIn its initial form the component has a minimalistic appearance, shown in the picture below, but it can easily be customized.\n\n\u003cimg src=\"https://github.com/vlad-doru/react-native-calendar-datepicker/blob/master/barebones.png?raw=true\" width=\"200\"/\u003e\n\nStyled example with arrows:\n\n\u003cimg src=\"https://github.com/jasongaare/react-native-calendar-datepicker/blob/SelectionArrows/styled-with-arrows.png?raw=true\" width=\"200\"/\u003e\n\nBelow is the list of properties that can be used for styling. For a concrete example, check out the [demo app link](https://github.com/vlad-doru/react-native-calendar-datepicker/blob/master/demo/index.ios.js)\n\n| Property | Type | Explanation\n| --- | --- | ---\n| style | View.propTypes.style | View wrapper of the calendar\n| barView | View.propTypes.style | Styling the view wrapper for the bar at the top of the component\n| barText | Text.propTypes.style | Styling the text in the top bar\n| stageView | View.propTypes.style | Styling the view wrapper of the current stage\n| dayHeaderView | View.propTypes.style | Styling the view wrapper of day names\n| dayHeaderText | Text.propTypes.style | Styling the text of day names\n| dayRowView | View.propTypes.style | Styling each  row view of days\n| dayView | View.propTypes.style | View wrapper of each day\n| dayViewDisabled | View.propTypes.style | View wrapper of unavailable day\n| dayText | Text.propTypes.style | Styling the text of each day number\n| dayTodayText | Text.propTypes.style | Highlighting today in the calendar\n| daySelectedText | Text.propTypes.style | Highlighting the selected day in the calendar\n| dayDisabledText | Text.propTypes.style | Styling unavailable dates in the calendar\n| monthView | View.propTypes.style | Styling the TouchableHighlight for each mouth in the month selector\n| monthViewDisabled | View.propTypes.style | Styling for unavailable month in the month selector\n| monthText | Text.propTypes.style | Styling the text for each month in the month selector\n| monthDisabledText | Text.propTypes.style | Styling unavailable months\n| monthSelectedText | Text.propTypes.style | Styling selected month\n| yearMinTintColor | string | Styling left side of year slider\n| yearMaxTintColor | string | Styling right side of year slider\n| yearSlider | Slider.propTypes.style | Styling the year slider\n| yearText | Text.propTypes.style | Styling the year text\n\n## TODO\n\n- [ ] Add unit tests\n- [ ] Add integration test\n- [ ] Set up continous integration\n- [ ] Hook to codeclimate.com\n\n## Contributing\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\n## Credits\n\nMain Developer: [Vlad-Doru Ion](http://github.com/vlad-doru)\n\nPull requests by: \n* [Jason Gaare](http://github.com/jasongaare)\n* [Igor Kurr](http://github.com/igorrKurr) \n\n## License\n\nApache License 2.0\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fminhomega%2Freact-native-calendar-datepicker","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fminhomega%2Freact-native-calendar-datepicker","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fminhomega%2Freact-native-calendar-datepicker/lists"}