Problem with all day events
Description I was testing the new version of the library and attempted to use the All Day Events feature. However, the events do not display as expected.
Steps to Reproduce Use the following JSX to configure the CalendarContainer component:
`<View style={{ flex: 1, gap: 16 }}> <CalendarContainer numberOfDays={7} hideWeekDays={omittedDays.map((day) => (day === 0 ? 7 : day))} firstDay={7} allowPinchToZoom start={timeToMinutes(start || '0000')} end={timeToMinutes(end || '2359')} timeInterval={interval} initialLocales={initialLocale} locale="pt_br" overlapType="overlap" onRefresh={() => refetchDayEvents()} scrollToNow useHaptic allowDragToEdit allowDragToCreate useAllDayEvent rightEdgeSpacing={4} overlapEventsSpacing={1} onPressEvent={(event) => { console.log('event', event); }} onPressBackground={(event) => { console.log('event', event); }} events={dayEvents?.eventos.map((event) => { const cardColor = getCardColorSchedule(event);
if (event.dia_todo) {
console.log('all day event', {
id: event.descricao,
title: event.descricao,
start: { date: `${formatDateFromSlashToHifen(event.data_inicio)}` },
end: { date: `${formatDateFromSlashToHifen(event.data_fim)}` },
color: cardColor.backgroundColor,
});
return {
id: event.descricao,
title: event.descricao,
start: { date: `${formatDateFromSlashToHifen(event.data_inicio)}` },
end: { date: `${formatDateFromSlashToHifen(event.data_fim)}` },
color: cardColor.backgroundColor,
};
}
return {
id: event.time_unix || Math.random().toString(),
title: event.motivo_bloq ? event.motivo_bloq : event.descricao,
start: { dateTime: toISOString(event.data_inicio, event.hora_inicio) }, // '2024-03-15T10:00:00Z'
end: { dateTime: toISOString(event.data_fim, event.hora_fim) }, // '2024-03-15T11:00:00Z'
color: cardColor.backgroundColor,
};
})}
>
<CalendarHeader />
<CalendarBody />
</CalendarContainer>
</View>`
Pass a list of events, including at least one with dia_todo set to true.
Observe the rendered calendar.
Expected Behavior The all-day events should display correctly at the top of the calendar or in their designated area.
Actual Behavior All-day events are not rendered as expected. See screenshots below for details:
On Screen:
Log Output:
Relevant Dependencies "expo": "~51.0.17", "react-native": "0.74.3", "react-native-gesture-handler": "~2.16.1", "react-native-reanimated": "~3.10.1"
Additional Information useAllDayEvent is enabled as per the props. The all-day event data is logged correctly (as shown in the log output), but it does not appear on the screen. Could you help identify if this is a bug or if I'm missing a configuration?
+1