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<Periodo>({ 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 <CalendarItem item={item} />; }, [calendarItems], );

return ( <View style={styles.screen}> <Backdrop isVisible={isLoading || isBusy} /> <View style={styles.infoAzienda}> <Text style={{ maxWidth: '70%' }} numberOfLines={1} appearance='default' category='label'> {aziendaCorrente?.denominazione} </Text> <CustomButton title='Riepilogo' iconName='info-outline' onPress={() => navigation.navigate('Summary')} /> </View> <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</Text> <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={() => <View style={styles.separator} />} renderSectionHeader={({ title, affectedHours, expectedHours }: any) => { return ( <View style={styles.sectionHeader}> <View> <Text style={{ textTransform: 'capitalize' }} category='label' appearance='default'> {sectionDateFormat(title)} </Text> <View style={{ flexDirection: 'row', alignItems: 'center', gap: 4, marginTop: 2 }}> <Icon name='clock-outline' style={{ width: 12, height: 12 }} fill={theme['text-alternate-color']} /> <Text>{expectedHours}</Text> </View> </View> <CustomButton title='Richiesta' iconName='plus-circle-outline' outline /> </View> ); }} /> </CalendarProvider> </View> ); };

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: [email protected]
• npm ls react-native: @react-native-async-storage/[email protected] │ └── [email protected] deduped ├─┬ @react-navigation/[email protected] │ ├─┬ @react-navigation/[email protected] │ │ └── [email protected] deduped │ └── [email protected] deduped ├─┬ @react-navigation/[email protected] │ └── [email protected] deduped ├─┬ @react-navigation/[email protected] │ └── [email protected] deduped ├─┬ @react-navigation/[email protected] │ └── [email protected] deduped ├─┬ @tanstack/[email protected] │ └── [email protected] deduped ├─┬ [email protected] │ └─┬ [email protected] │ └── [email protected] deduped ├─┬ [email protected] │ └── [email protected] deduped ├─┬ [email protected] │ └── [email protected] deduped ├─┬ [email protected] │ └── [email protected] deduped ├─┬ [email protected] │ ├─┬ [email protected] │ │ └── [email protected] deduped │ └── [email protected] deduped ├─┬ [email protected] │ └── [email protected] deduped ├─┬ [email protected] │ └── [email protected] deduped ├─┬ [email protected] │ └── [email protected] deduped ├─┬ [email protected] │ └── [email protected] deduped ├─┬ [email protected] │ └── [email protected] deduped ├─┬ [email protected] │ └── [email protected] deduped ├─┬ [email protected] │ └─┬ @react-native/[email protected] │ └── [email protected] deduped └─┬ [email protected] └── [email protected] deduped

Also specify:

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

Reproducible Demo

https://github.com/wix/react-native-calendars/assets/1232955/ac1c332c-1bba-4eef-b93e-cd7b648b3fde