ovdashboard/ui/src/components/calendar/EventDate.vue

<template>
  <div class="event-date d-flex justify-center mr-1 mr-md-2">
    <div class="d-flex flex-column align-end">
      <div class="d-flex align-end">
        <span class="d-flex text-h4 text-md-h3">{{ day }}</span>
        <span class="d-flex text-h5 text-md-h4 blue-grey--text text--darken-1">
          {{ month }}
        </span>
      </div>
      <span
        class="d-flex text-h6 text-md-h5 blue-grey--text text--lighten-1 mt-n1"
      >
        {{ time }}
      </span>
    </div>
  </div>
</template>

<script lang="ts">
import { DateTime } from "luxon";
import { Component, Prop, Vue } from "vue-property-decorator";

@Component
export default class EventDate extends Vue {
  @Prop()
  private readonly date!: DateTime;

  public get day(): string {
    return this.date.toFormat("dd.");
  }

  public get month(): string {
    return this.date.toFormat("MM.");
  }

  public get time(): string {
    return this.date.toLocaleString(DateTime.TIME_24_SIMPLE);
  }
}
</script>

<style lang="scss" scoped>
@import "~vuetify/src/styles/settings/_variables";

.event-date {
  min-width: 95px;

  @media #{map-get($display-breakpoints, "md-and-up")} {
    min-width: 130px;
  }
}
</style>