diff --git a/components/calendar/dialog/CreateEvent.vue b/components/calendar/dialog/CreateEvent.vue
index e3619eb..14e999d 100644
--- a/components/calendar/dialog/CreateEvent.vue
+++ b/components/calendar/dialog/CreateEvent.vue
@@ -5,8 +5,6 @@ const { eventSkeleton, operationInProgress } = storeToRefs(useCalendar())
 const { resetSkeleton } = useCalendar()
 const popoverOpen = ref(false)
 
-const isLoading = ref(false)
-
 const props = defineProps<{
   date?: RPGDate
   btnClass?: string
@@ -38,10 +36,8 @@ function openEventCreatePopover() {
  * @param e The closing event (can be keydown or click)
  */
 function handleClosing(e: Event) {
-  if (isLoading.value) {
-    popoverOpen.value = false
-    e.preventDefault()
-  }
+  popoverOpen.value = false
+  e.preventDefault()
 }
 </script>
 
diff --git a/components/calendar/dialog/QuickCreateEvent.vue b/components/calendar/dialog/QuickCreateEvent.vue
index 3e487e7..a29c4ea 100644
--- a/components/calendar/dialog/QuickCreateEvent.vue
+++ b/components/calendar/dialog/QuickCreateEvent.vue
@@ -23,7 +23,7 @@ function toggleDialog() {
       <UiDialogTitle>
         {{ $t("entity.calendar.event.addSingle") }}
       </UiDialogTitle>
-      <CalendarFormCreateEvent />
+      <CalendarFormCreateEvent @event-created="toggleDialog" />
     </UiDialogContent>
   </UiDialog>
 </template>
diff --git a/components/calendar/form/Create.vue b/components/calendar/form/Create.vue
index d8f8353..f570051 100644
--- a/components/calendar/form/Create.vue
+++ b/components/calendar/form/Create.vue
@@ -2,7 +2,7 @@
 import type { Calendar } from "~/models/CalendarConfig";
 import { PhAlarm, PhCalendarDots, PhCircleNotch, PhWrench } from "@phosphor-icons/vue";
 
-const defaultSkeleton: Calendar = { name: "", today: { day: 1, month: 0, year: 0 }, months: [], events: []}
+const defaultSkeleton: Calendar = { name: "", today: { day: 1, month: 0, year: 0 }, months: [], events: [], state: "draft" }
 const calendarSkeleton = ref<Calendar>({ ...defaultSkeleton })
 
 onMounted(() => {
diff --git a/components/calendar/state/monthly/DayTile.vue b/components/calendar/state/monthly/DayTile.vue
index aee9bb2..7c0e8ff 100644
--- a/components/calendar/state/monthly/DayTile.vue
+++ b/components/calendar/state/monthly/DayTile.vue
@@ -16,7 +16,7 @@ const calendarTile = ref()
 const calendarEventsList = ref()
 
 const { defaultDate, selectDate, areDatesIdentical } = useCalendar()
-const { selectedDate, currentEvents } = storeToRefs(useCalendar())
+const { selectedDate, currentEvents, isReadOnly } = storeToRefs(useCalendar())
 
 /**
  * All events with a startDate / endDate that starts or ends on the tile
@@ -143,7 +143,7 @@ const eventsNotDisplayed: ComputedRef<number>  = computed<number>(() => eventsFo
     </ClientOnly>
 
     <ClientOnly>
-      <LazyCalendarDialogCreateEvent :date btn-class="absolute inset-0 w-full h-full cursor-default z-0" />
+      <LazyCalendarDialogCreateEvent v-if="!isReadOnly" :date btn-class="absolute inset-0 w-full h-full cursor-default z-0" />
     </ClientOnly>
   </div>
 </template>
diff --git a/models/CalendarConfig.ts b/models/CalendarConfig.ts
index 3acac83..a3fa150 100644
--- a/models/CalendarConfig.ts
+++ b/models/CalendarConfig.ts
@@ -13,7 +13,7 @@ export interface CalendarConfig {
 
 export interface Calendar extends CalendarConfig {
   id?: number
-  shortId: string
+  shortId?: string
   name: string
   events: CalendarEvent[]
   state: CalendarState