Expandable calendar height issue: Last week of month is not shown with customized design

[jrafflenbeul]

Description

I customized the design of dates which causes the expandable calendar's default height to be too small to show all weeks.

Expected Behavior

The expandable calendar should show all weeks of the current month.

Observed Behavior

The last row of some months is hidden due to the insufficient height of the default calendar configuration.

Environment

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

• npm ls react-native-calendars:
• npm ls react-native:

Also specify:

1. Device/emulator/simulator & OS version:
   All emulators and OS versiones

Reproducible Demo

The flag showSixWeeks and hideExtraDays is set properly set as suggested by the documentation (https://wix.github.io/react-native-calendars/docs/Components/Calendar#showsixweeks)

<CalendarProvider date={dayjs().format(BACKEND_DATE_FORMAT)}>
        <ExpandableCalendar
          displayLoadingIndicator={isLoading}
          minDate={minDate}
          maxDate={maxDate}
          initialPosition={Positions.OPEN}
          allowShadow={false}

          hideExtraDays={false}
          showSixWeeks={true}

          // Whether to allow selection of dates before minDate or after maxDate
          allowSelectionOutOfRange={true}
          disableAllTouchEventsForInactiveDays={false}
          firstDay={1}
          theme={{
            todayTextColor: colors.actionPrimary,
            arrowColor: colors.textPrimary,
            textDayHeaderFontSize: typographies.linkM.fontSize,
            textDayHeaderFontFamily: typographies.linkM.fontFamily,
            textMonthFontFamily: typographies.headingM.fontFamily,
            textMonthFontSize: typographies.headingM.fontSize,
            textDayFontSize: typographies.linkM.fontSize,
            textDayFontFamily: typographies.linkM.fontFamily,
            textDisabledColor: colors.disabledText,
            dayTextColor: colors.textPrimary,
            textDayStyle: {
              width: 44,
              height: 44,
              display: 'flex',
              justifyContent: 'center',
              alignItems: 'center',
            },
            stylesheet: {
              expandable: {
                main: {
                  knobContainer: {
                    position: 'absolute',
                    left: 0,
                    right: 0,
                    height: spacings.s,
                    bottom: 0,
                    alignItems: 'center',
                    justifyContent: 'center',
                    backgroundColor: colors.backgroundPrimary,
                    marginTop: spacings.s,
                  },
                },
              },
            },
          }}
          markedDates={{
            ...meetings,
            [dayjs().format(BACKEND_DATE_FORMAT)]: {
              today: dayjs().isSame(dayjs(), 'day'),
              customContainerStyle: {},
            },
          }}
          dayComponent={({ date, marking, state, onPress, theme }) => {
            const textColor =
              marking?.today === true
                ? colors.actionPrimary
                : marking?.selected === true
                ? colors.backgroundPrimary
                : marking?.marked === true
                ? colors.actionSecondary
                : colors.textPrimary;

            return (
              <TouchableOpacity
                onPress={() => {
                  selectDay(state, date, onPress);
                }}
                style={[marking?.customContainerStyle, theme?.textDayStyle]}
              >
                <Text color={textColor}>{date?.day}</Text>
              </TouchableOpacity>
            );
          }}
        />
            {meetingsOfTheDay.length === 0 && !showInfo && (
              <View style={styles.illustration}>
                <IllustrationWrapper uri={getIllustration()} width="80%" />
              </View>
            )}
            <AgendaList
              sections={[
                {
                  data: meetingsOfTheDay.map((meeting) => {
                    return {
                      title: `${getTimeFormat(
                        meeting.startTime,
                      )} - ${getTimeFormat(meeting.endTime)}`,
                      id: meeting.id,
                      startTime: meeting.startTime,
                      endTime: meeting.endTime,
                      date: meeting.date,
                    };
                  }),
                },
              ]}
              contentContainerStyle={styles.agendaContainer}
              style={styles.agenda}
              renderItem={PatientAgendaItem}
            />
      </CalendarProvider>

Screenshots

As seen here, the whole last week of March 2024 is missing. It is also not shown within the next month's screen.

[jrafflenbeul]

Can anyone tell me which CSS classes (or similar) can be overridden to fix this problem?

[jrafflenbeul]

My issue can be fixed by adjusting the constant WEEK_HEIGHT which can be found here:

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

Line 42 in 7d29982

const WEEK_HEIGHT = 46;

[jrafflenbeul]

There is also an issue with overriding theme styles. I've created two PRs which fix my issue:

#2435
#2436

If someone could please check them that would be highly appreciated.

[jrafflenbeul]

If anyone also would like to have the property weekHeight when using the expandable calendar, feel free to install my fork: https://github.com/jrafflenbeul/react-native-calendars

Note: You might need to change the namespace in android/build.gradle accordingly. It is currently my app's namespace com.quikk.react-native-calendars.

To install it, just update your package.json:

{
    ...
    "dependencies": {
        ...
        "react-native-calendars": "https://github.com/jrafflenbeul/react-native-calendars",
    }
}

You can also just create your own fork and apply the needed changes and install it from your own repository.
Hopefully, the PR #2436 is included in future releases.