Added base event checking

src/components/calendar/CalendarEvent.vue

@@ -0,0 +1,15 @@
+<script lang="ts" setup>
+import type { CalendarEvent } from '@/stores/events'
+
+const props = defineProps<{
+  event: CalendarEvent
+}>()
+</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>
+</template>

src/components/calendar/CalendarMenu.vue

@@ -8,18 +8,65 @@ import {
   SelectValue
 } from '@/components/ui/select'
 import { useCalendar } from '@/stores/calendar'
+import Button from '../ui/button/Button.vue'
 
-const { currentConfig, currentDate, viewTypeOptions } = useCalendar()
+const {
+  currentConfig,
+  currentDate,
+  viewTypeOptions,
+  decrementMonth,
+  incrementMonth,
+  jumpToDefaultDate
+} = 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="grid md:grid-cols-12 items-center">
         <div class="md:col-span-9">
-          <h1 class="text-2xl font-bold">
-            {{ currentDate.currentDateTitle }}
-          </h1>
+          <div class="flex items-center gap-6">
+            <menu class="flex items-center gap-2">
+              <li>
+                <Button @click="jumpToDefaultDate"> Today </Button>
+              </li>
+              <li>
+                <!-- Implement decrementDate to account for other mods -->
+                <Button variant="outline" size="icon" @click="decrementMonth">
+                  <svg
+                    xmlns="http://www.w3.org/2000/svg"
+                    width="16"
+                    height="16"
+                    fill="#FFF"
+                    viewBox="0 0 256 256"
+                  >
+                    <path
+                      d="M165.66,202.34a8,8,0,0,1-11.32,11.32l-80-80a8,8,0,0,1,0-11.32l80-80a8,8,0,0,1,11.32,11.32L91.31,128Z"
+                    />
+                  </svg>
+                </Button>
+              </li>
+              <li>
+                <!-- Implement decrementDate to account for other mods -->
+                <Button variant="outline" size="icon" @click="incrementMonth">
+                  <svg
+                    xmlns="http://www.w3.org/2000/svg"
+                    width="16"
+                    height="16"
+                    fill="#FFF"
+                    viewBox="0 0 256 256"
+                  >
+                    <path
+                      d="M181.66,133.66l-80,80a8,8,0,0,1-11.32-11.32L164.69,128,90.34,53.66a8,8,0,0,1,11.32-11.32l80,80A8,8,0,0,1,181.66,133.66Z"
+                    />
+                  </svg>
+                </Button>
+              </li>
+            </menu>
+            <h1 class="text-2xl font-bold">
+              {{ currentDate.currentDateTitle }}
+            </h1>
+          </div>
         </div>
         <div class="md:col-span-3">
           <Select v-model="currentConfig.viewType">

src/components/calendar/CalendarTile.vue

@@ -1,21 +1,49 @@
 <script lang="ts" setup>
 import type { LeimDate } from '@/models/Date'
+import { useCalendar } from '@/stores/calendar'
+import { useCalendarEvents } from '@/stores/events'
+import { computed } from 'vue'
+import CalendarEvent from './CalendarEvent.vue'
 
 const props = defineProps<{
   date: LeimDate
   faded?: boolean
 }>()
+
+const { compareTwoDates, defaultDate } = useCalendar()
+const { currentEvents } = useCalendarEvents()
+
+const eventsForTheDay = computed(() => {
+  return currentEvents.filter((currentEvent) => {
+    return compareTwoDates(currentEvent.date, props.date)
+  })
+})
+
+const isDefaultDate = computed(() => {
+  return compareTwoDates(props.date, defaultDate)
+})
 </script>
 
 <template>
   <div
-    class="tile relative text-xs text-center p-4 border-slate-700"
+    class="tile relative text-xs p-2 border-slate-700"
     :class="{
       'text-slate-500': props.faded,
       'text-slate-300': !props.faded
     }"
   >
-    <slot />
+    <div class="text-center">
+      <span
+        class="inline-flex w-8 h-8 aspect-square items-center justify-center rounded-full font-bold"
+        :class="{ 'bg-slate-800': isDefaultDate }"
+        >{{ date.day }}</span
+      >
+    </div>
+    <ul v-if="eventsForTheDay.length > 0" class="grid gap-1">
+      <li v-for="event in eventsForTheDay" :key="event.title">
+        <CalendarEvent :event />
+      </li>
+    </ul>
   </div>
 </template>
 

src/components/calendar/state/Monthly.vue

@@ -45,17 +45,12 @@ function getNextMonthDate(day: number): LeimDate {
         year: Number(currentDate.currentYear),
         period: currentDate.currentPeriod
       }"
-    >
-      <span class="font-bold">{{ day }}</span>
-    </CalendarTile>
-
+    />
     <CalendarTile
       v-for="nextMonthDay in 8"
       :key="nextMonthDay"
       faded
       :date="getNextMonthDate(nextMonthDay)"
-    >
-      <span>{{ nextMonthDay }}</span>
-    </CalendarTile>
+    />
   </div>
 </template>