added page and edit backend for edit calendar by token

frontend/src/components/MenuBar.vue

@@ -7,6 +7,11 @@ const items = ref([
     icon: "pi pi-fw pi-plus",
     url: "/",
   },
+  {
+    label: "Edit Calendar",
+    icon: "pi pi-fw pi-pencil",
+    url: "/edit",
+  },
   {
     label: "FAQ",
     icon: "pi pi-fw pi-book",

frontend/src/components/editCalendar/loadCalender.vue

@@ -0,0 +1,38 @@
+<script setup lang="ts">
+
+import { ref, Ref } from "vue";
+import moduleStore from "../../store/moduleStore";
+import { getCalender } from "../../api/loadCalendar";
+
+const token: Ref<string> = ref("");
+
+
+function loadCalendar() {
+  moduleStore().removeAllModules();
+
+  getCalender(token.value).then((data) => {
+    console.log(data);
+    data.forEach((module) => {
+      moduleStore().addModule(module);
+    });
+  });
+}
+</script>
+
+<template>
+  <div class="flex flex-column">
+    <div class="flex align-items-center justify-content-center h-4rem border-round">
+      <p class="text-2xl">Please enter your existing calendar token</p>
+    </div>
+    <div class="flex align-items-center justify-content-center border-round m-2">
+      <InputText type="text" v-model="token" />
+    </div>
+    <div class="flex align-items-center justify-content-center border-round m-2">
+      <Button label="Load Calendar" @click="loadCalendar" />
+  </div>
+  </div>
+</template>
+
+<style scoped>
+
+</style>