https://github.com/wrathchaos/react-native-monthly

Animated and customizable monthly calendar for React Native
https://github.com/wrathchaos/react-native-monthly

android apple calendar calendar-component calendar-view google ios mobile monthly monthly-calendar react react-native reactjs

Last synced: about 2 months ago
JSON representation

Animated and customizable monthly calendar for React Native

• Host: GitHub
• URL: https://github.com/wrathchaos/react-native-monthly
• Owner: WrathChaos
• Created: 2020-11-05T19:28:48.000Z (over 4 years ago)
• Default Branch: master
• Last Pushed: 2020-11-06T15:48:05.000Z (over 4 years ago)
• Last Synced: 2025-04-21T13:52:42.601Z (2 months ago)
• Topics: android, apple, calendar, calendar-component, calendar-view, google, ios, mobile, monthly, monthly-calendar, react, react-native, reactjs
• Language: TypeScript
• Homepage: https://freakycoder.com
• Size: 10.1 MB
• Stars: 28
• Watchers: 3
• Forks: 4
• Open Issues: 1
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        


[![Animated and customizable monthly calendar for React Native](https://img.shields.io/badge/-Animated%20and%20customizable%20monthly%20calendar%20for%20React%20Native-orange?style=for-the-badge)](https://github.com/WrathChaos/react-native-monthly)

[![npm version](https://img.shields.io/npm/v/react-native-monthly.svg?style=for-the-badge)](https://www.npmjs.com/package/react-native-monthly)

[![npm](https://img.shields.io/npm/dt/react-native-monthly.svg?style=for-the-badge)](https://www.npmjs.com/package/react-native-monthly)

![Platform - Android and iOS](https://img.shields.io/badge/platform-Android%20%7C%20iOS-blue.svg?style=for-the-badge)

[![License: MIT](https://img.shields.io/badge/License-MIT-green.svg?style=for-the-badge)](https://opensource.org/licenses/MIT)

[![styled with prettier](https://img.shields.io/badge/styled_with-prettier-ff69b4.svg?style=for-the-badge)](https://github.com/prettier/prettier)

 

     

  

    

    

  

    

   

# Installation

Add the dependency:

```bash

npm i react-native-monthly

```

## Peer Dependencies

IMPORTANT! You need install them


```js

"@freakycoder/react-native-bounceable": ">= 0.2.4",

```

# Usage

## Import

```jsx

import RNMonthly from "react-native-monthly";

```

## Fundamental Usage

```jsx

```

```jsx

```

```jsx

```

## Example Project 😍

You can checkout the example project 🥰

Simply run

- `npm i`

- `react-native run-ios/android`

should work of the example project.

# Configuration - Props

## Fundamentals

| Property     |   Type    |  Default  | Description                                                         |

| ------------ | :-------: | :-------: | ------------------------------------------------------------------- |

| numberOfDays |  number   |    31     | change days of the month it should be more than 28 and less than 31 |

| activeDays   | number[]  | undefined | set the active days                                                 |

| style        | ViewStyle |  default  | set or override the style object for the main container             |

| today        |  number   | undefined | enable the today's selected item or any other                       |

## Customization (Optionals)

| Property                |   Type    |  Default  | Description                                                        |

| ----------------------- | :-------: | :-------: | ------------------------------------------------------------------ |

| activeBackgroundColor   |   color   | "#49c1c2" | change the active background color                                 |

| inactiveBackgroundColor |   color   | "#f0f0f0" | change the inactive background color                               |

| todayTextStyle          | TextStyle |  default  | set or override the style object for the today text style          |

| itemContainerStyle      | ViewStyle |  default  | set or override the style object for the each item container       |

| onPress                 | function  | undefined | set your own logic for the button functionality when it is pressed |

## Future Plans

- [x] ~~LICENSE~~

- [x] ~~Today Feature~~

- [ ] Write an article about the lib on Medium

## Credits

Insipired on [Martyna Zielińska](https://dribbble.com/shots/6556907-Medicine-Reminder)

## Author

FreakyCoder, [email protected]

## License

React Native Monthly is available under the MIT license. See the LICENSE file for more info.