Don't render empty dates

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

I am not from the team who made this component, but I am having trouble with renderDay, which is a prop of <Agenda /> 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.

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.

https://github.com/wix/react-native-calendars/blob/a6119a6cfb8fab04f5f4e26d448015eb757cd52b/src/expandableCalendar/agendaList.tsx#L216

For a workaround, you can create a patch to replace line 216 with return renderSectionHeader(info?.section) https://github.com/wix/react-native-calendars/pull/2502

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

    const renderEmptyDate = () => {
        return (
            <View style={styles.emptyDate}>
                <Text style={styles.emptyDateText}>אין אירועים ליום זה.</Text>
            </View>
        );
    };