Add border and change background color

src/components/ui/QCalendarMonthWrapper.vue

@@ -1,5 +1,32 @@
+<script setup>
+import { computed } from 'vue';
+import { useQuasar } from 'quasar';
+import '@quasar/quasar-ui-qcalendar/src/QCalendarVariables.sass';
+
+const $props = defineProps({
+    bordered: {
+        type: Boolean,
+        default: false,
+    },
+    transparentBackground: {
+        type: Boolean,
+        default: false,
+    },
+});
+
+const $q = useQuasar();
+
+const containerClasses = computed(() => {
+    const classes = ['main-container-background'];
+    if ($props.bordered) classes.push('--bordered');
+    if ($props.transparentBackground) classes.push('transparent-background');
+    else classes.push($q.dark.isActive ? '--dark' : '--light');
+    return classes;
+});
+</script>
+
 <template>
-    <div :class="['main-container-background', $q.dark.isActive ? '--dark' : '--light']">
+    <div :class="containerClasses">
         <div class="nav-container row"><slot name="header" /></div>
         <slot name="calendar" />
     </div>
@@ -7,6 +34,8 @@
 
 <style lang="scss">
 .main-container-background {
+    --calendar-current-background-dark: transparent;
+
     &.--dark {
         background-color: var(--calendar-background-dark);
     }
@@ -14,10 +43,25 @@
     &.--light {
         background-color: var(--calendar-background);
     }
+
+    &.--bordered {
+        border: 1px solid black;
+    }
+}
+
+.transparent-background {
+    .q-calendar-month > * {
+        background-color: var(--vn-section-color) !important;
+        --calendar-outside-background-dark: #transparent;
+    }
 }
 
 .nav-container {
     display: flex;
     align-items: center;
+
+    &.--bordered {
+        border: 1px solid black;
+    }
 }
 </style>

src/pages/Worker/Card/WorkerCalendarItem.vue

@@ -173,7 +173,12 @@ watch(_year, (newValue) => {
 </script>
 
 <template>
-    <QCalendarMonthWrapper style="height: 200px" class="outline">
+    <QCalendarMonthWrapper
+        style="height: 200px"
+        class="outline"
+        bordered
+        transparent-background
+    >
         <template #header>
             <span class="full-width text-center text-body1 q-py-sm">{{
                 weekdayStore.getLocaleMonths[$props.month - 1].locale