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

<template>
  <v-carousel
    cycle
    interval="10000"
    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, Vue } from "vue-property-decorator";
import Calendar from "./Calendar.vue";
import { CalendarData, CalendarJSONData } from "./model";

@Component({
  components: {
    Calendar,
  },
})
export default class CalendarCarousel extends Vue {
  private readonly data: Array<CalendarJSONData> = [
    {
      title: "Lorem Ipsum",
      events: [
        {
          summary: "Lorem Ipsum",
          description:
            "Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.",
          dtstart: "2022-09-08T07:00:00+00:00",
          dtend: "2022-09-08T16:00:00+00:00",
        },
        {
          summary: "Sed ut perspiciatis unde omnis",
          description: "Lorem ipsum dolor sit amet, consectetur",
          dtstart: "2022-09-09T07:00:00+00:00",
          dtend: "2022-09-09T09:00:00+00:00",
        },
        {
          summary: "At vero eos et accusamus",
          description: "",
          dtstart: "2022-09-10T07:00:00+00:00",
          dtend: "2022-09-10T16:00:00+00:00",
        },
      ],
    },
    {
      title: "Li Europan lingues",
      events: [
        {
          summary: "Occidental in fact, it va esser Occidental",
          description:
            "Omnicos directe al desirabilite de un nov lingua franca: On refusa continuar payar custosi traductores. At solmen va esser necessi far uniform grammatica, pronunciation e plu sommun paroles. Ma quande lingues coalesce, li grammatica del resultant lingue es plu simplic e regulari quam ti del coalescent lingues.",
          dtstart: "2022-09-08T07:00:00+00:00",
          dtend: "2022-09-08T16:00:00+00:00",
        },
        {
          summary: "Membres del sam familie",
          description: "Lor separat existentie es un myth.",
          dtstart: "2022-09-09T07:00:00+00:00",
          dtend: "2022-09-09T09:30:30+00:00",
        },
        {
          summary: "On refusa continuar payar custosi traductores",
          description: "",
          dtstart: "2022-09-10T07:00:00+00:00",
          dtend: "2022-09-20T16:00:00+00:00",
        },
      ],
    },
  ];

  private get calendars(): Array<CalendarData> {
    let arr = [];

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