diff --git a/ui/src/composables/useCalendarEvents.ts b/ui/src/composables/useCalendarEvents.ts
new file mode 100644
index 0000000..154d953
--- /dev/null
+++ b/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 };
+}
diff --git a/ui/src/composables/useCalendarNavigation.ts b/ui/src/composables/useCalendarNavigation.ts
new file mode 100644
index 0000000..14ba76e
--- /dev/null
+++ b/ui/src/composables/useCalendarNavigation.ts
@@ -0,0 +1,33 @@
+import { ref } from "vue";
+
+export function useCalendarNavigation(calendarApiGetter: () => any) {
+    const selectedMonth = ref(new Date().getMonth());
+    const selectedYear = ref(new Date().getFullYear());
+
+    const years = Array.from({ length: 41 }, (_, i) => selectedYear.value - 20 + i);
+
+    function goPrev() { calendarApiGetter()?.prev(); }
+    function goNext() { calendarApiGetter()?.next(); }
+    function goToday() { calendarApiGetter()?.today(); }
+
+    function onDatesSet() {
+        const d = calendarApiGetter()?.getDate() ?? new Date();
+        selectedMonth.value = d.getMonth();
+        selectedYear.value = d.getFullYear();
+    }
+
+    function goToSelectedDate() {
+        calendarApiGetter()?.gotoDate(new Date(selectedYear.value, selectedMonth.value, 1));
+    }
+
+    return {
+        selectedMonth,
+        selectedYear,
+        years,
+        goPrev,
+        goNext,
+        goToday,
+        onDatesSet,
+        goToSelectedDate,
+    };
+}
diff --git a/ui/src/pages/Calendar.vue b/ui/src/pages/Calendar.vue
index ca1d6ef..6348060 100644
--- a/ui/src/pages/Calendar.vue
+++ b/ui/src/pages/Calendar.vue
@@ -10,16 +10,14 @@ import { CalendarEvent, CalendarEventShort } from '@shared/types/calendar'
 import { Calendar } from '@fullcalendar/core'
 import ViewCalendarEvent from '@/components/calendar/ViewCalendarEvent.vue'
 import { useRouter, useRoute } from 'vue-router'
+import { useCalendarEvents } from '@/composables/useCalendarEvents'
+import { useCalendarNavigation } from '@/composables/useCalendarNavigation'
 
 const monthLabels = [
     'January', 'February', 'March', 'April', 'May', 'June',
     'July', 'August', 'September', 'October', 'November', 'December'
 ]
 
-const selectedMonth = ref<number>(new Date().getMonth())
-const selectedYear = ref<number>(new Date().getFullYear())
-const years = Array.from({ length: 41 }, (_, i) => selectedYear.value - 20 + i) // +/- 20 yrs
-
 function api() {
     return calendarRef.value?.getApi()
 }
@@ -27,41 +25,10 @@ function api() {
 const router = useRouter();
 const route = useRoute();
 
-// keep dropdowns in sync whenever the calendar navigates
-function onDatesSet() {
-    const d = api()?.getDate() ?? new Date()
-    selectedMonth.value = d.getMonth()
-    selectedYear.value = d.getFullYear()
-}
-
 function buildFullDate(month: number, year: number): Date {
     return new Date(year, month, 1); //default to first of month
 }
 
-watch([selectedMonth, selectedYear], async () => {
-    console.log('Selected date changed:', selectedMonth.value, selectedYear.value)
-
-    let monthEvents = await getMonthCalendarEvents(buildFullDate(selectedMonth.value, selectedYear.value));
-    events.value = monthEvents.map(toCalEvent);
-    console.log(events.value);
-})
-
-onMounted(async () => {
-    let monthEvents = await getMonthCalendarEvents(buildFullDate(selectedMonth.value, selectedYear.value));
-    events.value = monthEvents.map(toCalEvent);
-    console.log(events.value);
-})
-
-
-function goPrev() { api()?.prev() }
-function goNext() { api()?.next() }
-function goToday() { api()?.today() }
-
-// jump to the selected month/year
-function goToSelectedDate() {
-    api()?.gotoDate(new Date(selectedYear.value, selectedMonth.value, 1))
-}
-
 type CalEvent = {
     id: string
     title: string
@@ -70,20 +37,8 @@ type CalEvent = {
     extendedProps?: Record<string, any>
 }
 
-function toCalEvent(e: CalendarEventShort): CalEvent {
-    return {
-        id: e.id.toString(),
-        title: e.name,
-        start: e.start,
-        end: e.end,
-        extendedProps: {
-            color: e.color
-        }
-    }
-}
-
-
-const events = ref<CalEvent[]>([])
+const { selectedMonth, selectedYear, years, goPrev, goNext, goToday, onDatesSet, goToSelectedDate } = useCalendarNavigation(api)
+const { events } = useCalendarEvents(selectedMonth, selectedYear);
 
 const panelOpen = ref(false)
 const activeEvent = ref<CalendarEvent | null>(null)
@@ -95,6 +50,8 @@ async function onEventClick(arg: any) {
     panelOpen.value = true
 }
 
+const currentEventID = ref<number | null>(null);
+
 const dialogRef = ref<any>(null)
 
 // NEW: handle day/time slot clicks to start creating an event
@@ -167,11 +124,12 @@ const calendarOptions = ref({
 calendarOptions.value.datesSet = onDatesSet
 
 watch(() => route.params.id, async (newID) => {
-    console.log(newID);
     if (newID === undefined) {
         panelOpen.value = false;
+        currentEventID.value = null;
     } else {
         panelOpen.value = true;
+        currentEventID.value = Number(newID);
     }
 })
 
@@ -191,7 +149,6 @@ onMounted(() => {
     onDatesSet()
 })
 
-// const ext = computed(() => activeEvent.value?.extendedProps ?? {})
 </script>
 
 <template>