# react-native-customized-calendar

> React Native Component for Calendar for Customized Usage

Latest version **1.0.4** (published 2023-05-16) · ISC license · 0 weekly downloads

## Install

```sh
npm install react-native-customized-calendar
pnpm add react-native-customized-calendar
yarn add react-native-customized-calendar
bun add react-native-customized-calendar
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.4 |
| Published | 2023-05-16 |
| First published | 2023-05-08 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 172.8 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 1 |
| Author | Jaweed Shuja Uddin |
| Maintainers | jaweedshuja |
| Keywords | react-native, react-component, react-native-component, react, react, native, mobile, ios, android, ui, calendar, customized, calender |

## Links

- npm: https://www.npmjs.com/package/react-native-customized-calendar
- Repository: https://github.com/JaweedShuja/react-native-customized-calendar
- Homepage: https://github.com/JaweedShuja/react-native-customized-calendar#readme
- Issues: https://github.com/JaweedShuja/react-native-customized-calendar/issues
- npm.io page: https://npm.io/package/react-native-customized-calendar

## Alternatives

- [@sindresorhus/slugify](https://npm.io/package/@sindresorhus/slugify.md) — 3.7M weekly downloads
- [solid-js](https://npm.io/package/solid-js.md) — 2.7M weekly downloads
- [expo-glass-effect](https://npm.io/package/expo-glass-effect.md) — 2.5M weekly downloads
- [nanoassert](https://npm.io/package/nanoassert.md) — 780.8K weekly downloads
- [@ffmpeg/ffmpeg](https://npm.io/package/@ffmpeg/ffmpeg.md) — 529.5K weekly downloads

## Recent versions

- 1.0.4 (latest) — 2023-05-16
- 1.0.3 — 2023-05-16
- 1.0.2 — 2023-05-09
- 1.0.1 — 2023-05-08
- 1.0.0 — 2023-05-08

## README

# react-native-customized-calendar

## Introduction
A React-Native calendar component to show a calendar. This calendar is fully customized, you can modify it as per your need.
* Navigate to different date, month and year
* Handle date with custom onPress function
* Add reminders with custom colors

Calender View             |  Year Selection
:-------------------------:|:-------------------------:
<img width="348" alt="Screenshot 2023-05-09 at 5 37 39 PM" src="https://github.com/JamzWork/CustomComponents/assets/132579206/05523d75-6ed6-4f1a-8d2e-41a4b3dd5dc1">| <img width="342" alt="Screenshot 2023-05-09 at 5 57 48 PM" src="https://github.com/JamzWork/ProductsListing/assets/132579206/7ee4caf0-ee94-4a11-bc6f-cb4179490e0c">

Calender View With Reminder             |
:-------------------------:
<img width="349" alt="Screenshot 2023-05-16 at 3 29 36 PM" src="https://github.com/JaweedShuja/react-native-customized-calendar/assets/132579206/6b1e329e-d75c-4cb4-92d2-3c408c30074d">



## Installation

If using yarn:

```
yarn add react-native-customized-calendar
```

If using npm:

```
npm i react-native-customized-calendar
```


## Usage

```
import Calender from 'react-native-customized-calendar'
```

Simply place a `<Calender />` tag for showing calendar.

```
<View style={{ flex:1, }}>
        <Calender />
    </View>
```

For reminders pass  `reminders` props as array

```
<View style={{ flex:1, }}>
        <Calender 
            reminders = [
                {date:2, color:"#40E0D0"},
                {date:11, color:"#FFBF00"},
                {date:14, color:"#9FE2BF"}
            ]
        />
    </View>
```


## Documentation

### Calender Component
| Name                                    | Description                                                                   | Default    | Type    |
|-----------------------------------------|-------------------------------------------------------------------------------|------------|---------|
| fontSize                                | Font size of entire component                                                 | 16         | Int     |  
| primaryColor                            | Primary color of component                                                    | #2196F3    | String  | 
| onPressDay                              | OnPress function of calender cell                                             | ()=>{}     | Func    |
| dateTextColor                           | Color of date text                                                            | black      | String  | 
| currentDateTextColor                    | Color of current date text                                                    | white      | String  |
| showCurrentDate                         | From this props you can set either current date should be highlight or not    | True       | Bool    |
| weekendBackgroundColor                  | Weekend cell column background color                                          | gray       | String  |
| weekdaysBackgroundColor                 | Weekdays cell column background color                                         | white      | String  |
| emptyDaysBackgroundColor                | Background color of empty cell                                                | lightgray  | String  |
| monthButtonTextColor                    | Current selected month name text color                                        | white      | String  |
| monthNameTextColor                      | Next and previous month name text color                                       | black      | String  |
| backForwardIconTintColor                | Back and Forward Icon tint color                                              | gray       | String  |
| plusMinusButtonContainerBackgroundColor | Year increment and decrement button background color                          | whitesmoke | String  |
| plusMinusButtonContainerBorderColor     | Year increment and decrement button border color                              | lightgray  | String  |
| plusMinusIconTintColor                  | Plus minus button icon tint color                                             | gray       | String  |
| yearColor                               | Year text color                                                               | black      | String  |
| yearSelectTextColor                     | Year select button text color                                                 | black      | String  |
| selectButtonBackgroundColor             | Year select button background color                                           | whitesmoke | String  |
| selectButtonBorderColor                 | Year select button border color                                               | lightgray  | String  |
| containerStyle                          | Container style for additional styling                                        | {}         | Object  |
| calenderItemContainerBorderColor        | Calender cell border color                                                    | lightgray  | String  |
| reminders                               | Set reminders on calender with different colors                               | []         | Array   |
| reminderDateColor                       | Date text of reminders date                                                   | white      | String  |

## Contributing
Pull requests are always welcome! Feel free to open a new GitHub issue for any changes that can be made.

## Author
Jaweed Shuja

## License
[MIT](./LICENSE)

---
_Source: https://npm.io/package/react-native-customized-calendar · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._