feat(calendar): filter events by calendar visibility

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 <noreply@anthropic.com>

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<string, CalendarEvent[]> = 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

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' {

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 @@
 								</div>
 							{/each}
 
-							{#if eventsStore.getEventsForDay(day).length > 3}
+							{#if getAllEventsForDay(day).length > 3}
 								<button class="more-events" onclick={(e) => handleMoreClick(day, e)}>
 									{$_('views.moreEvents', {
-										values: { count: eventsStore.getEventsForDay(day).length - 3 },
+										values: { count: getAllEventsForDay(day).length - 3 },
 									})}
 								</button>
 							{/if}

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)

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)