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

<template>
  <v-list-item class="pa-0" three-line>
    <EventDate :date="event.start" />
    <v-list-item-content>
      <v-list-item-title class="text-h6 text-md-h5 mt-0 mb-1">
        {{ event.summary }}
      </v-list-item-title>
      <v-list-item-subtitle
        v-if="event.description"
        class="text-subtitle-2 text-md-subtitle-1 mt-0 mb-2"
      >
        {{ event.description }}
      </v-list-item-subtitle>
      <v-list-item-subtitle
        class="
          thw-heading-font
          blue-grey--text
          text--darken-1
          font-weight-bold
          ma-0
        "
      >
        {{ data_string }}
      </v-list-item-subtitle>
    </v-list-item-content>
  </v-list-item>
</template>

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

@Component({
  components: {
    EventDate,
  },
})
export default class EventItem extends Vue {
  @Prop()
  private readonly event!: Event;

  private get data_string(): string {
    const locale_string = this.event.start
      .setLocale(navigator.language)
      .toLocaleString(DateTime.DATETIME_MED);

    // TODO: if applicable, include days and/or minutes.
    const duration_string = this.event.duration.shiftTo("hours").toHuman();

    return locale_string + " (" + duration_string + ")";
  }
}
</script>

<style>
</style>