From 41ca26a4c6b718d51d984de59ea91ffda53cbc43 Mon Sep 17 00:00:00 2001
From: Andreas <mail@devmount.de>
Date: Wed, 29 May 2024 23:15:33 +0200
Subject: [PATCH] Restructure calendar components and fix remote tentative
 event styles (#437)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* ❌ Remove deprecated calendar components
Reduce calendar month to mini version only

* ➕ Split calendar event into 4 classes

* ➕ Move calendar event classes into corresponding components

* 🔨 Fix tentative remote events styles

* 🔨 Fix all day events styles
---
 frontend/src/components/CalendarDay.vue       | 281 ------------------
 ...alendarMonth.vue => CalendarMiniMonth.vue} |  11 +-
 frontend/src/components/CalendarQalendar.vue  |   6 +-
 frontend/src/components/CalendarWeek.vue      | 270 -----------------
 frontend/src/elements/CalendarEvent.vue       | 129 --------
 frontend/src/elements/CalendarMonthDay.vue    | 136 ---------
 frontend/src/elements/CalendarPageHeading.vue |  65 ----
 .../src/elements/calendar/CalendarEvent.vue   | 107 +++++++
 .../calendar/CalendarEventPlaceholder.vue     |  42 +++
 .../calendar/CalendarEventPreview.vue         |  30 ++
 .../elements/calendar/CalendarEventRemote.vue |  70 +++++
 .../calendar/CalendarEventScheduled.vue       |  31 ++
 .../calendar/CalendarMiniMonthDay.vue         |  45 +++
 frontend/src/utils.js                         |  10 +-
 frontend/src/views/AppointmentsView.vue       |   5 +-
 frontend/src/views/CalendarView.vue           |   5 +-
 16 files changed, 336 insertions(+), 907 deletions(-)
 delete mode 100644 frontend/src/components/CalendarDay.vue
 rename frontend/src/components/{CalendarMonth.vue => CalendarMiniMonth.vue} (96%)
 delete mode 100644 frontend/src/components/CalendarWeek.vue
 delete mode 100644 frontend/src/elements/CalendarEvent.vue
 delete mode 100644 frontend/src/elements/CalendarMonthDay.vue
 delete mode 100644 frontend/src/elements/CalendarPageHeading.vue
 create mode 100644 frontend/src/elements/calendar/CalendarEvent.vue
 create mode 100644 frontend/src/elements/calendar/CalendarEventPlaceholder.vue
 create mode 100644 frontend/src/elements/calendar/CalendarEventPreview.vue
 create mode 100644 frontend/src/elements/calendar/CalendarEventRemote.vue
 create mode 100644 frontend/src/elements/calendar/CalendarEventScheduled.vue
 create mode 100644 frontend/src/elements/calendar/CalendarMiniMonthDay.vue

diff --git a/frontend/src/components/CalendarDay.vue b/frontend/src/components/CalendarDay.vue
deleted file mode 100644
index 386c6f7c8..000000000
--- a/frontend/src/components/CalendarDay.vue
+++ /dev/null
@@ -1,281 +0,0 @@
-<template>
-  <div>
-    <div class="
-      grid w-full grid-cols-day gap-[1px] overflow-hidden rounded-lg border
-      border-gray-200 bg-gray-200 dark:border-gray-600 dark:bg-gray-600
-    ">
-      <!-- all day events -->
-      <template v-if="!booking">
-        <div class="flex-center bg-white text-gray-400 dark:bg-gray-700">
-          {{ t('label.allDay') }}
-        </div>
-        <div
-          class="grid auto-rows-max gap-1 bg-white p-1 dark:bg-gray-700"
-          @mouseleave="popup = {...initialEventPopupData}"
-        >
-          <div
-            v-for="event in eventsByDate?.allDay"
-            :key="event"
-            class="flex overflow-hidden"
-            @mouseenter="element => popup=showEventPopup(element, event, popupPosition)"
-          >
-            <div class="mx-8 w-full truncate rounded bg-amber-400/80 px-2 py-0.5 text-sm">
-              {{ event.title }}
-            </div>
-          </div>
-        </div>
-      </template>
-      <!-- events with times -->
-      <div
-        class="grid bg-white text-center text-gray-400 dark:bg-gray-700"
-        :style="{ gridAutoRows: baseRem + 'rem' }"
-      >
-        <div v-for="h in hours" :key="h" class="lowercase">
-          {{ h }}
-        </div>
-      </div>
-      <div
-        class="grid bg-white dark:bg-gray-700"
-        :style="{ gridAutoRows: unitRem + 'rem' }"
-        @mouseleave="popup = {...initialEventPopupData}"
-      >
-        <div
-          v-for="event in eventsByDate?.duringDay"
-          :key="event"
-          class="flex overflow-hidden"
-          :class="{ 'hidden': event.offset < 0 }"
-          :style="{ gridRow: event.offset + ' / span ' + event.span }"
-          @mouseenter="element => !booking ? popup=showEventPopup(element, event, popupPosition) : null"
-        >
-          <div
-            v-if="!booking"
-            class="
-              mx-8 my-1 flex w-full gap-4 overflow-hidden rounded border-sky-400
-              bg-sky-400/10 px-3 text-gray-700
-            "
-            :class="{
-              'border-2 border-dashed dark:text-white': !event.remote,
-              'border-2': event.tentative,
-              'flex-col': event.span > 60,
-              'flex-row': event.span <= 60,
-              'py-2': event.span >= 30,
-            }"
-            :style="{
-              color: event.tentative ? event.calendar_color : null,
-              borderColor: eventColor(event, false).border,
-              backgroundColor: (!event.remote || event.tentative)
-                ? eventColor(event, false).background
-                : event.calendar_color,
-            }"
-          >
-            <div
-              class="truncate"
-              :class="{
-                'grow self-center': event.span <= 60,
-                'text-sm': event.span < 60,
-                'hidden': event.span < 30,
-              }"
-            >
-              {{ event.title }}
-            </div>
-            <div
-              class="flex text-xs"
-              :class="{
-                'items-center gap-4': event.span > 60,
-                'flex-col gap-1 self-center': event.span <= 60,
-                'hidden': event.span < 30,
-              }"
-            >
-              <div class="flex gap-2">
-                <icon-clock size="16" class="shrink-0" />
-                <div class="whitespace-nowrap">
-                  {{ event.times }}
-                </div>
-              </div>
-              <div class="flex gap-2" :class="{ 'hidden': event.span <= 30 }">
-                <icon-calendar size="16" class="shrink-0" />
-                <div class="whitespace-nowrap">
-                  {{ event.calendar_title }}
-                </div>
-              </div>
-              <div class="flex gap-2" :class="{ 'hidden': event.span <= 60 }">
-                <icon-link size="16" class="shrink-0" />
-                <a
-                  :href="bookingUrl + event.slug"
-                  class="whitespace-nowrap text-teal-500 underline underline-offset-2"
-                  target="_blank"
-                >
-                  {{ bookingUrl + event.slug }}
-                </a>
-              </div>
-            </div>
-          </div>
-          <div
-            v-else
-            @click="bookSlot(event.start)"
-            class="
-              mx-8 my-1 flex w-full cursor-pointer overflow-hidden rounded-md bg-teal-50 p-1 text-sm
-              text-gray-600 hover:bg-teal-100 hover:shadow dark:bg-teal-800 dark:text-gray-300 hover:dark:bg-teal-700
-            "
-            :class="{ 'bg-gradient-to-b from-teal-500 to-sky-600 shadow-lg': event.selected }"
-          >
-            <div
-              class="w-full truncate rounded border-2 border-dashed border-teal-500 p-1 font-semibold lowercase"
-              :class="{ 'border-white text-white': event.selected }"
-            >
-              <div :class="{ 'hidden': event.span <= 30 }">{{ event.times }}</div>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-    <event-popup
-      v-if="(events && !booking)"
-      :style="{
-        display: popup.display,
-        top: popup.top,
-        left: popup.left,
-        right: popup.right,
-      }"
-      :event="popup.event"
-      :position="popupPosition"
-    />
-  </div>
-</template>
-
-<script setup>
-import { computed, inject, ref } from 'vue';
-import {
-  eventColor, timeFormat, initialEventPopupData, showEventPopup,
-} from '@/utils';
-import { useI18n } from 'vue-i18n';
-import EventPopup from '@/elements/EventPopup';
-
-// icons
-import {
-  IconCalendar,
-  IconClock,
-  IconLink,
-} from '@tabler/icons-vue';
-
-// component constants
-const { t } = useI18n();
-const dj = inject('dayjs');
-const bookingUrl = inject('bookingUrl');
-
-// component properties
-const props = defineProps({
-  selected: Object, // currently active date
-  booking: Boolean, // flag indicating if calendar is used to book time slots
-  appointments: Array, // data of appointments to show
-  events: Array, // data of calendar events to show
-  popupPosition: String, // currently supported: right, left, top
-});
-
-// component emits
-const emit = defineEmits(['eventSelected']);
-
-// base data for display elements
-const baseRem = 4; // height for one hour element in rem
-const unitRem = baseRem / 60; // height for shortest event (1 minute) in rem
-
-// all elements (appointment slots or remote events) to show in the current view
-const elementsToShow = computed(() => {
-  const slots = props.appointments.reduce((p, c) => [...p, ...c.slots], []);
-  return props.booking ? slots : [...slots, ...props.events];
-});
-
-// compute start limit depending on data in view
-// begin showing events 2 hours before first event or at least 2pm
-const startHour = computed(() => {
-  const start = elementsToShow.value.filter((e) => !e.all_day).reduce(
-    (p, c) => (dj(c.start).isBetween(props.selected.startOf('week'), props.selected.endOf('week'))
-      ? Math.min(dj(c.start).format('H'), p)
-      : p),
-    16,
-  );
-  return start - 2 >= 0 ? start - 2 : 0;
-});
-
-// compute start limit depending on data in view
-// end showing events 2 hours after first event or at max 10am
-const endHour = computed(() => {
-  const end = elementsToShow.value.reduce((p, c) => {
-    const slotEnd = dj(c.start).add(c.duration, 'minutes');
-    return slotEnd.isBetween(props.selected.startOf('week'), props.selected.endOf('week'))
-      ? Math.max(slotEnd.format('H'), p)
-      : p;
-  }, 9);
-  if (startHour.value > end) {
-    return startHour.value + 8;
-  }
-  return end + 1 < 24 ? end + 1 : 24;
-});
-
-// create position of event, smallest unit is one minute
-const timePosition = (start, duration) => ({
-  offset: 60 * dj(start).format('H') + 1 * dj(start).format('m') - 60 * startHour.value + 1,
-  span: duration,
-  times: `${dj(start).format(timeFormat())} - ${dj(start).add(duration, 'minutes').format(timeFormat())}`,
-});
-
-// handle events to show
-const events = computed(() => {
-  const eventsOnDate = {};
-  // add appointments
-  props.appointments?.forEach((event) => {
-    event.slots.forEach((slot) => {
-      const key = dj(slot.start).format('YYYY-MM-DD');
-      const extendedEvent = { ...event, ...slot, ...timePosition(slot.start, slot.duration) };
-      delete extendedEvent.slots;
-      if (key in eventsOnDate) {
-        eventsOnDate[key].push(extendedEvent);
-      } else {
-        eventsOnDate[key] = [extendedEvent];
-      }
-    });
-  });
-  // add calendar events
-  props.events?.forEach((event) => {
-    const key = dj(event.start).format('YYYY-MM-DD');
-    const extendedEvent = { ...event, ...timePosition(event.start, event.duration), remote: true };
-    if (key in eventsOnDate) {
-      eventsOnDate[key].push(extendedEvent);
-    } else {
-      eventsOnDate[key] = [extendedEvent];
-    }
-  });
-  return eventsOnDate;
-});
-const eventsByDate = computed(() => {
-  const key = dj(props.selected).format('YYYY-MM-DD');
-  if (key in events.value) {
-    return {
-      duringDay: events.value[key].filter((e) => !e.all_day),
-      allDay: events.value[key].filter((e) => e.all_day),
-    };
-  }
-  return null;
-});
-
-// generate hours
-const hours = computed(() => {
-  const list = [];
-  const range = endHour.value - startHour.value;
-  let d = dj().hour(startHour.value).minute(0);
-  for (let i = 0; i <= range; i += 1) {
-    list.push(d.format(timeFormat()));
-    d = d.add(1, 'hour');
-  }
-  return list;
-});
-
-// user selects a slot for booking
-const bookSlot = (d) => {
-  emit('eventSelected', d);
-};
-
-// event details
-const popup = ref({ ...initialEventPopupData });
-
-</script>
diff --git a/frontend/src/components/CalendarMonth.vue b/frontend/src/components/CalendarMiniMonth.vue
similarity index 96%
rename from frontend/src/components/CalendarMonth.vue
rename to frontend/src/components/CalendarMiniMonth.vue
index 1ab69a0c4..4fc6d534d 100644
--- a/frontend/src/components/CalendarMonth.vue
+++ b/frontend/src/components/CalendarMiniMonth.vue
@@ -19,18 +19,16 @@
         v-for="h in isoWeekdays"
         :key="h"
         class="bg-gray-100 py-2 text-center text-gray-500 dark:bg-gray-600 dark:text-gray-300"
-        :class="{ 'font-bold': !mini}"
       >
         {{ h.min }}
       </div>
-      <calendar-month-day
+      <calendar-mini-month-day
         v-for="d in days"
         :key="d.date"
         :day="d.date"
         :is-active="d.active"
         :is-selected="d.date === date"
         :is-today="d.date === today"
-        :mini="mini"
         :placeholder="placeholder"
         :events="eventsByDate(d.date)"
         :show-details="!placeholder"
@@ -44,10 +42,8 @@
 </template>
 
 <script setup>
-import {
-  ref, computed, inject, watch,
-} from 'vue';
-import CalendarMonthDay from '@/elements/CalendarMonthDay';
+import { ref, computed, inject, watch } from 'vue';
+import CalendarMiniMonthDay from '@/elements/calendar/CalendarMiniMonthDay';
 
 // icons
 import {
@@ -64,7 +60,6 @@ const isoFirstDayOfWeek = inject('isoFirstDayOfWeek');
 // component properties
 const props = defineProps({
   selected: Object, // currently active date (dayjs object)
-  mini: Boolean, // show small version of monthly calendar
   nav: Boolean, // show month navigation
   placeholder: Boolean, // format appointments as placeholder
   minDate: Object, // minimum active date in view (dayjs object)
diff --git a/frontend/src/components/CalendarQalendar.vue b/frontend/src/components/CalendarQalendar.vue
index b5059a1ac..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,
@@ -377,9 +377,7 @@ watch(route, () => {
     >
       <template #weekDayEvent="eventProps">
         <calendar-event
-          :isActive="true"
           :isSelected="selectedDate === eventProps.eventData.id"
-          :isToday="false"
           :showDetails="!isBookingRoute"
           :disabled="false"
           :placeholder="isBookingRoute"
@@ -392,9 +390,7 @@ watch(route, () => {
       <template #monthEvent="monthEventProps">
         <calendar-event
           class="max-w-[12.5rem]"
-          :isActive="true"
           :isSelected="selectedDate === monthEventProps.eventData.id"
-          :isToday="false"
           :showDetails="!isBookingRoute"
           :disabled="false"
           :placeholder="isBookingRoute"
diff --git a/frontend/src/components/CalendarWeek.vue b/frontend/src/components/CalendarWeek.vue
deleted file mode 100644
index 09fe70b9e..000000000
--- a/frontend/src/components/CalendarWeek.vue
+++ /dev/null
@@ -1,270 +0,0 @@
-<template>
-  <div class="
-    grid w-full grid-cols-week gap-[1px] overflow-hidden rounded-lg border
-    border-gray-200 bg-gray-200 dark:border-gray-600 dark:bg-gray-600
-  ">
-    <!-- header with weekdays -->
-    <div class="bg-white dark:bg-gray-700"></div>
-    <div
-      v-for="d in days"
-      :key="d.day"
-      class="flex flex-col items-center bg-white py-2 text-gray-500 dark:bg-gray-700 dark:text-gray-300"
-    >
-      <div
-        class="flex-center size-10 text-2xl font-semibold"
-        :class="{ 'rounded-full bg-teal-500 text-white': d.active }"
-      >
-        {{ d.day }}
-      </div>
-      <div class="text-lg">{{ d.weekday }}</div>
-    </div>
-    <!-- all day events -->
-    <template v-if="!booking">
-      <div class="flex-center bg-white text-gray-400 dark:bg-gray-700">
-        {{ t('label.allDay') }}
-      </div>
-      <div
-        v-for="d in days"
-        :key="d.day"
-        class="grid auto-rows-max gap-1 bg-white p-1 dark:bg-gray-700"
-        @mouseleave="popup = {...initialEventPopupData}"
-      >
-        <div
-          v-for="event in eventsByDate(d.date)?.allDay"
-          :key="event"
-          class="flex overflow-hidden"
-          @mouseenter="element => popup=showEventPopup(element, event, popupPosition)"
-        >
-          <div class="w-full truncate rounded bg-amber-400/80 px-2 py-0.5 text-sm">
-            {{ event.title }}
-          </div>
-        </div>
-      </div>
-    </template>
-    <!-- events with times -->
-    <div
-      class="grid bg-white text-center text-gray-400 dark:bg-gray-700"
-      :style="{ gridAutoRows: baseRem + 'rem' }"
-    >
-      <div v-for="h in hours" :key="h" class="lowercase">
-        {{ h }}
-      </div>
-    </div>
-    <div
-      v-for="d in days"
-      :key="d.day"
-      class="grid bg-white dark:bg-gray-700"
-      :style="{ gridAutoRows: unitRem + 'rem' }"
-      @mouseleave="popup = {...initialEventPopupData}"
-    >
-      <div
-        v-for="event in eventsByDate(d.date)?.duringDay"
-        :key="event"
-        class="flex overflow-hidden"
-        :class="{ 'hidden': event.offset < 0 }"
-        :style="{ gridRow: event.offset + ' / span ' + event.span }"
-        @mouseenter="element => !booking ? popup=showEventPopup(element, event, popupPosition) : null"
-      >
-        <div
-          v-if="!booking"
-          class="m-1 flex w-full truncate rounded border-sky-400 bg-sky-400/10 px-2"
-          :class="{
-            'border-2': !event.remote || event.tentative,
-            'border-dashed': !event.remote,
-            'py-0.5': event.span >= 30,
-          }"
-          :style="{
-            color: event.tentative ? event.calendar_color : null,
-            borderColor: eventColor(event, false).border,
-            backgroundColor: (!event.remote || event.tentative)
-              ? eventColor(event, false).background
-              : event.calendar_color,
-          }"
-        >
-          <div
-            class="truncate"
-            :class="{
-              'grow self-center text-sm': event.span < 60,
-              'hidden': event.span < 30,
-            }"
-          >
-            {{ event.title }}
-          </div>
-        </div>
-        <div
-          v-else
-          @click="bookSlot(event.start)"
-          class="
-            m-1 flex w-full cursor-pointer overflow-hidden rounded-md bg-teal-50 p-1 text-sm
-            text-gray-600 hover:bg-teal-100 hover:shadow dark:bg-teal-800 dark:text-gray-300 hover:dark:bg-teal-700
-          "
-          :class="{ 'bg-gradient-to-b from-teal-500 to-sky-600 shadow-lg': event.selected }"
-        >
-          <div
-            class="w-full truncate rounded border-2 border-dashed border-teal-500 p-1 font-semibold lowercase"
-            :class="{ 'border-white text-white': event.selected }"
-          >
-            <span :class="{ 'hidden': event.span <= 30 }">
-              {{ event.times }}
-            </span>
-          </div>
-        </div>
-      </div>
-    </div>
-    <event-popup
-      v-if="(events && !booking)"
-      :style="{
-        display: popup.display,
-        top: popup.top,
-        left: popup.left,
-        right: popup.right,
-      }"
-      :event="popup.event"
-      :position="popupPosition"
-    />
-  </div>
-</template>
-
-<script setup>
-import { computed, inject, ref } from 'vue';
-import {
-  eventColor, timeFormat, initialEventPopupData, showEventPopup,
-} from '@/utils';
-import { useI18n } from 'vue-i18n';
-import EventPopup from '@/elements/EventPopup';
-
-const { t } = useI18n();
-const dj = inject('dayjs');
-
-// component properties
-const props = defineProps({
-  selected: Object, // currently active date
-  booking: Boolean, // flag indicating if calendar is used to book time slots
-  appointments: Array, // data of appointments to show
-  events: Array, // data of calendar events to show
-  popupPosition: String, // currently supported: right, left, top
-});
-
-// component emits
-const emit = defineEmits(['eventSelected']);
-
-// base data for display elements
-const baseRem = 4; // height for one hour element in rem
-const unitRem = baseRem / 60; // height for shortest event (1 minute) in rem
-
-// all elements (appointment slots or remote events) to show in the current view
-const elementsToShow = computed(() => {
-  const slots = props.appointments.reduce((p, c) => [...p, ...c.slots], []);
-  return props.booking ? slots : [...slots, ...props.events];
-});
-
-// compute start limit depending on data in view
-// begin showing events 2 hours before first event or at least 2pm
-const startHour = computed(() => {
-  const start = elementsToShow.value.filter((e) => !e.all_day).reduce(
-    (p, c) => (dj(c.start).isBetween(props.selected.startOf('week'), props.selected.endOf('week'))
-      ? Math.min(dj(c.start).format('H'), p)
-      : p),
-    16,
-  );
-  return start - 2 >= 0 ? start - 2 : 0;
-});
-
-// compute start limit depending on data in view
-// end showing events 2 hours after first event or at max 10am
-const endHour = computed(() => {
-  const end = elementsToShow.value.reduce((p, c) => {
-    const slotEnd = dj(c.start).add(c.duration, 'minutes');
-    return slotEnd.isBetween(props.selected.startOf('week'), props.selected.endOf('week'))
-      ? Math.max(slotEnd.format('H'), p)
-      : p;
-  }, 9);
-  if (startHour.value > end) {
-    return startHour.value + 8;
-  }
-  return end + 1 < 24 ? end + 1 : 24;
-});
-
-// create position of event, smallest unit is one minute
-const timePosition = (start, duration) => ({
-  offset: 60 * dj(start).format('H') + 1 * dj(start).format('m') - 60 * startHour.value + 1,
-  span: duration,
-  times: `${dj(start).format(timeFormat())} - ${dj(start).add(duration, 'minutes').format(timeFormat())}`,
-});
-
-// handle events to show
-const events = computed(() => {
-  const eventsOnDate = {};
-  // add appointments
-  props.appointments?.forEach((event) => {
-    event.slots.forEach((slot) => {
-      const key = dj(slot.start).format('YYYY-MM-DD');
-      const extendedEvent = { ...event, ...slot, ...timePosition(slot.start, slot.duration) };
-      delete extendedEvent.slots;
-      if (key in eventsOnDate) {
-        eventsOnDate[key].push(extendedEvent);
-      } else {
-        eventsOnDate[key] = [extendedEvent];
-      }
-    });
-  });
-  // add calendar events
-  props.events?.forEach((event) => {
-    const key = dj(event.start).format('YYYY-MM-DD');
-    const extendedEvent = { ...event, ...timePosition(event.start, event.duration), remote: true };
-    if (key in eventsOnDate) {
-      eventsOnDate[key].push(extendedEvent);
-    } else {
-      eventsOnDate[key] = [extendedEvent];
-    }
-  });
-  return eventsOnDate;
-});
-const eventsByDate = (d) => {
-  const key = dj(d).format('YYYY-MM-DD');
-  if (key in events.value) {
-    return {
-      duringDay: events.value[key].filter((e) => !e.all_day),
-      allDay: events.value[key].filter((e) => e.all_day),
-    };
-  }
-  return null;
-};
-
-// generate names for each day of week
-const days = computed(() => {
-  const list = [];
-  let day = props.selected.startOf('week');
-  for (let i = 0; i < 7; i += 1) {
-    list.push({
-      date: day.format('YYYY-MM-DD'),
-      day: day.format('D'),
-      weekday: day.format('ddd'),
-      active: day.isSame(dj(), 'day'),
-    });
-    day = day.add(1, 'day');
-  }
-  return list;
-});
-
-// generate hours
-const hours = computed(() => {
-  const list = [];
-  const range = endHour.value - startHour.value;
-  let d = dj().hour(startHour.value).minute(0);
-  for (let i = 0; i <= range; i += 1) {
-    list.push(d.format(timeFormat()));
-    d = d.add(1, 'hour');
-  }
-  return list;
-});
-
-// user selects a slot for booking
-const bookSlot = (d) => {
-  emit('eventSelected', d);
-};
-
-// event details
-const popup = ref({ ...initialEventPopupData });
-
-</script>
diff --git a/frontend/src/elements/CalendarEvent.vue b/frontend/src/elements/CalendarEvent.vue
deleted file mode 100644
index 8f0ec8309..000000000
--- a/frontend/src/elements/CalendarEvent.vue
+++ /dev/null
@@ -1,129 +0,0 @@
-<template>
-  <div
-    class="group/day"
-    :class="{
-      'text-gray-400': !isActive || disabled,
-      '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`">
-      <div
-        class="is-preview m-auto size-[95%] shrink-0 text-sm text-gray-700 hover:shadow-md dark:text-gray-200"
-        :class="{
-          'rounded border-2 border-dashed border-sky-400 bg-sky-400/10 px-2 py-0.5': !placeholder && !eventData.remote && !eventData.preview,
-          'group/event cursor-pointer rounded-md p-1 hover:bg-gradient-to-b hover:shadow-lg': placeholder && !isBooked,
-          'bg-teal-50 hover:from-teal-500 hover:to-sky-600 hover:!text-white dark:bg-teal-800': placeholder && !isBooked,
-          'flex items-center gap-1.5 px-2 py-0.5': eventData.remote,
-          'flex items-center rounded border-l-4 border-teal-400 px-2': eventData.preview,
-          '!border-solid text-black': eventData.attendee !== null,
-          'rounded bg-amber-400/80 dark:text-white': eventData.all_day,
-          '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,
-        }"
-        :style="{
-          borderColor: eventColor(eventData, placeholder).border,
-          backgroundColor: monthView || placeholder ? eventColor(eventData, placeholder).background : eventData.calendar_color,
-          color: !monthView && !placeholder ? getAccessibleColor(eventData.calendar_color) : null,
-        }"
-        @click="emit('eventSelected', day)"
-        @mouseenter="element => showDetails ? popup=showEventPopup(element, event, popupPosition) : null"
-      >
-        <div
-          v-if="eventData.remote && !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"
-            :class="{
-              'h-full border-2 border-dashed border-teal-500 p-1 font-semibold group-hover/event:border-white': placeholder,
-              '!border-none': isBooked,
-              'border-white': isSelected,
-            }"
-          >
-            <template v-if="eventData.preview">{{ formattedTimeRange(event) }}</template>
-            <template v-else-if="isBooked">{{ t('label.busy') }}</template>
-            <template v-else>{{ event.title }}</template>
-          </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
-  isActive: Boolean, // flag showing if the day belongs to active month
-  isSelected: Boolean, // flag showing if the day is currently selected by user
-  isToday: Boolean, // flag showing if the day is today
-  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/CalendarMonthDay.vue b/frontend/src/elements/CalendarMonthDay.vue
deleted file mode 100644
index 579564603..000000000
--- a/frontend/src/elements/CalendarMonthDay.vue
+++ /dev/null
@@ -1,136 +0,0 @@
-<template>
-  <div
-    class="group/day p-1"
-    :class="{
-      'cursor-pointer py-2': mini,
-      'h-32': !mini,
-      'bg-white dark:bg-gray-700': isActive,
-      'bg-gray-50 text-gray-400 dark:bg-gray-600': !isActive || disabled,
-      'cursor-not-allowed': disabled
-    }"
-    @mouseleave="popup = {...initialEventPopupData}"
-  >
-    <div
-      class="relative w-6 rounded-full text-center"
-      :class="{
-        'bg-teal-500 font-semibold text-white': isToday,
-        'text-teal-500': isSelected && !isToday,
-        'mx-auto': mini,
-        'group-hover/day:bg-sky-600': mini && isToday && !disabled,
-        'group-hover/day:text-sky-600': mini && !isToday && !disabled,
-      }"
-    >
-      {{ dj(day).format('D') }}
-      <div
-        v-if="mini && events"
-        class="absolute -bottom-1 left-1/2 size-1.5 -translate-x-1/2 rounded-full bg-teal-600"
-      ></div>
-    </div>
-    <div v-if="events && !mini" class="flex h-24 flex-col gap-1.5 overflow-y-auto">
-      <div
-        v-for="event in sortedEvents"
-        :key="event"
-        class="shrink-0 text-sm text-gray-700 hover:shadow-md dark:text-gray-200"
-        :class="{
-          'rounded border-2 border-dashed border-sky-400 bg-sky-400/10 px-2 py-0.5': !placeholder && !event.remote && !event.preview,
-          'group/event cursor-pointer rounded-md p-1 hover:bg-gradient-to-b hover:shadow-lg': placeholder,
-          'bg-teal-50 hover:from-teal-500 hover:to-sky-600 hover:!text-white dark:bg-teal-800': placeholder,
-          'flex items-center gap-1.5 px-2 py-0.5': event.remote,
-          'flex items-center rounded border-l-4 border-teal-400 px-2': event.preview,
-          '!border-solid text-black': event.attendee !== null,
-          'rounded bg-amber-400/80 dark:text-white': event.all_day
-        }"
-        :style="{
-          borderColor: eventColor(event, placeholder).border,
-          backgroundColor: eventColor(event, placeholder).background,
-        }"
-        @click="emit('eventSelected', day)"
-        @mouseenter="element => showDetails ? popup=showEventPopup(element, event, popupPosition) : null"
-      >
-        <div
-          v-if="event.remote && !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,
-          }"
-        ></div>
-        <div
-          class="truncate rounded"
-          :class="{
-            'h-10 border-2 border-dashed border-teal-500 p-1 font-semibold group-hover/event:border-white': placeholder,
-          }"
-        >
-          <span v-if="event.preview">{{ formattedTimeRange(event) }}</span>
-          <span v-else>{{ event.title }}</span>
-        </div>
-      </div>
-    </div>
-    <event-popup
-      v-if="(events && 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,
-} from '@/utils';
-import { inject, computed, ref } from 'vue';
-import EventPopup from '@/elements/EventPopup';
-
-const dj = inject('dayjs');
-
-// component properties
-const props = defineProps({
-  day: String, // number of day in its month
-  isActive: Boolean, // flag showing if the day belongs to active month
-  isSelected: Boolean, // flag showing if the day is currently selected by user
-  isToday: Boolean, // flag showing if the day is today
-  mini: Boolean, // flag showing if this is a day cell of a small calendar
-  placeholder: Boolean, // flag formating events as placeholder
-  events: Array, // list of events to show on this day or null
-  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
-});
-
-// component emits
-const emit = defineEmits(['eventSelected']);
-
-// bring events to specific order: all day events first, than sorted by start date
-const sortedEvents = computed(() => [...props.events].sort((a, b) => {
-  if (a.all_day && !b.all_day) {
-    return -1;
-  }
-  if (!a.all_day && b.all_day) {
-    return 1;
-  }
-  if ((a.all_day && b.all_day) || dj(a.start).isSame(dj(b.start))) {
-    return a.title.localeCompare(b.title);
-  }
-  return dj(a.start).isAfter(dj(b.start));
-}));
-
-// event details
-const popup = ref({ ...initialEventPopupData });
-
-// formatted time range
-const formattedTimeRange = (event) => {
-  const start = dj(event.start);
-  const end = start.add(event.duration, 'minutes');
-  return start.format(`${timeFormat()} - `) + end.format(timeFormat());
-};
-</script>
diff --git a/frontend/src/elements/CalendarPageHeading.vue b/frontend/src/elements/CalendarPageHeading.vue
deleted file mode 100644
index bda1fa44f..000000000
--- a/frontend/src/elements/CalendarPageHeading.vue
+++ /dev/null
@@ -1,65 +0,0 @@
-<template>
-  <div
-    class="mx-auto mb-2 flex select-none items-center gap-4 lg:mx-0 lg:mb-8 lg:gap-8"
-  >
-    <div
-      v-if="nav"
-      @click="emit('prev')"
-      class="group cursor-pointer select-none"
-    >
-      <icon-chevron-left
-        class="size-10 fill-transparent stroke-gray-400 stroke-1 group-hover:stroke-teal-500"
-      />
-    </div>
-    <h2 v-if="title && !backlink" class="flex flex-col">
-      <div class="text-4xl font-light">{{ title }}</div>
-      <div class="flex gap-2 text-xl">
-        <span class="font-semibold">{{ month }}</span>
-        <span>{{ year }}</span>
-      </div>
-    </h2>
-    <h2 v-if="!title && !backlink" class="flex gap-3 text-4xl">
-      <span class="font-normal">{{ month }}</span>
-      <span class="font-light">{{ year }}</span>
-    </h2>
-    <h2 v-if="title && backlink" class="flex gap-4 text-4xl font-light">
-      <div
-        class="flex cursor-pointer gap-3 border-b-2 border-teal-500 text-teal-500"
-        @click="emit('back')"
-      >
-        <span class="font-normal">{{ month }}</span>
-        <span>{{ year }}</span>
-      </div>
-      <icon-chevron-right
-        class="size-10 fill-transparent stroke-gray-400 stroke-1"
-      />
-      <div>{{ title }}</div>
-    </h2>
-    <div
-      v-if="nav"
-      @click="emit('next')"
-      class="group cursor-pointer select-none"
-    >
-      <icon-chevron-right
-        class="size-10 fill-transparent stroke-gray-400 stroke-1 group-hover:stroke-teal-500"
-      />
-    </div>
-  </div>
-</template>
-
-<script setup>
-// icons
-import { IconChevronLeft, IconChevronRight } from '@tabler/icons-vue';
-
-// component properties
-defineProps({
-  month: String, // month of active date
-  year: String, // year of active date
-  title: String, // title of current calendar view (optional)
-  nav: Boolean, // show navigation
-  backlink: Boolean, // show breadcrumb title with backlink
-});
-
-// component emits
-const emit = defineEmits(['prev', 'next', 'back']);
-</script>
diff --git a/frontend/src/elements/calendar/CalendarEvent.vue b/frontend/src/elements/calendar/CalendarEvent.vue
new file mode 100644
index 000000000..ef52f853d
--- /dev/null
+++ b/frontend/src/elements/calendar/CalendarEvent.vue
@@ -0,0 +1,107 @@
+<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..5bb47c7a9
--- /dev/null
+++ b/frontend/src/elements/calendar/CalendarEventRemote.vue
@@ -0,0 +1,70 @@
+<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 border-2 rounded': !isMonthView,
+    }"
+    :style="{
+      borderColor: !isMonthView ? eventColor(event, false).border : null,
+      backgroundColor: eventBackgroundColor,
+      color: eventTextColor,
+    }"
+  >
+    <div
+      v-if="isMonthView && !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';
+import { computed } from 'vue';
+
+// component properties
+const props = defineProps({
+  isMonthView: Boolean, // flag, are we in month view?
+  event: Object, // the event to show
+  label: String, // event title
+});
+
+const eventBackgroundColor = computed(() => {
+  if (props.event.all_day) {
+    return null;
+  }
+  if (props.isMonthView || (!props.isMonthView && props.event.tentative)) {
+    return 'transparent';
+  } else {
+    return props.event.calendar_color;
+  }
+});
+
+const eventTextColor = computed(() => {
+  if (props.isMonthView) {
+    return null;
+  }
+  if (props.event.tentative) {
+    return props.event.calendar_color;
+  } else {
+    return getAccessibleColor(event.calendar_color)
+  }
+});
+</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/calendar/CalendarMiniMonthDay.vue b/frontend/src/elements/calendar/CalendarMiniMonthDay.vue
new file mode 100644
index 000000000..71d3c1912
--- /dev/null
+++ b/frontend/src/elements/calendar/CalendarMiniMonthDay.vue
@@ -0,0 +1,45 @@
+<template>
+  <div
+    class="group/day px-1 cursor-pointer py-2"
+    :class="{
+      'bg-white dark:bg-gray-700': isActive,
+      'bg-gray-50 text-gray-400 dark:bg-gray-600': !isActive || disabled,
+      'cursor-not-allowed': disabled
+    }"
+  >
+    <div
+      class="relative w-6 rounded-full text-center mx-auto"
+      :class="{
+        'bg-teal-500 font-semibold text-white': isToday,
+        'text-teal-500': isSelected && !isToday,
+        'group-hover/day:bg-sky-600': isToday && !disabled,
+        'group-hover/day:text-sky-600': !isToday && !disabled,
+      }"
+    >
+      {{ dj(day).format('D') }}
+      <div v-if="events" class="absolute -bottom-1 left-1/2 size-1.5 -translate-x-1/2 rounded-full bg-teal-600"></div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { inject } from 'vue';
+
+const dj = inject('dayjs');
+
+// component properties
+const props = defineProps({
+  day: String, // number of day in its month
+  isActive: Boolean, // flag showing if the day belongs to active month
+  isSelected: Boolean, // flag showing if the day is currently selected by user
+  isToday: Boolean, // flag showing if the day is today
+  placeholder: Boolean, // flag formating events as placeholder
+  events: Array, // list of events to show on this day or null
+  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
+});
+
+// component emits
+const emit = defineEmits(['eventSelected']);
+</script>
diff --git a/frontend/src/utils.js b/frontend/src/utils.js
index f79231d2a..104f6d967 100644
--- a/frontend/src/utils.js
+++ b/frontend/src/utils.js
@@ -10,19 +10,15 @@ export const eventColor = (event, placeholder) => {
     background: null,
   };
   // color appointment slots
-  if (!placeholder && !event.remote) {
+  if (!placeholder) {
     color.border = event.calendar_color;
     color.background = event.calendar_color;
     // keep solid background only for slots with attendee
-    if (!event.attendee) {
+    if (!event.attendee && !event.remote) {
       color.background += '22';
     }
   }
-  // color remote tentative events
-  if (event.remote && event.tentative) {
-    color.border = `${event.calendar_color}bb`;
-    color.background = 'transparent';
-  }
+
   return color;
 };
 
diff --git a/frontend/src/views/AppointmentsView.vue b/frontend/src/views/AppointmentsView.vue
index 212b40ad5..c43268bec 100644
--- a/frontend/src/views/AppointmentsView.vue
+++ b/frontend/src/views/AppointmentsView.vue
@@ -174,9 +174,8 @@
     <div class="mx-auto mb-10 w-full min-w-[310px] sm:w-1/2 md:mb-0 lg:w-1/5">
       <div>
         <!-- monthly mini calendar -->
-        <calendar-month
+        <calendar-mini-month
           :selected="activeDate"
-          :mini="true"
           :nav="true"
           @prev="dateNav('month', false)"
           @next="dateNav('month')"
@@ -210,7 +209,7 @@ import { useRoute, useRouter } from 'vue-router';
 import { vOnClickOutside } from '@vueuse/components';
 import AppointmentGridItem from '@/elements/AppointmentGridItem';
 import AppointmentModal from '@/components/AppointmentModal';
-import CalendarMonth from '@/components/CalendarMonth';
+import CalendarMiniMonth from '@/components/CalendarMiniMonth';
 import TabBar from '@/components/TabBar';
 
 // icons
diff --git a/frontend/src/views/CalendarView.vue b/frontend/src/views/CalendarView.vue
index c745abea1..319f0defc 100644
--- a/frontend/src/views/CalendarView.vue
+++ b/frontend/src/views/CalendarView.vue
@@ -27,9 +27,8 @@
     <div class="mx-auto mb-10 w-full min-w-[310px] sm:w-1/2 md:mb-0 md:w-1/5">
       <div class="flex flex-col gap-8">
         <!-- monthly mini calendar -->
-        <calendar-month
+        <calendar-mini-month
           :selected="activeDate"
-          :mini="true"
           :nav="true"
           :events="calendarEvents"
           @prev="dateNav('month', false)"
@@ -78,7 +77,7 @@ import {
 import { useI18n } from 'vue-i18n';
 import { useRoute, useRouter } from 'vue-router';
 import AppointmentListItem from '@/elements/AppointmentListItem';
-import CalendarMonth from '@/components/CalendarMonth';
+import CalendarMiniMonth from '@/components/CalendarMiniMonth';
 import AlertBox from '@/elements/AlertBox.vue';
 import { useCalendarStore } from '@/stores/calendar-store';
 import { useAppointmentStore } from '@/stores/appointment-store';