Added grid layout for monthly view

src/components/calendar/state/Century.vue

@@ -0,0 +1,9 @@
+<script lang="ts" setup>
+import { useCalendarEvents } from '@/stores/events'
+
+const { currentEvents } = useCalendarEvents()
+</script>
+
+<template>
+  <div>Century</div>
+</template>

src/components/calendar/state/Decade.vue

@@ -0,0 +1,3 @@
+<template>
+  <div>Decade</div>
+</template>

src/components/calendar/state/Monthly.vue

@@ -0,0 +1,21 @@
+<script lang="ts" setup>
+import { computed } from 'vue'
+import { useCalendar } from '@/stores/calendar'
+import CalendarTile from '../CalendarTile.vue'
+
+const { staticConfig } = useCalendar()
+
+const daysPerMonth = computed(() => staticConfig.daysPerMonth)
+</script>
+
+<template>
+  <div class="grid" :class="`grid-cols-10`">
+    <CalendarTile v-for="day in daysPerMonth" :key="day">
+      <span class="font-bold">{{ day }}</span>
+    </CalendarTile>
+
+    <CalendarTile v-for="nextMonthDay in 8" :key="nextMonthDay" faded>
+      <span>{{ nextMonthDay }}</span>
+    </CalendarTile>
+  </div>
+</template>

src/components/calendar/state/Year.vue

@@ -0,0 +1,3 @@
+<template>
+  <div>Annuel</div>
+</template>