From 0a982dd218f69753809714e3e5c8e68944b91c93 Mon Sep 17 00:00:00 2001 From: Alma Date: Sun, 13 Apr 2025 16:35:02 +0200 Subject: [PATCH] calendar 28 --- components/calendar/calendar-client.tsx | 69 ++++++++++++++++++++++--- 1 file changed, 63 insertions(+), 6 deletions(-) diff --git a/components/calendar/calendar-client.tsx b/components/calendar/calendar-client.tsx index b9bc7f10..e5d82f8f 100644 --- a/components/calendar/calendar-client.tsx +++ b/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) => ( -
-
{arg.event.title}
+
+
{arg.event.title}
+ {!arg.event.allDay && ( +
+ {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' + })} + )} +
+ )} {arg.event.extendedProps.location && ( -
+
{arg.event.extendedProps.location}
)}
)} + 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 + }} /> )}