calendar 26

components/calendar/calendar-client.tsx

@@ -480,6 +480,15 @@ export function CalendarClient({ initialCalendars, userId, userProfile }: Calend
 
   const calendarRef = useRef<any>(null);
 
+  const [visibleCalendarIds, setVisibleCalendarIds] = useState<string[]>([]);
+
+  // Update useEffect to initialize visible calendars
+  useEffect(() => {
+    if (calendars.length > 0) {
+      setVisibleCalendarIds(calendars.map(cal => cal.id));
+    }
+  }, [calendars]);
+
   const fetchCalendars = async () => {
     try {
       setLoading(true);
@@ -799,21 +808,32 @@ export function CalendarClient({ initialCalendars, userId, userProfile }: Calend
     }
   };
 
-  // Update CalendarSelector to use the new handler
+  // Update CalendarSelector to handle visibility
   const CalendarSelector = () => (
     <div className="flex flex-wrap items-center gap-2 mb-4">
       {calendars.map((calendar) => (
         <div key={calendar.id} className="relative group">
           <Button
-            variant={calendar.id === selectedCalendarId ? "secondary" : "ghost"}
+            variant={visibleCalendarIds.includes(calendar.id) ? "secondary" : "ghost"}
             className="flex items-center gap-2 pr-8"
-            onClick={() => handleCalendarSelect(calendar.id)}
+            onClick={() => {
+              if (visibleCalendarIds.includes(calendar.id)) {
+                setVisibleCalendarIds(visibleCalendarIds.filter(id => id !== calendar.id));
+              } else {
+                setVisibleCalendarIds([...visibleCalendarIds, calendar.id]);
+              }
+            }}
           >
             <div 
               className="w-3 h-3 rounded-full" 
               style={{ backgroundColor: calendar.color }}
             />
             <span>{calendar.name}</span>
+            <div className="ml-2">
+              {visibleCalendarIds.includes(calendar.id) ? (
+                <Check className="h-4 w-4" />
+              ) : null}
+            </div>
           </Button>
           {calendar.name !== "Calendrier principal" && (
             <Button
@@ -959,22 +979,24 @@ export function CalendarClient({ initialCalendars, userId, userProfile }: Calend
               center: "title",
               right: "",
             }}
-            events={calendars.flatMap(cal => 
-              (cal.events || []).map(event => ({
-                id: event.id,
-                title: event.title,
-                start: event.start,
-                end: event.end,
-                allDay: event.isAllDay,
-                description: event.description,
-                location: event.location,
-                calendarId: event.calendarId,
-                originalEvent: event,
-                backgroundColor: cal.color,
-                textColor: '#ffffff',
-                borderColor: cal.color,
-              }))
-            )}
+            events={calendars
+              .filter(cal => visibleCalendarIds.includes(cal.id))
+              .flatMap(cal => 
+                (cal.events || []).map(event => ({
+                  id: event.id,
+                  title: event.title,
+                  start: event.start,
+                  end: event.end,
+                  allDay: event.isAllDay,
+                  description: event.description,
+                  location: event.location,
+                  calendarId: event.calendarId,
+                  originalEvent: event,
+                  backgroundColor: cal.color,
+                  textColor: '#ffffff',
+                  borderColor: cal.color,
+                }))
+              )}
             locale={frLocale}
             selectable={true}
             selectMirror={true}