edb/neuf-www
7
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

don't show more than two months in event calendar by default

Browse Source
This commit is contained in:
Jonas Braathen
2024-07-13 21:47:06 +02:00
parent 5c7ad08cba
commit 410fc43bdf
1 changed files with 33 additions and 20 deletions
Download Patch File Download Diff File Expand all files Collapse all files

53
web/src/components/events/EventContainer.tsx
View File

@ -44,10 +44,10 @@ export const EventContainer = ({
const [venue, setVenue] = useQueryState("venue", parseAsString); const [venue, setVenue] = useQueryState("venue", parseAsString);
const resetFilters = () => { const resetFilters = () => {
setCategory(null) setCategory(null);
setOrganizer(null) setOrganizer(null);
setVenue(null) setVenue(null);
} };
/* Allow filtering on all categories that are configured to be shown */ /* Allow filtering on all categories that are configured to be shown */
const filterableCategories = eventCategories.filter((x) => x.showInFilters); const filterableCategories = eventCategories.filter((x) => x.showInFilters);
@ -193,30 +193,43 @@ const CalendarDay = ({
); );
const EventCalendar = ({ events }: { events: EventFragment[] }) => { const EventCalendar = ({ events }: { events: EventFragment[] }) => {
const [showAll, setShowAll] = useState(false);
const futureSingularEvents = getSingularEvents(events).filter( const futureSingularEvents = getSingularEvents(events).filter(
(x) => x.occurrence?.start && isTodayOrFuture(x.occurrence.start) (x) => x.occurrence?.start && isTodayOrFuture(x.occurrence.start)
); );
const eventsByDate = organizeEventsInCalendar(futureSingularEvents); const eventsByDate = organizeEventsInCalendar(futureSingularEvents);
const yearMonths = Object.keys(eventsByDate);
const visibleYearMonths = showAll ? yearMonths : yearMonths.slice(0, 2);
return ( return (
<div className={styles.eventCalendar}> <>
{Object.keys(eventsByDate).map((yearMonth) => ( <div className={styles.eventCalendar}>
<div key={yearMonth} className={styles.calendarYearMonth}> {Object.keys(eventsByDate)
<h2>{formatYearMonth(yearMonth)}</h2> .filter((yearMonth) => visibleYearMonths.includes(yearMonth))
{Object.keys(eventsByDate[yearMonth]).map((week) => ( .map((yearMonth) => (
<div key={week} className={styles.calendarWeek}> <div key={yearMonth} className={styles.calendarYearMonth}>
{Object.keys(eventsByDate[yearMonth][week]).map((day) => ( <h2>{formatYearMonth(yearMonth)}</h2>
<CalendarDay {Object.keys(eventsByDate[yearMonth]).map((week) => (
key={day} <div key={week} className={styles.calendarWeek}>
day={day} {Object.keys(eventsByDate[yearMonth][week]).map((day) => (
events={eventsByDate[yearMonth][week][day]} <CalendarDay
/> key={day}
day={day}
events={eventsByDate[yearMonth][week][day]}
/>
))}
</div>
))} ))}
</div> </div>
))} ))}
</div> </div>
))} {!showAll && yearMonths.length > 2 && (
</div> <button onClick={() => setShowAll(true)} className="button">
<span>Vis alt</span>
<Icon />
</button>
)}
</>
); );
}; };