fix show more evens click error

components/calendar/avcalendar.tsx

@@ -274,6 +274,56 @@ const AvCalendar = ({ publisherId, events, selectedDate }) => {
         setIsModalOpen(false);
     };
 
+
+    const eventStyleGetter = (event, start, end, isSelected) => {
+
+        //console.log("eventStyleGetter: " + event);
+        let backgroundColor = '#3174ad';         // default color for calendar events - #3174ad
+        if (currentView === 'agenda') {
+            return { style: {} }
+        }
+        if (event.type === "assignment") {
+            //event.title = event.publisher.name; //ToDo: add other publishers names
+        }
+        if (event.type === "availability") {
+
+        }
+        if (event.isFromPreviousAssignment) { //ToDo: does it work?
+            // orange-500 from Tailwind CSS
+            backgroundColor = '#f56565';
+        }
+        if (event.isFromPreviousMonth) {
+            //gray
+            backgroundColor = '#a0aec0';
+        }
+        if (event.isActive) {
+            switch (event.type) {
+                case 'assignment':
+                    backgroundColor = event.isConfirmed ? '#48bb78' : '#f6e05e'; // green-500 and yellow-300 from Tailwind CSS
+                    break;
+                case 'recurring':
+                    backgroundColor = '#63b3ed'; // blue-300 from Tailwind CSS
+                    break;
+                default: // availability
+                    //backgroundColor = '#a0aec0'; // gray-400 from Tailwind CSS
+                    break;
+            }
+        } else {
+            backgroundColor = '#a0aec0'; // Default color for inactive events
+        }
+
+        return {
+            style: {
+                backgroundColor,
+                opacity: 0.8,
+                color: 'white',
+                border: '0px',
+                display: 'block',
+            }
+        };
+    }
+
+    // Custom Components
     const EventWrapper = ({ event, style }) => {
         const [isHovered, setIsHovered] = useState(false);
         let eventStyle = {
@@ -391,55 +441,6 @@ const AvCalendar = ({ publisherId, events, selectedDate }) => {
         );
     };
 
-    const eventStyleGetter = (event, start, end, isSelected) => {
-
-        //console.log("eventStyleGetter: " + event);
-        let backgroundColor = '#3174ad';         // default color for calendar events - #3174ad
-        if (currentView === 'agenda') {
-            return { style: {} }
-        }
-        if (event.type === "assignment") {
-            //event.title = event.publisher.name; //ToDo: add other publishers names
-        }
-        if (event.type === "availability") {
-
-        }
-        if (event.isFromPreviousAssignment) { //ToDo: does it work?
-            // orange-500 from Tailwind CSS
-            backgroundColor = '#f56565';
-        }
-        if (event.isFromPreviousMonth) {
-            //gray
-            backgroundColor = '#a0aec0';
-        }
-        if (event.isActive) {
-            switch (event.type) {
-                case 'assignment':
-                    backgroundColor = event.isConfirmed ? '#48bb78' : '#f6e05e'; // green-500 and yellow-300 from Tailwind CSS
-                    break;
-                case 'recurring':
-                    backgroundColor = '#63b3ed'; // blue-300 from Tailwind CSS
-                    break;
-                default: // availability
-                    //backgroundColor = '#a0aec0'; // gray-400 from Tailwind CSS
-                    break;
-            }
-        } else {
-            backgroundColor = '#a0aec0'; // Default color for inactive events
-        }
-
-        return {
-            style: {
-                backgroundColor,
-                opacity: 0.8,
-                color: 'white',
-                border: '0px',
-                display: 'block',
-            }
-        };
-    }
-
-    // Custom Toolbar Component
 
     const CustomToolbar = ({ onNavigate, label, onView, view }) => {
         return (
@@ -472,6 +473,17 @@ const AvCalendar = ({ publisherId, events, selectedDate }) => {
         );
     };
 
+
+    const CustomEventAgenda = ({
+        event
+    }) => (
+        <span>
+            <em style={{ color: 'black' }}>{event.title}</em>
+            <p>{event.desc}</p>
+        </span>
+    );
+
+
     return (
         <> <div  {...handlers} className="flex flex-col"
         >
@@ -497,10 +509,15 @@ const AvCalendar = ({ publisherId, events, selectedDate }) => {
                 components={{
                     event: EventWrapper,
                     toolbar: CustomToolbar,
+                    view: CustomEventAgenda,
+                    agenda: {
+                        event: CustomEventAgenda
+                    },
                     // ... other custom components
                 }}
                 eventPropGetter={(eventStyleGetter)}
                 date={date}
+                showAllEvents={true}
                 onNavigate={setDate}
                 className="rounded-lg shadow-lg"
             />