{"id":4172,"url":"https://github.com/maggialejandro/react-native-calendario","last_synced_at":"2025-05-14T16:13:29.343Z","repository":{"id":37561907,"uuid":"129140285","full_name":"maggialejandro/react-native-calendario","owner":"maggialejandro","description":"📆 React Native Calendar","archived":false,"fork":false,"pushed_at":"2024-10-26T12:47:28.000Z","size":5412,"stargazers_count":503,"open_issues_count":28,"forks_count":48,"subscribers_count":6,"default_branch":"master","last_synced_at":"2024-10-29T15:25:59.591Z","etag":null,"topics":["android","calendar","ios","react-native","typescript"],"latest_commit_sha":null,"homepage":"https://react-native-components.gitbook.io/calendar/","language":"TypeScript","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/maggialejandro.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":"2018-04-11T18:56:02.000Z","updated_at":"2024-10-22T09:51:11.000Z","dependencies_parsed_at":"2024-11-08T20:36:44.933Z","dependency_job_id":null,"html_url":"https://github.com/maggialejandro/react-native-calendario","commit_stats":{"total_commits":359,"total_committers":16,"mean_commits":22.4375,"dds":0.5459610027855153,"last_synced_commit":"4dd96d619db73ecbbeb53a95391b05db7e5d7e91"},"previous_names":[],"tags_count":63,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/maggialejandro%2Freact-native-calendario","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/maggialejandro%2Freact-native-calendario/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/maggialejandro%2Freact-native-calendario/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/maggialejandro%2Freact-native-calendario/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/maggialejandro","download_url":"https://codeload.github.com/maggialejandro/react-native-calendario/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248631669,"owners_count":21136554,"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":["android","calendar","ios","react-native","typescript"],"created_at":"2024-01-05T20:17:03.382Z","updated_at":"2025-04-12T20:39:15.759Z","avatar_url":"https://github.com/maggialejandro.png","language":"TypeScript","funding_links":[],"categories":["Components","Others"],"sub_categories":["UI"],"readme":"# React Native Calendar 📆\n\n![Coverlogo](https://imgur.com/LINQ6HZ.png)\n\n![BuildStatus](https://github.com/maggialejandro/react-native-calendario/actions/workflows/lint.yml/badge.svg)\n[![NPM version](https://img.shields.io/npm/v/react-native-calendario.svg)](https://www.npmjs.com/package/react-native-calendario)\n[![npm](https://img.shields.io/npm/dw/react-native-calendario.svg)](https://github.com/maggialejandro/react-native-calendario)\n[![CodeFactor](https://www.codefactor.io/repository/github/maggialejandro/react-native-calendario/badge)](https://www.codefactor.io/repository/github/maggialejandro/react-native-calendario)\n[![Codacy Badge](https://api.codacy.com/project/badge/Grade/832690f286a5451cacdae664d63be3b9)](https://www.codacy.com/app/maggialejandro/react-native-calendario?utm_source=github.com\u0026utm_medium=referral\u0026utm_content=maggialejandro/react-native-calendario\u0026utm_campaign=Badge_Grade)\n[![PRs Welcome](https://img.shields.io/badge/PRs-welcome-brightgreen.svg)](https://makeapullrequest.com)\n\n![](https://media.giphy.com/media/eu8fFCG3rs3IEYwyYk/giphy.gif) ![](https://media.giphy.com/media/g0pZuxQ16frVSmEBSt/giphy.gif)\n\n## Installation\n\n```console\nnpm install react-native-calendario --save\n```\n\nUsing yarn\n\n```console\nyarn add react-native-calendario\n```\n\n## Usage\n\n```typescript\nimport { Calendar } from 'react-native-calendario';\n```\n\n```typescript\n\u003cCalendar\n  onChange={(range) =\u003e console.log(range)}\n  minDate={new Date(2018, 3, 20)}\n  startDate={new Date(2018, 3, 30)}\n  endDate={new Date(2018, 4, 5)}\n  theme={{\n    activeDayColor: {},\n    monthTitleTextStyle: {\n      color: '#6d95da',\n      fontWeight: '300',\n      fontSize: 16,\n    },\n    emptyMonthContainerStyle: {},\n    emptyMonthTextStyle: {\n      fontWeight: '200',\n    },\n    weekColumnsContainerStyle: {},\n    weekColumnStyle: {\n      paddingVertical: 10,\n    },\n    weekColumnTextStyle: {\n      color: '#b6c1cd',\n      fontSize: 13,\n    },\n    nonTouchableDayContainerStyle: {},\n    nonTouchableDayTextStyle: {},\n    startDateContainerStyle: {},\n    endDateContainerStyle: {},\n    dayContainerStyle: {},\n    dayTextStyle: {\n      color: '#2d4150',\n      fontWeight: '200',\n      fontSize: 15,\n    },\n    dayOutOfRangeContainerStyle: {},\n    dayOutOfRangeTextStyle: {},\n    todayContainerStyle: {},\n    todayTextStyle: {\n      color: '#6d95da',\n    },\n    activeDayContainerStyle: {\n      backgroundColor: '#6d95da',\n    },\n    activeDayTextStyle: {\n      color: 'white',\n    },\n    nonTouchableLastMonthDayTextStyle: {},\n  }}\n/\u003e\n```\n\n## API\n\n| Prop                        | Description                            | Required?            | Default       | Type             |\n| --------------------------- | -------------------------------------- | -------------------- | ------------- | ---------------- |\n| **`onChange`** (deprecated) | Callback called when a day is pressed. | no                   |               | Function         |\n| **`onPress`**               | Callback called when a day is pressed. | yes                  |               | (Date) =\u003e void   |\n| **`minDate`**               | Minimum date that can be selected.     | no                   | null          | Date             |\n| **`maxDate`**               | Maximum date that can be selected.     | no                   | null          | Date             |\n| **`startDate`**             | Selected start date                    | no                   | null          | Date             |\n| **`endDate`**               | Selected end date                      | requires _startDate_ | null          | Date             |\n| **`theme`**                 | Calendar StyleSheet                    | no                   | null          | ThemeType        |\n| **`locale`**                | Calendar language                      | es, en, fr, br       | 'en'          | LocaleType       |\n| **`dayNames`**              | Array of day names                     | no                   | []            | string[]         |\n| **`monthNames`**            | Array of names of each mo              | no                   | []            | string[]         |\n| **`showWeekdays`**          | Show Week columns                      | no                   | true          | boolean          |\n| **`showMonthTitle`**        | Show Month title                       | no                   | true          | boolean          |\n| **`initialListSize`**       | FlatList initialNumToRender            | no                   | 2             | number           |\n| **`startingMonth`**         | First month to render                  | no                   | current month | 'YYYY-MM-DD'     |\n| **`numberOfMonths`**        | Number of months to render             | no                   | 12            | number           |\n| **`disableRange`**          | Turn off range date selection          | no                   | false         | boolean          |\n| **`firstDayMonday`**        | Monday as first day of the week        | no                   | false         | boolean          |\n| **`monthHeight`**           | Change Month row height                | no                   | 370           | number           |\n| **`markedDays`**            | Multi-dot support on Day component     | no                   | undefined     | MarkedDays       |\n| **`disabledDays`**          | Disabled days                          | no                   | null          | {[string]: any } |\n| **`renderDayContent`**      | Render custom Day content              | no                   | null          | Function         |\n| **`renderAllMonths`**       | Use this for web, render all months    | no                   | null          | boolean          |\n| **`viewableItemsChanged`**  | handleViewableItemsChange callback     | no                   | null          | Function         |\n| **`disableOffsetDays`**     | Remove offset Days.                    | no                   | false         | boolean          |\n\n## License\n\nMIT\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmaggialejandro%2Freact-native-calendario","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmaggialejandro%2Freact-native-calendario","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmaggialejandro%2Freact-native-calendario/lists"}