# rntpc_react-native-calendars
**Repository Path**: openharmony-sig/rntpc_react-native-calendars
## Basic Information
- **Project Name**: rntpc_react-native-calendars
- **Description**: No description available
- **Primary Language**: Unknown
- **License**: MIT
- **Default Branch**: master
- **Homepage**: https://gitee.com/openharmony-sig/rntpc_react-native-calendars
- **GVP Project**: No
## Statistics
- **Stars**: 0
- **Forks**: 0
- **Created**: 2024-10-14
- **Last Updated**: 2025-05-07
## Categories & Tags
**Categories**: Uncategorized
**Tags**: None
## README
# 🚨 **重要提示 | IMPORTANT**
>
> **⚠️ 此代码仓已归档。新地址请访问 [rntpc_react-native-calendars](https://gitcode.com/openharmony-sig/rntpc_react-native-calendars)。| ⚠️ This repository has been archived. For the new address, please visit [rntpc_react-native-calendars](https://gitcode.com/openharmony-sig/rntpc_react-native-calendars).**
>
---
>
[](https://stand-with-ukraine.pp.ua)
# React Native Calendars 🗓️ 📆
## A declarative cross-platform React Native calendar component for iOS and Android.
[](https://www.npmjs.com/package/react-native-calendars)
[](https://buildkite.com/wix-mobile-oss/react-native-calendars)
This module includes information on how to use this customizable **React Native** calendar component.
The package is compatible with both **Android** and **iOS**
> ### **Official documentation**
>
> 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).
## Features ✨
- Pure JS. No Native code required
- Date marking - dot, multi-dot, period, multi-period and custom marking
- Customization of style, content (days, months, etc) and dates
- Detailed documentation and examples
- Swipeable calendar with flexible custom rendering
- Scrolling to today, selecting dates, and more
- Allowing or blocking certain dates
- Accessibility support
- Automatic date formatting for different locales
## Try it out ⚡
You can run a sample module using these steps:
```
$ git clone git@github.com:wix/react-native-calendars.git
$ cd react-native-calendars
$ yarn install
$ cd ios && pod install && cd ..
$ react-native run-ios
```
You can check example screens source code in [example module screens](https://github.com/wix-private/wix-react-native-calendar/tree/master/example/src/screens)
This project is compatible with Expo/CRNA (without ejecting), and the examples have been [published on Expo](https://expo.io/@community/react-native-calendars-example)
## Getting Started 🔧
Here's how to get started with react-native-calendars in your React Native project:
### Install the package:
```
$ yarn add react-native-calendars
```
**RN Calendars is implemented in JavaScript, so no native module linking is required.**
## Usage 🚀
Basic usage examples of the library
##### **For detailed information on using this component, see the [official documentation site](https://wix.github.io/react-native-calendars/docs/Intro)**
### Importing the `Calendar` component
```javascript
import {Calendar, CalendarList, Agenda} from 'react-native-calendars';
```
### Use the `Calendar` component in your app:
```javascript
{
console.log('selected day', day);
}}
/>
```
## Some Code Examples
Here are a few code snippets that demonstrate how to use some of the key features of react-native-calendars:
### Creating a basic calendar with default settings:
```javascript
import React, {useState} from 'react';
import {Calendar, LocaleConfig} from 'react-native-calendars';
const App = () => {
const [selected, setSelected] = useState('');
return (
{
setSelected(day.dateString);
}}
markedDates={{
[selected]: {selected: true, disableTouchEvent: true, selectedDotColor: 'orange'}
}}
/>
);
};
export default App;
```
### Customize the appearance of the calendar:
```javascript
{
console.log('selected day', day);
}}
// Mark specific dates as marked
markedDates={{
'2012-03-01': {selected: true, marked: true, selectedColor: 'blue'},
'2012-03-02': {marked: true},
'2012-03-03': {selected: true, marked: true, selectedColor: 'blue'}
}}
/>
```
### Configuring the locale:
```javascript
import {LocaleConfig} from 'react-native-calendars';
import React, {useState} from 'react';
import {Calendar, LocaleConfig} from 'react-native-calendars';
LocaleConfig.locales['fr'] = {
monthNames: [
'Janvier',
'Février',
'Mars',
'Avril',
'Mai',
'Juin',
'Juillet',
'Août',
'Septembre',
'Octobre',
'Novembre',
'Décembre'
],
monthNamesShort: ['Janv.', 'Févr.', 'Mars', 'Avril', 'Mai', 'Juin', 'Juil.', 'Août', 'Sept.', 'Oct.', 'Nov.', 'Déc.'],
dayNames: ['Dimanche', 'Lundi', 'Mardi', 'Mercredi', 'Jeudi', 'Vendredi', 'Samedi'],
dayNamesShort: ['Dim.', 'Lun.', 'Mar.', 'Mer.', 'Jeu.', 'Ven.', 'Sam.'],
today: "Aujourd'hui"
};
LocaleConfig.defaultLocale = 'fr';
const App = () => {
const [selected, setSelected] = useState('');
return (
{
setSelected(day.dateString);
}}
markedDates={{
[selected]: {selected: true, disableTouchEvent: true, selectedDotColor: 'orange'}
}}
/>
);
};
export default App;
```
### Adding a global theme to the calendar:
```javascript
```
## Customized Calendar Examples
### Calendar
### Dot marking
### Multi-Dot marking
### Period Marking
### Multi-Period marking
### Custom marking
### Date loading indicator
### Scrollable semi-infinite calendar
### Horizontal calendar
### Agenda
## Authors
- [Tautvilas Mecinskas](https://github.com/tautvilas/) - Initial code - [@tautvilas](https://twitter.com/Tautvilas)
- Katrin Zotchev - Initial design - [@katrin_zot](https://twitter.com/katrin_zot)
See also the list of [contributors](https://github.com/wix/react-native-calendar-components/contributors) who participated in this project.
## Contributing
We welcome contributions to react-native-calendars.
If you have an idea for a new feature or have discovered a bug, please open an issue.
Please `yarn test` and `yarn lint` before pushing changes.
Don't forget to add a **title** and a **description** explaining the issue you're trying to solve and your proposed solution.
Screenshots and Gifs are VERY helpful to add to the PR for reviews.
Please DO NOT format the files - we're trying to keep a unified syntax and keep the reviewing process fast and simple.
## License
React Native Calendars is MIT licensed