From d343785b515806076bc43f49392a6f7db9a3b209 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?J=C3=B6rn-Michael=20Miehe?=
 <40151420+ldericher@users.noreply.github.com>
Date: Wed, 14 Sep 2022 23:14:44 +0000
Subject: [PATCH] EventDate component

---
 ui/src/components/calendar/EventDate.vue | 39 ++++++++++++++++++++++++
 ui/src/components/calendar/EventItem.vue | 22 +++++--------
 2 files changed, 46 insertions(+), 15 deletions(-)
 create mode 100644 ui/src/components/calendar/EventDate.vue

diff --git a/ui/src/components/calendar/EventDate.vue b/ui/src/components/calendar/EventDate.vue
new file mode 100644
index 0000000..55360d7
--- /dev/null
+++ b/ui/src/components/calendar/EventDate.vue
@@ -0,0 +1,39 @@
+<template>
+  <div>
+    <span class="text-h4 text-md-h3">{{ day }}</span>
+    <span class="text-h5 text-md-h4 grey--text text--darken-1">{{
+      month
+    }}</span>
+  </div>
+</template>
+
+<script lang="ts">
+import { Component, Prop, Vue } from "vue-property-decorator";
+import { DateTime } from "luxon";
+
+@Component
+export default class EventDate extends Vue {
+  @Prop()
+  private readonly date!: DateTime;
+
+  private get day(): string {
+    return this.date.toFormat("dd.");
+  }
+
+  private get month(): string {
+    return this.date.toFormat("MM.");
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+@import "~vuetify/src/styles/settings/_variables";
+
+div {
+  min-width: 95px;
+
+  @media #{map-get($display-breakpoints, "md-and-up")} {
+    min-width: 130px;
+  }
+}
+</style>
\ No newline at end of file
diff --git a/ui/src/components/calendar/EventItem.vue b/ui/src/components/calendar/EventItem.vue
index cd8e3cc..d49d31c 100644
--- a/ui/src/components/calendar/EventItem.vue
+++ b/ui/src/components/calendar/EventItem.vue
@@ -1,11 +1,6 @@
 <template>
   <v-list-item class="pa-0" three-line>
-    <div>
-      <span class="text-h4 text-md-h3">{{ start_day }}</span>
-      <span class="text-h5 text-md-h4 grey--text text--darken-1">{{
-        start_month
-      }}</span>
-    </div>
+    <EventDate :date="event.start" />
     <v-list-item-content>
       <v-list-item-title class="text-h6 text-md-h5 mt-0 mb-1">
         {{ event.summary }}
@@ -29,20 +24,17 @@
 import { Component, Prop, Vue } from "vue-property-decorator";
 import { DateTime } from "luxon";
 import Event from "./event";
+import EventDate from "./EventDate.vue";
 
-@Component
+@Component({
+  components: {
+    EventDate,
+  },
+})
 export default class EventItem extends Vue {
   @Prop()
   private readonly event!: Event;
 
-  private get start_day(): string {
-    return this.event.start.toFormat("dd.");
-  }
-
-  private get start_month(): string {
-    return this.event.start.toFormat("MM.");
-  }
-
   private get data_string(): string {
     const locale_string = this.event.start
       .setLocale(navigator.language)