diff --git a/frontend/src/components/CalendarMiniMonth.vue b/frontend/src/components/CalendarMiniMonth.vue
index 4c2f9d3d6..4fc6d534d 100644
--- a/frontend/src/components/CalendarMiniMonth.vue
+++ b/frontend/src/components/CalendarMiniMonth.vue
@@ -42,10 +42,8 @@
 </template>
 
 <script setup>
-import {
-  ref, computed, inject, watch,
-} from 'vue';
-import CalendarMiniMonthDay from '@/elements/CalendarMiniMonthDay';
+import { ref, computed, inject, watch } from 'vue';
+import CalendarMiniMonthDay from '@/elements/calendar/CalendarMiniMonthDay';
 
 // icons
 import {
diff --git a/frontend/src/components/CalendarQalendar.vue b/frontend/src/components/CalendarQalendar.vue
index 4fc1ed2f5..09f2c71e6 100644
--- a/frontend/src/components/CalendarQalendar.vue
+++ b/frontend/src/components/CalendarQalendar.vue
@@ -4,7 +4,7 @@ import {
 } from 'vue';
 import { Qalendar } from 'qalendar';
 import 'qalendar/dist/style.css';
-import CalendarEvent from '@/elements/CalendarEvent.vue';
+import CalendarEvent from '@/elements/calendar/CalendarEvent.vue';
 import {
   appointmentState,
   bookingStatus,
diff --git a/frontend/src/elements/CalendarEvent.vue b/frontend/src/elements/CalendarEvent.vue
deleted file mode 100644
index c1c2f9cec..000000000
--- a/frontend/src/elements/CalendarEvent.vue
+++ /dev/null
@@ -1,186 +0,0 @@
-<template>
-  <div
-    :class="{ 'text-gray-400 cursor-not-allowed': disabled, 'h-full': !monthView,
-    }"
-    @mouseleave="popup = {...initialEventPopupData}"
-  >
-    <div class="flex flex-col gap-1.5 overflow-y-auto"
-      :class="{
-        'h-full': !monthView,
-        'px-1' : isBooked,
-      }"
-      :style="`height: ${elementHeight}px`"
-    >
-      <!-- placeholder event for availability bookings -->
-      <div
-        v-if="placeholder"
-        class="m-auto size-[95%] shrink-0 text-sm text-gray-700 hover:shadow-md dark:text-gray-200"
-        :class="{
-          'group/event cursor-pointer rounded-md p-1 hover:bg-gradient-to-b hover:shadow-lg': !isBooked,
-          'bg-teal-50 hover:from-teal-500 hover:to-sky-600 hover:!text-white dark:bg-teal-800': !isBooked,
-          'bg-gradient-to-b from-teal-500 to-sky-600 shadow-lg': isSelected,
-          'h-full rounded': !monthView,
-          '!cursor-not-allowed rounded-md bg-gray-100 p-1 dark:bg-gray-600': isBooked,
-        }"
-        @click="emit('eventSelected', day)"
-        @mouseenter="element => showDetails ? popup=showEventPopup(element, event, popupPosition) : null"
-      >
-        <div class="grid">
-          <div
-            class="
-              truncate rounded h-full p-1 font-semibold border-2 border-dashed 
-              border-teal-500 group-hover/event:border-white"
-            :class="{
-              '!border-none': isBooked,
-              'border-white': isSelected,
-            }"
-          >
-            <template v-if="isBooked">{{ t('label.busy') }}</template>
-            <template v-else>{{ formattedTimeRange(event) }}</template>
-          </div>
-        </div>
-      </div>
-
-      <!-- remote event (can be normal, all_day or tentative) -->
-      <div
-        v-else-if="eventData.remote"
-        class="
-          m-auto size-[95%] shrink-0 text-sm text-gray-700 hover:shadow-md dark:text-gray-200
-          flex items-center gap-1.5 px-2 py-0.5
-        "
-        :class="{
-          'rounded bg-amber-400/80 dark:text-white': eventData.all_day,
-          'h-full rounded': !monthView,
-        }"
-        :style="{
-          borderColor: eventColor(eventData, false).border,
-          backgroundColor: monthView ? eventColor(eventData, false).background : eventData.calendar_color,
-          color: !monthView ? getAccessibleColor(eventData.calendar_color) : null,
-        }"
-        @mouseenter="element => showDetails ? popup=showEventPopup(element, event, popupPosition) : null"
-      >
-        <div
-          v-if="!eventData.all_day"
-          class="mt-0.5 size-2.5 shrink-0 rounded-full"
-          :class="{
-            'bg-sky-400': !eventData.tentative,
-            'border border-dashed border-sky-400/70': eventData.tentative,
-          }"
-          :style="{
-            borderColor: eventData.tentative ? eventData.calendar_color : null,
-            backgroundColor: !eventData.tentative ? eventData.calendar_color : null,
-            color: !eventData.tentative ? getAccessibleColor(eventData.calendar_color) : null,
-          }"
-        ></div>
-        <div class="grid">
-          <div class="truncate rounded">
-            {{ event.title }}
-          </div>
-        </div>
-      </div>
-
-      <!-- live preview event (e.g. for schedule calendar) -->
-      <div
-        v-else-if="eventData.preview"
-        class="
-          m-auto size-[95%] shrink-0 text-sm text-gray-700 hover:shadow-md dark:text-gray-200
-          flex items-center rounded border-l-4 border-teal-400 px-2
-        "
-        :class="{ 'h-full': !monthView }"
-        :style="{
-          borderColor: eventColor(eventData, false).border,
-          backgroundColor: monthView ? eventColor(eventData, false).background : eventData.calendar_color,
-          color: !monthView ? getAccessibleColor(eventData.calendar_color) : null,
-        }"
-        @mouseenter="element => showDetails ? popup=showEventPopup(element, event, popupPosition) : null"
-      >
-        <div class="grid">
-          <div class="truncate rounded">
-            {{ formattedTimeRange(event) }}
-          </div>
-        </div>
-      </div>
-
-      <!-- scheduled event -->
-      <div
-        v-else
-        class="
-          m-auto size-[95%] shrink-0 text-sm text-gray-700 hover:shadow-md dark:text-gray-200
-          rounded border-2 border-dashed border-sky-400 bg-sky-400/10 px-2 py-0.5
-        "
-        :class="{ 'h-full': !monthView }"
-        :style="{
-          borderColor: eventColor(eventData, false).border,
-          backgroundColor: monthView ? eventColor(eventData, false).background : eventData.calendar_color,
-          color: !monthView ? getAccessibleColor(eventData.calendar_color) : null,
-        }"
-        @mouseenter="element => showDetails ? popup=showEventPopup(element, event, popupPosition) : null"
-      >
-        <div class="grid">
-          <div class="truncate rounded">
-            {{ event.title }}
-          </div>
-        </div>
-      </div>
-    </div>
-    <event-popup
-      v-if="(event && showDetails)"
-      :style="{
-        display: popup.display,
-        top: popup.top,
-        left: popup.left,
-        right: popup.right,
-      }"
-      :event="popup.event"
-      :position="popupPosition"
-    />
-  </div>
-</template>
-
-<script setup>
-import {
-  eventColor, timeFormat, initialEventPopupData, showEventPopup, getAccessibleColor,
-} from '@/utils';
-import {
-  computed, inject, ref, toRefs,
-} from 'vue';
-import { useI18n } from 'vue-i18n';
-import EventPopup from '@/elements/EventPopup';
-import { bookingStatus } from '@/definitions';
-
-const { t } = useI18n();
-const dj = inject('dayjs');
-
-// component properties
-const props = defineProps({
-  day: String, // number of day in its month
-  isSelected: Boolean, // flag showing if the event is currently selected by user
-  placeholder: Boolean, // flag formating events as placeholder
-  monthView: Boolean, // flag, are we in month view?
-  event: Object, // the event to show
-  showDetails: Boolean, // flag enabling event popups with details
-  popupPosition: String, // currently supported: right, left, top
-  disabled: Boolean, // flag making this day non-selectable and inactive
-  timeSlotDuration: Number, // minimum time shown: [15, 30, 60]
-  timeSlotHeight: Number, // height in pixels of each minimum time instance.
-});
-
-const { event, timeSlotDuration, timeSlotHeight } = toRefs(props);
-
-const eventData = event.value.customData;
-const elementHeight = computed(() => (eventData.duration / timeSlotDuration.value) * timeSlotHeight.value);
-const isBooked = computed(() => eventData.slot_status === bookingStatus.booked);
-
-// component emits
-const emit = defineEmits(['eventSelected']);
-
-// event details
-const popup = ref({ ...initialEventPopupData });
-
-// formatted time range
-const formattedTimeRange = (eventObj) => {
-  const start = dj(eventObj.time.start);
-  const end = dj(eventObj.time.end);
-  return `${start.format(timeFormat())} - ${end.format(timeFormat())}`;
-};
-</script>
diff --git a/frontend/src/elements/calendar/CalendarEvent.vue b/frontend/src/elements/calendar/CalendarEvent.vue
new file mode 100644
index 000000000..e74c7f1a9
--- /dev/null
+++ b/frontend/src/elements/calendar/CalendarEvent.vue
@@ -0,0 +1,109 @@
+<template>
+  <div
+    :class="{ 'text-gray-400 cursor-not-allowed': disabled, 'h-full': !monthView }"
+    @mouseleave="popup = {...initialEventPopupData}"
+  >
+    <div class="flex flex-col gap-1.5 overflow-y-auto"
+      :class="{
+        'h-full': !monthView,
+        'px-1' : isBusy,
+      }"
+      :style="`height: ${elementHeight}px`"
+    >
+      <!-- placeholder event for availability bookings -->
+      <calendar-event-placeholder
+        v-if="placeholder"
+        :is-busy="isBusy"
+        :is-selected="isSelected"
+        :is-month-view="monthView"
+        :label="formattedTimeRange(event)"
+        @click="emit('eventSelected', day)"
+      />
+
+      <!-- remote event (can be normal, all_day or tentative) -->
+      <calendar-event-remote
+        v-else-if="eventData.remote"
+        :is-month-view="monthView"
+        :event="eventData"
+        :label="event.title"
+        @mouseenter="element => showDetails ? popup=showEventPopup(element, event, popupPosition) : null"
+      />
+
+      <!-- live preview event (e.g. for schedule calendar) -->
+      <calendar-event-preview
+        v-else-if="eventData.preview"
+        :is-month-view="monthView"
+        :event="eventData"
+        :label="formattedTimeRange(event)"
+        @mouseenter="element => showDetails ? popup=showEventPopup(element, event, popupPosition) : null"
+      />
+
+      <!-- scheduled event -->
+      <calendar-event-scheduled
+        v-else
+        :is-month-view="monthView"
+        :event="eventData"
+        :label="event.title"
+        @mouseenter="element => showDetails ? popup=showEventPopup(element, event, popupPosition) : null"
+      />
+
+    </div>
+    <event-popup
+      v-if="(event && showDetails)"
+      :style="{
+        display: popup.display,
+        top: popup.top,
+        left: popup.left,
+        right: popup.right,
+      }"
+      :event="popup.event"
+      :position="popupPosition"
+    />
+  </div>
+</template>
+
+<script setup>
+import { bookingStatus } from '@/definitions';
+import { computed, inject, ref, toRefs } from 'vue';
+import { timeFormat, initialEventPopupData, showEventPopup } from '@/utils';
+import CalendarEventPlaceholder from '@/elements/calendar/CalendarEventPlaceholder';
+import CalendarEventPreview from '@/elements/calendar/CalendarEventPreview';
+import CalendarEventRemote from '@/elements/calendar/CalendarEventRemote';
+import CalendarEventScheduled from '@/elements/calendar/CalendarEventScheduled';
+import EventPopup from '@/elements/EventPopup';
+
+const dj = inject('dayjs');
+
+// component properties
+const props = defineProps({
+  day: String, // number of day in its month
+  isSelected: Boolean, // flag showing if the event is currently selected by user
+  placeholder: Boolean, // flag formating events as placeholder
+  monthView: Boolean, // flag, are we in month view?
+  event: Object, // the event to show
+  showDetails: Boolean, // flag enabling event popups with details
+  popupPosition: String, // currently supported: right, left, top
+  disabled: Boolean, // flag making this day non-selectable and inactive
+  timeSlotDuration: Number, // minimum time shown: [15, 30, 60]
+  timeSlotHeight: Number, // height in pixels of each minimum time instance.
+});
+
+const { event, timeSlotDuration, timeSlotHeight } = toRefs(props);
+
+const eventData = event.value.customData;
+const elementHeight = computed(() => (eventData.duration / timeSlotDuration.value) * timeSlotHeight.value);
+const isBusy = computed(() => eventData.slot_status === bookingStatus.booked);
+
+// component emits
+const emit = defineEmits(['eventSelected']);
+
+// event details
+const popup = ref({ ...initialEventPopupData });
+
+// formatted time range
+const formattedTimeRange = (eventObj) => {
+  const start = dj(eventObj.time.start);
+  const end = dj(eventObj.time.end);
+  return `${start.format(timeFormat())} - ${end.format(timeFormat())}`;
+};
+</script>
diff --git a/frontend/src/elements/calendar/CalendarEventPlaceholder.vue b/frontend/src/elements/calendar/CalendarEventPlaceholder.vue
new file mode 100644
index 000000000..7c590eafa
--- /dev/null
+++ b/frontend/src/elements/calendar/CalendarEventPlaceholder.vue
@@ -0,0 +1,42 @@
+<template>
+  <div
+    class="m-auto size-[95%] shrink-0 text-sm text-gray-700 hover:shadow-md dark:text-gray-200"
+    :class="{
+      'group/event cursor-pointer rounded-md p-1 hover:bg-gradient-to-b hover:shadow-lg': !isBusy,
+      'bg-teal-50 hover:from-teal-500 hover:to-sky-600 hover:!text-white dark:bg-teal-800': !isBusy,
+      'bg-gradient-to-b from-teal-500 to-sky-600 shadow-lg': isSelected,
+      'h-full rounded': !isMonthView,
+      '!cursor-not-allowed rounded-md bg-gray-100 p-1 dark:bg-gray-600': isBusy,
+    }"
+  >
+    <div class="grid">
+      <div
+        class="
+          truncate rounded h-full p-1 font-semibold border-2 border-dashed 
+          border-teal-500 group-hover/event:border-white"
+        :class="{
+          '!border-none': isBusy,
+          'border-white': isSelected,
+        }"
+      >
+        <template v-if="isBusy">{{ t('label.busy') }}</template>
+        <template v-else>{{ label }}</template>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { useI18n } from 'vue-i18n';
+
+const { t } = useI18n();
+
+// component properties
+const props = defineProps({
+  isBusy: Boolean, // flag showing this event as busy and non-selectable
+  isSelected: Boolean, // flag showing if the event is currently selected by user
+  isMonthView: Boolean, // flag, are we in month view?
+  label: String, // event title
+});
+
+</script>
diff --git a/frontend/src/elements/calendar/CalendarEventPreview.vue b/frontend/src/elements/calendar/CalendarEventPreview.vue
new file mode 100644
index 000000000..c3d09bef7
--- /dev/null
+++ b/frontend/src/elements/calendar/CalendarEventPreview.vue
@@ -0,0 +1,30 @@
+<template>
+  <div
+    class="
+      m-auto size-[95%] shrink-0 text-sm text-gray-700 hover:shadow-md dark:text-gray-200
+      flex items-center rounded border-l-4 border-teal-400 px-2
+    "
+    :class="{ 'h-full': !isMonthView }"
+    :style="{
+      borderColor: eventColor(event, false).border,
+      backgroundColor: isMonthView ? eventColor(event, false).background : event.calendar_color,
+      color: !isMonthView ? getAccessibleColor(event.calendar_color) : null,
+    }"
+  >
+    <div class="grid">
+      <div class="truncate rounded">
+        {{ label }}
+      </div>
+    </div>
+  </div>
+</template>
+<script setup>
+import { eventColor, getAccessibleColor } from '@/utils';
+
+// component properties
+const props = defineProps({
+  isMonthView: Boolean, // flag, are we in month view?
+  event: Object, // the event to show
+  label: String, // event title
+});
+</script>
diff --git a/frontend/src/elements/calendar/CalendarEventRemote.vue b/frontend/src/elements/calendar/CalendarEventRemote.vue
new file mode 100644
index 000000000..1a2d75e8d
--- /dev/null
+++ b/frontend/src/elements/calendar/CalendarEventRemote.vue
@@ -0,0 +1,47 @@
+<template>
+  <div
+    class="
+      m-auto size-[95%] shrink-0 text-sm text-gray-700 hover:shadow-md dark:text-gray-200
+      flex items-center gap-1.5 px-2 py-0.5
+    "
+    :class="{
+      'rounded bg-amber-400/80 dark:text-white': event.all_day,
+      'h-full rounded': !isMonthView,
+    }"
+    :style="{
+      borderColor: eventColor(event, false).border,
+      backgroundColor: isMonthView ? eventColor(event, false).background : event.calendar_color,
+      color: !isMonthView ? getAccessibleColor(event.calendar_color) : null,
+    }"
+  >
+    <div
+      v-if="!event.all_day"
+      class="mt-0.5 size-2.5 shrink-0 rounded-full"
+      :class="{
+        'bg-sky-400': !event.tentative,
+        'border border-dashed border-sky-400/70': event.tentative,
+      }"
+      :style="{
+        borderColor: event.tentative ? event.calendar_color : null,
+        backgroundColor: !event.tentative ? event.calendar_color : null,
+        color: !event.tentative ? getAccessibleColor(event.calendar_color) : null,
+      }"
+    ></div>
+    <div class="grid">
+      <div class="truncate rounded">
+        {{ label }}
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { eventColor, getAccessibleColor } from '@/utils';
+
+// component properties
+const props = defineProps({
+  isMonthView: Boolean, // flag, are we in month view?
+  event: Object, // the event to show
+  label: String, // event title
+});
+</script>
diff --git a/frontend/src/elements/calendar/CalendarEventScheduled.vue b/frontend/src/elements/calendar/CalendarEventScheduled.vue
new file mode 100644
index 000000000..7ba08d874
--- /dev/null
+++ b/frontend/src/elements/calendar/CalendarEventScheduled.vue
@@ -0,0 +1,31 @@
+<template>
+  <div
+    class="
+      m-auto size-[95%] shrink-0 text-sm text-gray-700 hover:shadow-md dark:text-gray-200
+      rounded border-2 border-dashed border-sky-400 bg-sky-400/10 px-2 py-0.5
+    "
+    :class="{ 'h-full': !isMonthView }"
+    :style="{
+      borderColor: eventColor(event, false).border,
+      backgroundColor: isMonthView ? eventColor(event, false).background : event.calendar_color,
+      color: !isMonthView ? getAccessibleColor(event.calendar_color) : null,
+    }"
+  >
+    <div class="grid">
+      <div class="truncate rounded">
+        {{ label }}
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { eventColor, getAccessibleColor } from '@/utils';
+
+// component properties
+const props = defineProps({
+  isMonthView: Boolean, // flag, are we in month view?
+  event: Object, // the event to show
+  label: String, // event title
+});
+</script>
diff --git a/frontend/src/elements/CalendarMiniMonthDay.vue b/frontend/src/elements/calendar/CalendarMiniMonthDay.vue
similarity index 100%
rename from frontend/src/elements/CalendarMiniMonthDay.vue
rename to frontend/src/elements/calendar/CalendarMiniMonthDay.vue