calendar 34

components/calendar/calendar-client.tsx

@@ -787,7 +787,7 @@ export function CalendarClient({ initialCalendars, userId, userProfile }: Calend
 
       const responseData = await response.json();
       console.log("Response from server:", responseData);
-      
+
       if (!response.ok) {
         console.error("Error response:", responseData);
         throw new Error(responseData.error || "Failed to save event");
@@ -897,9 +897,9 @@ export function CalendarClient({ initialCalendars, userId, userProfile }: Calend
   // Update CalendarSelector to handle visibility
   const CalendarSelector = () => (
     <div className="flex flex-wrap items-center gap-2 mb-4">
-      {calendars.map((calendar) => (
+          {calendars.map((calendar) => (
         <div key={calendar.id} className="relative group">
-          <Button
+            <Button
             variant={visibleCalendarIds.includes(calendar.id) ? "secondary" : "ghost"}
             className="flex items-center gap-2 pr-8"
             onClick={() => {
@@ -920,9 +920,9 @@ export function CalendarClient({ initialCalendars, userId, userProfile }: Calend
                 <Check className="h-4 w-4" />
               ) : null}
             </div>
-          </Button>
+            </Button>
           {calendar.name !== "Calendrier principal" && (
-            <Button
+          <Button
               variant="ghost"
               size="icon"
               className="absolute right-0 top-1/2 -translate-y-1/2 opacity-0 group-hover:opacity-100 transition-opacity"
@@ -933,7 +933,7 @@ export function CalendarClient({ initialCalendars, userId, userProfile }: Calend
               }}
             >
               <Settings className="h-4 w-4" />
-            </Button>
+          </Button>
           )}
         </div>
       ))}
@@ -1005,9 +1005,9 @@ export function CalendarClient({ initialCalendars, userId, userProfile }: Calend
                 <Plus className="mr-2 h-4 w-4" />
                 <span className="font-medium">Nouveau calendrier</span>
               </Button>
-              <Button
-                onClick={() => {
-                  setSelectedEvent(null);
+        <Button
+          onClick={() => {
+            setSelectedEvent(null);
                   setEventForm({
                     title: "",
                     description: null,
@@ -1023,38 +1023,38 @@ export function CalendarClient({ initialCalendars, userId, userProfile }: Calend
               >
                 <Plus className="mr-2 h-4 w-4" />
                 <span className="font-medium">Nouvel événement</span>
-              </Button>
-            </div>
+        </Button>
+      </div>
 
             <Tabs value={view} className="w-auto">
               <TabsList>
-                <TabsTrigger
+          <TabsTrigger
                   value="dayGridMonth"
-                  onClick={() => handleViewChange("dayGridMonth")}
-                >
-                  Mois
-                </TabsTrigger>
-                <TabsTrigger
+            onClick={() => handleViewChange("dayGridMonth")}
+          >
+            Mois
+          </TabsTrigger>
+          <TabsTrigger
                   value="timeGridWeek"
-                  onClick={() => handleViewChange("timeGridWeek")}
-                >
-                  Semaine
-                </TabsTrigger>
-                <TabsTrigger
+            onClick={() => handleViewChange("timeGridWeek")}
+          >
+            Semaine
+          </TabsTrigger>
+          <TabsTrigger
                   value="timeGridDay"
-                  onClick={() => handleViewChange("timeGridDay")}
-                >
-                  Jour
-                </TabsTrigger>
-              </TabsList>
+            onClick={() => handleViewChange("timeGridDay")}
+          >
+            Jour
+          </TabsTrigger>
+        </TabsList>
             </Tabs>
-          </div>
+            </div>
 
           <CalendarSelector />
         </Card>
 
         <StatisticsPanel statistics={statistics} />
-      </div>
+            </div>
 
       {/* Calendar */}
       <div className="flex-1 bg-white rounded-lg shadow">
@@ -1084,54 +1084,23 @@ export function CalendarClient({ initialCalendars, userId, userProfile }: Calend
           }
 
           .fc .fc-daygrid-event-harness {
-            margin-bottom: 4px;
+            margin-bottom: 2px;
           }
 
           .fc-daygrid-day-frame {
             min-height: 100px !important;
             height: 100px !important;
           }
-
-          .fc-daygrid-event {
-            padding: 2px 4px !important;
-            border: none !important;
-            box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) !important;
-          }
-
-          .fc-daygrid-event:hover {
-            filter: brightness(1.1);
-          }
-
-          .fc-daygrid-event .fc-event-title {
-            font-weight: 600 !important;
-            font-size: 0.8rem !important;
-            padding: 0 !important;
-          }
-
-          .fc-daygrid-event .fc-event-time {
-            font-size: 0.7rem !important;
-            opacity: 0.9 !important;
-            padding: 0 !important;
-          }
-
-          .fc-daygrid-event .event-location {
-            font-size: 0.7rem !important;
-            opacity: 0.8 !important;
-          }
-
-          .fc-event-title-container {
-            padding: 0 !important;
-          }
         `}</style>
-        <FullCalendar
-          ref={calendarRef}
-          plugins={[dayGridPlugin, timeGridPlugin, interactionPlugin]}
-          initialView={view}
-          headerToolbar={{
-            left: "prev,next today",
-            center: "title",
-            right: "",
-          }}
+            <FullCalendar
+              ref={calendarRef}
+              plugins={[dayGridPlugin, timeGridPlugin, interactionPlugin]}
+              initialView={view}
+              headerToolbar={{
+                left: "prev,next today",
+                center: "title",
+                right: "",
+              }}
           events={calendars
             .filter(cal => visibleCalendarIds.includes(cal.id))
             .flatMap(cal => 
@@ -1141,8 +1110,8 @@ export function CalendarClient({ initialCalendars, userId, userProfile }: Calend
                 start: new Date(event.start),
                 end: new Date(event.end),
                 allDay: event.isAllDay,
-                description: event.description,
-                location: event.location,
+                  description: event.description,
+                  location: event.location,
                 calendarId: event.calendarId,
                 backgroundColor: cal.color,
                 borderColor: cal.color,
@@ -1156,67 +1125,40 @@ export function CalendarClient({ initialCalendars, userId, userProfile }: Calend
               }))
             )}
           eventContent={(arg) => (
-            <div className="flex flex-col gap-0.5 w-full overflow-hidden p-1">
-              <div className="flex items-center gap-1">
-                <div className="flex-1 font-semibold text-[0.8rem] truncate">
-                  {arg.event.title}
-                </div>
-                {!arg.event.allDay && (
-                  <div className="text-[0.7rem] whitespace-nowrap">
-                    {new Date(arg.event.start).toLocaleTimeString('fr-FR', {
+            <div className="p-1 overflow-hidden">
+              <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>
-                )}
-              </div>
+                    })}</>
+                  )}
+                </div>
+              )}
               {arg.event.extendedProps.location && (
-                <div className="event-location flex items-center gap-1 truncate">
-                  <MapPin className="inline-block w-3 h-3" />
+                <div className="text-xs opacity-75 truncate">
+                  <MapPin className="inline-block w-3 h-3 mr-1" />
                   {arg.event.extendedProps.location}
                 </div>
               )}
             </div>
           )}
-          eventClassNames={(arg) => {
-            // Generate a lighter version of the calendar color for the background
-            const color = arg.event.backgroundColor;
-            return [
-              'rounded-md',
-              'transition-all',
-              'duration-200',
-              'hover:shadow-md',
-              'cursor-pointer',
-              `hover:translate-y-[-1px]`,
-              'border-l-4'
-            ];
-          }}
-          eventBackgroundColor={(arg) => {
-            const color = arg.event.backgroundColor;
-            // Convert hex to RGB and lighten it
-            const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(color);
-            if (result) {
-              const r = parseInt(result[1], 16);
-              const g = parseInt(result[2], 16);
-              const b = parseInt(result[3], 16);
-              return `rgba(${r}, ${g}, ${b}, 0.15)`;
-            }
-            return color;
-          }}
-          eventBorderColor={(arg) => arg.event.backgroundColor}
-          eventTextColor={(arg) => {
-            const color = arg.event.backgroundColor;
-            return color;
-          }}
+          eventClassNames="rounded-md shadow-sm hover:shadow-md transition-shadow cursor-pointer"
           locale={frLocale}
-          selectable={true}
-          selectMirror={true}
+              selectable={true}
+              selectMirror={true}
           dayMaxEvents={false}
-          weekends={true}
-          select={handleDateSelect}
-          eventClick={handleEventClick}
+              weekends={true}
+              select={handleDateSelect}
+              eventClick={handleEventClick}
           height="auto"
-          aspectRatio={1.8}
+              aspectRatio={1.8}
           slotMinTime="06:00:00"
           slotMaxTime="22:00:00"
           allDaySlot={true}
@@ -1230,7 +1172,7 @@ export function CalendarClient({ initialCalendars, userId, userProfile }: Calend
       </div>
 
       {/* Calendar dialog */}
-      <CalendarDialog
+        <CalendarDialog
         open={isCalendarModalOpen}
         onClose={() => setIsCalendarModalOpen(false)}
         onSave={handleCalendarSave}