diff --git a/frontend/src/components/Modals/CalendarModal.vue b/frontend/src/components/Modals/CalendarModal.vue
index 08757a60..38680040 100644
--- a/frontend/src/components/Modals/CalendarModal.vue
+++ b/frontend/src/components/Modals/CalendarModal.vue
@@ -32,26 +32,26 @@
               <DurationIcon class="h-4 w-4 text-ink-gray-5" />
               <DatePicker
                 class="max-w-28"
-                v-model="_event.date"
+                v-model="_event.fromDate"
                 :formatter="(date) => getFormat(date, 'MMM D, YYYY')"
                 :placeholder="__('Start Date')"
               />
               <TimePicker
                 v-if="!_event.isFullDay"
                 class="max-w-20"
-                v-model="_event.from_time"
+                v-model="_event.fromTime"
                 :placeholder="__('Start Time')"
               />
               <div class="text-base text-ink-gray-6">-</div>
               <TimePicker
                 v-if="!_event.isFullDay"
                 class="max-w-20"
-                v-model="_event.to_time"
+                v-model="_event.toTime"
                 :placeholder="__('End Time')"
               />
               <DatePicker
                 class="max-w-28"
-                v-model="_event.date"
+                v-model="_event.toDate"
                 :formatter="(date) => getFormat(date, 'MMM D, YYYY')"
                 :placeholder="__('End Date')"
               />
@@ -145,6 +145,11 @@ function saveEvent() {
     title.value.focus()
     return
   }
+
+  _event.value.fromDateTime =
+    _event.value.fromDate + ' ' + _event.value.fromTime
+  _event.value.toDateTime = _event.value.toDate + ' ' + _event.value.toTime
+
   emit('save', _event.value)
 }
 
diff --git a/frontend/src/pages/Calendar.vue b/frontend/src/pages/Calendar.vue
index 2af5f876..715735d0 100644
--- a/frontend/src/pages/Calendar.vue
+++ b/frontend/src/pages/Calendar.vue
@@ -155,22 +155,14 @@ function saveEvent(event) {
   event.id ? updateEvent(event) : createEvent(event)
 }
 
-function getFromDate(event) {
-  return event.date + ' ' + (event.from_time ? event.from_time : '00:00:00')
-}
-
-function getToDate(event) {
-  return event.date + ' ' + (event.to_time ? event.to_time : '00:00:00')
-}
-
 function createEvent(event) {
   if (!event.title) return
 
   events.insert.submit({
     subject: event.title,
     description: event.description,
-    starts_on: getFromDate(event),
-    ends_on: getToDate(event),
+    starts_on: event.fromDateTime,
+    ends_on: event.toDateTime,
     all_day: event.isFullDay,
     event_type: event.eventType,
     color: event.color,
@@ -187,8 +179,8 @@ function updateEvent(event) {
     name: event.id,
     subject: event.title,
     description: event.description,
-    starts_on: getFromDate(event),
-    ends_on: getToDate(event),
+    starts_on: event.fromDateTime,
+    ends_on: event.toDateTime,
     all_day: event.isFullDay,
     event_type: event.eventType,
     color: event.color,
@@ -232,14 +224,17 @@ function editDetails(e) {
 
 function showNewModal(e) {
   let [fromTime, toTime] = getFromToTime(e.time)
+  let fromDate = dayjs(e.date).format('YYYY-MM-DD')
 
   showModal.value = true
   event.value = {
     title: '',
     description: '',
-    date: dayjs(e.date).format('YYYY-MM-DD'),
-    from_time: fromTime,
-    to_time: toTime,
+    date: fromDate,
+    fromDate: fromDate,
+    toDate: fromDate,
+    fromTime,
+    toTime,
     isFullDay: false,
     eventType: 'Public',
   }