# react-native-ep-calendar

> react-native-ep-calendar

Latest version **1.1.1** (published 2021-05-02) · MIT license · 0 weekly downloads

## Install

```sh
npm install react-native-ep-calendar
pnpm add react-native-ep-calendar
yarn add react-native-ep-calendar
bun add react-native-ep-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.1.1 |
| Published | 2021-05-02 |
| First published | 2021-02-21 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 3 |
| Unpacked size | 68.7 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | EP-Apps |
| Maintainers | ep-apps |
| Keywords | react, native, ep, calendar |

## Links

- npm: https://www.npmjs.com/package/react-native-ep-calendar
- Repository: https://github.com/EP-Apps/Calendar
- Homepage: https://github.com/EP-Apps/react-native-ep-calendar#readme
- Issues: https://github.com/EP-Apps/react-native-ep-calendar/issues
- npm.io page: https://npm.io/package/react-native-ep-calendar

## Dependencies (3)

- [react](https://npm.io/package/react.md) ^17.0.1
- [react-native](https://npm.io/package/react-native.md) ^0.64.0
- [react-native-svg](https://npm.io/package/react-native-svg.md) ^12.1.1

## Alternatives

- [mobx-react](https://npm.io/package/mobx-react.md) — 2.8M weekly downloads
- [rc-tree](https://npm.io/package/rc-tree.md) — 2.6M weekly downloads
- [@react-oauth/google](https://npm.io/package/@react-oauth/google.md) — 1.3M weekly downloads
- [@wagmi/connectors](https://npm.io/package/@wagmi/connectors.md) — 877.0K weekly downloads
- [vee-validate](https://npm.io/package/vee-validate.md) — 836.4K weekly downloads

## Recent versions

- 1.1.1 (latest) — 2021-05-02
- 1.1.0 — 2021-05-02
- 1.0.3 — 2021-02-22
- 1.0.2 — 2021-02-21
- 1.0.1 — 2021-02-21
- 1.0.0 — 2021-02-21

## README

# react-native-ep-calendar

## 1. Installation

react-native-ep-calendar requires react-native >= 0.63.4. It also uses react-native-svg to display icons.
To install simply run

`npm install react-native-ep-calendar`

in your project. For iOS you need to install the pods:

`cd ios && pod install && cd ..`

## 2. Usage

The Calendar component takes some parameters, but they are all optional.

| Property              | Description                                                                               | Default                   |
| ----------------------|-------------------------------------------------------------------------------------------| --------------------------|
| darkTheme             | A style object defining the dark theme. See 4. Themes.                                    | null (predefined style).  |
| lightTheme            | A style object defining the light theme. See 4. Themes.                                   | null (predefined style).  |
| localization          | Currently unused                                                                          | null                      |
| markedDates           | Array of Objects containing a date property and a markerType as string                    | today with default marker |
| markerTypes           | Array of Objects containing a string property markerType as identifier and a style object | empty array               |
| maxDate               | Max date the user can see.                                                                | null                      |
| minDate               | Min date the user can see                                                                 | null                      |
| onDayLongPress        | Callback for a long press on  a day                                                       | null                      |
| onDayPress            | Callback for a normal press on a day                                                      | null                      |
| onMonthChangeListener | Callback when changing the displayed month & year                                         | null                      |
| startDate             | Starting date of the calendar component                                                   | today                     |
| useDarkMode           | Darkmode for calendar allowed?                                                            | true                      |

### 2.1 markedDates

Needs an array of objects containing a date and a markerType, for example:

```javascript
let markedDates = [
  {
    date: new Date(Date.now()),
    markerType: 'myMarker'
  },
];
```

### 2.2 markerTypes

Needs an array of objects containg a markerType and some style objects:

```javascript
let markerTypes = [
  {
    markerType: 'myMarker',
    markerTextStyle: {color: 'red'}.
    markerTouchableStyle = {backgroundColor: 'transparent'},
    markerColumnStyle = null
  },
];
```

### 2.3 onMonthChangeListener

This callback gets fired, when the users changes the displayed month. The callback receives four parameters:
1. previousMonth
2. previousYear
3. month
4. year

In our example that callback is used to load the data for the new month.

## 3. Example

An example with some properties set:

```javascript
                <Calendar
                  markerTypes={[missMarker]}
                  markedDates={[...checkedMarker, ...missedMarkers]}
                  darkTheme={{
                    markerColor: habit.Color,
                    markerTextColor: getTextColorForBgHex(habit.Color),
                  }}
                  lightTheme={{
                    markerColor: habit.Color,
                    markerTextColor: getTextColorForBgHex(habit.Color),
                  }}
                  onMonthChangeListener={(
                    previousMonth,
                    previousYear,
                    month,
                    year,
                  ) => {
                    getTimelineData(
                      habit,
                      month,
                      year,
                      setCheckedMarker,
                      setMissedMarker,
                    );
                  }}
                />          
```

![alt text][logo]

[logo]: https://github.com/EP-Apps/Calendar/blob/main/examples/images/example1.png "Example 1"

## 4. Themes

## 5. License

This component is licensed under MIT

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