swipeable-calendar-strip-react-native

React Native library - Swipeable Calendar Strip

Installation

Use npm package manager to install.

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

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