<CalendarStrip
scrollable
// by default false
scrollerPaging={false}
// disabling the display of day names
showDayName={false}
// handling date selection
onDateSelected={handleDateSelection}
// animation on date selection
daySelectionAnimation={{
type: "background",
highlightColor: "#03A9F4",
}}
// properties on date selection
highlightDateNumberStyle={{ color: "white" }}
// Disabling the left and right arrows
leftSelector={[]}
rightSelector={[]}
style={styles.calendarContainer}
dateNumberStyle={styles.dateNumberStyle}
calendarHeaderStyle={styles.calendarHeaderStyle}
selectedDate={moment()}
minDate={moment().subtract(29, "days")}
maxDate={moment().add(3, "days")}
datesBlacklist = {customDates}
const customDates = [ moment().add(3, "days"), moment().add(2, "days"), moment().add(1, "days"), ]; console.log("Custom Dates", customDates); const disableCustomDt = (current) => { return !customDates.includes(current.format("YYYY-MM-DD")); };
<CalendarStrip scrollable // by default false scrollerPaging={false} // disabling the display of day names showDayName={false} // handling date selection onDateSelected={handleDateSelection} // animation on date selection daySelectionAnimation={{ type: "background", highlightColor: "#03A9F4", }} // properties on date selection highlightDateNumberStyle={{ color: "white" }} // Disabling the left and right arrows leftSelector={[]} rightSelector={[]} style={styles.calendarContainer} dateNumberStyle={styles.dateNumberStyle} calendarHeaderStyle={styles.calendarHeaderStyle} selectedDate={moment()} minDate={moment().subtract(29, "days")} maxDate={moment().add(3, "days")} datesBlacklist = {customDates}