Swipeable-calendar-strip-react-native NPM

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;