Agenda: allow to scroll past the initial selected day?

Hi,

Thanks for this great project

Let’s take the example agenda that is published on expo

The initial day is selected={'2017-05-16'}

The loading function is:

  loadItems(day) {
    setTimeout(() => {
      for (let i = -15; i < 85; i++) {
        const time = day.timestamp + i * 24 * 60 * 60 * 1000;
        // load items for that time
        // ...
      }
    }

To my understanding, the purpose of this function is to load new items data as the user is changing date or scrolling. It is also triggered initially on initial day.

In this demo, we can see the purpose of loading next 85 days, and previous 15 days.

Yet, even if 15 days before the initial day selected={'2017-05-16'} have been loaded in state, the UI does not allow to scroll back in time. The only way to browse items of a past day is to open the knob and select a date. In my app I don’t want the knob so it means there’s no easy way to access the past items.

I don’t know what could be a good solution to this problem. I guess rendering items lazily at the top after mount would mess-up with scroll position. For me a good enough solution would be that every items provided on mount could be rendered initially, and for otherwise keep current behavior.

What do you think?

[saigyouyou]

@slorber

I have a simple way to solve it, though not perfect. Add a _onRefresh func in react-native-calendars/src/agenda/reservation-list/index.js

_onRefresh = () => {
  let h = 0;
  let scrollPosition = 0;
  const selectedDay = this.props.selectedDay.clone();
  const iterator = parseDate(this.props.selectedDay.clone().getTime()-3600*24*10*1000);
  let reservations = [];
  for (let i = 0; i < 10; i++) {
    const res = this.getReservationsForDay(iterator, this.props);
    if (res) {
      reservations = reservations.concat(res);
    }
    iterator.addDays(1);
  }
  scrollPosition = reservations.length;
  for (let i = 10; i < 30; i++) {
    const res = this.getReservationsForDay(iterator, this.props);
    if (res) {
      reservations = reservations.concat(res);
    }
    iterator.addDays(1);
  }
  this.setState({
    reservations
  }, () => {
    setTimeout(() => {
      let h = 0;
      for (let i = 0; i < scrollPosition; i++) {
        h += this.heights[i] || 0;
      }
      this.list.scrollToOffset({offset: h, animated: false});
      this.props.onDayChange(selectedDay, false);
    }, 100);
  });
}

And rewite the onRefresh in render()

<FlatList
  ...
  onRefresh={this._onRefresh}

then add a parmas in onDaychange func in react-native-calendars/src/agenda/index.js

onDayChange(day, f=true) {
  ...
  this.calendar.scrollToDay(day, this.calendarOffset(), withAnimation && f); //add f here
 ...

It works in the demo. If you want to use in your project, maybe you need change some parmas to fit your project.

[chapeljuice]

Personally I don’t think infinite past scrolling is even needed.

If we could at least set a currentDate, then set pastScrollRange to any number, I would expect the calendar open up to the currentDate, but be able to scroll to x months previously until you get back to the pastScrollRange value.

Does that make sense? Is this a different request, or similar enough?