Added basic event details

src/components/calendar/CalendarEvent.vue

@@ -1,15 +1,29 @@
 <script lang="ts" setup>
+import { computed } from 'vue'
+import { Popover, PopoverTrigger } from '@/components/ui/popover'
 import type { CalendarEvent } from '@/stores/events'
+import CalendarEventDetails from './CalendarEventDetails.vue'
 
 const props = defineProps<{
   event: CalendarEvent
 }>()
+
+const eventTitleExcerpt = computed(() => {
+  if (props.event.title.length > 20) return props.event.title.substring(0, 20) + '…'
+  return props.event.title
+})
 </script>
 
 <template>
-  <button
-    class="text-xs text-white px-2 py-1 bg-pink-700 block w-full text-left rounded-sm hover:bg-pink-800"
-  >
-    {{ event.title }}
-  </button>
+  <Popover>
+    <PopoverTrigger as-child>
+      <button
+        class="text-xs text-white px-2 py-1 bg-pink-700 block w-full text-left rounded-sm hover:bg-pink-800"
+      >
+        {{ eventTitleExcerpt }}
+      </button>
+    </PopoverTrigger>
+
+    <CalendarEventDetails :event />
+  </Popover>
 </template>

src/components/calendar/CalendarEventDetails.vue

@@ -0,0 +1,25 @@
+<script lang="ts" setup>
+import { PopoverContent } from '@/components/ui/popover'
+import { useCalendar } from '@/stores/calendar'
+import type { CalendarEvent } from '@/stores/events'
+
+const { getFormattedDateTitle } = useCalendar()
+
+defineProps<{ event: CalendarEvent }>()
+</script>
+
+<template>
+  <PopoverContent class="w-96" align="start">
+    <div class="space-y-1">
+      <div class="font-semibold">
+        {{ event.title }}
+      </div>
+      <div class="text-sm">
+        {{ getFormattedDateTitle(event.date, true) }}
+      </div>
+      <div class="text-sm italic text-slate-500">
+        {{ event.description }}
+      </div>
+    </div>
+  </PopoverContent>
+</template>

src/components/calendar/CalendarMenu.vue

@@ -28,7 +28,7 @@ const {
           <div class="flex items-center gap-6">
             <menu class="flex items-center gap-2">
               <li>
-                <Button @click="jumpToDefaultDate"> Today </Button>
+                <Button @click="jumpToDefaultDate" size="sm"> Today </Button>
               </li>
               <li>
                 <!-- Implement decrementDate to account for other mods -->

src/components/calendar/CalendarTile.vue

@@ -40,7 +40,7 @@ const isDefaultDate = computed(() => {
         >{{ date.day }}</span
       >
     </div>
-    <ul v-if="eventsForTheDay.length > 0" class="grid gap-1">
+    <ul v-if="eventsForTheDay.length > 0" class="absolute top-12 bottom-0 inset-x-2 grid gap-1">
       <li v-for="event in eventsForTheDay" :key="event.title">
         <CalendarEvent :event />
       </li>