Changing day on Agenda week shows events from another day

[ArturSousaFerreira]

Description

• In a week with several events per day, when changing the day by pressing another without openning the knob, updates only the first event (showing events for another day)

• The first event is always updated, the second inherits from the previous day till changing day has not second event.

NOTE: f you open the knob and select the day works like it is suppose

Expected Behavior

Update all events when change day

Observed Behavior

First event is updated, but shows events for another day

Environment

Android and Web

Reproducible Demo

Here is my basic demo to reproduce: https://snack.expo.dev/@arturferreira/spunky-cashew

• Using this data to agenda items :

'2023-06-22': [ { id: 1152844, serviceDescription: 'ANÁLISES', beginDate: '22/06/2023', beginTime: '08:30', time: '08:30', cardDate: '22 Junho 2023 - 08:30', agendaDate: '2023-06-22', cabinetDescription: 'S. Espera M - Pat. Clínica', }, { id: 1153012, serviceDescription: 'TAC', beginDate: '22/06/2023', beginTime: '10:08', time: '10:08', cardDate: '22 Junho 2023 - 10:08', agendaDate: '2023-06-22', cabinetDescription: 'S. Espera I - Imagiologia', },

'2023-06-21': [ { id: 1152835, serviceDescription: 'ANÁLISES', beginDate: '21 junho 2023 às 15:57', time: '15:57', cardDate: '21 Junho 2023 - 15:57', agendaDate: '2023-06-21', cabinetDescription: 'S. Espera M - Pat. Clínica', }, { id: 775054, serviceDescription: 'ECOGRAFIA', beginDate: '21 junho 2023 às 16:11', time: '16:11', cardDate: '21 Junho 2023 - 16:11', agendaDate: '2023-06-21', cabinetDescription: 'S. Espera I - Imagiologia', },

• if you press day 22/06/2023 and then change to 21/06/2023 you should get only the data from 2023-06-21, instead the first object of 21/06/2023 and second of 2023-06-22

Screenshots

https://github.com/wix/react-native-calendars/assets/15970639/74bedf73-1bd7-4a39-9167-4c3f28d12932

[gabvrodrigues]

Exactly same issue here!

[ArturSousaFerreira]

I found a workaround to solve. Instead of passing multiple itens, you can pass one item for a specific day and in that item pass all items. You just need to render a list instead of the item like it was supposed

[gabvrodrigues]

I found a workaround as well! As @ArturSousaFerreira said, instead of rendering a single item on "renderItem" prop, I used the "isFirst" flag and iterated on selected day's items:

onDayPress={(date) => setSelectedDay(date.dateString)} renderItem={(item, isFirst) => (isFirst && items[selectedDay].map((reservation) => ( <View /> )) )}

As we said, it's just a workaround since the "renderItem" prop should render each item separately.

[linpaws-reverse]

@gabvrodrigues

I tried this workaround and it's working for selected date. But I want to show all events show so i disabled 'showOnlySelectedDayItems' and the same issue occurs again.

Demo app to reproduce: https://snack.expo.dev/1h_bkWIcg?platform=android

[voulgarakis]

I found a workaround to solve. Instead of passing multiple itens, you can pass one item for a specific day and in that item pass all items. You just need to render a list instead of the item like it was supposed

@ArturSousaFerreira Can you give us an example of your workaround? I have the same issue

[voulgarakis]

The error still exists for me v.^1.1302.0

[maximilian]

This seems like such a critical bug for the agenda.

The workaround mentioned by @gabvrodrigues works for me. The only flaw with it is that there will always be a "gap" at the end of your item list. renderItem loops through each item, and creates a component for it and it is added to the agenda. I still haven't figured out how to remove those empty items.

[voulgarakis]

This seems like such a critical bug for the agenda.

The workaround mentioned by @gabvrodrigues works for me. The only flaw with it is that there will always be a "gap" at the end of your item list. renderItem loops through each item, and creates a component for it and it is added to the agenda. I still haven't figured out how to remove those empty items.

Can you give an example of your code? I can't figure out what goes wrong on my side.. I still see items from other days when when I change calendar date. First items are always get updated, but the other ones don't.

[maximilian]

This seems like such a critical bug for the agenda. The workaround mentioned by @gabvrodrigues works for me. The only flaw with it is that there will always be a "gap" at the end of your item list. renderItem loops through each item, and creates a component for it and it is added to the agenda. I still haven't figured out how to remove those empty items.

Can you give an example of your code? I can't figure out what goes wrong on my side.. I still see items from other days when when I change calendar date. First items are always get updated, but the other ones don't.

Yes. This is my code:

const [selectedDate, setSelectedDate] = useState(new Date().toISOString().split('T')[0]);
<Agenda
  items={myItems}
  onDayPress={day => {
    setSelectedDate(day.dateString);
  }}
....... />

 const renderItem = (item, isFirst) => {
   const isoDate = item.date && getIsoString(item.date)
   // workaround for https://github.com/wix/react-native-calendars/issues/2261
   if (selectedDate == isoDate) {
     const selectedDateItems = myItems[selectedDate];
     if (isFirst) {      
       return selectedDateItems .map((item, index) => {
         return showItem(item, index === 0)
       })
     } else {
       // Annoying side-effect here. Agenda is expecting an entry to be printed  so it includes it in the output, adding a gap for every item. Not much I can do AFAIK
     }
   } else {
     return showItem(item, isFirst)
   }
 };

[voulgarakis]

This seems like such a critical bug for the agenda. The workaround mentioned by @gabvrodrigues works for me. The only flaw with it is that there will always be a "gap" at the end of your item list. renderItem loops through each item, and creates a component for it and it is added to the agenda. I still haven't figured out how to remove those empty items.

Can you give an example of your code? I can't figure out what goes wrong on my side.. I still see items from other days when when I change calendar date. First items are always get updated, but the other ones don't.

Yes. This is my code:

const [selectedDate, setSelectedDate] = useState(new Date().toISOString().split('T')[0]);
<Agenda
  items={myItems}
  onDayPress={day => {
    setSelectedDate(day.dateString);
  }}
....... />

 const renderItem = (item, isFirst) => {
   const isoDate = item.date && getIsoString(item.date)
   // workaround for https://github.com/wix/react-native-calendars/issues/2261
   if (selectedDate == isoDate) {
     const selectedDateItems = myItems[selectedDate];
     if (isFirst) {      
       return selectedDateItems .map((item, index) => {
         return showItem(item, index === 0)
       })
     } else {
       // Annoying side-effect here. Agenda is expecting an entry to be printed  so it includes it in the output, adding a gap for every item. Not much I can do AFAIK
     }
   } else {
     return showItem(item, isFirst)
   }
 };

Can you provide the code for showItem function and how you use it in the Agenda? I can't figure out how to use it.