Added data to calendar tiles

src/components/calendar/CalendarTile.vue

@@ -1,5 +1,8 @@
 <script lang="ts" setup>
+import type { LeimDate } from '@/models/Date'
+
 const props = defineProps<{
+  date: LeimDate
   faded?: boolean
 }>()
 </script>

src/components/calendar/state/Monthly.vue

@@ -1,20 +1,60 @@
 <script lang="ts" setup>
-import { computed } from 'vue'
+import type { LeimDate } from '@/models/Date'
 import { useCalendar } from '@/stores/calendar'
+import { computed } from 'vue'
 import CalendarTile from '../CalendarTile.vue'
 
-const { staticConfig } = useCalendar()
+const { staticConfig, currentDate } = useCalendar()
 
 const daysPerMonth = computed(() => staticConfig.daysPerMonth)
+
+function getNextMonthDate(day: number): LeimDate {
+  let nextDay = day
+  let nextMonth = Number(currentDate.currentMonth) + 1
+  let nextYear = Number(currentDate.currentYear)
+  let nextPeriod = currentDate.currentPeriod
+
+  // If the new value would exceed the max number of month per year
+  if (nextMonth >= staticConfig.monthsPerYear) {
+    nextMonth = 0
+    // Increment the year
+    nextYear++
+  }
+
+  if (nextYear >= 0) {
+    nextPeriod = 'nante'
+  }
+
+  return {
+    day: nextDay,
+    month: nextMonth,
+    year: nextYear,
+    period: nextPeriod
+  }
+}
 </script>
 
 <template>
   <div class="grid" :class="`grid-cols-10`">
-    <CalendarTile v-for="day in daysPerMonth" :key="day">
+    <CalendarTile
+      v-for="day in daysPerMonth"
+      :key="day"
+      :date="{
+        day: day,
+        month: Number(currentDate.currentMonth),
+        year: Number(currentDate.currentYear),
+        period: currentDate.currentPeriod
+      }"
+    >
       <span class="font-bold">{{ day }}</span>
     </CalendarTile>
 
-    <CalendarTile v-for="nextMonthDay in 8" :key="nextMonthDay" faded>
+    <CalendarTile
+      v-for="nextMonthDay in 8"
+      :key="nextMonthDay"
+      faded
+      :date="getNextMonthDate(nextMonthDay)"
+    >
       <span>{{ nextMonthDay }}</span>
     </CalendarTile>
   </div>