Merge pull request #21 from culturecreates/feature/issue-108

feat: added height prop
culturecreates · Jan 23, 2024 · e7eb2c2 · e7eb2c2
2 parents 3584923 + 162a23d
commit e7eb2c2
Show file tree

Hide file tree

Showing 2 changed files with 18 additions and 10 deletions.
diff --git a/public/test-widget.html b/public/test-widget.html
@@ -87,12 +87,6 @@
         cursor: pointer;
         border: none;
       }
-
-      #calendarIframe {
-        frameborder: 0;
-        width: 1000px;
-        height: 700px;
-      }
     </style>
   </head>
   <body>
@@ -114,6 +108,12 @@
         <label for="limit">Limit:</label>
         <input type="text" id="limit" value="9" />
 
+        <label for="width">Width:</label>
+        <input type="text" id="width" value="100%" />
+
+        <label for="height">Height:</label>
+        <input type="text" id="height" value="1000px" />
+
         <label for="logo">Logo:</label>
         <input
           type="text"
@@ -130,7 +130,7 @@
       </div>
     </div>
 
-    <iframe id="calendarIframe" frameborder="0" width="1000px" height="700px"></iframe>
+    <iframe id="calendarIframe" frameborder="0"></iframe>
 
     <script>
       function updateAndLoadCalendar() {
@@ -140,6 +140,8 @@
         const color = document.getElementById('color').value;
         const limit = document.getElementById('limit').value;
         const logo = document.getElementById('logo').value;
+        const width = document.getElementById('width').value;
+        const height = document.getElementById('height').value;
 
         const url = new URL(
           'https://s3.ca-central-1.amazonaws.com/staging.cms-widget.footlight.io/index.html',
@@ -152,11 +154,11 @@
         url.searchParams.set('logo', logo);
 
         const generatedUrlInput = document.getElementById('generatedUrl');
-        generatedUrlInput.value = url.href;
-
-        console.log(url.href);
+        generatedUrlInput.value = `<iframe src="${url.href}" frameborder="0"></iframe>`;
 
         const calendarIframe = document.getElementById('calendarIframe');
+        calendarIframe.width = width;
+        calendarIframe.height = height;
         calendarIframe.src = url.href;
       }
 

diff --git a/src/App.css b/src/App.css
@@ -1,3 +1,8 @@
+#calendar-widget{
+  height: 100%;
+  max-height: 100vh;
+}
+
 #calendar-widget > .widget-layout {
   width: 100%;
   padding: 16px;
@@ -13,6 +18,7 @@
 
 #calendar-widget > .widget-layout ::-webkit-scrollbar {
   width: 8px;
+  scrollbar-color: var(--dynamic-color-100);
 }
 
 #calendar-widget > .widget-layout ::-webkit-scrollbar-track {