fix multiple event handlers in calendar comp

Author: raheeliftikhar5

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

@@ -97,7 +97,7 @@ let CalendarBasicComp = (function () {
     resources: any; 
     resourceName : string
     onEvent?: any;
-    onEventDrop?: any;
+    onDropEvent?: any;
     editable?: boolean; 
     showEventTime?: boolean; 
     showWeekends?: boolean; 
@@ -248,16 +248,16 @@ let CalendarBasicComp = (function () {
       return (
         <Event
           className={`event ${sizeClass} ${stateClass}`}
-          bg={eventInfo.backgroundColor}
+          $bg={eventInfo.backgroundColor}
           theme={theme?.theme}
-          isList={isList}
-          allDay={showAllDay}
+          $isList={isList}
+          $allDay={Boolean(showAllDay)}
           $style={props.style}
         >
           <div className="event-time">{eventInfo.timeText}</div>
           <div className="event-title">{eventInfo.event.title}</div>
           <Remove
-            isList={isList}
+            $isList={isList}
             className="event-remove"
             onClick={(e) => {
               e.stopPropagation();
@@ -526,7 +526,7 @@ let CalendarBasicComp = (function () {
             }}
             eventDragStop={(info) => {
               if (info.view) {
-                props.onEventDrop("dropEvent");
+                props.onDropEvent("dropEvent");
               }
             }}
           />
@@ -540,8 +540,8 @@ let CalendarBasicComp = (function () {
       resourcesEvents: { propertyView: (arg0: {}) => any; };
       resources: { propertyView: (arg0: {}) => any; };
       resourceName: { propertyView: (arg0: {}) => any; };
-      onEvent: { getPropertyView: () => any; }; 
-      onDropEvent: { getPropertyView: () => any; };
+      onEvent: { propertyView: ({title}?: {title?: string}) => any; }; 
+      onDropEvent: { propertyView: ({title}?: {title?: string}) => any; };
       editable: { propertyView: (arg0: { label: string; }) => any; };
       showEventTime: { propertyView: (arg0: { label: string; tooltip: string; }) => any; }; 
       showWeekends: { propertyView: (arg0: { label: string; }) => any; }; 
@@ -573,8 +573,12 @@ let CalendarBasicComp = (function () {
           }
           <Section name={sectionNames.interaction}>
             {hiddenPropertyView(children)}
-            {children.onEvent.getPropertyView()}
-            {children.onDropEvent.getPropertyView()}
+            <div style={{display: 'flex', flexDirection: 'column', gap: '8px'}}>
+              {children.onEvent.propertyView()}
+            </div>
+            <div style={{display: 'flex', flexDirection: 'column', gap: '8px'}}>
+              {children.onDropEvent.propertyView({title: trans("calendar.dragDropEventHandlers")})}
+            </div>
             {children.editable.propertyView({ label: trans("calendar.editable"), })}
           </Section>
           <Section name={sectionNames.advanced}>

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

@@ -635,7 +635,7 @@ export const Wrapper = styled.div<{
   }
 `;
 
-export const Remove = styled.div<{ isList: boolean }>`
+export const Remove = styled.div<{ $isList: boolean }>`
   position: absolute;
   pointer-events: auto;
   top: 0;
@@ -652,21 +652,21 @@ export const Remove = styled.div<{ isList: boolean }>`
 `;
 
 export const Event = styled.div<{
-  bg: string;
+  $bg: string;
   theme: Object;
-  isList: boolean;
-  allDay: boolean;
+  $isList: boolean;
+  $allDay: boolean;
   $style: CalendarStyleType;
 }>`
   height: 100%;
   width: 100%;
   pointer-events: none;
   border-radius: 4px;
-  box-shadow: ${(props) => !props.isList && "0 0 5px 0 rgba(0, 0, 0, 0.15)"};
+  box-shadow: ${(props) => !props.$isList && "0 0 5px 0 rgba(0, 0, 0, 0.15)"};
   border: 1px solid ${(props) => props.$style.border};
-  display: ${(props) => props.isList && "flex"};
+  display: ${(props) => props.$isList && "flex"};
   background-color: ${(props) =>
-    !props.isList && lightenColor(props.$style.background, 0.1)};
+    !props.$isList && lightenColor(props.$style.background, 0.1)};
   overflow: hidden;
   font-size: 13px;
   line-height: 19px;
@@ -682,12 +682,12 @@ export const Event = styled.div<{
     left: 2px;
     top: 2px;
     border-radius: 3px;
-    background-color: ${(props) => props.bg};
+    background-color: ${(props) => props.$bg};
   }
 
   .event-time {
     color: ${(props) =>
-      !props.isList &&
+      !props.$isList &&
       (isDarkColor(props.$style.text)
         ? lightenColor(props.$style.text, 0.2)
         : props.$style.text)};
@@ -696,7 +696,7 @@ export const Event = styled.div<{
     margin-top: 2px;
   }
   .event-title {
-    color: ${(props) => !props.isList && props.$style.text};
+    color: ${(props) => !props.$isList && props.$style.text};
     font-weight: 500;
     margin-left: 15px;
     white-space: pre-wrap;