broke up the mega monolith that is the calendar file

ui/src/composables/useCalendarEvents.ts

@@ -0,0 +1,28 @@
+import { ref, watch, onMounted } from "vue";
+import { getMonthCalendarEvents } from "@/api/calendar";
+import type { CalendarEventShort } from "@shared/types/calendar";
+
+export function useCalendarEvents(selectedMonth, selectedYear) {
+    const events = ref([]);
+
+    function toCalEvent(e: CalendarEventShort) {
+        return {
+            id: e.id.toString(),
+            title: e.name,
+            start: new Date(e.start),
+            end: e.end ? new Date(e.end) : undefined,
+            extendedProps: { color: e.color },
+        };
+    }
+
+    async function loadEvents() {
+        const date = new Date(selectedYear.value, selectedMonth.value, 1);
+        const monthEvents = await getMonthCalendarEvents(date);
+        events.value = monthEvents.map(toCalEvent);
+    }
+
+    watch([selectedMonth, selectedYear], loadEvents);
+    onMounted(loadEvents);
+
+    return { events, loadEvents };
+}