calendar 28

components/calendar/calendar-client.tsx

@@ -786,7 +786,11 @@ export function CalendarClient({ initialCalendars, userId, userProfile }: Calend
   };
 
   const handleEventDelete = async () => {
-    if (!selectedEvent) return;
+    if (!selectedEvent?.id) return;
+
+    if (!confirm("Êtes-vous sûr de vouloir supprimer cet événement ?")) {
+      return;
+    }
 
     try {
       setLoading(true);
@@ -795,12 +799,35 @@ export function CalendarClient({ initialCalendars, userId, userProfile }: Calend
       });
 
       if (!response.ok) {
-        throw new Error("Failed to delete event");
+        const error = await response.json();
+        throw new Error(error.message || "Failed to delete event");
       }
 
-      await fetchCalendars();
+      // Remove the event from local state
+      const updatedCalendars = calendars.map(cal => ({
+        ...cal,
+        events: cal.events.filter(e => e.id !== selectedEvent.id)
+      }));
+      setCalendars(updatedCalendars);
+
+      // Close modal and reset form
       setIsEventModalOpen(false);
       setSelectedEvent(null);
+      setEventForm({
+        title: "",
+        description: null,
+        start: "",
+        end: "",
+        allDay: false,
+        location: null,
+        calendarId: selectedCalendarId
+      });
+
+      // Force calendar refresh
+      if (calendarRef.current) {
+        const calendarApi = calendarRef.current.getApi();
+        calendarApi.refetchEvents();
+      }
     } catch (error) {
       console.error("Error deleting event:", error);
       setError(error instanceof Error ? error.message : "Failed to delete event");
@@ -1003,19 +1030,40 @@ export function CalendarClient({ initialCalendars, userId, userProfile }: Calend
                   backgroundColor: cal.color,
                   borderColor: cal.color,
                   textColor: '#ffffff',
+                  extendedProps: {
+                    location: event.location,
+                    description: event.description,
+                    calendarId: event.calendarId,
+                    originalEvent: event
+                  }
                 }))
               )}
             eventContent={(arg) => (
-              <div className="p-1">
+              <div className="p-1 overflow-hidden">
-                <div className="font-semibold">{arg.event.title}</div>
+                <div className="font-semibold truncate">{arg.event.title}</div>
+                {!arg.event.allDay && (
+                  <div className="text-xs opacity-90">
+                    {new Date(arg.event.start).toLocaleTimeString('fr-FR', {
+                      hour: '2-digit',
+                      minute: '2-digit'
+                    })}
+                    {arg.event.end && (
+                      <> - {new Date(arg.event.end).toLocaleTimeString('fr-FR', {
+                        hour: '2-digit',
+                        minute: '2-digit'
+                      })}</>
+                    )}
+                  </div>
+                )}
                 {arg.event.extendedProps.location && (
-                  <div className="text-xs opacity-75">
+                  <div className="text-xs opacity-75 truncate">
                     <MapPin className="inline-block w-3 h-3 mr-1" />
                     {arg.event.extendedProps.location}
                   </div>
                 )}
               </div>
             )}
+            eventClassNames="rounded-md shadow-sm hover:shadow-md transition-shadow cursor-pointer"
             locale={frLocale}
             selectable={true}
             selectMirror={true}
@@ -1025,6 +1073,15 @@ export function CalendarClient({ initialCalendars, userId, userProfile }: Calend
             eventClick={handleEventClick}
             height="auto"
             aspectRatio={1.8}
+            slotMinTime="06:00:00"
+            slotMaxTime="22:00:00"
+            allDaySlot={true}
+            allDayText="Toute la journée"
+            slotLabelFormat={{
+              hour: '2-digit',
+              minute: '2-digit',
+              hour12: false
+            }}
           />
         )}
       </Card>