CODEWITHSUNDEEP
react-nativereact-native-calendars
mkEagles
mkEagles

Reputation: 338

Agenda - dynamically change selected day

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

Upvotes: 3

Views: 2286

Answers (1)

Tolga
Tolga

Reputation: 31

Few years late but managed to solve this using refs

import React, { createRef } from 'react';

const agendaRef = createRef();

When rendering the agenda include the reference

<Agenda
  ref={agendaRef}
  ...
/>

For the onPress function for the button include the call to chooseDay

const date = '2020-10-01' // the date you want to go to
agendaRef.current.chooseDay(date)

It should animate as if the date button was tapped

Upvotes: 3

Related Questions