[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"project-70724":3},{"id":4,"name":5,"fullName":6,"owner":7,"repo":5,"description":8,"homepage":9,"htmlUrl":10,"language":11,"languages":10,"totalLinesOfCode":10,"stars":12,"forks":13,"watchers":14,"openIssues":15,"contributorsCount":16,"subscribersCount":16,"size":16,"stars1d":17,"stars7d":17,"stars30d":18,"stars90d":16,"forks30d":16,"starsTrendScore":19,"compositeScore":20,"rankGlobal":10,"rankLanguage":10,"license":21,"archived":22,"fork":22,"defaultBranch":23,"hasWiki":22,"hasPages":24,"topics":25,"createdAt":10,"pushedAt":10,"updatedAt":32,"readmeContent":33,"aiSummary":34,"trendingCount":16,"starSnapshotCount":16,"syncStatus":35,"lastSyncTime":36,"discoverSource":37},70724,"react-native-calendars","wix\u002Freact-native-calendars","wix","React Native Calendar Components 🗓️ 📆 ","",null,"TypeScript",10288,3072,329,123,0,1,8,3,45,"MIT License",false,"master",true,[26,27,28,29,30,31],"android","calendar","hacktoberfest","ios","react-native","ui-components","2026-06-12 02:02:42","[![Stand With Ukraine](https:\u002F\u002Fraw.githubusercontent.com\u002Fvshymanskyy\u002FStandWithUkraine\u002Fmain\u002Fbanner2-direct.svg)](https:\u002F\u002Fstand-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:\u002F\u002Fimg.shields.io\u002Fnpm\u002Fv\u002Freact-native-calendars.svg)](https:\u002F\u002Fwww.npmjs.com\u002Fpackage\u002Freact-native-calendars)\n[![Build status](https:\u002F\u002Fbadge.buildkite.com\u002F1a911fa39db2518a615b73f3dc18ec0938a66403f2ad66f79b.svg)](https:\u002F\u002Fbuildkite.com\u002Fwix-mobile-oss\u002Freact-native-calendars)\n\u003Cbr>\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>\n\n> ### **Official documentation**\n>\n> This README provides basic examples of how to get started with `react-native-calendars`. For detailed information, refer to the [official documentation site](https:\u002F\u002Fwix.github.io\u002Freact-native-calendars\u002Fdocs\u002FIntro).\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\u002Freact-native-calendars.git\n\n$ cd react-native-calendars\n\n$ yarn install\n\n$ cd ios && pod install && cd ..\n\n$ react-native run-ios\n```\n\nYou can check example screens source code in [example module screens](https:\u002F\u002Fgithub.com\u002Fwix-private\u002Fwix-react-native-calendar\u002Ftree\u002Fmaster\u002Fexample\u002Fsrc\u002Fscreens)\n\nThis project is compatible with Expo\u002FCRNA (without ejecting), and the examples have been [published on Expo](https:\u002F\u002Fexpo.io\u002F@community\u002Freact-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:\u002F\u002Fwix.github.io\u002Freact-native-calendars\u002Fdocs\u002FIntro)**\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 => {\n    console.log('selected day', day);\n  }}\n\u002F>\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 = () => {\n  const [selected, setSelected] = useState('');\n\n  return (\n    \u003CCalendar\n      onDayPress={day => {\n        setSelected(day.dateString);\n      }}\n      markedDates={{\n        [selected]: {selected: true, disableTouchEvent: true, selectedDotColor: 'orange'}\n      }}\n    \u002F>\n  );\n};\n\nexport default App;\n```\n\n### Customize the appearance of the calendar:\n\n```javascript\n\u003CCalendar\n  \u002F\u002F Customize the appearance of the calendar\n  style={{\n    borderWidth: 1,\n    borderColor: 'gray',\n    height: 350\n  }}\n  \u002F\u002F Specify the current date\n  current={'2012-03-01'}\n  \u002F\u002F Callback that gets called when the user selects a day\n  onDayPress={day => {\n    console.log('selected day', day);\n  }}\n  \u002F\u002F 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\u002F>\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 = () => {\n  const [selected, setSelected] = useState('');\n\n  return (\n    \u003CCalendar\n      onDayPress={day => {\n        setSelected(day.dateString);\n      }}\n      markedDates={{\n        [selected]: {selected: true, disableTouchEvent: true, selectedDotColor: 'orange'}\n      }}\n    \u002F>\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    \u002F>\n```\n\n## Customized Calendar Examples\n\n### Calendar\n\n  \u003Cimg src=\"https:\u002F\u002Fgithub.com\u002Fwix-private\u002Fwix-react-native-calendar\u002Fblob\u002Fmaster\u002Fdemo\u002Fassets\u002Fcalendar.gif?raw=true\">\n\n### Dot marking\n\n  \u003Cimg height={50} src=\"https:\u002F\u002Fgithub.com\u002Fwix-private\u002Fwix-react-native-calendar\u002Fblob\u002Fmaster\u002Fdemo\u002Fassets\u002Fmarking1.png?raw=true\">\n\n### Multi-Dot marking\n\n \u003Cimg height=50 src=\"https:\u002F\u002Fgithub.com\u002Fwix-private\u002Fwix-react-native-calendar\u002Fblob\u002Fmaster\u002Fdemo\u002Fassets\u002Fmarking4.png?raw=true\">\n\n### Period Marking\n\n  \u003Cimg height=50 src=\"https:\u002F\u002Fgithub.com\u002Fwix-private\u002Fwix-react-native-calendar\u002Fblob\u002Fmaster\u002Fdemo\u002Fassets\u002Fmarking2.png?raw=true\">\n\n  \u003Cimg height=50 src=\"https:\u002F\u002Fgithub.com\u002Fwix-private\u002Fwix-react-native-calendar\u002Fblob\u002Fmaster\u002Fdemo\u002Fassets\u002Fmarking3.png?raw=true\">\n\n### Multi-Period marking\n\n  \u003Cimg height=50 src=\"https:\u002F\u002Fgithub.com\u002Fwix-private\u002Fwix-react-native-calendar\u002Fblob\u002Fmaster\u002Fdemo\u002Fassets\u002Fmarking6.png?raw=true\">\n\n### Custom marking\n\n  \u003Cimg height=50 src=\"https:\u002F\u002Fgithub.com\u002Fwix-private\u002Fwix-react-native-calendar\u002Fblob\u002Fmaster\u002Fdemo\u002Fassets\u002Fmarking5.png?raw=true\">\n\n  \u003Cimg height=350 src=\"https:\u002F\u002Fgithub.com\u002Fwix-private\u002Fwix-react-native-calendar\u002Fblob\u002Fmaster\u002Fdemo\u002Fassets\u002Fmulti-marking.png?raw=true\">\n\n### Date loading indicator\n\n  \u003Cimg height=50 src=\"https:\u002F\u002Fgithub.com\u002Fwix-private\u002Fwix-react-native-calendar\u002Fblob\u002Fmaster\u002Fdemo\u002Fassets\u002Floader.png?raw=true\">\n\n### Scrollable semi-infinite calendar\n\n  \u003Cimg src=\"https:\u002F\u002Fgithub.com\u002Fwix-private\u002Fwix-react-native-calendar\u002Fblob\u002Fmaster\u002Fdemo\u002Fassets\u002Fcalendar-list.gif?raw=true\">\n\n### Horizontal calendar\n\n  \u003Cimg src=\"https:\u002F\u002Fgithub.com\u002Fwix-private\u002Fwix-react-native-calendar\u002Fblob\u002Fmaster\u002Fdemo\u002Fassets\u002Fhorizontal-calendar-list.gif?raw=true\">\n\n### Agenda\n\n  \u003Cimg src=\"https:\u002F\u002Fgithub.com\u002Fwix-private\u002Fwix-react-native-calendar\u002Fblob\u002Fmaster\u002Fdemo\u002Fassets\u002Fagenda.gif?raw=true\">\n\n\u003Cbr>\n\n## Authors\n\n- [Tautvilas Mecinskas](https:\u002F\u002Fgithub.com\u002Ftautvilas\u002F) - Initial code - [@tautvilas](https:\u002F\u002Ftwitter.com\u002FTautvilas)\n- Katrin Zotchev - Initial design - [@katrin_zot](https:\u002F\u002Ftwitter.com\u002Fkatrin_zot)\n\nSee also the list of [contributors](https:\u002F\u002Fgithub.com\u002Fwix\u002Freact-native-calendar-components\u002Fcontributors) 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","wix\u002Freact-native-calendars 是一个用于 iOS 和 Android 的跨平台 React Native 日历组件。其核心功能包括纯 JavaScript 实现、无需原生代码，支持多种日期标记方式（如点、多点、周期等）和高度自定义样式与内容。此外，它还提供了丰富的文档和示例，支持滑动日历、滚动到今日、选择日期等功能，并且具备良好的可访问性和国际化支持。此项目非常适合需要在移动应用中集成日历功能的开发者使用，尤其适用于那些希望快速开发并保持良好用户体验的应用场景。",2,"2026-06-11 03:33:50","high_star"]