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)