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