Don't render empty dates

[vagnereix]

Description

I'm trying to render empty views for my empty dates and I can't scroll to other days normally, just want to "skip" all empty dates showing only the filled days.

Expected Behavior

• Skip "24" day because has no data to render:

Environment

Please run these commands in the project folder and fill in their results:

• npm ls react-native-calendars: [email protected]
• npm ls react-native: [email protected]

Also specify:

1. Device/emulator/simulator & OS version: Android Emulator - Pixel 8 API 34

Reproducible Demo

• When I try to render a empty view like <View style={{ height: 0 }} /> for renderEmptyDate and renderDay props:

react-native-calendars.empty.dates.webm

[NguyenVuAnh1996]

I am not from the team who made this component,
but I am having trouble with renderDay, which is a prop of
Since I see that no-one replied to your issue and it seems that you can make a custom Day section so you could do all the styling,
can you tell me how you make that custom component?

The problem I have with renderDay={(day, item) => {}} is that it only gives me one item instead of a list of item.

Thank you very much in advance.

[bravesoul349]

Inspecting the code, I found out that the custom renderSectionHeader is called with the section's title only instead of passing the complete section object. If we have access to the full section, we can check if the data is empty and skip the date or section header for empty objects.

react-native-calendars/src/expandableCalendar/agendaList.tsx

Line 216 in a6119a6

return renderSectionHeader(title);

For a workaround, you can create a patch to replace line 216 with return renderSectionHeader(info?.section)
#2502