implemented cancelled event visualization

ui/src/components/calendar/ViewCalendarEvent.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import type { CalendarEvent, CalendarSignup } from '@shared/types/calendar'
-import { Clock, MapPin, User, X } from 'lucide-vue-next';
+import { CircleAlert, Clock, MapPin, User, X } from 'lucide-vue-next';
 import { computed, onMounted, ref, watch } from 'vue';
 import ButtonGroup from '../ui/button-group/ButtonGroup.vue';
 import Button from '../ui/button/Button.vue';
@@ -92,6 +92,9 @@ async function setAttendance(state: CalendarAttendance) {
         </div>
         <!-- Body -->
         <div class="flex-1 flex flex-col items-center min-h-0 overflow-y-auto px-4 py-4 space-y-6 w-full">
+            <section v-if="activeEvent.cancelled == true" class="w-full">
+                <div class="flex p-2 rounded-md w-full bg-destructive gap-3"><CircleAlert></CircleAlert> This event has been cancelled</div>
+            </section>
             <section class="w-full">
                 <ButtonGroup class="flex w-full">
                     <Button variant="outline"