swipeable-calendar-strip-react-native

React Native Swipeable Calendar Strip

Usage no npm install needed!

<script type="module">
  import swipeableCalendarStripReactNative from 'https://cdn.skypack.dev/swipeable-calendar-strip-react-native';
</script>

README

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