diff --git a/ui/src/components/calendar/ViewCalendarEvent.vue b/ui/src/components/calendar/ViewCalendarEvent.vue
index 39be30d..25fac9d 100644
--- a/ui/src/components/calendar/ViewCalendarEvent.vue
+++ b/ui/src/components/calendar/ViewCalendarEvent.vue
@@ -97,6 +97,12 @@ async function forceReload() {
     activeEvent.value = await getCalendarEvent(activeEvent.value.id);
 }
 
+const isPast = computed(() => {
+    const end = new Date(activeEvent.value.end)
+    // is current date later than end date
+    return new Date() < end;
+})
+
 defineExpose({forceReload})
 </script>
 
@@ -142,7 +148,7 @@ defineExpose({forceReload})
                     <CircleAlert></CircleAlert> This event has been cancelled
                 </div>
             </section>
-            <section class="w-full">
+            <section v-if="isPast" class="w-full">
                 <ButtonGroup class="flex w-full">
                     <Button variant="outline"
                         :class="myAttendance?.status === CalendarAttendance.Attending ? 'border-2 border-primary text-primary' : ''"