Added base calendar formatting

src/components/Calendar.vue

@@ -0,0 +1,40 @@
+<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'
+
+const { currentConfig } = useCalendar()
+
+let currentViewComponent: any
+
+switch (currentConfig.viewType) {
+  case 'month':
+    currentViewComponent = Monthly
+    break
+
+  case 'year':
+    currentViewComponent = Year
+    break
+
+  case 'decade':
+    currentViewComponent = Decade
+    break
+
+  case 'century':
+    currentViewComponent = Century
+    break
+
+  default:
+    break
+}
+</script>
+
+<template>
+  <div>
+    <CalendarMenu />
+    <component :is="currentViewComponent" />
+  </div>
+</template>

src/components/CalendarMenu.vue

@@ -0,0 +1,33 @@
+<script lang="ts" setup>
+import { useCalendar } from '@/stores/calendar'
+import { computed } from 'vue'
+
+const { currentConfig, currentDate, getPeriodOfYear } = useCalendar()
+
+const navbarTitle = computed(() => {
+  switch (currentConfig.viewType) {
+    case 'month':
+      return `${currentDate.currentMonthName} ${currentDate.currentYear} ${currentDate.currentPeriodAbbr}`
+
+    case 'year':
+      return `Année ${currentDate.currentYear} ${currentDate.currentPeriodAbbr}`
+
+    case 'decade':
+      return `Années ${Number(currentDate.currentYear)} ${getPeriodOfYear(Number(currentDate.currentYear)).short} - ${Number(currentDate.currentYear) + 10} ${getPeriodOfYear(Number(currentDate.currentYear) + 10).short}`
+
+    case 'century':
+      return `Années ${Number(currentDate.currentYear)} ${getPeriodOfYear(Number(currentDate.currentYear)).short} - ${Number(currentDate.currentYear) + 100} ${getPeriodOfYear(Number(currentDate.currentYear) + 100).short}`
+
+    default:
+      return ''
+  }
+})
+</script>
+
+<template>
+  <header>
+    <h1 class="text-2xl font-bold">
+      {{ navbarTitle }}
+    </h1>
+  </header>
+</template>

src/components/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/state/Decade.vue

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

src/components/state/Monthly.vue

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

src/components/state/Year.vue

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