React-native-calendars: Feature Request: Show only one day at a time

[FrenchMajesty]

Hi, I was looking at the issue #272 in hope of finding a solution.

I would like to be able to show only one day's worth of event per day selected. For example if I have selected the 15th I would like to have only the event of the 15th showing.

[Bosseskompis]

+1 We also need this in a project.

[yadigarbz]

Hi there, if you can change manually

/* --- Line 169 --- /
for (let i = 0; i < 31; i++) {
const res = this.getReservationsForDay(iterator, props);
if (res) {
reservations = reservations.concat(res);
}
iterator.addDays(1);
}
/ --- Line 175 --- */

to

/* --- Line 169 --- /
const res = this.getReservationsForDay(iterator, props);
if (res) {
reservations = res;
}
iterator.addDays(1);
/ --- Line 175 --- */

in (project_dir/node_modules/react-native-calendars/src/agenda/reservation-list/index.js) the agenda can only load days own reservations :)

[arled]

Want this :(

[tautvilas]

A good feature request and probably not too hard to implement. Will try to put this in a roadmap.

[tautvilas]

@yadigarbz why don't you do a PR? :)

[yadigarbz]

@tautvilas May be this night i can :) 👍

[libersolis-dev]

If you have tried this and are getting unexpected/unwanted scrolling behavior (example agenda items scrolling up and being hidden)

, you can try this fix

const res = this.getReservationsForDay(iterator, props);
    if (res) {
      reservations = res;
    }
    iterator.addDays(1);

    return {
      reservations, 
    };
  }

This should give you single, non scrollable agenda items if that's what you are looking for.

[FrenchMajesty]

@mannyhagman Where should this change be made?

[yadigarbz]

@FrenchMajesty u can see exact file and line in my comment.

[jjercx]

Hi, the change works but I wonder if its posible to keep the scroll enabled for the events of that day (in case that day has multiple events)

[jjercx]

I had a problem in my code, the fix works and allows scrolling multiple events in a day.

[jordanow]

May be late to party but this how I achieved the "show only one day at a time":

1. Do not pass all the items at the same time:

      <Agenda
          selected={selectedDate}
          items={itemsForSelectedDay}
          minDate={minDate}
          maxDate={maxDate}
          markedDates={this.getMarkedDates}
          onDayPress={onUpdateSelectedDate}
          renderItem={(item, firstItemInDay) => ()
          rowHasChanged={itemHasBeenUpdated}
       />

1. Prepare your marked dates since you're not passing all the items:

  getMarkedDates = () => {
    const { allAgendaDates } = this.props;

    let markedDates = {};
    Object.keys(allAgendaDates).map(date => {
      markedDates[date] = {
        marked: true
      };
    });

    return {
      ...markedDates
    };
  };

1. Update the itemsForSelectedDay on day press:

  onUpdateSelectedDate = date => {
    const { allAgendaDates } = this.props;

    const dates = allAgendaDates[date];

    this.setState({
        itemsForSelectedDay: {
              [date]: dates
       }
   });
  };

[shresthayaman]

Also just realized while trying to do this if you are trying to remove the date part for each item that renders in the agenda you can do:
renderDay={(day, item) => {return (<View />);}}

And then if you follow the direction above you should get a customized item for per date selcted only