made the calendar more usefull by using the timegrid for weeks and days.

Includes a list as well

Resolves #1315

webclient/components/CalendarFull.vue

@@ -1,6 +1,8 @@
 <script setup lang="ts">
 import FullCalendar from "@fullcalendar/vue3";
 import type { CalendarOptions, EventInput, EventSourceFuncArg } from "@fullcalendar/core";
+import listPlugin from "@fullcalendar/list";
+import timeGridPlugin from "@fullcalendar/timegrid";
 import dayGridPlugin from "@fullcalendar/daygrid";
 import type { components, operations } from "~/api_types";
 import deLocale from "@fullcalendar/core/locales/de";
@@ -64,19 +66,20 @@ function extractInfos(data: CalendarResponse): void {
 }
 
 const calendarOptions: CalendarOptions = {
-  plugins: [dayGridPlugin],
-  initialView: "dayGridWeek",
+  plugins: [timeGridPlugin, dayGridPlugin, listPlugin],
+  initialView: "timeGridWeek",
   weekends: false,
   events: fetchEvents,
   headerToolbar: {
     left: "prev,next",
     center: "title",
-    right: "dayGridMonth,dayGridWeek,dayGridDay",
+    right: "dayGridMonth,timeGridWeek,timeGridDay,list",
   },
   locale: locale.value == "de" ? deLocale : enLocale,
   height: 700,
+  // like '14:30'
+  displayEventEnd: false,
   eventTimeFormat: {
-    // like '14:30'
     hour: "2-digit",
     minute: "2-digit",
     meridiem: false,
@@ -88,10 +91,14 @@ const calendarOptions: CalendarOptions = {
   <div class="flex max-h-[700px] min-h-[700px] grow flex-col">
     <FullCalendar :options="calendarOptions">
       <template #eventContent="arg">
-        <div class="overflow-x-auto">
-          <b>{{ arg.timeText }}</b>
-          <i class="ps-1">{{ arg.event.title }}</i>
-        </div>
+        <NuxtLink
+          :to="`https://campus.tum.de/tumonline/ee/ui/ca2/app/desktop/#/pl/ui/$ctx/!wbTermin.wbEdit?pTerminNr=${arg.event.id}`"
+          external
+          class="flex overflow-x-auto gap-1 overflow-y-auto"
+        >
+          <span class="font-normal not-italic">{{ arg.timeText }}</span>
+          <span class="font-medium not-italic">{{ arg.event.title }}</span>
+        </NuxtLink>
       </template>
     </FullCalendar>
   </div>

webclient/package.json

@@ -13,9 +13,11 @@
     "format": "prettier --plugin=prettier-plugin-tailwindcss --end-of-line lf --write ."
   },
   "dependencies": {
-    "@fullcalendar/core": "^6.1.14",
-    "@fullcalendar/daygrid": "^6.1.14",
-    "@fullcalendar/vue3": "^6.1.14",
+    "@fullcalendar/core": "6.1.15",
+    "@fullcalendar/daygrid": "6.1.15",
+    "@fullcalendar/list": "6.1.15",
+    "@fullcalendar/timegrid": "6.1.15",
+    "@fullcalendar/vue3": "6.1.15",
     "@headlessui/vue": "1.7.22",
     "@heroicons/vue": "2.1.5",
     "@nuxt/content": "2.13.1",