{"id":3926,"url":"https://github.com/wix/react-native-calendars","last_synced_at":"2025-09-09T20:37:42.038Z","repository":{"id":37444191,"uuid":"73475252","full_name":"wix/react-native-calendars","owner":"wix","description":"React Native Calendar Components 🗓️ 📆 ","archived":false,"fork":false,"pushed_at":"2025-04-30T06:52:40.000Z","size":19187,"stargazers_count":9892,"open_issues_count":206,"forks_count":3009,"subscribers_count":352,"default_branch":"master","last_synced_at":"2025-05-05T11:48:25.597Z","etag":null,"topics":["android","calendar","hacktoberfest","ios","react-native","ui-components"],"latest_commit_sha":null,"homepage":"","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/wix.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,"zenodo":null}},"created_at":"2016-11-11T12:17:27.000Z","updated_at":"2025-05-05T10:57:10.000Z","dependencies_parsed_at":"2022-07-10T14:46:44.712Z","dependency_job_id":"fc878a1a-5eaf-48d4-ae20-679774db2094","html_url":"https://github.com/wix/react-native-calendars","commit_stats":{"total_commits":1959,"total_committers":207,"mean_commits":9.46376811594203,"dds":0.7646758550280756,"last_synced_commit":"8d924e7a4b3abc2ba2ebd04698da33926c90f65e"},"previous_names":[],"tags_count":1372,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/wix%2Freact-native-calendars","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/wix%2Freact-native-calendars/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/wix%2Freact-native-calendars/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/wix%2Freact-native-calendars/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/wix","download_url":"https://codeload.github.com/wix/react-native-calendars/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":252504165,"owners_count":21758654,"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","hacktoberfest","ios","react-native","ui-components"],"created_at":"2024-01-05T20:16:55.538Z","updated_at":"2025-09-09T20:37:42.029Z","avatar_url":"https://github.com/wix.png","language":"TypeScript","funding_links":[],"categories":["Components","React Native","TypeScript","Libraries","Others","UI Components"],"sub_categories":["UI","Special use case libraries","Releases","Calendars \u0026 Date/Time Pickers"],"readme":"[![Stand With Ukraine](https://raw.githubusercontent.com/vshymanskyy/StandWithUkraine/main/banner2-direct.svg)](https://stand-with-ukraine.pp.ua)\n\n# React Native Calendars 🗓️ 📆\n\n## A declarative cross-platform React Native calendar component for iOS and Android.\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://badge.buildkite.com/1a911fa39db2518a615b73f3dc18ec0938a66403f2ad66f79b.svg)](https://buildkite.com/wix-mobile-oss/react-native-calendars)\n\u003cbr\u003e\n\nThis module includes information on how to use this customizable **React Native** calendar component.\n\nThe package is compatible with both **Android** and **iOS**\n\n\u003cbr\u003e\n\n\u003e ### **Official documentation**\n\u003e\n\u003e This README provides basic examples of how to get started with `react-native-calendars`. For detailed information, refer to the [official documentation site](https://wix.github.io/react-native-calendars/docs/Intro).\n\n## Features ✨\n\n- Pure JS. No Native code required\n- Date marking - dot, multi-dot, period, multi-period and custom marking\n- Customization of style, content (days, months, etc) and dates\n- Detailed documentation and examples\n- Swipeable calendar with flexible custom rendering\n- Scrolling to today, selecting dates, and more\n- Allowing or blocking certain dates\n- Accessibility support\n- Automatic date formatting for different locales\n\n## Try it out ⚡\n\nYou can run a sample module using these steps:\n\n```\n$ git clone git@github.com:wix/react-native-calendars.git\n\n$ cd react-native-calendars\n\n$ yarn install\n\n$ cd ios \u0026\u0026 pod install \u0026\u0026 cd ..\n\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## 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\n**RN Calendars is implemented in JavaScript, so no native module linking is required.**\n\n## Usage 🚀\n\nBasic usage examples of the library\n\n##### **For detailed information on using this component, see the [official documentation site](https://wix.github.io/react-native-calendars/docs/Intro)**\n\n### Importing the `Calendar` component\n\n```javascript\nimport {Calendar, CalendarList, Agenda} from 'react-native-calendars';\n```\n\n### Use the `Calendar` component in your app:\n\n```javascript\n\u003cCalendar\n  onDayPress={day =\u003e {\n    console.log('selected day', day);\n  }}\n/\u003e\n```\n\n## Some Code Examples\n\nHere are a few code snippets that demonstrate how to use some of the key features of react-native-calendars:\n\n### Creating a basic calendar with default settings:\n\n```javascript\nimport React, {useState} from 'react';\nimport {Calendar, LocaleConfig} from 'react-native-calendars';\n\nconst App = () =\u003e {\n  const [selected, setSelected] = useState('');\n\n  return (\n    \u003cCalendar\n      onDayPress={day =\u003e {\n        setSelected(day.dateString);\n      }}\n      markedDates={{\n        [selected]: {selected: true, disableTouchEvent: true, selectedDotColor: 'orange'}\n      }}\n    /\u003e\n  );\n};\n\nexport default App;\n```\n\n### Customize the appearance of the calendar:\n\n```javascript\n\u003cCalendar\n  // Customize the appearance of the calendar\n  style={{\n    borderWidth: 1,\n    borderColor: 'gray',\n    height: 350\n  }}\n  // Specify the current date\n  current={'2012-03-01'}\n  // Callback that gets called when the user selects a day\n  onDayPress={day =\u003e {\n    console.log('selected day', day);\n  }}\n  // Mark specific dates as marked\n  markedDates={{\n    '2012-03-01': {selected: true, marked: true, selectedColor: 'blue'},\n    '2012-03-02': {marked: true},\n    '2012-03-03': {selected: true, marked: true, selectedColor: 'blue'}\n  }}\n/\u003e\n```\n\n### Configuring the locale:\n\n```javascript\nimport {LocaleConfig} from 'react-native-calendars';\nimport React, {useState} from 'react';\nimport {Calendar, 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};\n\nLocaleConfig.defaultLocale = 'fr';\n\nconst App = () =\u003e {\n  const [selected, setSelected] = useState('');\n\n  return (\n    \u003cCalendar\n      onDayPress={day =\u003e {\n        setSelected(day.dateString);\n      }}\n      markedDates={{\n        [selected]: {selected: true, disableTouchEvent: true, selectedDotColor: 'orange'}\n      }}\n    /\u003e\n  );\n};\n\nexport default App;\n```\n\n### Adding a global theme to the calendar:\n\n```javascript\n    \u003cCalendar\n      style={{\n        borderWidth: 1,\n        borderColor: 'gray',\n        height: 350,\n      }}\n      theme={{\n        backgroundColor: '#ffffff',\n        calendarBackground: '#ffffff',\n        textSectionTitleColor: '#b6c1cd',\n        selectedDayBackgroundColor: '#00adf5',\n        selectedDayTextColor: '#ffffff',\n        todayTextColor: '#00adf5',\n        dayTextColor: '#2d4150',\n        textDisabledColor: '#dd99ee'\n      }}\n    /\u003e\n```\n\n## Customized Calendar Examples\n\n### Calendar\n\n  \u003cimg src=\"https://github.com/wix-private/wix-react-native-calendar/blob/master/demo/assets/calendar.gif?raw=true\"\u003e\n\n### Dot marking\n\n  \u003cimg height={50} src=\"https://github.com/wix-private/wix-react-native-calendar/blob/master/demo/assets/marking1.png?raw=true\"\u003e\n\n### Multi-Dot marking\n\n \u003cimg height=50 src=\"https://github.com/wix-private/wix-react-native-calendar/blob/master/demo/assets/marking4.png?raw=true\"\u003e\n\n### Period Marking\n\n  \u003cimg height=50 src=\"https://github.com/wix-private/wix-react-native-calendar/blob/master/demo/assets/marking2.png?raw=true\"\u003e\n\n  \u003cimg height=50 src=\"https://github.com/wix-private/wix-react-native-calendar/blob/master/demo/assets/marking3.png?raw=true\"\u003e\n\n### Multi-Period marking\n\n  \u003cimg height=50 src=\"https://github.com/wix-private/wix-react-native-calendar/blob/master/demo/assets/marking6.png?raw=true\"\u003e\n\n### Custom marking\n\n  \u003cimg height=50 src=\"https://github.com/wix-private/wix-react-native-calendar/blob/master/demo/assets/marking5.png?raw=true\"\u003e\n\n  \u003cimg height=350 src=\"https://github.com/wix-private/wix-react-native-calendar/blob/master/demo/assets/multi-marking.png?raw=true\"\u003e\n\n### Date loading indicator\n\n  \u003cimg height=50 src=\"https://github.com/wix-private/wix-react-native-calendar/blob/master/demo/assets/loader.png?raw=true\"\u003e\n\n### Scrollable semi-infinite calendar\n\n  \u003cimg src=\"https://github.com/wix-private/wix-react-native-calendar/blob/master/demo/assets/calendar-list.gif?raw=true\"\u003e\n\n### Horizontal calendar\n\n  \u003cimg src=\"https://github.com/wix-private/wix-react-native-calendar/blob/master/demo/assets/horizontal-calendar-list.gif?raw=true\"\u003e\n\n### Agenda\n\n  \u003cimg src=\"https://github.com/wix-private/wix-react-native-calendar/blob/master/demo/assets/agenda.gif?raw=true\"\u003e\n\n\u003cbr\u003e\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\nWe welcome contributions to react-native-calendars.\n\nIf you have an idea for a new feature or have discovered a bug, please open an issue.\n\nPlease `yarn test` and `yarn lint` before pushing changes.\n\nDon't forget to add a **title** and a **description** explaining the issue you're trying to solve and your proposed solution.\n\nScreenshots and Gifs are VERY helpful to add to the PR for reviews.\n\nPlease DO NOT format the files - we're trying to keep a unified syntax and keep the reviewing process fast and simple.\n\n## License\n\nReact Native Calendars is MIT licensed\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fwix%2Freact-native-calendars","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fwix%2Freact-native-calendars","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fwix%2Freact-native-calendars/lists"}