Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/renatoosaka/gobarber-react-native-calendar
https://github.com/renatoosaka/gobarber-react-native-calendar
calendar gobarber gobarber-mobile gostack gostack14 react react-native rocketseat
Last synced: about 7 hours ago
JSON representation
- Host: GitHub
- URL: https://github.com/renatoosaka/gobarber-react-native-calendar
- Owner: renatoosaka
- Created: 2020-12-10T17:26:17.000Z (almost 4 years ago)
- Default Branch: main
- Last Pushed: 2020-12-10T18:30:42.000Z (almost 4 years ago)
- Last Synced: 2024-09-20T12:15:30.170Z (5 days ago)
- Topics: calendar, gobarber, gobarber-mobile, gostack, gostack14, react, react-native, rocketseat
- Language: TypeScript
- Homepage: https://www.npmjs.com/package/@gobarber/react-native-calendar
- Size: 59.6 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# What is this?
A simple calendar.
# Installation
`npm i @gobarber/react-native-calendar --save`
or
`yarn add @gobarber/react-native-calendar`
Then...
```
import React from 'react';
import {StatusBar, View} from 'react-native';
import Calendar from '@gobarber/react-native-calendar';
const App = () => {
return (
<>
console.log(date.toString())}
onSelectDate={(date) => console.log(date.toString())}
/>
>
);
};
export default App;
```
## Options
Calendar supports some options to style the views:
```
colors?: {
background?: string;
header?: {
background?: string;
text?: string;
};
week?: {
text: string;
};
day?: {
disabled?: {
background?: string;
text?: string;
};
enabled?: {
background?: string;
text?: string;
};
highlight?: {
background?: string;
text?: string;
};
};
};
disableDays?: {
weekDays?: Array;
days?: Array;
};
weekNames?: Array;
monthNames?: Array;
enabledPastDate?: boolean;
onMonthChange?: (date: Date) => void;
onSelectDate?: (date: Date) => void;
```
Week names, Month names and Colors has a default values:
```
const defaultWeekNames = ['S', 'M', 'T', 'W', 'T', 'F', 'S'];
const defaultMonthNames = [
'January',
'February',
'March',
'April',
'May',
'June',
'July',
'August',
'September',
'October',
'November',
'December',
];
const defaultColors = {
background: '#fff',
header: {
background: '#7159c1',
text: '#fff',
},
week: {
text: '#7e7e7e',
},
day: {
disabled: {
background: 'transparent',
text: '#cecece',
},
enabled: {
background: '#f3f3f3',
text: '#3f3f3f',
},
highlight: {
background: '#7159c1',
text: '#fff',
},
},
};
```
