flaschengeist-frontend/src/plugins/schedule/components/Widget.vue

<template>
  <q-card class="row justify-center content-center" style="text-align: center">
    <q-card-section>
      <div class="text-h6 col-12">Dienste diesen Monat: {{ jobs }}</div>
      <div class="text-h6 col-12">Nächster Dienst: {{ nextJob | date }}</div>
    </q-card-section>
  </q-card>
</template>

<script lang="ts">
import { defineComponent } from '@vue/composition-api';

export default defineComponent({
  name: 'DummyWidget',
  setup() {
    function randomNumber(start: number, end: number) {
      return start + Math.floor(Math.random() * Math.floor(end));
    }
    const jobs = randomNumber(0, 5);
    const nextJob = new Date(2021, randomNumber(1, 12), randomNumber(1, 31));
    return { jobs, nextJob };
  },
});
</script>