calendar 36

components/calendar/calendar-client.tsx

@@ -1050,6 +1050,47 @@ export function CalendarClient({ initialCalendars, userId, userProfile }: Calend
 
         <CalendarSelector />
 
+        <style jsx global>{`
+          /* Fixed height and scrolling for day cells only */
+          .fc .fc-daygrid-day-frame {
+            min-height: 100px !important;
+            max-height: 100px !important;
+            overflow-y: auto !important;
+          }
+
+          /* Keep events container relative positioning */
+          .fc .fc-daygrid-day-events {
+            margin-bottom: 0 !important;
+          }
+
+          /* Custom scrollbar styles */
+          .fc .fc-daygrid-day-frame::-webkit-scrollbar {
+            width: 4px;
+          }
+          
+          .fc .fc-daygrid-day-frame::-webkit-scrollbar-track {
+            background: transparent;
+          }
+          
+          .fc .fc-daygrid-day-frame::-webkit-scrollbar-thumb {
+            background: #888;
+            border-radius: 4px;
+          }
+          
+          .fc .fc-daygrid-day-frame::-webkit-scrollbar-thumb:hover {
+            background: #555;
+          }
+
+          /* Hide scrollbar when not needed */
+          .fc .fc-daygrid-day-frame::-webkit-scrollbar {
+            display: none;
+          }
+
+          .fc .fc-daygrid-day-frame:hover::-webkit-scrollbar {
+            display: block;
+          }
+        `}</style>
+
         {loading ? (
           <div className="h-96 flex items-center justify-center">
             <Loader2 className="h-8 w-8 animate-spin text-primary" />
@@ -1117,7 +1158,8 @@ export function CalendarClient({ initialCalendars, userId, userProfile }: Calend
             locale={frLocale}
               selectable={true}
               selectMirror={true}
-              dayMaxEvents={true}
+              dayMaxEventRows={false}
+              dayMaxEvents={false}
               weekends={true}
               select={handleDateSelect}
               eventClick={handleEventClick}