# swipeable-calendar-strip-react-native

> React Native Swipeable Calendar Strip

Latest version **1.0.6** (published 2019-11-09) · MIT license · 0 weekly downloads

## Install

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

## 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.6 |
| Published | 2019-11-09 |
| First published | 2019-10-30 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 3 |
| Unpacked size | 3.2 MB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | Daniel Dopiriak |
| Maintainers | avatar197 |
| Keywords | react-native, react-native-calendar, react-native-calendar-strip, react-native, calendar-strip, swipeable-calendar, RN, calendar, calendar strip, calendar-strip, native, react, react native, react native calendar, react native calendar strip, rn, strip |

## Links

- npm: https://www.npmjs.com/package/swipeable-calendar-strip-react-native
- Repository: https://github.com/AVATAR197/React-Native-Swipeable-Calendar-Strip
- Homepage: https://github.com/AVATAR197/React-Native-Swipeable-Calendar-Strip#readme
- Issues: https://github.com/AVATAR197/React-Native-Swipeable-Calendar-Strip/issues
- npm.io page: https://npm.io/package/swipeable-calendar-strip-react-native

## Dependencies (3)

- [moment](https://npm.io/package/moment.md) ^2.24.0
- [prop-types](https://npm.io/package/prop-types.md) ^15.7.2
- [react-native-swiper](https://npm.io/package/react-native-swiper.md) ^1.5.14

## 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.0.6 (latest) — 2019-11-09
- 1.0.5 — 2019-11-07
- 1.0.4 — 2019-11-05
- 1.0.3 — 2019-11-04
- 1.0.2 — 2019-10-30
- 1.0.1 — 2019-10-30
- 1.0.0 — 2019-10-30

## README

# swipeable-calendar-strip-react-native

React Native library - Swipeable Calendar Strip 

<img src="images/libraryshow.gif" width="250"></img>

## Installation

Use npm package manager to install.

```bash
npm install swipeable-calendar-strip-react-native
```

## Props

|  Props | Description  | Type  | Default  |
|---|---|---|---|
|  heigth | set the height of the calendar  |  number | 75  |
|  dayPressed |  return day date format when day is pressed | function | --- |
|  showMonth | show or hide month data in header   | bool  |  true |
| showYear  | show or hide year data in header  | bool  | true  |
| activeDay  | set the active day, accepts Date/Moment date format  | funtion  | --- |
| startingDate  | set the starting Date  | moment() date format  | moment() |
| onMount  | fire funtion when calendar is mounted  | function | --- |
| calendarSwiped  | exectutes when calendar is swiped, give one parameter (number) 0=left 2=right  | funtion  | --- |

## Style
| Prop | Description | Type | Default |
| ---|---|---|---|
| style | Style the Parrent component | Any | --- |
| headerStyle | Style the header, this is necessary for padding of calendar header component | Any | --- |
| headerText | Style color of fontSize of the header text | Any | --- |
| dateNameStyle | Style for the name of the day in calendar strip | Any | --- |
| dateNumberStyle | Style for the number of the day in calendar strip | Any | --- |
| activeDayBorderColor | Set the color/width of the ActiveDayBorder | String | 'steelblue' |


## Usage

```javascript
import CalendarStrip from "swipeable-calendar-strip-react-native";
import moment from "moment";

const calendar = props => {
   return (
      <CalendarStrip 
        height={75} //height of the strip -- default 75
        dayPressed={(day) => console.log(day)} //executes when day is pressed
        showMonth={true} //accepts boolean -- default = true
        showYear={true} //accepts boolean -- default = true
        startingDate={moment()} //accepts Date or moment date format -- default = moment()
        activeDay={moment().add(1, "days")} //accepts Date/Moment date format
        onMount={() => console.log("calendar did mount")}
        calendarSwiped={(direction) => direction == 0 ? console.log("calendar swiped to left") : console.log("calendar swiped to right")}
      />
   )
}

export default calendar;
```

## Contributing
Pull requests are welcome. For major changes, please open an issue first to discuss what you would like to change.

Please make sure to update tests as appropriate.

## License
Licenced under MIT licence

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