Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Problem with all day events #169

Open
vict3or opened this issue Jan 3, 2025 · 1 comment
Open

Problem with all day events #169

vict3or opened this issue Jan 3, 2025 · 1 comment

Comments

@vict3or
Copy link

vict3or commented Jan 3, 2025

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?

@Tocchizawa
Copy link

+1

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants