Added user change validation and read status

This might be better to just refetch the data with anonymous authorizations

components/calendar/Calendar.vue

@@ -46,15 +46,14 @@ onMounted(() => {
 
 <template>
   <div class="h-full w-full relative">
-  {{ isReadOnly }}
     <div class="h-full grid grid-rows-[auto,1fr]">
       <CalendarMenu />
 
       <component :is="currentViewComponent" />
 
       <CalendarSearch />
-      <CalendarDialogUpdateEvent />
-      <CalendarDialogDeleteEvent />
+      <CalendarDialogUpdateEvent v-if="!isReadOnly" />
+      <CalendarDialogDeleteEvent v-if="!isReadOnly" />
     </div>
   </div>
 </template>

components/calendar/CalendarEventDetails.vue

@@ -15,7 +15,7 @@ import {
 } from "@phosphor-icons/vue"
 
 const { defaultDate, getFormattedDateTitle, jumpToDate, getRelativeString, revealEditEventModal, revealDeleteEventModal } = useCalendar()
-const { lastActiveEvent } = storeToRefs(useCalendar())
+const { lastActiveEvent, isReadOnly } = storeToRefs(useCalendar())
 
 const props = defineProps<{
   event: CalendarEvent
@@ -151,7 +151,7 @@ function deployDeleteModal() {
       </template>
     </div>
 
-    <menu class="absolute top-4 right-4" :class="cn({ 'top-6': event.hidden })">
+    <menu v-if="!isReadOnly" class="absolute top-4 right-4" :class="cn({ 'top-6': event.hidden })">
       <UiPopover v-model:open="commandMenuOpened">
         <UiPopoverTrigger as-child>
           <UiButton size="icon" variant="outline" class="mix-blend-luminosity bg-gray-300 hover:bg-gray-200 dark:bg-gray-800 dark:hover:bg-gray-600">

components/calendar/CalendarMenu.vue

@@ -4,13 +4,14 @@ import { useCalendar } from "@/stores/CalendarStore"
 import { PhMagnifyingGlass } from "@phosphor-icons/vue"
 
 const { revealAdvancedSearch } = useCalendar()
+const { isReadOnly } = storeToRefs(useCalendar())
 </script>
 
 <template>
   <header class="pt-4 border-slate-400 dark:border-slate-700 border-b-[1px]">
     <div class="px-6 flex justify-between">
       <menu class="flex items-center gap-2">
-        <li>
+        <li v-if="!isReadOnly">
           <CalendarDialogQuickCreateEvent />
         </li>
         <li>