Added event colors

src/components/calendar/CalendarSwitch.vue

@@ -0,0 +1,44 @@
+<script setup lang="ts">
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger
+} from '@/components/ui/dropdown-menu'
+import Button from '../ui/button/Button.vue'
+import { useCalendar } from '@/stores/calendar'
+import { computed } from 'vue'
+
+const { currentConfig, viewTypeOptions, getViewTypeTitle, setViewType } = useCalendar()
+
+const viewTypeTitle = computed(() => getViewTypeTitle(currentConfig.viewType))
+</script>
+
+<template>
+  <DropdownMenu>
+    <DropdownMenuTrigger>
+      <Button size="sm" variant="secondary">
+        <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 256 256">
+          <path
+            d="M208,32H184V24a8,8,0,0,0-16,0v8H88V24a8,8,0,0,0-16,0v8H48A16,16,0,0,0,32,48V208a16,16,0,0,0,16,16H208a16,16,0,0,0,16-16V48A16,16,0,0,0,208,32ZM72,48v8a8,8,0,0,0,16,0V48h80v8a8,8,0,0,0,16,0V48h24V80H48V48ZM208,208H48V96H208V208Zm-68-76a12,12,0,1,1-12-12A12,12,0,0,1,140,132Zm44,0a12,12,0,1,1-12-12A12,12,0,0,1,184,132ZM96,172a12,12,0,1,1-12-12A12,12,0,0,1,96,172Zm44,0a12,12,0,1,1-12-12A12,12,0,0,1,140,172Zm44,0a12,12,0,1,1-12-12A12,12,0,0,1,184,172Z"
+          />
+        </svg>
+
+        {{ viewTypeTitle }}
+      </Button>
+    </DropdownMenuTrigger>
+    <DropdownMenuContent>
+      <DropdownMenuLabel>Mode d'affichage</DropdownMenuLabel>
+      <DropdownMenuSeparator />
+      <DropdownMenuItem
+        v-for="option in viewTypeOptions"
+        :key="option"
+        @click="setViewType(option)"
+      >
+        {{ getViewTypeTitle(option) }}
+      </DropdownMenuItem>
+    </DropdownMenuContent>
+  </DropdownMenu>
+</template>