diff --git a/frontend/src/components/Calendar/CalendarEventPanel.vue b/frontend/src/components/Calendar/CalendarEventPanel.vue
index e2a25383..b919476e 100644
--- a/frontend/src/components/Calendar/CalendarEventPanel.vue
+++ b/frontend/src/components/Calendar/CalendarEventPanel.vue
@@ -136,7 +136,7 @@ import {
   Dropdown,
   dayjs,
 } from 'frappe-ui'
-import { ref, computed, watch } from 'vue'
+import { ref, computed, watch, nextTick } from 'vue'
 
 const props = defineProps({
   event: {
@@ -163,7 +163,6 @@ watch(
   () => props.event,
   (newEvent) => {
     error.value = null
-    _event.value = { ...newEvent }
 
     if (newEvent && newEvent.id) {
       title.value = 'Event details'
@@ -171,6 +170,7 @@ watch(
       title.value = 'New event'
     }
 
+    nextTick(() => (_event.value = { ...newEvent }))
     setTimeout(() => eventTitle.value?.el?.focus(), 100)
   },
   { immediate: true },
diff --git a/frontend/src/pages/Calendar.vue b/frontend/src/pages/Calendar.vue
index 74a72797..3c366a32 100644
--- a/frontend/src/pages/Calendar.vue
+++ b/frontend/src/pages/Calendar.vue
@@ -4,7 +4,7 @@
       <ViewBreadcrumbs routeName="Calendar" />
     </template>
     <template #right-header>
-      <Button variant="solid" :label="__('Create')" @click="createEvent">
+      <Button variant="solid" :label="__('Create')" @click="showEventPanelArea">
         <template #prefix><FeatherIcon name="plus" class="h-4" /></template>
       </Button>
     </template>
@@ -261,7 +261,10 @@ function getFromToTime(time) {
   let fromTime = `${h}:${m}`
   let toTime = `${parseInt(h) + 1}:${m}`
 
-  if (time.toLowerCase().includes('am') || time.toLowerCase().includes('pm')) {
+  if (
+    time?.toLowerCase().includes('am') ||
+    time?.toLowerCase().includes('pm')
+  ) {
     // 12 hour format
     time = time.trim().replace(' ', '')
     const ampm = time.slice(-2)