I’m currently building a calendar app where, in this case, you press on a desired date on the calendar and it shows you below all the events related to that day. However, these events have a “dropdown” function to show more data, and when I press on them to toggle the more detailed version of that element, all the events for that day switch to the detailed view.
...
const events = [
{ title: 'Maths Exam', date: '2023-04-17', time_start: "HH:MM", time_end: "HH:MM", duration: "HH:MM", teacher: "Ms. Sonila", details: "Lorem Ipsum Dolor Sit amet" },
{ title: 'English Quiz', date: '2023-04-17', time_start: "HH:MM", time_end: "HH:MM", duration: "HH:MM", teacher: "Ms. Morena", details: "Lorem Ipsum Dolor Sit amet" },
{ title: 'Albanian Essay', date: '2023-04-17', time_start: "HH:MM", time_end: "HH:MM", duration: "HH:MM", teacher: "Ms. Junilda", details: "Lorem Ipsum Dolor Sit amet" },
{ title: 'Albanian Project', date: '2023-04-17', time_start: "HH:MM", time_end: "HH:MM", duration: "HH:MM", teacher: "Ms. Junilda", details: "Lorem Ipsum Dolor Sit amet" },
{ title: 'Albanian Something', date: '2023-04-17', time_start: "HH:MM", time_end: "HH:MM", duration: "HH:MM", teacher: "Ms. Junilda", details: "Lorem Ipsum Dolor Sit amet" },
];
...
const [selectedDate, setSelectedDate] = useState(new Date().toISOString().slice(0, 10));
let currentDate = (new Date()).toISOString().split('T')[0]
let dateSelected = (selectedDate.replaceAll("-", " ")).split(" ").reverse().join(" ");
const getEventsForDay = (date) => {
return events.filter((event) => event.date === date);
};
const onDayPress = (day) => {
setSelectedDate(day.dateString);
};
...
const [isDetailed, setIsDetailed] = useState(false);
const [isBlock, setIsBlock] = useState("none");
function toggleView() {
setIsDetailed(!isDetailed);
if (isDetailed) {
setIsBlock("flex")
} else {
setIsBlock("none")
}
}
...
<Text style={styles.eventsTitle}>Events for {dateSelected}:</Text>
<ScrollView style={{ height: (calendarHeight / 1.5) + 15 }} showsVerticalScrollIndicator={false}>
{getEventsForDay(selectedDate).map((event, index) => (
<TouchableOpacity onPress={toggleView} key={index}>
<Card style={styles.eventItem}>
<View>
<Text style={styles.eventItemTitle}>{event.title}</Text>
{/* @ts-ignore */}{/* This is to ignore the "display: `${isBlock}`" below as it threw an error. */}
<Text style={{ display: `${isBlock}`, color: "white", marginTop: 5 }}>{event.details}</Text>
</View>
{isDetailed ? (
<Ionicons
name="chevron-up"
color={Colors.primary}
size={25}
key={index}
/>
) : (
<Ionicons
name="chevron-down"
color={Colors.primary}
size={25}
key={index}
/>
)
}
</Card>
</TouchableOpacity>
))}
</ScrollView>
