basic impementation of a calendar

webclient/components/CalendarModal.vue

@@ -0,0 +1,116 @@
+<script setup lang="ts">
+import { CalendarView, CalendarViewHeader } from "vue-simple-calendar";
+import { ref, computed, watch } from "vue";
+import type { ICalendarItem } from "vue-simple-calendar/dist/src/ICalendarItem";
+
+import { useGlobalStore } from "@/stores/global";
+import { useRoute } from "vue-router";
+import type { components } from "@/api_types";
+type CalendarResponse = components["schemas"]["CalendarResponse"];
+import "/node_modules/vue-simple-calendar/dist/style.css";
+import "/node_modules/vue-simple-calendar/dist/css/default.css";
+import { useFetch } from "@/composables/fetch";
+
+const global = useGlobalStore();
+const showDate = ref(new Date());
+
+const tumonlineCalendarUrl = ref("https://campus.tum.de/tumonline");
+const last_sync = ref("xx.xx.xxxx xx:xx");
+const events = ref<ICalendarItem[]>([]);
+
+const route = useRoute();
+
+const start = computed(() => {
+  const start = new Date(showDate.value);
+  start.setDate(start.getDate() - 60);
+  return start.toISOString().replace("Z", "");
+});
+
+const end = computed(() => {
+  const start = new Date(showDate.value);
+  start.setDate(start.getDate() + 60);
+  return start.toISOString().replace("Z", "");
+});
+// called when the view is loaded
+update();
+// called when the view navigates to another view, but not when its initially loaded
+watch(() => showDate.value, update);
+watch(() => route.params.id, update);
+
+function update() {
+  useFetch<CalendarResponse>(
+    `https://nav.tum.de/api/calendar/${route.params.id}?start=${start.value}&end=${end.value}`,
+    (d) => {
+      tumonlineCalendarUrl.value = d.calendar_url;
+      last_sync.value = new Date(d.last_sync).toLocaleString("de-DE", { timeStyle: "short", dateStyle: "short" });
+      events.value = d.events.map((e) => ({
+        id: e.id.toString(),
+        title: e.title,
+        startDate: new Date(e.start),
+        endDate: new Date(e.end),
+        classes: [e.entry_type],
+      }));
+    }
+  );
+}
+function setShowDate(d: Date) {
+  showDate.value = d;
+}
+</script>
+<template>
+  <div class="modal modal-lg active" id="calendar-modal">
+    <a @click="global.calendar.open = false" class="modal-overlay" aria-label="Close"></a>
+    <div class="modal-container">
+      <div class="modal-header">
+        <a
+          @click="global.calendar.open = false"
+          class="btn btn-clear float-right"
+          v-bind:aria-label="$t('calendar.modal.close')"
+        ></a>
+        <div class="modal-title h5">{{ $t("calendar.modal.title") }}</div>
+      </div>
+      <div class="modal-body">
+        <div class="modal-body">
+          <CalendarView
+            id="calendar-view"
+            :items="events"
+            :show-date="showDate"
+            :showTimes="true"
+            :timeFormatOptions="{ hour: '2-digit', minute: '2-digit' }"
+            :startingDayOfWeek="1"
+            class="theme-default"
+          >
+            <template #header="{ headerProps }">
+              <CalendarViewHeader :header-props="headerProps" @input="setShowDate" />
+            </template>
+          </CalendarView>
+        </div>
+      </div>
+      <div class="modal-footer">
+        {{ $t("calendar.modal.footer.disclaimer") }} <br />
+        {{ $t("calendar.modal.footer.please_check") }}
+        <a v-bind:href="tumonlineCalendarUrl">{{ $t("calendar.modal.footer.official_calendar") }}</a
+        >. {{ $t("calendar.modal.footer.last_sync") }}: {{ last_sync }}
+      </div>
+    </div>
+  </div>
+</template>
+<style lang="scss">
+#calendar-modal {
+  .modal-container {
+    position: relative;
+    height: auto;
+    max-width: 97.5vw;
+    max-height: 90vh;
+    .modal-body {
+      padding: 0;
+      height: 40rem;
+      #calendar-view {
+        display: flex;
+        flex-direction: column;
+        flex-grow: 1;
+      }
+    }
+  }
+}
+</style>

webclient/package.json

@@ -28,7 +28,8 @@
     "swaggerdark": "github:octycs/SwaggerDark#f02d394c8ff698cdd93e09c2188b058d2d686ca3",
     "vue": "3.4.30",
     "vue-router": "4.4.0",
-    "vue3-carousel": "0.3.3"
+    "vue3-carousel": "0.3.3",
+    "vue-simple-calendar": "7.1.0"
   },
   "devDependencies": {
     "@nuxt/eslint": "0.3.13",