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

<template>
  <v-list class="py-0">
    <span class="text-h5 text-md-h4 text-truncate d-inline-block mb-2">
      {{ title }}
    </span>
    <template v-for="(event, index) in events">
      <EventItem :event="event" :key="event.hash" />
      <v-divider
        v-if="index < events.length - 1"
        class="mx-5"
        :key="event.hash + '-div'"
      />
    </template>
  </v-list>
</template>

<script lang="ts">
import { Component, Prop, Vue } from "vue-property-decorator";
import { EventData } from "./model";
import EventItem from "./EventItem.vue";

@Component({
  components: {
    EventItem,
  },
})
export default class Calendar extends Vue {
  @Prop({ default: "CALENDAR" })
  private readonly title!: string;

  @Prop({ default: () => [] })
  private readonly events!: Array<EventData>;
}
</script>

<style scoped>
.v-list .v-divider {
  border-color: rgba(0, 0, 0, 0.25);
}
</style>