{"id":30143924,"url":"https://github.com/jorgeacruz/rn-calendar","last_synced_at":"2026-07-14T02:31:38.811Z","repository":{"id":305967603,"uuid":"1024542129","full_name":"jorgeacruz/rn-calendar","owner":"jorgeacruz","description":"If you're building a mobile app and need a functional, beautiful, and easy-to-use calendar component, the react-native-calendars package is the perfect choice.","archived":false,"fork":false,"pushed_at":"2025-07-23T01:53:31.000Z","size":515,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":0,"default_branch":"master","last_synced_at":"2025-10-20T04:48:15.886Z","etag":null,"topics":["calendar","react-native","react-native-calendars"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/jorgeacruz.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"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,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null}},"created_at":"2025-07-22T21:42:50.000Z","updated_at":"2025-08-03T20:47:46.000Z","dependencies_parsed_at":"2025-10-20T00:38:00.406Z","dependency_job_id":null,"html_url":"https://github.com/jorgeacruz/rn-calendar","commit_stats":null,"previous_names":["jorgeacruz/rn-calendar"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/jorgeacruz/rn-calendar","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jorgeacruz%2Frn-calendar","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jorgeacruz%2Frn-calendar/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jorgeacruz%2Frn-calendar/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jorgeacruz%2Frn-calendar/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/jorgeacruz","download_url":"https://codeload.github.com/jorgeacruz/rn-calendar/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jorgeacruz%2Frn-calendar/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":35443979,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-05-26T15:22:16.424Z","status":"online","status_checked_at":"2026-07-14T02:00:06.603Z","response_time":114,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"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","react-native","react-native-calendars"],"created_at":"2025-08-11T07:35:36.200Z","updated_at":"2026-07-14T02:31:38.806Z","avatar_url":"https://github.com/jorgeacruz.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# The power of organization in the palm of your hand! | React Native Calendars\n\n![RN-Calendars](./assets/screen.png)\n\u003cp\u003eIf you're building a mobile app and need a functional, beautiful, and easy-to-use calendar component, the react-native-calendars package is the perfect choice.\u003c/p\u003e\n\n## Getting Started 🔧\n\nHere's how to get started with react-native-calendars in your React Native project:\n\n### Install the package:\n\n```\n$ yarn add react-native-calendars\n````\n\nRN Calendars is implemented in JavaScript, so no native module linking is required.\n\n### Usage 🚀\n\nBasic usage examples of the library. Importing the Calendar component.\n```\nimport React from 'react';\nimport { View, Text } from 'react-native';\nimport { Calendar } from 'react-native-calendars';\n\nexport default function App() {\n  return (\n    \u003cView style={{ flex: 1, paddingTop: 50 }}\u003e\n      \u003cText style={{ fontSize: 24, textAlign: 'center', marginBottom: 10 }}\u003e\n        Meu Calendário\n      \u003c/Text\u003e\n      \u003cCalendar\n        onDayPress={day =\u003e {\n          console.log('Selecionado:', day.dateString);\n        }}\n        markedDates={{\n          '2025-07-25': { selected: true, marked: true, selectedColor: '#00adf5' },\n        }}\n      /\u003e\n    \u003c/View\u003e\n  );\n}\n```\nOr customize like this.\n````\nimport { use, useState } from 'react';\nimport { StyleSheet, Text, View, StatusBar } from 'react-native';\nimport { Calendar, DateData, LocaleConfig } from 'react-native-calendars';  \n\n// Importing the Portuguese locale configuration\nimport { ptBR} from './utils/localecalendarConfig'\nLocaleConfig.locales['pt-br'] = ptBR;\nLocaleConfig.defaultLocale = 'pt-br';\n\nexport default function App() {\n\n  const [day, setDay] = useState\u003cDateData\u003e();\n  const [month, setMonth] = useState();\n  const [year, setYear] = useState();\n  const [selected, setSelected] = useState();\n\n  return (\n    \u003cView style={styles.container}\u003e\n      \u003cStatusBar hidden={true} /\u003e\n      \u003cText style={styles.Title}\u003e\n        Calendário Personalizado\u003c/Text\u003e\n      \u003cCalendar\n        style={styles.calendar}\n        // Customize the calendar appearance\n        headerStyle={{\n          borderBottomWidth: 1,\n          borderBottomColor: '#d6d7da',\n          paddingBottom: 10,\n          marginBottom: 10,\n        }}\n        // Customize the calendar theme\n        theme={{\n          monthTextColor: '#ffffff',\n          textMonthFontWeight: 'bold',\n          textMonthFontSize: 20,\n          todayTextColor: '#f53100',\n          selectedDayBackgroundColor: '#f53100',\n          selectedDayTextColor: '#ff0000',\n          arrowColor: '#ffffff',\n          calendarBackground:'transparent',\n\n          textDayStyle: {\n            color: '#ffffff',\n          },\n          textDisabledColor: '#999',\n\n          arrowStyle:{\n            marginHorizontal: 10,\n          }\n          \n        }}\n\n        // Disable past dates\n        minDate={new Date().toISOString().split('T')[0]} \n        hideExtraDays={true}\n\n        // Set the initial date\n        onDayPress={setDay}\n        // handle date selection\n        markedDates={\n          day \u0026\u0026 {\n            [day.dateString]: {selected: true, marked: true, selectedColor: '#fff' }\n          }\n        }\n\n        \n        /\u003e\n        \u003cView style={{alignItems:'center'}}\u003e\n          \u003cText  style={styles.dateSelected}\u003e\n            { \n              day \n                ? ` ${(() =\u003e {\n                      const [year, month, date] = day.dateString.split('-');\n                      return `${date}-${month}-${year.slice(2)}`;\n                  })()}`\n                : 'Nenhuma data selecionada'\n            }\n          \u003c/Text\u003e\n        \u003c/View\u003e\n    \u003c/View\u003e\n  );\n}\n\nconst styles = StyleSheet.create({\n  container: {\n    flex: 1,\n    backgroundColor: '#000',\n    paddingTop:100,\n    paddingHorizontal: 20,\n  },\n  calendar:{  \n    backgroundColor:'transparent',\n  },\n  Title:{\n    color: '#fff',\n    fontSize: 24,\n    marginVertical: 20,\n    textAlign: 'center',\n    fontWeight: 'bold',\n  },\n  dateSelected: {\n    marginTop: 20,\n    borderRadius: 5,\n    width:'50%',\n    paddingVertical: 20,\n    color: '#000',\n    fontSize: 25,\n    textAlign: 'center',\n    backgroundColor:'#fff'\n  },\n\n});\n\n````\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjorgeacruz%2Frn-calendar","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fjorgeacruz%2Frn-calendar","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjorgeacruz%2Frn-calendar/lists"}