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,14 +122,17 @@ const paintWorkWeeks = async () => {
 </script>
 
 <template>
-    <div :class="['main-container-background', $q.dark.isActive ? '--dark' : '--light']">
+    <QCalendarMonthWrapper>
-        <div class="nav-container row">
+        <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"
@@ -138,12 +142,13 @@ const paintWorkWeeks = async () => {
                 :locale="locale"
                 mini-mode
                 enable-outside-days
+                class="q-py-sm"
                 no-active-date
-            class="q-py-md"
                 @click-date="clickDate"
                 @moved="onMoved"
             />
-    </div>
+        </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);