htwkalender-pwa/frontend/src/components/RoomOccupation.vue

<script lang="ts" setup>
import FullCalendar from '@fullcalendar/vue3'
import dayGridPlugin from '@fullcalendar/daygrid'
import interactionPlugin from '@fullcalendar/interaction'
import timeGridPlugin from '@fullcalendar/timegrid'
import {computed, PropType, ref, Ref, watch} from "vue";
import {Event} from "../model/event.ts";
import {Module} from "../model/module.ts";

const props = defineProps({
  occupations: {
    type: Array as PropType<Event[]>,
    required: true,
  },
});



// array of modules with boolean if selected with getter and setter
const events: Ref<{ id: string; start: string, end: string }[]> = ref(
    props.occupations?.map((event, index) => {
      return {
        id: index,
        start: event.start.replace(/\s\+\d{4}\s\w+$/, '').replace(' ', 'T'),
        end: event.End.replace(/\s\+\d{4}\s\w+$/, '').replace(' ', 'T')
      };
    }),
);


const currentOccupations = computed(() => props.occupations);

watch(currentOccupations, (newValue: Event[]) => {
  events.value = newValue.map((event, index) => {
    return {
      id: index,
      start: event.Start.replace(/\s\+\d{4}\s\w+$/, '').replace(' ', 'T'),
      end: event.End.replace(/\s\+\d{4}\s\w+$/, '').replace(' ', 'T'),
    };
  });
  console.log(events.value);
});



const calendarOptions = {
        plugins: [dayGridPlugin, interactionPlugin, timeGridPlugin],
        initialView: 'timeGridFourDay',
        dayHeaderFormat: { weekday: 'short', omitCommas: true},
        slotDuration: "00:15:00",
        views: {
          timeGridFourDay: {
            type: 'timeGrid',
            slotLabelFormat: {
              hour: 'numeric',
              minute: '2-digit',
              omitZeroMinute: false,
              meridiem: false
            },
            dateAlignment: "week",
            titleFormat: { month: 'short', day: 'numeric' },
            slotMinTime: "06:00:00",
            slotMaxTime: "22:00:00",

            duration: {days: 7},
            firstDay: 1,
            allDaySlot: false,
            hiddenDays:[0]
          }
        },
        events: [
          {
            "id": 0,
            "start": "2023-10-16T09:30:00",
            "end": "2023-10-16T11:00:00"
          },
          {
            "id": 1,
            "start": "2023-10-16T11:15:00",
            "end": "2023-10-16T12:45:00"
          },
          {
            "id": 2,
            "start": "2023-10-17T13:45:00",
            "end": "2023-10-17T15:15:00"
          },
          {
            "id": 3,
            "start": "2023-10-16T09:30:00",
            "end": "2023-10-16T11:00:00"
          },
          {
            "id": 4,
            "start": "2023-10-20T09:30:00",
            "end": "2023-10-20T11:00:00"
          },
          {
            "id": 5,
            "start": "2023-10-16T09:30:00",
            "end": "2023-10-16T11:00:00"
          },
          {
            "id": 6,
            "start": "2023-10-20T09:30:00",
            "end": "2023-10-20T11:00:00"
          },
          {
            "id": 7,
            "start": "2023-10-18T13:45:00",
            "end": "2023-10-18T17:00:00"
          },
          {
            "id": 8,
            "start": "2023-10-18T13:45:00",
            "end": "2023-10-18T17:00:00"
          },
          {
            "id": 9,
            "start": "2023-10-16T13:45:00",
            "end": "2023-10-16T15:15:00"
          },
          {
            "id": 10,
            "start": "2023-10-17T11:15:00",
            "end": "2023-10-17T12:45:00"
          },
          {
            "id": 11,
            "start": "2023-10-16T13:45:00",
            "end": "2023-10-16T15:15:00"
          },
          {
            "id": 12,
            "start": "2023-10-17T11:15:00",
            "end": "2023-10-17T12:45:00"
          },
          {
            "id": 13,
            "start": "2023-10-18T09:30:00",
            "end": "2023-10-18T12:45:00"
          },
          {
            "id": 14,
            "start": "2023-10-16T13:45:00",
            "end": "2023-10-16T15:15:00"
          },
          {
            "id": 15,
            "start": "2023-10-17T11:15:00",
            "end": "2023-10-17T12:45:00"
          },
          {
            "id": 16,
            "start": "2023-10-18T09:30:00",
            "end": "2023-10-18T12:45:00"
          },
          {
            "id": 17,
            "start": "2023-10-16T13:45:00",
            "end": "2023-10-16T15:15:00"
          },
          {
            "id": 18,
            "start": "2023-10-17T11:15:00",
            "end": "2023-10-17T12:45:00"
          },
          {
            "id": 19,
            "start": "2023-10-18T09:30:00",
            "end": "2023-10-18T12:45:00"
          },
          {
            "id": 20,
            "start": "2023-10-16T13:45:00",
            "end": "2023-10-16T15:15:00"
          },
          {
            "id": 21,
            "start": "2023-10-17T11:15:00",
            "end": "2023-10-17T12:45:00"
          },
          {
            "id": 22,
            "start": "2023-10-18T09:30:00",
            "end": "2023-10-18T12:45:00"
          },
          {
            "id": 23,
            "start": "2023-10-17T09:30:00",
            "end": "2023-10-17T11:00:00"
          },
          {
            "id": 24,
            "start": "2023-10-20T11:15:00",
            "end": "2023-10-20T12:45:00"
          },
          {
            "id": 25,
            "start": "2023-10-20T11:15:00",
            "end": "2023-10-20T12:45:00"
          },
          {
            "id": 26,
            "start": "2023-10-16T11:15:00",
            "end": "2023-10-16T12:45:00"
          },
          {
            "id": 27,
            "start": "2023-10-17T13:45:00",
            "end": "2023-10-17T15:15:00"
          },
          {
            "id": 28,
            "start": "2023-10-17T15:30:00",
            "end": "2023-10-17T17:00:00"
          },
          {
            "id": 29,
            "start": "2023-10-19T11:15:00",
            "end": "2023-10-19T12:45:00"
          },
          {
            "id": 30,
            "start": "2023-10-19T13:45:00",
            "end": "2023-10-19T15:15:00"
          }
        ]
      }
</script>
<template>
  <FullCalendar :options="calendarOptions"/>
</template>