Embed calendar and change colors

WebDisplay/deploy/manifest-internal.yaml

@@ -47,6 +47,11 @@ spec:
             secretKeyRef:
               name: display-internal-config
               key: ALARM_DEVICE   
+        - name: CALENDAR_EMBED_URL
+          valueFrom:
+            secretKeyRef:
+              name: display-internal-config
+              key: CALENDAR_EMBED_URL   
       restartPolicy: Always
       terminationGracePeriodSeconds: 30
       dnsPolicy: ClusterFirst

WebDisplay/deploy/manifest.yaml

@@ -35,6 +35,8 @@ spec:
           value:
         - name: ALARM_DEVICE
           value:
+        - name: CALENDAR_EMBED_URL
+          value:
       restartPolicy: Always
       terminationGracePeriodSeconds: 30
       dnsPolicy: ClusterFirst

WebDisplay/src/environment.ts

@@ -18,4 +18,8 @@ export default class Environment {
     public static getAlarmDevice(): string {
         return '#ALARM_DEVICE#';
     }
+
+    public static getCalendarEmbedUrl(): string {
+        return '#CALENDAR_EMBED_URL#';
+    }
 }

WebDisplay/src/pages/kiosk.vue

@@ -4,6 +4,7 @@
     import { useLaundryStore } from '@/stores/laundryStore';
     import { usePowerStore } from '@/stores/powerStore';
     import { useHomeAssistantStore } from '@/stores/homeAssistantStore';
+    import Environment from '@/environment';
 
     const weatherStore = useWeatherStore();
     weatherStore.start();
@@ -111,6 +112,17 @@
                 </div>
             </div>
         </div>
+        <div class="kiosk-content" v-if="Environment.getCalendarEmbedUrl()">
+            <div class="kiosk-calendar">
+                <iframe
+                    :src="Environment.getCalendarEmbedUrl()"
+                    style="border-width: 0"
+                    width="100%"
+                    height="100%"
+                    frameborder="0"
+                    scrolling="no"></iframe>
+            </div>
+        </div>
     </v-container>
 </template>
 
@@ -118,17 +130,13 @@
     .kiosk-container {
         height: 100%;
         padding: 0;
-        background-color: #020c25;
-        color: #9acef1;
+        background-color: #212428;
+        color: #1f1f1f;
         display: grid;
         grid-template-columns: 250px 1fr;
         grid-template-rows: 1fr;
-        gap: 15px 15px;
         grid-auto-flow: row;
-        grid-template-areas:
-            'kiosk-sidebar . '
-            'kiosk-sidebar . '
-            'kiosk-sidebar . ';
+        grid-template-areas: 'kiosk-sidebar kiosk-content';
     }
 
     .kiosk-row {
@@ -141,7 +149,7 @@
 
     .kiosk-sidebar {
         padding: 5px;
-        background-color: #13213e;
+        background-color: #121212;
         grid-area: kiosk-sidebar;
 
         display: grid;
@@ -159,6 +167,16 @@
             'kiosk-garage-door kiosk-house-alarm';
     }
 
+    .kiosk-content {
+        height: 100%;
+        padding: 0;
+        display: grid;
+        grid-template-columns: repeat(2, 1fr);
+        grid-template-rows: repeat(2, 1fr);
+        grid-auto-flow: row;
+        grid-template-areas: 'kiosk-calendar .';
+    }
+
     .kiosk-time {
         font-size: 2.8rem;
         grid-area: kiosk-time;
@@ -211,6 +229,10 @@
         font-size: 1.3rem;
     }
 
+    .kiosk-calendar {
+        grid-area: kiosk-calendar;
+    }
+
     .true {
         color: #d09f27;
     }