count events per yearmonth in calendar

This commit is contained in:
2024-08-10 15:05:50 +02:00
parent 847d1b2343
commit 60a1b1d3d9

View File

@ -265,20 +265,32 @@ const EventCalendar = ({ events }: { events: EventFragment[] }) => {
return ( return (
<> <>
<div className={styles.eventCalendar}> <div className={styles.eventCalendar}>
{Object.keys(eventsByDate).map((yearMonth) => ( {Object.keys(eventsByDate).map((yearMonth) => {
const eventCount = Object.values(eventsByDate[yearMonth]).reduce(
(yearMonthSum, week) =>
yearMonthSum +
Object.values(week).reduce(
(weekSum, day) => weekSum + day.length,
0
),
0
);
return (
<div <div
key={yearMonth} key={yearMonth}
className={styles.calendarYearMonth} className={styles.calendarYearMonth}
data-collapsed={!visibleYearMonths.includes(yearMonth)} data-collapsed={!visibleYearMonths.includes(yearMonth)}
> >
<h2 onClick={() => toggleYearMonth(yearMonth)}> <h2 onClick={() => toggleYearMonth(yearMonth)}>
{formatYearMonth(yearMonth)} <span className={styles.eventCounter}>({Object.keys(eventsByDate[yearMonth]).length})</span> {formatYearMonth(yearMonth)}{" "}
<span className={styles.eventCounter}>({eventCount})</span>
</h2> </h2>
{Object.keys(eventsByDate[yearMonth]).map((week) => ( {Object.keys(eventsByDate[yearMonth]).map((week) => (
<CalendarWeek key={week} days={eventsByDate[yearMonth][week]} /> <CalendarWeek key={week} days={eventsByDate[yearMonth][week]} />
))} ))}
</div> </div>
))} );
})}
</div> </div>
</> </>
); );