Unable to select days when ExpandableCalendar is closed

[poinch]

Please make our job easier by filling this template out to completion. If you're requesting a feature instead of reporting a bug, please feel free to skip the Environment and Reproducible Demo sections.

Description

When i change month if the first day of the month is not a Monday im unable to select a day.

Expected Behavior

I played with all available props but looks like in the month of march for example the 1st 2nd and 3rd March are disabled

Observed Behavior

setCalendarLocale('it');
const formattedToday = DateTime.now().toFormat('yyyy-LL-dd');
const today = DateTime.now();

const Calendar = () => {
const isBusy = useAppSelector(selectIsBusy);
// const [selected, setSelected] = useState(formattedToday);
const [currentPeriod, setCurrentPeriod] = useState({ anno: today.year, mese: today.month });
const aziendaCorrente: AziendaRecord | null = useAppSelector(selectAzienda);
const { data: tabellaWF } = useTabellaWF(aziendaCorrente ? { idDominio: aziendaCorrente.idDominio!, idTabella: aziendaCorrente.idTabellaWF } : null);
const { data: causaliWF } = useCausaliWF();
const { gestione, isLoading, calendarItems } = usePresenzeWF(aziendaCorrente, currentPeriod);

console.log('CALENDARITEMS', calendarItems);
// console.log('TABELLA WF', tabellaWF);
// console.log('CAUSALI WF', causaliWF);
// console.log('GESTIONE', gestione);

const navigation = useNavigation();
const theme = useTheme();

// const marked = useMemo(() => {
// return {
// [selected]: {
// selected: true,
// disableTouchEvent: true,
// },
// };
// }, [selected]);

// const onDayPress = useCallback((day: DateData) => {
// setSelected(day.dateString);
// }, []);

const onMonthChange = (date: DateData) => {
const newPeriod = { anno: date.year, mese: date.month as IndiceMese };
setCurrentPeriod(newPeriod);
};

const renderCalendarItem = useCallback(
({ item }: { item: PresenzeGiornataPlusRecord }) => {
return ;
},
[calendarItems],
);

return (

<Backdrop isVisible={isLoading || isBusy} />

<Text style={{ maxWidth: '70%' }} numberOfLines={1} appearance='default' category='label'>
{aziendaCorrente?.denominazione}

<CustomButton title='Riepilogo' iconName='info-outline' onPress={() => navigation.navigate('Summary')} />

<CalendarProvider
date={formattedToday}
onMonthChange={onMonthChange}
showTodayButton
todayButtonStyle={{ backgroundColor: themeColor }}
theme={{ todayButtonTextColor: 'white' }}
>
<ExpandableCalendar
testID={testIDs.expandableCalendar.CONTAINER}
theme={getCalendarTheme()}
disableAllTouchEventsForDisabledDays
allowShadow
firstDay={1}
markingType={'multi-dot'}
// markedDates={marked}
// onDayPress={onDayPress}
/>
<Text style={{ paddingHorizontal: '8%', paddingVertical: '2%' }}>Editabile fino al 03/03/2023
<AgendaList
infiniteListProps={{
itemHeight: 35,
visibleIndicesChangedDebounce: 250,
}}
style={{ marginBottom: '3%' }}
// sections={calendarItems}
sections={calendarItems.filter((item) => Number(item.title?.split('-')[1]) === currentPeriod.mese)}
renderItem={renderCalendarItem}
keyExtractor={(item) => item.dtGiornata}
renderSectionFooter={() => }
renderSectionHeader={({ title, affectedHours, expectedHours }: any) => {
return (


<Text style={{ textTransform: 'capitalize' }} category='label' appearance='default'>
{sectionDateFormat(title)}

<View style={{ flexDirection: 'row', alignItems: 'center', gap: 4, marginTop: 2 }}>
<Icon name='clock-outline' style={{ width: 12, height: 12 }} fill={theme['text-alternate-color']} />
{expectedHours}




);
}}
/>


);
};

export default Calendar;

const styles = StyleSheet.create({
screen: {
flex: 1,
},
infoAzienda: {
paddingHorizontal: '8%',
paddingVertical: '5%',
flexDirection: 'row',
alignItems: 'center',
justifyContent: 'space-between',
},
sectionHeader: {
backgroundColor: 'white',
paddingVertical: '3%',
paddingHorizontal: '8%',
flexDirection: 'row',
alignItems: 'center',
justifyContent: 'space-between',
},
separator: {
borderColor: lightColor,
borderWidth: 1,
marginTop: '3%',
},
});

Environment

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

• npm ls react-native-calendars: react-native-calendars@1.1304.1
• npm ls react-native: @react-native-async-storage/async-storage@1.18.2
  │ └── react-native@0.72.10 deduped
  ├─┬ @react-navigation/bottom-tabs@6.5.12
  │ ├─┬ @react-navigation/elements@1.3.22
  │ │ └── react-native@0.72.10 deduped
  │ └── react-native@0.72.10 deduped
  ├─┬ @react-navigation/native-stack@6.9.18
  │ └── react-native@0.72.10 deduped
  ├─┬ @react-navigation/native@6.1.10
  │ └── react-native@0.72.10 deduped
  ├─┬ @react-navigation/stack@6.3.21
  │ └── react-native@0.72.10 deduped
  ├─┬ @tanstack/react-query@4.36.1
  │ └── react-native@0.72.10 deduped
  ├─┬ react-native-calendars@1.1304.1
  │ └─┬ recyclerlistview@4.2.0
  │ └── react-native@0.72.10 deduped
  ├─┬ react-native-date-picker@5.0.0
  │ └── react-native@0.72.10 deduped
  ├─┬ react-native-gesture-handler@2.12.1
  │ └── react-native@0.72.10 deduped
  ├─┬ react-native-get-random-values@1.9.0
  │ └── react-native@0.72.10 deduped
  ├─┬ react-native-keyboard-aware-scroll-view@0.9.5
  │ ├─┬ react-native-iphone-x-helper@1.3.1
  │ │ └── react-native@0.72.10 deduped
  │ └── react-native@0.72.10 deduped
  ├─┬ react-native-reanimated-carousel@3.5.1
  │ └── react-native@0.72.10 deduped
  ├─┬ react-native-reanimated@3.3.0
  │ └── react-native@0.72.10 deduped
  ├─┬ react-native-safe-area-context@4.6.3
  │ └── react-native@0.72.10 deduped
  ├─┬ react-native-screens@3.22.1
  │ └── react-native@0.72.10 deduped
  ├─┬ react-native-svg-transformer@1.3.0
  │ └── react-native@0.72.10 deduped
  ├─┬ react-native-svg@13.9.0
  │ └── react-native@0.72.10 deduped
  ├─┬ react-native@0.72.10
  │ └─┬ @react-native/virtualized-lists@0.72.8
  │ └── react-native@0.72.10 deduped
  └─┬ react-redux@8.1.3
  └── react-native@0.72.10 deduped

Also specify:

1. Device/emulator/simulator & OS version: IOS physical device and Android Emulator

Reproducible Demo

WhatsApp.Video.2024-04-09.at.19.37.08.mp4