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:

react-native-calendars/src/agenda/reservation-list/index.tsx

Lines 266 to 271 in f6b3281

	if (!items || selectedDay && !items[toMarkingFormat(selectedDay)]) {
	if (isFunction(this.props.renderEmptyData)) {
	return this.props.renderEmptyData?.();
	}
	return <ActivityIndicator style={this.style.indicator} color={theme?.indicatorColor}/>;
	}

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({});
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 (

{reservation.name}
{reservation.time}

);
};

const renderEmptyDate = () => {
return (

No events scheduled

);
};

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

if (authLoading) {
return ;
}

if (!accessToken) {
return (


Connect your Google Calendar to view events

<Button
title="Connect Google Calendar"
onPress={() => router.push("/settings")}
/>

);
}

if (error) {
return (

<Text style={[styles.connectText, styles.errorText]}>{error}


);
}

return (

<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}
/>

);
}; `

[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