Add calendar wrapper

src/components/ui/QCalendarMonthWrapper.vue

@@ -0,0 +1,66 @@
+<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="containerClasses">
+        <div class="nav-container row"><slot name="header" /></div>
+        <slot name="calendar" />
+    </div>
+</template>
+
+<style lang="scss">
+.main-container-background {
+    --calendar-current-background-dark: transparent;
+
+    &.--dark {
+        background-color: var(--calendar-background-dark);
+    }
+
+    &.--light {
+        background-color: var(--calendar-background);
+    }
+
+    &.--bordered {
+        border: 1px solid black;
+    }
+}
+
+.transparent-background {
+    --calendar-background-dark: transparent;
+    --calendar-background: transparent;
+    --calendar-outside-background-dark: transparent;
+}
+
+.nav-container {
+    display: flex;
+    align-items: center;
+
+    &.--bordered {
+        border: 1px solid black;
+    }
+}
+</style>

src/pages/Worker/Card/WorkerTimeControlCalendar.vue

@@ -3,6 +3,7 @@ import { ref, computed, watch } from 'vue';
 import { useI18n } from 'vue-i18n';
 
 import { QCalendarMonth } from '@quasar/quasar-ui-qcalendar/src/index.js';
+import QCalendarMonthWrapper from 'src/components/ui/QCalendarMonthWrapper.vue';
 
 const $props = defineProps({
     modelValue: {
@@ -121,29 +122,33 @@ const paintWorkWeeks = async () => {
 </script>
 
 <template>
-    <div :class="['main-container-background', $q.dark.isActive ? '--dark' : '--light']">
-        <div class="nav-container row">
-            <QIcon name="arrow_back_ios" class="nav-arrow col" @click="onPrev" />
-            <span class="col-6 text-no-wrap text-center text-subtitle1">{{
-                formattedNavigationLabel
-            }}</span>
-            <QIcon name="arrow_forward_ios" class="nav-arrow col" @click="onNext" />
-        </div>
-        <QCalendarMonth
-            ref="calendarRef"
-            v-model="value"
-            show-work-weeks
-            :weekdays="[1, 2, 3, 4, 5, 6, 0]"
-            :selected-dates="selectedDates"
-            :locale="locale"
-            mini-mode
-            enable-outside-days
-            no-active-date
-            class="q-py-md"
-            @click-date="clickDate"
-            @moved="onMoved"
-        />
-    </div>
+    <QCalendarMonthWrapper>
+        <template #header>
+            <div class="row items-center full-width">
+                <QIcon name="arrow_back_ios" class="nav-arrow col" @click="onPrev" />
+                <span class="col-6 text-no-wrap text-center text-subtitle1">{{
+                    formattedNavigationLabel
+                }}</span>
+                <QIcon name="arrow_forward_ios" class="nav-arrow col" @click="onNext" />
+            </div>
+        </template>
+        <template #calendar>
+            <QCalendarMonth
+                ref="calendarRef"
+                v-model="value"
+                show-work-weeks
+                :weekdays="[1, 2, 3, 4, 5, 6, 0]"
+                :selected-dates="selectedDates"
+                :locale="locale"
+                mini-mode
+                enable-outside-days
+                class="q-py-sm"
+                no-active-date
+                @click-date="clickDate"
+                @moved="onMoved"
+            />
+        </template>
+    </QCalendarMonthWrapper>
 </template>
 
 <style lang="scss">
@@ -169,17 +174,15 @@ const paintWorkWeeks = async () => {
     color: #d19b25;
 }
 
-.nav-container {
-    display: flex;
-    margin-bottom: 8px;
-    align-items: center;
-}
-
 .nav-arrow {
     cursor: pointer;
     user-select: none;
 }
 
+.q-calendar-month__head--weekday {
+    text-transform: capitalize;
+}
+
 .q-calendar__button {
     &:hover {
         background-color: var(--vn-accent-color);