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="
          d-inline-block
          text-truncate
          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, DurationLikeObject } 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.toLocaleString(
      DateTime.DATETIME_MED_WITH_WEEKDAY
    );

    // decide which duration units to include
    let units: Array<keyof DurationLikeObject> = ["hours"];

    if (this.event.duration.as("days") >= 1) {
      // include days if duration is at least one day
      units.push("days");
    }

    if (!Number.isInteger(this.event.duration.as("hours"))) {
      // include minutes if duration in hours is not a whole number
      units.push("minutes");
    }

    const duration_string = this.event.duration
      // "..." is the spread operator
      .shiftTo(...units)
      .mapUnits((x) => Math.round(x))
      .toHuman();

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

<style>
</style>