Agenda not showing any items if selected date doesnt have an item

[Fuzzyma]

The Agenda doesnt show any items when the currently selected date doesnt have any:

However, when the selected day has an item, it will show all items from this day and all the days after:

I would expect to always show upcoming items even when the current day doesnt have any.

The corresponding code can be found here:

https://github.com/wix/react-native-calendars/blob/f6b32812e75bbf72a9ec3b7caca0c76abf41b183/src/agenda/reservation-list/index.tsx#L266-L271

As you can see the condition checks if there is no item for the selected day and if so, shows the no-data indicator. I dont think this is correct. The condition should only check if theer are any items in the future and if so, show them. Only if not, it should show the no-data indicator

[mitej23]

Hey, I was also facing the same issue. I just prompted claude to solve the issue. Now it's working properly. I haven't seen the code properly. Till the time you get proper official answer to this issue. You can use my code below.

`const CalendarScreen = () => { const { accessToken, loading: authLoading } = useAuth(); const [events, setEvents] = useState<AgendaSchedule>({}); const [calendarLoading, setCalendarLoading] = useState(true); const [refreshing, setRefreshing] = useState(false); const [error, setError] = useState<string | null>(null);

const fetchEvents = async () => { try { setError(null); setRefreshing(true);

  if (!accessToken) return;

  const calendarEvents = await getCalendarEvents(accessToken);

  if (!calendarEvents.length) {
    setEvents({});
    return;
  }

  const formattedEvents = formatEvents(calendarEvents);
  setEvents(formattedEvents);
} catch (err) {
  console.error("Failed to fetch events:", err);
  setError("Failed to load calendar events. Please try again.");
} finally {
  setCalendarLoading(false);
  setRefreshing(false);
}

};

const formatEvents = (events: any[]): AgendaSchedule => { const formatted: AgendaSchedule = {};

// First, initialize all dates in the range with empty arrays
const today = new Date();
const threeMonthsAgo = new Date(today);
threeMonthsAgo.setMonth(today.getMonth() - 3);
const threeMonthsFromNow = new Date(today);
threeMonthsFromNow.setMonth(today.getMonth() + 3);

for (
  let d = new Date(threeMonthsAgo);
  d <= threeMonthsFromNow;
  d.setDate(d.getDate() + 1)
) {
  const dateString = d.toISOString().split("T")[0];
  formatted[dateString] = [];
}

// Then add events to their specific dates
events
  .sort((a, b) => {
    const aTime = new Date(a.start.dateTime || a.start.date).getTime();
    const bTime = new Date(b.start.dateTime || b.start.date).getTime();
    return aTime - bTime;
  })
  .forEach((event) => {
    const date = new Date(event.start.dateTime || event.start.date);
    const dateString = date.toISOString().split("T")[0];

    const timeString = event.start.dateTime
      ? date.toLocaleTimeString([], {
          hour: "2-digit",
          minute: "2-digit",
          hour12: true,
        })
      : "All Day";

    formatted[dateString].push({
      name: event.summary,
      time: timeString,
      originalTime: event.start.dateTime || event.start.date,
      day: dateString,
      height: 80,
    });
  });

return formatted;

};

useEffect(() => { if (!authLoading) { if (accessToken) { fetchEvents(); } else { setCalendarLoading(false); } } }, [accessToken, authLoading]);

const handleRefresh = () => { setRefreshing(true); fetchEvents(); };

const renderItem = (reservation: CustomAgendaEntry) => { return ( <TouchableOpacity style={styles.eventItem}> <Text style={styles.eventTitle}>{reservation.name}</Text> <Text style={styles.eventTime}>{reservation.time}</Text> </TouchableOpacity> ); };

const renderEmptyDate = () => { return ( <View style={styles.emptyDate}> <Text>No events scheduled</Text> </View> ); };

const keyExtractor = (item: CustomAgendaEntry, index: number) => { return ${item.day}-${item.originalTime}-${index}; };

if (authLoading) { return <ActivityIndicator size="large" style={styles.loader} />; }

if (!accessToken) { return ( <View style={styles.connectContainer}> <Text style={styles.connectText}> Connect your Google Calendar to view events </Text> <Button title="Connect Google Calendar" onPress={() => router.push("/settings")} /> </View> ); }

if (error) { return ( <View style={styles.connectContainer}> <Text style={[styles.connectText, styles.errorText]}>{error}</Text> <Button title="Try Again" onPress={fetchEvents} /> </View> ); }

return ( <View style={styles.container}> <Agenda items={events} renderItem={renderItem} renderEmptyDate={renderEmptyDate} onRefresh={handleRefresh} refreshing={refreshing} showClosingKnob={true} pastScrollRange={3} futureScrollRange={3} theme={{ agendaDayTextColor: "#0277e7", agendaDayNumColor: "#0277e7", agendaTodayColor: "#0277e7", }} keyExtractor={keyExtractor} // showOnlySelectedDayItems={true} /> </View> ); }; `

[Fuzzyma]

@mitej23 i don't want empty dates. I don't want to show anything if there is no event. But I want to show future events. Your solution doesn't work for me. I also don't think it is particularly helpful for others to post (a lot of) code that you didn't even write yourself. It is a lot of clutter with not much value. Your solution boils down to: initialize all days with empty arrays. But that's not what I am concerned about

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[Fuzzyma]

.

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[Fuzzyma]

...

[Talha-raj]

any update