From 065b83debdcfbcc6e9c01023cce92e16431a7365 Mon Sep 17 00:00:00 2001
From: Alexis <35.alexis.pele@gmail.com>
Date: Tue, 20 Aug 2024 17:18:17 +0200
Subject: [PATCH] Fixed calendar grid not loading during refresh

---
 components/calendar/state/monthly/Layout.vue | 23 +++++++++++---------
 1 file changed, 13 insertions(+), 10 deletions(-)

diff --git a/components/calendar/state/monthly/Layout.vue b/components/calendar/state/monthly/Layout.vue
index c6c2b2e..ada1c4f 100644
--- a/components/calendar/state/monthly/Layout.vue
+++ b/components/calendar/state/monthly/Layout.vue
@@ -2,7 +2,8 @@
 import { useCalendar } from '@/stores/CalendarStore'
 import { useThrottleFn } from '@vueuse/core'
 
-const { currentDate, decrementMonth, incrementMonth, currentMonthData } = useCalendar()
+const { currentDate, decrementMonth, incrementMonth } = useCalendar()
+const { currentMonthData } = storeToRefs(useCalendar())
 
 function handleWheel(e: WheelEvent) {
   const isMovingUp = e.deltaY < 0
@@ -24,14 +25,16 @@ const moveCalendarRight = useThrottleFn(() => {
 
 <template>
   <div class="grid grid-cols-10" @wheel="handleWheel">
-    <CalendarStateMonthlyDayTile
-      v-for="day in currentMonthData?.days"
-      :key="`layout-month-grid-${day}`"
-      :date="{
-        day: day,
-        month: currentDate.currentMonth,
-        year: currentDate.currentYear
-      }"
-    />
+    <template v-if="currentMonthData">
+      <CalendarStateMonthlyDayTile
+        v-for="day in currentMonthData?.days"
+        :key="`layout-month-grid-${day}`"
+        :date="{
+          day: day,
+          month: currentDate.currentMonth,
+          year: currentDate.currentYear
+        }"
+      />
+    </template>
   </div>
 </template>