EventDate component

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>

ui/src/components/calendar/EventItem.vue

@@ -1,11 +1,6 @@
 <template>
   <v-list-item class="pa-0" three-line>
-    <div>
+    <EventDate :date="event.start" />
-      <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>
     <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)