react-native-calendar-kit icon indicating copy to clipboard operation
react-native-calendar-kit copied to clipboard

Problem with all day events

Open vict3or opened this issue 11 months ago • 1 comments

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: image

Log Output: image

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?

vict3or avatar Jan 03 '25 13:01 vict3or

+1

Tocchizawa avatar Jan 27 '25 01:01 Tocchizawa