react-native-calendars: Render count of events instead of a dot in markedDates

Question

Is it possible to render the count of events in each day instead of a dot in react-native-calendars Agenda? Say, I've 2 events for a day, then the number 2 should show up under that date. Any example would be appreciated.

Answer 1

Solved it with dayComponent:

render() {
return  (
   <Agenda
    ....
    dayComponent={renderDayComponent}
    .....>
  </Agenda>)
}

renderDayComponent = data => <CalendarDayComponent {...data} calendarData={calendarData} />;

to restore the onPress behavior:

const CalendarDayComponent => props {
    onPressed = () => {
        requestAnimationFrame(() => props.onPress(props.date));
    }
    let items = '';

    if (props.marking.marked) {
        items = calendarData[date.dateString].length
    }
return (
        <View style={styles.container}>
            <Text onPress={onPressed} style={{ color: state === 'disabled' ? 'gray' : 'black' }}>
                {children}
            </Text>
            <Text style={styles.itemsCount}>
                {items}
            </Text>
        </View>
    )
};