From 8ff95dea1b6f89731e43c373fe76c1ce8169428d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Andreas=20M=C3=BCller?= <mail@devmount.de>
Date: Wed, 29 May 2024 14:27:56 +0200
Subject: [PATCH] =?UTF-8?q?=E2=9D=8C=20Remove=20deprecated=20calendar=20co?=
 =?UTF-8?q?mponents=20Reduce=20calendar=20month=20to=20mini=20version=20on?=
 =?UTF-8?q?ly?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/src/components/CalendarDay.vue       | 281 ------------------
 ...alendarMonth.vue => CalendarMiniMonth.vue} |   7 +-
 frontend/src/components/CalendarWeek.vue      | 270 -----------------
 .../src/elements/CalendarMiniMonthDay.vue     |  45 +++
 frontend/src/elements/CalendarMonthDay.vue    | 136 ---------
 frontend/src/views/AppointmentsView.vue       |   5 +-
 frontend/src/views/CalendarView.vue           |   5 +-
 7 files changed, 51 insertions(+), 698 deletions(-)
 delete mode 100644 frontend/src/components/CalendarDay.vue
 rename frontend/src/components/{CalendarMonth.vue => CalendarMiniMonth.vue} (97%)
 delete mode 100644 frontend/src/components/CalendarWeek.vue
 create mode 100644 frontend/src/elements/CalendarMiniMonthDay.vue
 delete mode 100644 frontend/src/elements/CalendarMonthDay.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 97%
rename from frontend/src/components/CalendarMonth.vue
rename to frontend/src/components/CalendarMiniMonth.vue
index 1ab69a0c4..4c2f9d3d6 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"
@@ -47,7 +45,7 @@
 import {
   ref, computed, inject, watch,
 } from 'vue';
-import CalendarMonthDay from '@/elements/CalendarMonthDay';
+import CalendarMiniMonthDay from '@/elements/CalendarMiniMonthDay';
 
 // icons
 import {
@@ -64,7 +62,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/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/CalendarMiniMonthDay.vue b/frontend/src/elements/CalendarMiniMonthDay.vue
new file mode 100644
index 000000000..71d3c1912
--- /dev/null
+++ b/frontend/src/elements/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/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/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';