Added grid layout for monthly view

src/components/calendar/Calendar.vue

@@ -0,0 +1,35 @@
+<script lang="ts" setup>
+import { useCalendar } from '@/stores/calendar'
+import CalendarMenu from './CalendarMenu.vue'
+import Century from './state/Century.vue'
+import Decade from './state/Decade.vue'
+import Monthly from './state/Monthly.vue'
+import Year from './state/Year.vue'
+import { computed } from 'vue'
+
+const { currentConfig } = useCalendar()
+
+const currentViewComponent = computed(() => {
+  switch (currentConfig.viewType) {
+    case 'month':
+      return Monthly
+
+    case 'year':
+      return Year
+
+    case 'decade':
+      return Decade
+
+    case 'century':
+    default:
+      return Century
+  }
+})
+</script>
+
+<template>
+  <div class="h-full grid grid-rows-[auto,1fr]">
+    <CalendarMenu />
+    <component :is="currentViewComponent" />
+  </div>
+</template>

src/components/calendar/CalendarMenu.vue

@@ -0,0 +1,41 @@
+<script lang="ts" setup>
+import {
+  Select,
+  SelectContent,
+  SelectGroup,
+  SelectItem,
+  SelectTrigger,
+  SelectValue
+} from '@/components/ui/select'
+import { useCalendar } from '@/stores/calendar'
+
+const { currentConfig, currentDate, viewTypeOptions } = useCalendar()
+</script>
+
+<template>
+  <header class="py-4 border-slate-700 border-b-[1px]">
+    <div class="container">
+      <div class="grid md:grid-cols-12">
+        <div class="md:col-span-9">
+          <h1 class="text-2xl font-bold">
+            {{ currentDate.currentDateTitle }}
+          </h1>
+        </div>
+        <div class="md:col-span-3">
+          <Select v-model="currentConfig.viewType">
+            <SelectTrigger>
+              <SelectValue placeholder="Changer le mode d'affichage" />
+            </SelectTrigger>
+            <SelectContent>
+              <SelectGroup>
+                <SelectItem v-for="(option, index) in viewTypeOptions" :key="index" :value="option">
+                  {{ option }}
+                </SelectItem>
+              </SelectGroup>
+            </SelectContent>
+          </Select>
+        </div>
+      </div>
+    </div>
+  </header>
+</template>

src/components/calendar/CalendarTile.vue

@@ -0,0 +1,29 @@
+<script lang="ts" setup>
+const props = defineProps<{
+  faded?: boolean
+}>()
+</script>
+
+<template>
+  <div
+    class="tile relative text-xs text-center p-4 border-slate-700"
+    :class="{
+      'text-slate-500': props.faded,
+      'text-slate-300': !props.faded
+    }"
+  >
+    <slot />
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.tile {
+  &:not(:nth-child(10n)) {
+    border-right-width: 1px;
+  }
+
+  &:nth-child(n + 11) {
+    border-top-width: 1px;
+  }
+}
+</style>

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>