I'm using React Native Calender and the date is only selected if I press on it twice, but never on the first click. I also want to be able to use the period marking feature, but unsure how to implement startingDay and endDay into the array.
const [selected, setSelected] = useState([new Date()])
const [booking, setBooking] = useState({})
const [currentMonth, setMonth] = useState()
const select = day => {
let markedDay = day.dateString
setSelected(day => [...selected, markedDay])
let obj = selected.reduce((c, v) => Object.assign(c, {[v]: { selected: true, marked: true, disableTouchEvent: true }}), {})
setBooking(obj)
}
return (
<View style={styles.container}>
<CalendarList
theme={{
dayTextColor: 'black',
todayTextColor: 'black',
selectedDayTextColor: 'black',
selectedDayBackgroundColor: 'red',
arrowColor: 'black',
}}
style={styles.calendarStyle}
markedDates={booking}
// Initially visible month. Default = Date()
current={selected[selected.length - 1]}
// Minimum date that can be selected, dates before minDate will be grayed out. Default = undefined
minDate={new Date()}
// Maximum date that can be selected, dates after maxDate will be grayed out. Default = undefined
maxDate={addMonths(6)}
// Handler which gets executed on day press. Default = undefined
onDayPress={select}
// Handler which gets executed on day long press. Default = undefined
onDayLongPress={(day) => {console.log('selected day', day)}}
// Month format in Style title. Formatting values: http://arshaw.com/xdate/#Formatting
monthFormat={'MMM yyyy'}
// Handler which gets executed when visible month changes in calendar. Default = undefined
onMonthChange={(month) => {console.log('month changed', month)}}
// Hide month navigation arrows. Default = false
hideArrows={false}
// Replace default arrows with custom ones (direction can be 'left' or 'right')
// renderArrow={(direction) => (<View style={{ backgroundColor: 'black', width: 40, height: 50 }} />)}
// Do not show days of other months in month page. Default = false
hideExtraDays={true}
// If hideArrows=false and hideExtraDays=false do not switch month when tapping on greyed out
// day from another month that is visible in calendar page. Default = false
disableMonthChange={true}
// If firstDay=1 week starts from Monday. Note that dayNames and dayNamesShort should still start from Sunday.
firstDay={1}
// Hide day names. Default = false
hideDayNames={false}
// Show week numbers to the left. Default = false
showWeekNumbers={false}
// Handler which gets executed when press arrow icon left. It receive a callback can go back month
onPressArrowLeft={substractMonth => substractMonth()}
// Handler which gets executed when press arrow icon left. It receive a callback can go next month
onPressArrowRight={addMonth => addMonth()}
// Enable horizontal scrolling, default = false
horizontal={true}
// Enable paging on horizontal, default = false
pagingEnabled={true}
// Date marking style [simple/period/multi-dot/custom]. Default = 'simple'
/>
</View>
For example, the collection of dates have to have parameters assigned to indicate that it's starting date or the end date in the following way:
// Collection of dates that have to be colored in a special way. Default = {}
markedDates={{
'2012-05-20': {textColor: 'green'},
'2012-05-22': {startingDay: true, color: 'green'},
'2012-05-23': {selected: true, endingDay: true, color: 'green', textColor: 'gray'},
'2012-05-04': {disabled: true, startingDay: true, color: 'green', endingDay: true}
}}
I've tried the following as the markedDates property, but didn't work:
markedDates={{[selected]: [{startingDay: true, color: '#42aaf4', selected: true}, {selected: true, endingDay: true, color: '#42aaf4', textColor: 'white'}]}}
