# @optisolbusiness/react-native-calendar-component

> test

Latest version **0.0.19** (published 2023-04-13) · MIT license · 0 weekly downloads

## Install

```sh
npm install @optisolbusiness/react-native-calendar-component
pnpm add @optisolbusiness/react-native-calendar-component
yarn add @optisolbusiness/react-native-calendar-component
bun add @optisolbusiness/react-native-calendar-component
```

## Health

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

Positive: has types; esm support; no vulnerabilities; high quality score.

Warnings: low downloads; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.0.19 |
| Published | 2023-04-13 |
| First published | 2023-03-20 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Node | >= 16.0.0 |
| Dependencies | 3 |
| Unpacked size | 413.2 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | silambarasan6499 |
| Maintainers | sujipriya, saisushma, silambarasan_1996, tharmadurai, ramprasath.raja |
| Keywords | react-native, ios, android |

## Links

- npm: https://www.npmjs.com/package/@optisolbusiness/react-native-calendar-component
- Repository: https://github.com/jaiobs/ReactNative_Components
- Homepage: https://github.com/jaiobs/ReactNative_Components/blob/component/%40optisolbusiness/react-native-calendar-component/README.md
- Issues: https://github.com/jaiobs/ReactNative_Components/issues
- npm.io page: https://npm.io/package/@optisolbusiness/react-native-calendar-component

## Dependencies (3)

- [moment](https://npm.io/package/moment.md) ^2.29.4
- [react-dom](https://npm.io/package/react-dom.md) ^18.2.0
- [react-native-calendar-picker](https://npm.io/package/react-native-calendar-picker.md) ^7.1.4

## 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

- 0.0.19 (latest) — 2023-04-13
- 0.0.18 — 2023-04-06
- 0.0.17 — 2023-04-06
- 0.0.16 — 2023-03-22
- 0.0.15 — 2023-03-22
- 0.0.14 — 2023-03-22
- 0.0.13 — 2023-03-22
- 0.0.12 — 2023-03-22
- 0.0.11 — 2023-03-22
- 0.0.10 — 2023-03-22
- 0.0.9 — 2023-03-22
- 0.0.8 — 2023-03-22
- 0.0.7 — 2023-03-22
- 0.0.6 — 2023-03-22
- 0.0.5 — 2023-03-22
- … 2 more at https://npm.io/package/@optisolbusiness/react-native-calendar-component/versions

## README

# react-native-calendar-component

@optisolbusiness/react-native-calendar-component

## Installation

```sh
npm i @optisolbusiness/react-native-calendar-component
```

## Usage

```js
import { CalendarComponent } from '@optisolbusiness/react-native-calendar-component';

// ...

<CalendarComponent/>;
```

## CalendarPicker Props
| Prop | Type | Description |
:------------ |:---------------| :-----|
| **`weekdays`** | `Array` | Optional. List of week days. Eg. `['Mon', 'Tue', ...]` Must be 7 days |
| **`months`** | `Array` | Optional. List of months names. Eg. `['Jan', 'Feb', ...]` Must be 12 months |
| **`firstDay`** | `Number` | Optional. Default first day of week will be Sunday. You can set start of week with number from `0` to `6`. Default is `0` or Sunday |
| **`startFromMonday`** | `Boolean` | Optional. Default first day of week will be Sunday. You can set start of week from Monday by setting this to true. Default is `false` |
| **`showDayStragglers`** | `Boolean` | Optional. Populate previous & next month days in empty slots. Default is `false` |
| **`allowRangeSelection`** | `Boolean` | Optional. Allow to select date ranges. Default is `false` |
| **`allowBackwardRangeSelect`** | `Boolean` | Optional. Allow selecting range in reverse. Default is `false` |
| **`previousTitle`** | `String` | Optional. Title of button for previous month. Default is `Previous` |
| **`nextTitle`** | `String` | Optional. Title of button for next month. Default is `Next` |
| **`previousTitleStyle`** | `TextStyle` | Optional. Text styling for Previous text.|
| **`nextTitleStyle`** | `TextStyle` | Optional. Text styling for Next text.|
| **`previousComponent`** | `Object` | Optional. Component to use in `Previous` button. Overrides `previousTitle` & `previousTitleStyle`. |
| **`nextComponent`** | `Object` | Optional. Component to use in `Next` button. Overrides `nextTitle` & `nextTitleStyle`.  |
| **`selectedDayColor`** | `String` | Optional. Color for selected day |
| **`selectedDayStyle`** | `ViewStyle` | Optional. Style for selected day. May override selectedDayColor.|
| **`selectedDayTextColor`** | `String` | Optional. Text color for selected day |
| **`selectedDayTextStyle`** | `Object` | Optional. Text style for selected day (including all days in range) |
| **`selectedRangeStartTextStyle`** | `Object` | Optional. Text style for start day of range |
| **`selectedRangeEndTextStyle`** | `Object` | Optional. Text style for end day of range |
| **`selectedRangeStartStyle`** | `ViewStyle` | Optional. Container style for start day of range. |
| **`selectedRangeEndStyle`** | `ViewStyle` | Optional. Container style for end day of range. |
| **`selectedRangeStyle`** | `ViewStyle` | Optional. Container style for all days in range selection. |
| **`selectedDisabledDatesTextStyle`** | `Object` | Optional. Text style for ineligible dates during range selection. |
| **`disabledDates`** | `Array` or `Function` | Optional. Specifies dates that cannot be selected. Array of Dates, or a function that returns true for a given Moment date (apologies for the inverted logic). |
| **`disabledDatesTextStyle`** | `TextStyle` | Optional. Text styling for disabled dates. |
| **`selectedStartDate`** | `Date` | Optional. Specifies a selected Start Date. |
| **`selectedEndDate`** | `Date` | Optional. Specifies a selected End Date. |
| **`minRangeDuration`** | `Number or Array` | Optional. Specifies a minimum range duration when using allowRangeSelection. Can either pass a number to be used for all dates or an Array of objects if the minimum range duration depends on the date `{date: Moment-parsable date, minDuration: Number}` |
| **`maxRangeDuration`** | `Number or Array` | Optional. Specifies a maximum range duration when using allowRangeSelection. Can either pass a number to be used for all dates or an Array of objects if the maximum range duration depends on the date `{date: Moment-parsable date, maxDuration: Number}` |
| **`todayBackgroundColor`** | `String` | Optional. Background color for today. Default is `#cccccc` |
| **`todayTextStyle`** | `TextStyle` | Optional. Text styling for today. |
| **`textStyle`** | `TextStyle` | Optional. Style overall text. Change fontFamily, color, etc. |
| **`customDatesStyles`** | `Array` or `Func` | Optional. Style individual date(s). Supports an array of objects `{date: Moment-parseable date, containerStyle: ViewStyle, style: ViewStyle, textStyle: TextStyle, allowDisabled: Boolean}`, or a callback which receives a date param and returns `{containerStyle: ViewStyle, style: ViewStyle, textStyle: TextStyle, allowDisabled: Boolean}` for that date. |
| **`customDayHeaderStyles`** | `Func` | Optional. Style day of week header (Monday - Sunday). Callback that receives ISO `{dayOfWeek, month, year}` and should return `{style: ViewStyle, textStyle: TextStyle}` |
| **`scaleFactor`** | `Number` | Optional. Default (375) scales to window width |
| **`minDate`** | `Date` | Optional. Specifies minimum date to be selected |
| **`maxDate`** | `Date` | Optional. Specifies maximum date to be selected |
| **`initialDate`** | `Date` | Optional. Date that calendar opens to. Defaults to today. |
| **`width`** | `Number` | Optional. Width of CalendarPicker's container. Defaults to Dimensions width.|
| **`height`** | `Number` | Optional. Height of CalendarPicker's container. Defaults to Dimensions height.|
| **`scrollable`**                | `Boolean`    | Optional. Months are scrollable if true. Default is `false` |
| **`horizontal`**                | `Boolean`    | Optional. Scroll axis when `scrollable` set. Default is `true` |
| **`enableDateChange`** | `Boolean` | Optional. Whether to enable pressing on day. Default is `true` |
| **`restrictMonthNavigation`** | `Boolean` | Optional. Whether to disable Previous month button if it is before minDate or Next month button if it is after MaxDate. Default is `false` |
| **`onDateChange`** | `Function` | Optional. Callback when a date is selected. Returns Moment `date` as first param; `START_DATE` or `END_DATE` as second param.|
| **`onMonthChange`** | `Function` | Optional. Callback when Previous / Next month is pressed. Returns Moment `date` as first parameter.|
| **`dayShape`** | `String` | Optional. Shape of the Day component. Default is `circle`. Available options are `circle` and `square`.|
| **`headingLevel`** | `Number` | Optional. Sets the aria-level for the calendar title heading when on Web. Default is `1`.|
| **`selectMonthTitle`** | `String` | Optional. Title of month selector view. Default is "Select Month in " + {year}.|
| **`selectYearTitle`** | `String` | Optional. Title of year selector view. Default is "Select Year".|
| **`dayLabelsWrapper`** | `ViewStyle` | Optional. Style for weekdays wrapper. E.g If you want to remove top and bottom divider line.|
| **`enableSwipe`**               | `Deprecated` | Use `scrollable`. |
| **`swipeConfig`**               | `Deprecated` | Use `scrollable`. |
| **`onSwipe`**                   | `Deprecated` | Use `onMonthChange`. |
| **`dayOfWeekStyles`**           | `Deprecated` | Use `customDatesStyles` & `customDayHeaderStyles` callbacks to style individual dates, days of week, and/or header. |
| **`customDatesStylesPriority`** | `Deprecated` | Use `customDatesStyles` & `customDayHeaderStyles` callbacks to style individual dates, days of week, and/or header. |
| **`monthYearHeaderWrapperStyle`** | `ViewStyle` | Optional. Style for header MonthYear title wrapper. E.g If you want to change the order of year and month.|
| **`headerWrapperStyle`** | `ViewStyle` | Optional. Style for entire header controls wrapper. This contains the previous / next controls plus month & year.|
| **`monthTitleStyle`** | `TextStyle` | Optional. Text styling for header's month text.|
| **`yearTitleStyle`** | `TextStyle` | Optional. Text styling for header's year text.|
| **`initialView`** | `String` | Optional. The view that the calendar opens to. Default is `days`. Available options are `years`, `months`, and `days`.|

# Styles
Some styles will overwrite some won't. For instance:
- If you provide textStyle with fontFamily and color, out of ranges dates will not apply your color, just fontFamily.

Order of precedence:

- defaultColor => textStyle => selectedDayColor
- defaultTodayBackgroundColor => todayBackgroundColor
- defaultBackgroundColor => selectedDayColor
- defaultTextStyles => textStyle => selectedDayTextColor


## Contributing

See the [contributing guide](CONTRIBUTING.md) to learn how to contribute to the repository and the development workflow.

## License

MIT

---

Made with [create-react-native-library](https://github.com/callstack/react-native-builder-bob)

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