Update WorkerCalendarItem

src/pages/Worker/Card/WorkerCalendar.vue

@@ -5,7 +5,7 @@ import WorkerCalendarFilter from 'pages/Worker/Card/WorkerCalendarFilter.vue';
 import FetchData from 'components/FetchData.vue';
 import { useRoute } from 'vue-router';
 import { ref } from 'vue';
-import WorkerCalendarItem from "pages/Worker/Card/WorkerCalendarItem.vue";
+import WorkerCalendarItem from 'pages/Worker/Card/WorkerCalendarItem.vue';
 
 const stateStore = useStateStore();
 const route = useRoute();
@@ -67,25 +67,36 @@ const onFetchActiveContract = (data) => {
             </QCardSection>
         </QCard>
         <QCard class="full-width">
-            <QCardSection class="card-calendar">
-                <WorkerCalendarItem
-                    class="full-width"
-                    show-work-weeks
-                    animated
-                    bordered
-                    mini-mode
-                    :year="year"
-                    month="1"
-                />
+            <QCardSection class="calendar-container">
+                <div v-for="month in 12" :key="month" class="full-width full-height">
+                    <WorkerCalendarItem class="full-width" :year="year" :month="month" />
+                </div>
             </QCardSection>
         </QCard>
     </QPage>
 </template>
 <style lang="scss" scoped>
-.card-calendar{
+.calendar-container {
     display: grid;
+    gap: 32px;
     grid-template-columns: repeat(3, minmax(0, 1fr));
 }
+
+@media (max-width: $breakpoint-md) {
+    .calendar-container {
+        grid-template-columns: repeat(2, minmax(0, 1fr));
+    }
+}
+
+@media (max-width: $breakpoint-sm) {
+    .calendar-container {
+        grid-template-columns: repeat(1, minmax(0, 1fr));
+    }
+}
+
+.calendar-item {
+    max-width: 324px;
+}
 </style>
 
 <i18n>

src/pages/Worker/Card/WorkerCalendarItem.vue

@@ -1,9 +1,11 @@
 <script setup>
-import {onBeforeMount, ref} from 'vue';
+import { onBeforeMount, ref, watch } from 'vue';
 import { QCalendarMonth, today } from '@quasar/quasar-ui-qcalendar/src/index.js';
 import '@quasar/quasar-ui-qcalendar/src/QCalendarVariables.sass';
 import '@quasar/quasar-ui-qcalendar/src/QCalendarTransitions.sass';
 import '@quasar/quasar-ui-qcalendar/src/QCalendarMonth.sass';
+import { date } from 'quasar';
+import { useI18n } from 'vue-i18n';
 
 const props = defineProps({
     year: {
@@ -13,29 +15,42 @@ const props = defineProps({
     month: {
         type: Number,
         required: true,
-    }
-})
+    },
+});
+
+const { locale } = useI18n();
 const calendarRef = ref(null);
 const selectedDate = ref(today());
 
+const updateSelectedDate = (year) => {
+    const dateObject = Date.vnNew();
+    dateObject.setFullYear(year);
+    dateObject.setMonth(props.month - 1);
+    selectedDate.value = date.formatDate(dateObject, 'YYYY-MM-DD');
+    console.log(date.formatDate(dateObject, 'YYYY-MM-DD'));
+};
+
 onBeforeMount(() => {
-    const date = Date.vnNew()
-    date.setFullYear(props.year)
-    date.setMonth(props.month - 1)
-    selectedDate.value = date.toDateString()
-})
+    updateSelectedDate(props.year);
+});
+
+watch(
+    () => props.year,
+    (newValue) => {
+        updateSelectedDate(newValue);
+    }
+);
 </script>
 <template>
-    {{selectedDate}}
     <QCalendarMonth
         ref="calendarRef"
         v-model="selectedDate"
-        v-bind="$attrs"
         show-work-weeks
         no-outside-days
-        :disabled-weekdays="[0,6]"
+        :selected-dates="[]"
+        :disabled-weekdays="[0, 6]"
+        :locale="locale"
         animated
-        bordered
         mini-mode
     />
 </template>