React Native Calendar Slider Carousel 📆
The package is both Android and iOS compatible. It also works well with react native web.
Installation
$ npm install --save react-native-calendar-slider-carousel
The solution is implemented in JavaScript so no native module linking is required.
Demo
Calendar demo on iOS and Android
Used in combination with "react-native-collapsible"
Preview on web with scroll arrows
Usage
import CalendarDays from 'react-native-calendar-slider-carousel';
All parameters for components are optional
Basic parameters
<CalendarDays // First day. Default = new Date() firstDate="2019-07-05" // Last day. You can set number of days instead lastDate="2019-07-20" // Sets number of days displaued. Default = 30 numberOfDays=60 // Initial selected day. Default = firstDate selectedDate="2019-07-10" // Optional text that replaces week day in disabled days disabledText='closed' // scrollView width width=240 // Instead of width you can set number of days visible. daysInView=3 // Only available if width % 120 = 0. Scroll by full width paginate=true // Array of disabled dates. Default [] disabledDates='2019-07-11' '2019-07-12' '2019-07-15' // Function to get selected date in 'YYYY-MM-DD' format onDateSelect= this // Replaces scroll with left and right arrows. // Suitable for web where horizontal scroll is not always available arrows=false // Arrow icon components. Required if arrows={true} leftArrow=<Icon name="arrow-back" size=26 color="#555" /> rightArrow=<Icon name="arrow-forward" size=26 color="#555" />/>
{ console; // "2019-07-20" this;};