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

<template>
  <v-carousel
    ref="main"
    cycle
    :interval="speed"
    height="auto"
    :show-arrows="false"
    touchless
    hide-delimiters
  >
    <v-carousel-item v-for="calendar in calendars" :key="calendar.hash">
      <Calendar :title="calendar.title" :events="calendar.events" />
    </v-carousel-item>
  </v-carousel>
</template>

<script lang="ts">
import { Component, Prop, Ref, Vue } from "vue-property-decorator";
import Calendar from "./Calendar.vue";
import { CalendarData, CalendarModel } from "./CalendarModel";

@Component({
  components: {
    Calendar,
  },
})
export default class CalendarCarousel extends Vue {
  private interval?: number;

  @Prop({ default: 10000 })
  private readonly speed!: number;

  @Prop({ required: true })
  private readonly data!: CalendarData[];

  @Ref("main")
  private readonly _main?: Vue;

  private update_height(): void {
    const diff = 150;

    if (this._main === undefined) return;

    const parentElement = this._main.$el.parentElement;
    if (parentElement === null) return;

    const divElement = this._main.$el.querySelector("div");
    if (divElement === null) return;

    const divHeightPX = window
      .getComputedStyle(parentElement)
      .getPropertyValue("height");
    const maxHeight = parseFloat(divHeightPX) - diff;

    divElement.style.setProperty("max-height", maxHeight + "px");
  }

  public mounted(): void {
    this.update_height();
    this.interval = setInterval(this.update_height, 10000);
  }

  public beforeDestroy(): void {
    clearInterval(this.interval);
  }

  private get calendars(): CalendarModel[] {
    let arr = [];

    for (const json_data of this.data) {
      arr.push(new CalendarModel(json_data));
    }
    return arr;
  }
}
</script>

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

.v-carousel:deep() > div {
  max-height: 500px;

  @media #{map-get($display-breakpoints, "sm-and-down")} {
    min-height: 500px;
  }
}

.v-window {
  &-x-transition,
  &-x-reverse-transition,
  &-y-transition,
  &-y-reverse-transition {
    &-enter-active,
    &-leave-active {
      transition: 1.5s cubic-bezier(0.25, 0.8, 0.5, 1) !important;
    }
  }
}
</style>