Calendar - Header: Month Year vs Date + timestamp

[erie-e9]

Hey guys I'm experiencing an issue in Calendar, header's date text changed to second image below. I prefer old one, is there a way to change it back? I prefer old way for now. I already have localization config but I won't add extra localize config for it.

Documentation

New style?

Code:

<Calendar
        testID={`${testID}Calendar`}
        current={reFormatDate(selected || maxDate || current || todayValue, 'YYYY-MM-DD')}
        initialDate={reFormatDate(selected || maxDate || todayValue, 'YYYY-MM-DD')}
        maxDate={reFormatDate(maxDate || todayValue, 'YYYY-MM-DD')}
        minDate={reFormatDate(minDate || todayValue, 'YYYY-MM-DD')}
        allowSelectionOutOfRange={allowSelectionOutOfRange}
        disableAllTouchEventsForDisabledDays={disableAllTouchEventsForDisabledDays}
        disableAllTouchEventsForInactiveDays={disableAllTouchEventsForInactiveDays}
        onDayPress={(date: any) => onSelect(date)}
        markedDates={markedDates}
        firstDay={firstDay}
        enableSwipeMonths={true}
        // showWeekNumbers
        hideExtraDays
        disabledDaysIndexes={[0, 6]}
        theme={{
          backgroundColor: 'yellow', // no works
          calendarBackground: theme.tokens.colors.tertiary50,
          textSectionTitleColor: theme.tokens.colors.tertiary700, // color's day of week
          textSectionTitleDisabledColor: theme.tokens.colors.tertiary400, // blocked color's day of week
          selectedDayBackgroundColor: theme.tokens.colors.primary500, // no works
          selectedDayTextColor: 'red', // no works
          todayTextColor: theme.tokens.colors.tertiary950,
          dayTextColor: theme.tokens.colors.primary500,
          textDisabledColor: theme.tokens.colors.tertiary400,
          monthTextColor: theme.tokens.colors.typography950, // header color
          indicatorColor: 'blue', // no works
          arrowColor: theme.tokens.colors.tertiary800,
          stylesheet: {
            calendar: {
              header: {
                marginTop: 30,
                marginHorizontal: 12,
                flexDirection: 'row',
                justifyContent: 'space-between',
                backgroundColor: 'red',
              },
            },
          },
        }}
        headerStyle={inlineStyleHeaderStyle}
      />

[Dallas62]

Looks likes it's due to defaultProps deprecation in recent React Native versions.

You can add the property: monthFormat="MMMM yyyy" in the <Calendar /> component to restore it back.

https://github.com/wix/react-native-calendars/blame/ed9b13b1ccc06d9382786fc02a85a401d8fa0bc8/src/calendar/header/index.tsx#L313

Looks like someone opened a PR last year, but not yet merged / validated.

https://github.com/wix/react-native-calendars/pull/2480

[NorseGaud]

Thanks @Dallas62

[stale[bot]]

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.