fixed calendar's event list view

Author: raheeliftikhar5

client/packages/lowcoder-comps/src/comps/calendarComp/calendarComp.tsx

@@ -264,6 +264,7 @@ let CalendarBasicComp = (function () {
     const [licensed, setLicensed] = useState<boolean>(props.licenseKey !== "");
     const [currentSlotLabelFormat, setCurrentSlotLabelFormat] = useState(slotLabelFormat);
     const [initDataMap, setInitDataMap] = useState<Record<string, number>>({});
+    const [hoverEventId, setHoverEvent] = useState<string>();
 
     useEffect(() => {
       setLicensed(props.licenseKey !== "");
@@ -490,36 +491,45 @@ let CalendarBasicComp = (function () {
           : "";
       return (
         <Suspense fallback={null}>
-          <Event
-            className={`event ${sizeClass} ${stateClass}`}
-            theme={theme?.theme}
-            $isList={isList}
-            $allDay={Boolean(props.showAllDay)}
-            $style={props.style}
-            $backgroundColor={eventInfo.backgroundColor}
-            $extendedProps={eventInfo?.event?.extendedProps}
+          <Tooltip
+            title={eventInfo?.event?.extendedProps?.detail}
+            open={
+              isList
+              && Boolean(eventInfo?.event?.extendedProps?.detail)
+              && hoverEventId === eventInfo.event.id
+            }
           >
-            <div className="event-time">{eventInfo?.timeText}</div>
-            <div className="event-title">{eventInfo?.event?.title}</div>
-            <div className="event-detail">{eventInfo?.event?.extendedProps?.detail}</div>
-            <Remove
+            <Event
+              className={`event ${sizeClass} ${stateClass}`}
+              theme={theme?.theme}
               $isList={isList}
-              className="event-remove"
-              onClick={(e) => {
-                e.stopPropagation();
-                const events = props.events.filter(
-                  (item: EventType) => item.id !== eventInfo.event.id
-                );
-                handleEventDataChange(events);
-              }}
-              onMouseDown={(e) => {
-                e.stopPropagation();
-                e.preventDefault();
-              }}
+              $allDay={Boolean(props.showAllDay)}
+              $style={props.style}
+              $backgroundColor={eventInfo.backgroundColor}
+              $extendedProps={eventInfo?.event?.extendedProps}
             >
-              <CalendarDeleteIcon />
-            </Remove>
-          </Event>
+              <div className="event-time">{eventInfo?.timeText}</div>
+              <div className="event-title">{eventInfo?.event?.title }</div>
+              {!isList && <div className="event-detail">{eventInfo?.event?.extendedProps?.detail}</div>}
+              <Remove
+                $isList={isList}
+                className="event-remove"
+                onClick={(e) => {
+                  e.stopPropagation();
+                  const events = props.events.filter(
+                    (item: EventType) => item.id !== eventInfo.event.id
+                  );
+                  handleEventDataChange(events);
+                }}
+                onMouseDown={(e) => {
+                  e.stopPropagation();
+                  e.preventDefault();
+                }}
+              >
+                <CalendarDeleteIcon />
+              </Remove>
+            </Event>
+          </Tooltip>
         </Suspense>
       );
     }, [
@@ -1034,6 +1044,8 @@ let CalendarBasicComp = (function () {
             }}
             eventDrop={handleDrop}
             eventResize={handleResize}
+            eventMouseEnter={({event}) => setHoverEvent(event.id)}
+            eventMouseLeave={({event}) => setHoverEvent(undefined)}
           />
         </ErrorBoundary>
       </Wrapper>

client/packages/lowcoder-comps/src/comps/calendarComp/calendarConstants.tsx

@@ -69,8 +69,20 @@ export const Wrapper = styled.div<{
   .fc-list {
     .fc-list-table {
       table-layout: fixed;
+      thead {
+        position: relative;
+        left: unset;
+        visibility: hidden;
+      }
       th {
         background-color: ${(props) => props.$style.background};
+
+        &:first-child {
+          width: 150px;
+        }
+        &:nth-child(2) {
+          width: 300px;
+        }
       }
     }
     .fc-list-event-graphic {
@@ -116,7 +128,6 @@ export const Wrapper = styled.div<{
         box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.15);
         border-width: 1px;
         margin: 2px 5px;
-        height: 20px;
         .event-title {
           margin-left: 15px;
         }
@@ -128,8 +139,6 @@ export const Wrapper = styled.div<{
     .fc-event {
       font-size: 13px;
       line-height: 20px;
-      display: flex;
-      align-items: center;
       &.no-time {
         padding-left: 19px;
       }
@@ -142,21 +151,15 @@ export const Wrapper = styled.div<{
       box-sizing: content-box;
     }
     .fc-list-event-title {
-      min-width: 266px;
-      overflow: hidden;
-      text-overflow: ellipsis;
-      white-space: nowrap;
       padding: 0 14px 0 0;
       cursor: pointer;
       .event {
         font-size: 13px;
-        height: 18px;
         line-height: 18px;
         margin: 3px 5px;
         border-width: 0;
         align-items: center;
         &::before {
-          height: 14px;
           top: 2px;
           left: 3px;
         }
@@ -165,9 +168,6 @@ export const Wrapper = styled.div<{
         }
         .event-title {
           margin-left: 16px;
-          overflow: hidden;
-          text-overflow: ellipsis;
-          white-space: nowrap;
         }
         .event-remove {
           background-color: inherit;