React-native-calendars: Error caused when scrolling to empty day

[daviddarnes]

Summary

If you select a date with items and then scroll to an empty date the day prop becomes undefined and causes an error. See screenshot / gif

P.S.

I'm also unable to set the renderEmptyDate option within the component, all I see is a loading spinner. We're using the following:

renderEmptyDate={() => { return (<Text>There are no events</Text>) }}

Any help would be appreciated, thanks for your time and effort

[tautvilas]

Hi, can you try running example app and see how your implementation differs from the example (because in example emptyDates render OK). Thx

[daviddarnes]

@tautvilas hey, I just tried it now. The example uses a method to randomly generate events, but it also generates every 'day'. So in the example some days are rendered as empty objects. I would've thought you wouldn't need to render every day, and you can just populate the calendar with events?

I hope that makes sense?

[tautvilas]

Hi, yes it makes sense. Current convention is that if day does not have any value it means that it is not loaded. So in order for agenda to work properly implement loadItemsForMonth method and populate empty dates with empty arrays []. However the crash should not happen even if day is not loaded so I will try to fix the red screen.

[daviddarnes]

Thanks for replying. Seems fine as a solution, but I wouldn't have thought I'd have to populate a day with an empty object? If the day is null then it should return with no items to display yes?

[tautvilas]

I probably have to update readme about this. Set empty dates with empty array. Not sure if setting null will not introduce bugs

[daviddarnes]

Fair enough 😄 . Documented method of populating days would be appreciated!

[craigcoles]

I would have to agree with @daviddarnes, and say that it should be render each day as empty by default. If you don't pass any items to the component, and you click on a date from the calendar view, you are presented with a loading icon. Going by what has been said previously, we would have to generate all the days as empty arrays just to hide the loading icon.

[TonyKelly12]

Hi I know this issue is closed but I also ran into this problem but turns out I had two separate problems I needed to address

• add a empty array to each day with no items as discussed above

• Make sure my dates that I was storing the items array under, was in this format of: "mm/dd/yyyy"**

If Day or month come back as single digits and year as double like "9/29/19" it will not render must have leading zeros for month and day and full year.

Hope this helps anybody running into the same issue

[venix]

I probably have to update readme about this. Set empty dates with empty array. Not sure if setting null will not introduce bugs

Hi there, sorry for the intrusion on this post, but ran into the same issue and I was wondering how are you supposed to fill the dates with empty array. In my case I don't have a set of all days within a year but just the events I want to load, do I have to go through all dates of the year to generate the empty [] for each day??

That seems to be a bit of an overkill, doesn't it?

Also in my case, everything renders correctly with "Empty events" message but when you try to scroll down to move on to the next day, it stops and gets stuck on the last day that had an event.

So you are saying if I fill the dates in the items dictionary will resolve this issue?