lowcoder-comps backward compatibility fix

Author: raheeliftikhar5

client/packages/lowcoder-comps/package.json

@@ -1,6 +1,6 @@
 {
   "name": "lowcoder-comps",
-  "version": "2.4.14",
+  "version": "2.4.15",
   "type": "module",
   "license": "MIT",
   "dependencies": {

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

@@ -105,6 +105,13 @@ if (DragEventHandlerControl) {
     onDropEvent: DragEventHandlerControl,
   }
 }
+if (EventModalStyle) { 
+  childrenMap = {
+    ...childrenMap,
+    modalStyle:  styleControl(EventModalStyle),
+  }
+}
+
 let CalendarBasicComp = (function () {
   return new UICompBuilder(childrenMap, (props: { 
     events: any; 
@@ -795,9 +802,11 @@ let CalendarBasicComp = (function () {
             {children.style.getPropertyView()}
           </Section>
           <Section name={sectionNames.animationStyle} hasTooltip={true}>{children.animationStyle.getPropertyView()}</Section>
-          <Section name={sectionNames.modalStyle}>
-            {children.modalStyle.getPropertyView()}
-          </Section>
+          {Boolean(children.modalStyle) && (
+            <Section name={sectionNames.modalStyle}>
+              {children.modalStyle.getPropertyView()}
+            </Section>
+          )}
         </>
       );
     })

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

@@ -768,7 +768,7 @@ export const Event = styled.div<{
 
 
 export const FormWrapper = styled(Form)<{
-  $modalStyle: EventModalStyleType
+  $modalStyle?: EventModalStyleType
 }>`
   .ant-form-item-label {
     width: 125px;
@@ -789,11 +789,11 @@ export const FormWrapper = styled(Form)<{
 
   // Setting style for input fields
   .ant-input {
-    background-color: ${(props) => props.$modalStyle.labelBackground };
-    border-color: ${(props) => props.$modalStyle.border};
-    border-width: ${(props) => props.$modalStyle.borderWidth};
-    border-style: ${(props) => props.$modalStyle.borderStyle};
-    color: ${(props) => props.$modalStyle.text};
+    background-color: ${(props) => props.$modalStyle?.labelBackground };
+    border-color: ${(props) => props.$modalStyle?.border};
+    border-width: ${(props) => props.$modalStyle?.borderWidth};
+    border-style: ${(props) => props.$modalStyle?.borderStyle};
+    color: ${(props) => props.$modalStyle?.text};
   }
 
 `;