https://github.com/jorgeacruz/rn-calendar
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.
https://github.com/jorgeacruz/rn-calendar
calendar react-native react-native-calendars
Last synced: 1 day ago
JSON representation
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.
- Host: GitHub
- URL: https://github.com/jorgeacruz/rn-calendar
- Owner: jorgeacruz
- Created: 2025-07-22T21:42:50.000Z (12 months ago)
- Default Branch: master
- Last Pushed: 2025-07-23T01:53:31.000Z (12 months ago)
- Last Synced: 2025-10-20T04:48:15.886Z (9 months ago)
- Topics: calendar, react-native, react-native-calendars
- Language: TypeScript
- Homepage:
- Size: 503 KB
- Stars: 1
- Watchers: 0
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# The power of organization in the palm of your hand! | React Native Calendars
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.
## 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. Importing the Calendar component.
```
import React from 'react';
import { View, Text } from 'react-native';
import { Calendar } from 'react-native-calendars';
export default function App() {
return (
Meu Calendário
{
console.log('Selecionado:', day.dateString);
}}
markedDates={{
'2025-07-25': { selected: true, marked: true, selectedColor: '#00adf5' },
}}
/>
);
}
```
Or customize like this.
````
import { use, useState } from 'react';
import { StyleSheet, Text, View, StatusBar } from 'react-native';
import { Calendar, DateData, LocaleConfig } from 'react-native-calendars';
// Importing the Portuguese locale configuration
import { ptBR} from './utils/localecalendarConfig'
LocaleConfig.locales['pt-br'] = ptBR;
LocaleConfig.defaultLocale = 'pt-br';
export default function App() {
const [day, setDay] = useState();
const [month, setMonth] = useState();
const [year, setYear] = useState();
const [selected, setSelected] = useState();
return (
Calendário Personalizado
{
day
? ` ${(() => {
const [year, month, date] = day.dateString.split('-');
return `${date}-${month}-${year.slice(2)}`;
})()}`
: 'Nenhuma data selecionada'
}
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#000',
paddingTop:100,
paddingHorizontal: 20,
},
calendar:{
backgroundColor:'transparent',
},
Title:{
color: '#fff',
fontSize: 24,
marginVertical: 20,
textAlign: 'center',
fontWeight: 'bold',
},
dateSelected: {
marginTop: 20,
borderRadius: 5,
width:'50%',
paddingVertical: 20,
color: '#000',
fontSize: 25,
textAlign: 'center',
backgroundColor:'#fff'
},
});
````