I'm having trouble to dynamically change the selected day. For example, I want to change selected day to today when leaving the screen; I don't want to have other selected day than today when leaving... How can I do that? I'm using the agenda. Also, I want to change the selected day when the user clicks on some button in that screen. My agenda list date is not changed at all if I just set the state for selectedDay...
My code for now;
componentDidMount() {
this.props.navigation.addListener('didBlur', (playload)=>{
console.log(playload);
this.onDayPress(Moment().format('YYYY-MM-DD').toString());
});
}
My agenda:
<Agenda
// the list of items that have to be displayed in agenda. If you want to render item as empty date
// the value of date key kas to be an empty array []. If there exists no value for date key it is
// considered that the date in question is not yet loaded
items={this.state.items2}
// callback that gets called when items for a certain month should be loaded (month became visible)
//loadItemsForMonth={}
// callback that fires when the calendar is opened or closed
onCalendarToggled={(calendarOpened) => {}}
// callback that gets called on day press
onDayPress={this.onDayPress.bind(this)}
// callback that gets called when day changes while scrolling agenda list
onDayChange={(day)=>{
this.setState({day: day})
console.log('OnDayChange: ' + day);
}}
// initially selected day
//selected={ Moment().format('YYYY-MM-DD').toString()}
//selected={'2018-02-20'}
selected={this.state.selectedDay}
// Minimum date that can be selected, dates before minDate will be grayed out. Default = undefined
minDate={this.state.minDate}
// Maximum date that can be selected, dates after maxDate will be grayed out. Default = undefined
maxDate={this.state.maxDate}
...
onDayPress method;
onDayPress(day) {
//console.log('Predn zamenjam selected day: ' + this.state.selectedDay);
if(day.dateString === undefined) {
if(day !== undefined) {
//console.log('day: ' + day);
this.setState({
selectedDay: day
});
return true;
}
}
this.setState({
selectedDay: day.dateString
});
this.getNextThreeDays(day.dateString);
this.getQuotes(day.dateString);
}
Environment
npm ls react-native-calendars
: 1.19.4npm ls react-native
: ^0.55.4
Few years late but managed to solve this using refs
When rendering the agenda include the reference
For the
onPress
function for the button include the call tochooseDay
It should animate as if the date button was tapped