From 40982833505099e4173fa31f6be39d90a2dca0e2 Mon Sep 17 00:00:00 2001 From: Till-JS <101404291+Till-JS@users.noreply.github.com> Date: Sun, 14 Dec 2025 15:22:03 +0100 Subject: [PATCH] feat(calendar): filter events by calendar visibility MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Events are now filtered based on the calendar visibility setting in all view components (WeekView, DayView, MultiDayView, MonthView, AgendaView). When a calendar is hidden via the toolbar toggle, its events are no longer displayed. 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Opus 4.5 --- .../lib/components/calendar/AgendaView.svelte | 6 ++++++ .../lib/components/calendar/DayView.svelte | 21 ++++++++++++++----- .../lib/components/calendar/MonthView.svelte | 15 ++++++++++--- .../components/calendar/MultiDayView.svelte | 17 ++++++++++++--- .../lib/components/calendar/WeekView.svelte | 17 ++++++++++++--- 5 files changed, 62 insertions(+), 14 deletions(-) diff --git a/apps/calendar/apps/web/src/lib/components/calendar/AgendaView.svelte b/apps/calendar/apps/web/src/lib/components/calendar/AgendaView.svelte index 982a0ece3..6d3acad2f 100644 --- a/apps/calendar/apps/web/src/lib/components/calendar/AgendaView.svelte +++ b/apps/calendar/apps/web/src/lib/components/calendar/AgendaView.svelte @@ -20,12 +20,18 @@ const currentEvents = eventsStore.events ?? []; if (!Array.isArray(currentEvents)) return []; + // Filter by visible calendars + const visibleCalendarIds = new Set(calendarsStore.visibleCalendars.map((c) => c.id)); + // Filter events that start from current date onwards const startDate = startOfDay(viewStore.currentDate); const groups: Map = new Map(); for (const event of currentEvents) { + // Skip events from hidden calendars + if (!visibleCalendarIds.has(event.calendarId)) continue; + const start = toDate(event.startTime); // Skip events before the start date diff --git a/apps/calendar/apps/web/src/lib/components/calendar/DayView.svelte b/apps/calendar/apps/web/src/lib/components/calendar/DayView.svelte index 8b1f4fac6..9de0aae29 100644 --- a/apps/calendar/apps/web/src/lib/components/calendar/DayView.svelte +++ b/apps/calendar/apps/web/src/lib/components/calendar/DayView.svelte @@ -47,7 +47,11 @@ // Get timed events, filtering out those outside visible range when hour filter is enabled let timedEvents = $derived.by(() => { - const allEvents = eventsStore.getEventsForDay(viewStore.currentDate).filter((e) => !e.isAllDay); + // Filter by visible calendars first + const visibleCalendarIds = new Set(calendarsStore.visibleCalendars.map((c) => c.id)); + const allEvents = eventsStore + .getEventsForDay(viewStore.currentDate) + .filter((e) => !e.isAllDay && visibleCalendarIds.has(e.calendarId)); if (settingsStore.filterHoursEnabled) { const visibleStartMinutes = settingsStore.dayStartHour * 60; @@ -74,7 +78,11 @@ return { before: [] as CalendarEvent[], after: [] as CalendarEvent[] }; } - const allEvents = eventsStore.getEventsForDay(viewStore.currentDate).filter((e) => !e.isAllDay); + // Filter by visible calendars + const visibleCalendarIds = new Set(calendarsStore.visibleCalendars.map((c) => c.id)); + const allEvents = eventsStore + .getEventsForDay(viewStore.currentDate) + .filter((e) => !e.isAllDay && visibleCalendarIds.has(e.calendarId)); const before: CalendarEvent[] = []; const after: CalendarEvent[] = []; @@ -101,9 +109,12 @@ return { before, after }; }); - let allDayEvents = $derived( - eventsStore.getEventsForDay(viewStore.currentDate).filter((e) => e.isAllDay) - ); + let allDayEvents = $derived.by(() => { + const visibleCalendarIds = new Set(calendarsStore.visibleCalendars.map((c) => c.id)); + return eventsStore + .getEventsForDay(viewStore.currentDate) + .filter((e) => e.isAllDay && visibleCalendarIds.has(e.calendarId)); + }); // Get display mode for an event (per-event override takes precedence over global setting) function getEventDisplayMode(event: CalendarEvent): 'header' | 'block' { diff --git a/apps/calendar/apps/web/src/lib/components/calendar/MonthView.svelte b/apps/calendar/apps/web/src/lib/components/calendar/MonthView.svelte index 81a13963b..6ce614ec6 100644 --- a/apps/calendar/apps/web/src/lib/components/calendar/MonthView.svelte +++ b/apps/calendar/apps/web/src/lib/components/calendar/MonthView.svelte @@ -193,7 +193,16 @@ // Event Handlers // ============================================================================ function getEventsForDay(day: Date) { - return eventsStore.getEventsForDay(day).slice(0, 3); // Max 3 events shown + const visibleCalendarIds = new Set(calendarsStore.visibleCalendars.map((c) => c.id)); + return eventsStore + .getEventsForDay(day) + .filter((e) => visibleCalendarIds.has(e.calendarId)) + .slice(0, 3); // Max 3 events shown + } + + function getAllEventsForDay(day: Date) { + const visibleCalendarIds = new Set(calendarsStore.visibleCalendars.map((c) => c.id)); + return eventsStore.getEventsForDay(day).filter((e) => visibleCalendarIds.has(e.calendarId)); } function handleDayClick(day: Date, e: MouseEvent) { @@ -329,10 +338,10 @@ {/each} - {#if eventsStore.getEventsForDay(day).length > 3} + {#if getAllEventsForDay(day).length > 3} {/if} diff --git a/apps/calendar/apps/web/src/lib/components/calendar/MultiDayView.svelte b/apps/calendar/apps/web/src/lib/components/calendar/MultiDayView.svelte index fba7ea22a..ee0a54037 100644 --- a/apps/calendar/apps/web/src/lib/components/calendar/MultiDayView.svelte +++ b/apps/calendar/apps/web/src/lib/components/calendar/MultiDayView.svelte @@ -120,7 +120,11 @@ let daysContainerEl: HTMLDivElement; function getEventsForDay(day: Date) { - const allEvents = eventsStore.getEventsForDay(day).filter((e) => !e.isAllDay); + // Filter by visible calendars first + const visibleCalendarIds = new Set(calendarsStore.visibleCalendars.map((c) => c.id)); + const allEvents = eventsStore + .getEventsForDay(day) + .filter((e) => !e.isAllDay && visibleCalendarIds.has(e.calendarId)); // If hour filtering is enabled, only show events that overlap with visible range if (settingsStore.filterHoursEnabled) { @@ -148,7 +152,11 @@ return { before: [], after: [] }; } - const allEvents = eventsStore.getEventsForDay(day).filter((e) => !e.isAllDay); + // Filter by visible calendars + const visibleCalendarIds = new Set(calendarsStore.visibleCalendars.map((c) => c.id)); + const allEvents = eventsStore + .getEventsForDay(day) + .filter((e) => !e.isAllDay && visibleCalendarIds.has(e.calendarId)); const before: CalendarEvent[] = []; const after: CalendarEvent[] = []; @@ -176,7 +184,10 @@ } function getAllDayEventsForDay(day: Date) { - return eventsStore.getEventsForDay(day).filter((e) => e.isAllDay); + const visibleCalendarIds = new Set(calendarsStore.visibleCalendars.map((c) => c.id)); + return eventsStore + .getEventsForDay(day) + .filter((e) => e.isAllDay && visibleCalendarIds.has(e.calendarId)); } // Get display mode for an event (per-event override takes precedence over global setting) diff --git a/apps/calendar/apps/web/src/lib/components/calendar/WeekView.svelte b/apps/calendar/apps/web/src/lib/components/calendar/WeekView.svelte index 38045db41..0fe825e00 100644 --- a/apps/calendar/apps/web/src/lib/components/calendar/WeekView.svelte +++ b/apps/calendar/apps/web/src/lib/components/calendar/WeekView.svelte @@ -119,7 +119,11 @@ let daysContainerEl: HTMLDivElement; function getEventsForDay(day: Date) { - const allEvents = eventsStore.getEventsForDay(day).filter((e) => !e.isAllDay); + // Filter by visible calendars first + const visibleCalendarIds = new Set(calendarsStore.visibleCalendars.map((c) => c.id)); + const allEvents = eventsStore + .getEventsForDay(day) + .filter((e) => !e.isAllDay && visibleCalendarIds.has(e.calendarId)); // If hour filtering is enabled, only show events that overlap with visible range if (settingsStore.filterHoursEnabled) { @@ -147,7 +151,11 @@ return { before: [], after: [] }; } - const allEvents = eventsStore.getEventsForDay(day).filter((e) => !e.isAllDay); + // Filter by visible calendars + const visibleCalendarIds = new Set(calendarsStore.visibleCalendars.map((c) => c.id)); + const allEvents = eventsStore + .getEventsForDay(day) + .filter((e) => !e.isAllDay && visibleCalendarIds.has(e.calendarId)); const before: CalendarEvent[] = []; const after: CalendarEvent[] = []; @@ -175,7 +183,10 @@ } function getAllDayEventsForDay(day: Date) { - return eventsStore.getEventsForDay(day).filter((e) => e.isAllDay); + const visibleCalendarIds = new Set(calendarsStore.visibleCalendars.map((c) => c.id)); + return eventsStore + .getEventsForDay(day) + .filter((e) => e.isAllDay && visibleCalendarIds.has(e.calendarId)); } // Get display mode for an event (per-event override takes precedence over global setting)